Web Dev Questions That Don't Need Their Own Thread v4

[ENG.jonny]

[QUOTE=jung3o;46417068]your style is using the element header and the html in that jsfiddle is using the class header.[/QUOTE]

Ok so I fixed that, which kinda helps... [url]http://jsfiddle.net/k2Lskfq9/2/[/url] The example doesnt work that well there but here is a screenshot:
[IMG]http://puu.sh/cEvK8/0313a965b9.png[/IMG]
The text goes below the actual box. The aim was to get it to show like [IMG]http://puu.sh/cEvMW/6665baf6b6.png[/IMG]

[buhbang]

the js fiddle doesnt show because this time you're using id on the style and class on the element...

Also, paste the whole damn code.
:suicide:

[ENG.jonny]

[QUOTE=jung3o;46417319]the js fiddle doesnt show because this time you're using id on the style and class on the element...

Also, paste the whole damn code.
:suicide:[/QUOTE]

I managed to solve it now it's all good, thank you for telling me the mistakes I had made :)

[Cyteless]

Newbie to CSS. I think my fixed navigation bar is preventing me from highlighting/selecting text on the other elements of my page, think it's the z-index that's affecting this. I need to have the navigation bar div fixed so that it'll follow the user down the page.

.nav-header{

	width:100%;
	height:5vw;
	background-color:#105075;
	position:fixed; 
	overflow:auto;
	overflow-x:none;
	overflow-y:none;
	top:0px;
	left:0px;
	z-index:1000;

}

[lope]

-snip-

[brianosaur]

Does anybody have any experience with Google Places Javascript API. I'm just trying to get a list of places based on the geolocations.

I had it display the name and place_id with nearbySearch, but that function doesn't get the address or phone number. So the documentation says I need to use the getDetails function. I tried, and doesn't work. The only way I got the address of a place was in the createMarker function, which I got the address to display when you click on a marker.

function callback(results, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {
    for (var i = 0; i < results.length; i++) {
      createMarker(results[i]);
      details(results[i]);
    }
  }
  document.getElementById('places-list').innerHTML = placeList;
}

function details(place){
    var request = {placeId: place.place_id};
    service.getDetails(request, function (p, status){
        if(status == google.maps.places.PlacesServiceStatus.OK){
            placeList += p.name + " " + p.formatted_address + " " + p.formatted_phone_number;
        }
    });
}

function createMarker(place) {
    var placeLoc = place.geometry.location;
    var marker = new google.maps.Marker({
      map: map,
      position: place.geometry.location
    });

    var request = { placeId: place.place_id };
    service.getDetails(request, function(details, status) {
       // placeList += details.name + ", " + details.formatted_address + ", " + details.formatted_phone_number;
        
        google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(details.name + "<br/>" + details.formatted_address);
        infowindow.open(map, this);
      });
    });
  }

I am new to javascript and I think I dont understand objects that much in them. But I'm good with objects in Java, maybe it's the syntax for me.

[Commander11]

Hey fella's I'm posting here because my GLua programming has brought me toward a new horizon -- java and HTML. I'm sort of familure with HTML and I understand objects as Lua uses them heavily. Now the thing is that I'm not quite sure how to retrieve specific objects and which ones I should be looking for and why.

Now what I'm doing is a simple chatbox for my server and here's relatively all the code related to HTML:

