Log in

View Full Version : Resolved Width/Height Displaying Weird


Deadweight
09-11-2014, 03:43 PM
So i updated my page but i am having a weird problem in http://cgs.thebcelements.com/

First i have an id


#gallery1 { border:1px solid black; height:250px; width:300px; background-color:black;}


When i use jquery to get the width and/or height it displays at as w:1333 and h:0. (It is show at the bottom). I do not know why that is happening. Any ideas would be great.
Deadweight
09-11-2014, 05:21 PM
Update. If you click on the link (EG HOME) again and reload the page it works. I dont know why....
molendijk
09-11-2014, 06:27 PM
Your comment declarations are incorrect. Remove the commented lines and see what happens.
Deadweight
09-11-2014, 06:35 PM
Comments are fine. It how i load in my js and css. I can delete all code but the box itself and it still says the width of the page. Somehow i need to delay this:


$(function(){

create_slide_gallery({
id:'gallery1',
images: ['images/physical/adapters.jpg','images/physical/ethernetcable.jpg','images/physical/keyboard.jpg','images/physical/mouse.gif'],
info: ['Adapter','Ethernet Cable','Keyboards','Mouse'],
first: 0,
arrows: ['images/back.png','images/forward.png'] // Left, Right (for images use the html code)
})

})


I think i need to change it from $(function(){}) to something else
molendijk
09-11-2014, 08:39 PM
The WC3 Validation Service gives 11 html errors, among which invalid comment declaration: found character "<" outside comment but inside comment declaration. So that may spoil things.
If the errors are not the source of the problem, you might try to put your scripts immediately before the closing body tag. The reason I think this might help is that the problem disappears after a page refresh.
Deadweight
09-11-2014, 09:20 PM
Yeah but i dont want to do that xD its soooo ugly xD
So i am trying to think of another way to delay the function from happening
molendijk
09-11-2014, 09:40 PM
Did you try to move the functions to the end of the body section?
You could also try defer.
molendijk
09-11-2014, 10:41 PM
Your problem is caused by incorrect comment declarations, as I already mentioned. This works for me, and it validates too:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bits &amp; Bytes</title>

<script type="text/javascript" src="http://cgs.thebcelements.com/js/jquery.js"></script>
<script type="text/javascript" src="http://cgs.thebcelements.com/js/headappend.js"></script>

<link href="http://cgs.thebcelements.com/css/main.css" rel="stylesheet"/>
<link href="http://cgs.thebcelements.com/css/slide.css" rel="stylesheet"/>
<script type="text/javascript" src="http://cgs.thebcelements.com/js/navbar.js"></script>
<script type="text/javascript" src="http://cgs.thebcelements.com/js/timebar.js"></script>
<script type="text/javascript" src="http://cgs.thebcelements.com/js/imgslider.js"></script>
<script type="text/javascript" src="http://cgs.thebcelements.com/js/slide.js"></script>

</head>
<body>

<!-- Creates the Nav bar with jquery/js -->
<div id="nav_main"></div>

<div id="header_data" class="outer_body">
<div class="top">Bits &amp; Bytes</div>
<img src="http://cgs.thebcelements.com/images/background.jpg" alt="bla" class="wait" />
<div class="bottom" id="DateAndTime"></div>
</div>

<div class="outer_body" id="index_info">
<div id="miniabout">
<strong>Bits &amp; Bytes</strong> has been around for since 1980. We have the best customer service for many years! If you are not happy then we will not be happy! Bits &amp; Bytes offers excellent pricing for Windows and Mac computers. We will also repair your computer or install your software for you.
</div>

<div id="gallery2"></div>

</div>
<div id="gallery1"></div>
</body>
</html>
Deadweight
09-11-2014, 10:53 PM
I deleted all the comments. Same thing occurs. Like i said. The css file isnt being read before the JavaScript file collects the data.
Deadweight
09-11-2014, 11:01 PM
Umm i think this is incorrect but to make it work i had to do something like this:


$(function(){
create_slide_gallery({
id:'gallery1',
images: ['images/physical/adapters.jpg','images/physical/ethernetcable.jpg','images/physical/keyboard.jpg','images/physical/mouse.gif'],
info: ['Adapter','Ethernet Cable','Keyboards','Mouse'],
first: 0,
arrows: ['images/back.png','images/forward.png'] // Left, Right (for images use the html code)
})
})

$(window).load(function() {
create_slide_gallery({
id:'gallery1',
images: ['images/physical/adapters.jpg','images/physical/ethernetcable.jpg','images/physical/keyboard.jpg','images/physical/mouse.gif'],
info: ['Adapter','Ethernet Cable','Keyboards','Mouse'],
first: 0,
arrows: ['images/back.png','images/forward.png'] // Left, Right (for images use the html code)
})
})


However, it only works chrome and firefox. Not IE (unless i refresh the page)
Deadweight
09-11-2014, 11:22 PM
Not sure if this is a good way to fix it but i did something like this:


$(function(){
setTimeout(doThis,10)
})

function doThis(){
create_slide_gallery({
id:'gallery1',
images: ['images/physical/adapters.jpg','images/physical/ethernetcable.jpg','images/physical/keyboard.jpg','images/physical/mouse.gif'],
info: ['Adapter','Ethernet Cable','Keyboards','Mouse'],
first: 0,
arrows: ['images/back.png','images/forward.png'] // Left, Right (for images use the html code)
})
}
molendijk
09-11-2014, 11:51 PM
I may be missing something, but when I add:


<script type="text/javascript">
alert('width of gallery1: '+$('#gallery1').width()+'\nheight of gallery1: '+$('#gallery1').height())
</script>

to the code I gave you in #8 (to be put immediately before the closing body tag), the alert gives width of gallery1: 300 height of gallery1: 250. So what exactly is the problem? I don't see it, I'm afraid.
Deadweight
09-12-2014, 02:27 AM
That is after the code has already finished loading. Before the code was loaded (i already changed it so you might be testing it on the new display) would have grab the height and width before it was actually implemented which was at said the width was 1333 and the height was 0. Also, IE wasnt doing window.onload correctly and i had to use both ready and onload to make it work decently. However, i felt like it was horrible coding like that (and IE again wasnt working with onload) so i figured making it a new function and doing a setTimeout. This would make sure all the after the doms have been completely loaded. It might have looked working to you but it wasnt.

FYI using alert isnt a good was of testing the page data.
molendijk
09-12-2014, 10:28 AM
When I put this:


<script type="text/javascript">
$('body').append('<div style="position: fixed; bottom:0; background: white; color: red">width of gallery1: '+$('#gallery1').width()+'\nheight of gallery1: '+$('#gallery1').height()+'</div>')
</script>

in my #8-code, anywhere before <div id="gallery1"></div>, it produces: width of gallery1: null height of gallery1: null.
When I put it after <div id="gallery1"></div>, it produces: width of gallery1: 300 height of gallery1: 250.
Isn't this what you want to happen?
Deadweight
09-12-2014, 04:06 PM
Yes; however, i needed it to be in a js file so the images could change size. (EG look at slide.js)