Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
09-26-2012, 12:20 AM #1
- Join Date
- Sep 2012
- Thanked 1 Time in 1 Post
New developer - Question on newest build
I just finished www.madewood.ca
I came here awhile ago when I first encountered a problem and everyone was helpful. Although I'm not sure if I'm placing this correctly. Quick background, I took an html class 2 years ago and just been reading about it since. Gave this site a shot, struggled a bit but got through it. I know I need to work better on CSS organization and perhaps tightening things up.
This was my first attempt using some objected oriented programming. I think i did decently but Im confused with one thing. On the individual product pages the window seems to stretch past the margins of the parent element, but if i refresh or go back and reload it, it works properly.
Im not sure where to start problem solving for that?
P.S - My plan once this works - is to slowly transition it into a CMS. Haven't done research on which one I'm going to start learning yet.
09-26-2012, 04:29 PM #2
- Join Date
- Sep 2012
- Boulder, CO
- Thanked 0 Times in 0 Posts
I looked through the Products Page and was unable to see the issue. Did you resolve it? Were you noticing the issue right after you made some coding changes?
Ahhh...I noticed the issue. The photo album on each page is supposed to be centered, but when you first go to the page you have linked it takes up the entire page width. However, when you click on any of the other photos it shows it centered. It only happens if you've never been to the page before. Once it is cached, it works just fine.
So, people don't have to study your coding for the next hour, could you point out the div tag and css coding you are using for the photo album?
At any rate...it looks like you are using a JQuery script for the photo album on that page. I haven't studied JQuery yet, but it looks like the programmer omitted a few semi-colons at the end of a few statements. For example, towards the top of the script:
Notice the first two .css lines are missing the semi-colon at the end and they happen to be the positioning commands. I would go into this script, put semi-colons at the end of the two above (and there are a couple of other places) and see if that doesn't resolve the issue. Again, I haven't studied JQuery yet, so you might need help from someone else if adding in the missing semi-colons doesn't work.
Last edited by fireplace_tea; 09-26-2012 at 04:51 PM.
09-26-2012, 08:12 PM #3
- Join Date
- Jan 2006
- Halle (Saale), Germany
- Thanked 1,075 Times in 1,047 Posts
Resize your page when the problem is occurring and you’ll see the image reposition itself. Using Firebug I see that when resizing the viewport the main image (among other, related elements) gets a width assigned. I suppose the script is positioning everything by (re)calculating the image width. However, it is doing this before the image actually is done loading, and since you haven’t assigned any width attribute to the image (
<img src="…" width="500" …>) that might be giving the browser a clue about the intrinsic dimensions of the image the script doesn’t know the width yet. The solution is, as said, to assign a width attribute to the image. If that’s not feasible, a workaround could be to call the resize event after the image has loaded.
This is called “chaining” functions. But as said, that could be optimized to include every style in oneCode:nav.css('margin','0 auto').css('position','relative').css('background-color','#222');
margin: '0 auto',
Last edited by VIPStephan; 09-26-2012 at 08:14 PM.