[lua]function PANEL:AppendText(info)
local lines = [[]];
META:GetPlugin("chatbox").Chatbox.History[#META:GetPlugin("chatbox").Chatbox.History+1] = "["..info.typ.."]".." "..info.name..": ".."<font face = 'Old Press' color = '#0099FF' size = '24'>"..info.text.."</font>";
for i = 1, (#META:GetPlugin("chatbox").Chatbox.History) do
lines = lines.."<p style = color:#FFFFFF>"..META:GetPlugin("chatbox").Chatbox.History[i].."</p>";
end
self.HTML:SetHTML([[
<!DOCTYPE html>
<html>
<body>
]]..
lines
..[[
</body>
</html>
]]);
end[/lua]

Now what I need to do specifically now is to snap the scrollbar once it becomes available to the bottom of the screen and it'd be nice to figure out how to add copy/paste functionality.

Here's a picture of what this returns:

[quote] [URL="http://cloud-4.steampowered.com/ugc/44235861000269675/140D497503477CA8E8439E63E8DA697A7DCEFB3F/"]http://cloud-4.steampowered.com/ugc/44235861000269675/140D497503477CA8E8439E63E8DA697A7DCEFB3F/[/URL][/quote]

[Mikeyspike]

Having problems with some javascript/jQuery,

I have an element in my HTML that will resize to fit the screen, so there are no scrolling bars ect..
There are other elements on this page that take up screen space, and I account for that in my code.
However, I'm trying to change how much of the screen space this element takes up depending on a boolean. I seem to be having problems with the element resizing after the variable is set.
Let me show you the code, it'll most likely be easier to understand.

var loggedIn = true;
console.log(loggedIn);

if (loggedIn) {
     var bodyheight = $(window).height();
    $(".resizeable").height(bodyheight - 72);
    $(window).resize(function () {
        var bodyheight = $(window).height();
        $(".resizeable").height(bodyheight - 72);
    });
} else {
    var bodyheight = $(window).height();
    $(".resizeable").height(bodyheight - 192);
    $(window).resize(function () {
        var bodyheight = $(window).height();
        $(".resizeable").height(bodyheight - 192);
    });
}
function login() {
    loggedIn = true;
    console.log(loggedIn);
}

function logout() {
    loggedIn = false;
    console.log(loggedIn);
}

The resizing code all works, the main problem is it only seems the outcome of the if/else statement is what the loggedIn variable is first set as.
For example, with the code at the moment, this code will be ran, regardless of what the loggedIn state is

var bodyheight = $(window).height();
    $(".resizeable").height(bodyheight - 72);
    $(window).resize(function () {
        var bodyheight = $(window).height();
        $(".resizeable").height(bodyheight - 72);
    });

If I set the variable to false at the start, it runs the other section of code, but I just don't understand why after the page has loaded, if the variable is changed, the opposite section of code doesn't run.

[PhoebeU]

[QUOTE=Mikeyspike;46461570]
If I set the variable to false at the start, it runs the other section of code, but I just don't understand why after the page has loaded, if the variable is changed, the opposite section of code doesn't run.[/QUOTE]

Javascript just runs the code once while it's loaded so what's happening here is that you set loggedIn as true and it goes through that route in the if statement. Now when you run the function logout() after the page is loaded it sets the value loggedIn to false but it won't run through the if statement again and thus nothing happens. What you can do is wrap the whole if statement in a function and run then every time you change the loggedIn value.

Check out this: [url]http://jsfiddle.net/rsn17dbc/[/url] Might be a bit crude but I also placed some comments around as well for you.

[Mikeyspike]

[QUOTE=Superkipje;46461726]Javascript just runs the code once while it's loaded so what's happening here is that you set loggedIn as true and it goes through that route in the if statement. Now when you run the function logout() after the page is loaded it sets the value loggedIn to false but it won't run through the if statement again and thus nothing happens. What you can do is wrap the whole if statement in a function and run then every time you change the loggedIn value.

Check out this: [url]http://jsfiddle.net/rsn17dbc/[/url] Might be a bit crude but I also placed some comments around as well for you.[/QUOTE]

Fantastic, Thank you very much. I knew it would of been something simple.

[Mikeyspike]

Having another brain fart.

having trouble getting two 50% wdith'd divs to sit next to each other.

I have 3 columns on my page, the left is a fixed width column and the next two I wish to take up the remaining space.
These two other divs I want to share the space left over from the fixed width column evenly.

I have the HTML and CSS in order to get the fluid layout to work, but for some reason, the two 50% divs don't sit next to reach other. The far right seems to slip down, while still being on the right side of the page.

I think it may be something to do with the #container element.

Here is a link to the project I'm working on now with these errors.

[url]http://www.mike-linford.co.uk/gocode[/url]

Thanks!

[PortalGod]

you can make the columns display: inline-block, but that might have side effects you don't want

[Mikeyspike]

[QUOTE=PortalGod;46466118]you can make the columns display: inline-block, but that might have side effects you don't want[/QUOTE]

Mind expanding?

And I guess I'd set this attribute on all three columns?

[Maqtiah]

[QUOTE=Mikeyspike;46466152]Mind expanding?[/QUOTE]

inline-block; will add some spacing between the columns, those rely on the font size. I prefer to use float instead of dealing with setting font-size all the time.

Also to answer your question, have a look at this fiddle: [url]http://jsfiddle.net/fs3egj5y/[/url]

Remember the box-sizing if you apply padding to the element, should not matter top/bottom but the sides does. The example you gave me a was a bit confusing so I just remade it simplified. Hope that's okay!

The 3 columns is a bit tricky, flex-box should have some cool features that will simplify that. Though not sure with browser compatibility and how it's done.

[Mikeyspike]

[QUOTE=Moofy;46470760]inline-block; will add some spacing between the columns, those rely on the font size. I prefer to use float instead of dealing with setting font-size all the time.

Also to answer your question, have a look at this fiddle: [url]http://jsfiddle.net/fs3egj5y/[/url]

Remember the box-sizing if you apply padding to the element, should not matter top/bottom but the sides does. The example you gave me a was a bit confusing so I just remade it simplified. Hope that's okay!

The 3 columns is a bit tricky, flex-box should have some cool features that will simplify that. Though not sure with browser compatibility and how it's done.[/QUOTE]

Thank you :)
I had a play around with things that I found on stackoverflow and sort of got it to work, however I think with the elements I'm using(codemirror) its causing problems. I've decided to scrap the idea of having this preview area to the right of the code now. But thank you anyway, you've enlightened me in regards to inline-block.

[itsvesper]

$username = $_POST["username"];
$password = $_POST["password"];
$salt = mcrypt_create_iv(32);

$pwdhash = \hash("sha256", $salt.$password);

$stmt = "INSERT INTO users (users.username, users.salt, users.password) VALUES ('$username', '$salt', '$pwdhash')";

$res = mysqli_query($cxn, $stmt);

For some reason, $salt isn't inserted into the SQL table, despite the fact that there is a value assigned to $salt. The table and field exists, and it causes no errors. Anyone know why it's not working?

[ifaux]

snipped nvm. disregard. hi

[Darksoul]

-snip- found one.

[Goz3rr]

[QUOTE=itsvesper;46473321]

$username = $_POST["username"];
$password = $_POST["password"];
$salt = mcrypt_create_iv(32);

$pwdhash = \hash("sha256", $salt.$password);

$stmt = "INSERT INTO users (users.username, users.salt, users.password) VALUES ('$username', '$salt', '$pwdhash')";

$res = mysqli_query($cxn, $stmt);

For some reason, $salt isn't inserted into the SQL table, despite the fact that there is a value assigned to $salt. The table and field exists, and it causes no errors. Anyone know why it's not working?[/QUOTE]

Are you checking if res may be false and if so mysqli_error($cxn)

[CBastard]

[QUOTE=itsvesper;46473321]

$username = $_POST["username"];
$password = $_POST["password"];
$salt = mcrypt_create_iv(32);

$pwdhash = \hash("sha256", $salt.$password);

$stmt = "INSERT INTO users (users.username, users.salt, users.password) VALUES ('$username', '$salt', '$pwdhash')";

$res = mysqli_query($cxn, $stmt);

For some reason, $salt isn't inserted into the SQL table, despite the fact that there is a value assigned to $salt. The table and field exists, and it causes no errors. Anyone know why it's not working?[/QUOTE]

It's good that you are using mysqli and salting but you really should be using prepared statements, that code is vulnerable to SQL injection.

[ifaux]

hey any ideas on from getting this thing next to the non-pointing side of this arrow to where the arrow is pointing? layout w/ html & css has been my weak spot
[IMG]http://cl.ly/image/162f350t001C/Screen Shot 2014-11-12 at 6.46.05 PM.png[/IMG]
here's how i have that area set up rn:

        <section>
            <h3>Ping me on</h3>
                <dl>
                    <dd>
                        <a href="twitter">Twitter</a>
                        <b class="circle" id="twitter"></b>
                    </dd>
                    <dd>
                        <a href="instagram">Instagram</a>
                        <b class="circle" id="instagram"></b>
                    </dd>
                    <dd>
                        <a href="dribbble">Dribbble</a>
                        <b class="circle" id="dribbble"></b>
                    </dd>        
                </dl>
            <h3>Let's get intimate</h3>
                <dl>
                    <dd>
                        <a href="blog">Blog</a>
                    </dd>
                    <dd>
                        <a href="interviews">Interviews</a>
                    </dd>
                </dl>
            <h3>Check these out</h3>
                    <dl>
                        <dd>
                            <a href="">Project Placeholder</a>
                        </dd>
                        <dd>
                            <a href="">Project Placeholder</a>
                        </dd>
                        <dd>
                            <a href="">Project Placeholder</a>
                        </dd>

            </dl>
        </section>

[buhbang]

wrap them as divs and make it

display:inline-block;
vertical-align:top;

[ifaux]

[QUOTE=jung3o;46475637]wrap them as divs and make it

display:inline-block;
vertical-align:top;

[/QUOTE]
wrap each one and give each these properties?

[editline]13th November 2014[/editline]

yo that worked. sick dude thanks

[itsvesper]

[QUOTE=Goz3rr;46474752]Are you checking if res may be false and if so mysqli_error($cxn)[/QUOTE]

Thanks, but that didn't work. I talked with my comp teacher earlier in lesson, who was equally stumped. For some reason, doing this worked...

$salt = base64_encode(mcrypt_create_iv(32));

Unfortunately, I now know that my login script is screwed somehow. So i'm gonna see why it's doing that.

[QUOTE=CBastard;46475085]It's good that you are using mysqli and salting but you really should be using prepared statements, that code is vulnerable to SQL injection.[/QUOTE]

I intend to all the way lol. I started doing it earlier, but unfortunately, errors occurred. I quickly removed it for the time being to try and eliminate the possibility that my preparing [I]somehow[/I] caused an error.

I strongly believe that if your don't prepare your statements, you deserve to be hacked lol

EDIT: Just worked out that other problem i was having. It wasn't storing the entire salt apparently. After checking the salt lengths by refreshing a few times, i set the salt field to char(44). Why it needs 44 character when i called my CSPRNG with 32 as the parameter confuses me, but as long as its fixed, im fine lol

[editline]13th November 2014[/editline]

if ($stmt = mysqli_prepare($cxn, "SELECT username FROM users WHERE username = ? AND password = ?")){
		mysqli_stmt_bind_param($stmt, 'ss', $username, $pwdhash);
	}
	
	
    $res = mysqli_query($cxn, $stmt);
    

Warning: mysqli_query() expects parameter 2 to be string, object given in \\MORIARTY\HOME\15\5cba2901\Desktop\comp_proj\project\www\login.php on line 39

Anyone know why this is happening? $pwdhash and $username are both defined properly

[Unknown]

I want to allow a limited subsection of my site to be usable in an iframe, however I'm concerned about the security risks of doing so.

Searching hasn't turned up a whole lot (with results generally being about frame busting or security concerns for the framing page), but from what I've been able to gather the primary concerns are clickjacking, content sniffing based on the size of the framed page, or stealing information users are entering into the framed page. None of which is of concern to me because the limited subsection of the site isn't going to be dealing with any "important" information.

Thus it would be my understanding that (in my case) the only danger is that a layer of security is being removed that was protecting the user's session and CSRF token being stolen, correct?

[Poo Monst3r]

Does anyone here have any experience with [I]fullpage.js[/I]?

I have a website sample up [URL="http://fatslug.ca/pnp/"]here[/URL], but I'm having some serious issues with the script and I can't for the life of me figure it out.
Basically, the auto-scrolling is skipping right past the second section. It's extremely glitchy, and I don't know what is going on!

Any help would be very much appreciated!

[ARitz Cracker]

Hey, I'm pretty new when it comes to web development, so, sorry if this seems stupid.
I thought that [url=http://www.aritzcracker.ca/font/ttf.html]ttf[/url] fonts would show in all browsers except IE, but I found that this particular font only works in chrome, opera, and IE (Mobile Only). Converting to [url=http://www.aritzcracker.ca/font/]woff[/url] doesn't work, and weird shit shows up in the CSS console on Firefox.

downloadable font: OS/2: first char index 65535 > last char index 0 in os2 (font-family: "Conv_ftb" style:normal weight:normal stretch:normal src index:1)
source: http://www.aritzcracker.ca/font/fonts/ftb.woff fonts.css
downloadable font: OS/2: failed to parse table (font-family: "Conv_ftb" style:normal weight:normal stretch:normal src index:1)
source: http://www.aritzcracker.ca/font/fonts/ftb.woff fonts.css
downloadable font: rejected by sanitizer (font-family: "Conv_ftb" style:normal weight:normal stretch:normal src index:1)
source: http://www.aritzcracker.ca/font/fonts/ftb.woff fonts.css

[PortalGod]

what's the best way to handle realtime searching?

before I was using a filter on ng-repeat, but since that's all frontend the server has to send everything that I'm trying to search through, which seems really bad, so now I'm sending a request to the server in my search field's ng-change and only giving the client the results (and even then only one page at a time). is sending that many requests gonna be bad? is there a better way to do it?

[atomiku]

[QUOTE=Moofy;46470760]inline-block; will add some spacing between the columns, those rely on the font size. I prefer to use float instead of dealing with setting font-size all the time.

Also to answer your question, have a look at this fiddle: [URL]http://jsfiddle.net/fs3egj5y/[/URL]

Remember the box-sizing if you apply padding to the element, should not matter top/bottom but the sides does. The example you gave me a was a bit confusing so I just remade it simplified. Hope that's okay!

The 3 columns is a bit tricky, flex-box should have some cool features that will simplify that. Though not sure with browser compatibility and how it's done.[/QUOTE]

inline-block can be more useful than floating at times when you need some elements in columns... I think they both add spacing between them though. My favourite method is to add comments between the closing and opening tags of the inline-blocks, as it's the space character or tab in the HTML that causes the space between the inline-blocks in the first place. For example:

<ul class="menu">
    <li><a href="#">Home</a><!--
    --><li><a href="#contact">Contact</a><!--
    --><li><a href="#about">About</a>
</ul>

Works a treat. No need to float:left; your list items. I figured you probably already know this but I'd share this tip for other people's benefits.

[Maqtiah]

[QUOTE=atomiku;46485702]inline-block can be more useful than floating at times when you need some elements in columns... I think they both add spacing between them though. My favourite method is to add comments between the closing and opening tags of the inline-blocks, as it's the space character or tab in the HTML that causes the space between the inline-blocks in the first place. For example:

<ul class="menu">
    <li><a href="#">Home</a><!--
    --><li><a href="#contact">Contact</a><!--
    --><li><a href="#about">About</a>
</ul>

Works a treat. No need to float:left; your list items. I figured you probably already know this but I'd share this tip for other people's benefits.[/QUOTE]

Floating does not add spacing between the elements unless you give it margin.
The comments work indeed, but for my part it seems like a bigger mess in the code.