Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Sep 2012
    Posts
    23
    Thanks
    2
    Thanked 1 Time in 1 Post

    New developer - Question on newest build

    Hi Gents,

    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?

    Thanks,

    B
    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.

  • #2
    New Coder
    Join Date
    Sep 2012
    Location
    Boulder, CO
    Posts
    56
    Thanks
    5
    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:
    .css('margin','0 auto')
    .css('position','relative')
    .css('background-color','#222');

    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.

  • #3
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,700
    Thanks
    6
    Thanked 1,011 Times in 984 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.

    Quote Originally Posted by fireplace_tea View Post
    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:
    .css('margin','0 auto')
    .css('position','relative')
    .css('background-color','#222');

    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.
    Yeah, you should study jQuery first because that code is totally correct (although not optimal in terms of efficiency). You could as well write it like so:
    Code:
    nav.css('margin','0 auto').css('position','relative').css('background-color','#222');
    This is called “chaining” functions. But as said, that could be optimized to include every style in one css() function:
    PHP Code:
    nav
      
    .css({
        
    margin'0 auto',
        
    position'relative',
        
    'background-color''#222'
      
    }); 
    Last edited by VIPStephan; 09-26-2012 at 08:14 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •