Accordian Menu

HTML & CSS
1

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

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.

3

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

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.

5

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

That seems to occur due to the container being centered on the screen.

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.

7

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

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:

ul#portfolio-list li {
  display: inline-block;
  [s]float: left;[/s]
  [COLOR="#FF0000"]display: inline-block;[/COLOR]  
  [COLOR="#FF0000"]vertical-align: top;[/COLOR] /* optional */
  margin-right: 18px;
  overflow: hidden;
}
8

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. :wink: 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

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.

10

Good to know! I will pick my JS battles…not sure this one is worth it. :wink: