SitePoint Sponsor

User Tag List

Results 1 to 10 of 10

Thread: Accordian Menu

  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2011
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Accordian Menu

    My accordion menu is working while on my hard drive but when I upload to the server it is not working online. I'm sure it is something silly that I'm missing. Any thoughts?

    http://tinyurl.com/c55z29t

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,109
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    You have links to scripts in the head of your page and also near the top of the body of the page, and also two links to the jQuery library, which can cause problems. Move all your scripts to the <head> (or just before the closing </body> tag), and remove one of the jQuery library links. That may not fix things, but will tidy the page a bit.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Enthusiast
    Join Date
    Dec 2011
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you, ralph.m, you had given me that advice last week, which I took...then I ended up rebuilding it from the original Skeleton files and I forgot that they that planted in there at the end. I took it out again and viola- it fixed the problem. You rock!

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,683
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by girlnoir View Post
    My accordion menu is working while on my hard drive but when I upload to the server it is not working online. I'm sure it is something silly that I'm missing. Any thoughts?

    http://tinyurl.com/c55z29t
    It seems to be working in recent versions of Google Chrome and Internet Explorer. Which particular web browser and version are you having issues with?
    If we can experience the same issue, we can help you to resolve it.

    It might also be a development problem where the web browser has cached an older version of a file that has since been updated. If that's the case you can resolve it by using ctrl-F5 or shift-F5 to bypass the cache.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Enthusiast
    Join Date
    Dec 2011
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, paul_wilkins, I just fixed a little while ago with ralph.m's suggestion. I do appreciate your willingness to help! I have 2 other issues I do need help with, though:

    1. How come when I resize the browser to see if the responsive framework is working properly, my images cover up my navigation?
    2. How can I get all of my images to have a "masonry" effect like they are magically doing in the right-hand column?

    It may not be your area of expertise, so let me know if I should post them in another forum.

    Thanks!

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,683
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by girlnoir View Post
    Thanks, paul_wilkins, I just fixed a little while ago with ralph.m's suggestion. I do appreciate your willingness to help! I have 2 other issues I do need help with, though:

    1. How come when I resize the browser to see if the responsive framework is working properly, my images cover up my navigation?
    That seems to occur due to the container being centered on the screen.

    Quote Originally Posted by girlnoir View Post
    2. How can I get all of my images to have a "masonry" effect like they are magically doing in the right-hand column?
    Someone who's more experienced in CSS should be able to help with that, so since we now seem to be in the realm of CSS things, I'll pass this thread back to the CSS forum.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,109
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by girlnoir View Post
    How come when I resize the browser to see if the responsive framework is working properly, my images cover up my navigation?
    Because the nav is set to position: fixed, the other elements don't see it and cover it over. a solution would be to remove

    Code:
    nav {
      position: fixed;
    }
    in your @media rules for narrow viewports.


    How can I get all of my images to have a "masonry" effect like they are magically doing in the right-hand column?
    You can't, really, because of the different heights of the images. Each is trying to float to the left, but it gets stopped by taller ones to the left. The closest you can come (without a major redesign or a huge dose of JS, I suspect) is to replace float: left with display: inline-block:

    Code:
    ul#portfolio-list li {
      display: inline-block;
      float: left;
      display: inline-block;  
      vertical-align: top; /* optional */
      margin-right: 18px;
      overflow: hidden;
    }
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  8. #8
    SitePoint Enthusiast
    Join Date
    Dec 2011
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks ralph.m! Getting rid of the fixed nav does fix the problem of it getting hidden. Any thoughts on how I can get the nav to be fixed so it won't scroll AND not be hidden upon resizing?

    I tried the change you suggested to the ul#portfolio-list li, but it is not quite the effect I want. There may just be another dose of JS in my future. ;-) Any suggestions for a good masonry plugin? I think I'm going to switch to the Isotope plugin for filtering & it think it can do a masonry layout, too.

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,109
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by girlnoir View Post
    Any thoughts on how I can get the nav to be fixed so it won't scroll AND not be hidden upon resizing?
    I assume those styles are for small screens, so is there much liklihood of resizing? Position: fixed doesn't work on iPhone (and possibly other such phones) so it may not be a good strategy for those anyway. Dare I say it, but it would probably involve even more JS.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  10. #10
    SitePoint Enthusiast
    Join Date
    Dec 2011
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Good to know! I will pick my JS battles...not sure this one is worth it. ;-)


Bookmarks

Posting Permissions

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