Announcement Announcement Module
Collapse
No announcement yet.
jQuery switch ID on load Page Title Module
Move Remove Collapse
Search Search Module
Collapse

Advertisement Advertisement Module
Collapse

Featured Images Featured Images Module
Collapse

Mediabistro Creative Sites Mediabistro Creative Sites Module
Collapse
Latest Topics Latest Topics Module
Collapse

  • lowfatgraphics
    Reply to UX tips
    lowfatgraphics
    Hmm This isn't UX, it is UI... Its common to get the two mixed up but having worked in UX and now UI, there is a pretty big difference.

    Now from a UI stand point, there isn't much here...aside...
    Today, 03:52 AM
  • lowfatgraphics
    Reply to Candy Shop Logo
    lowfatgraphics
    "S" is tough to read-- looks interesting. the glossy highlights seem to have multiple light sources tho...might want to double check.
    Today, 03:43 AM
  • lowfatgraphics
    Reply to Opinions on My Logo?
    lowfatgraphics
    Tough to comment because I'm not aware of its usage...signage or a cup coaster-- how small will it ever be, because at one point the thin tag line with not be readable. So you would have to create a system....
    Today, 03:39 AM
  • lowfatgraphics
    Font
    lowfatgraphics
    Hey everyone,

    I'm looking to invest in a font management software. I've used Suitcase Fusion ($119) before but I've been hearing good things about Font Explorer X Pro ($89).

    ...
    Today, 03:18 AM
  • arielr190
    Reply to Opinions on My Logo?
    arielr190
    Changed the fonts, removed the texture, reduced the amount of colors & brightened the orange. better?...
    Today, 02:21 AM
Advertisement Advertisement Module
Collapse

Sponsors Sponsors Module
Collapse

X
Conversation Detail Module
Collapse
  • Filter
  • Time
  • Show
Clear All
new posts

  • jQuery switch ID on load

    I am working on my new site and just converted it to PHP (easy to update and use of a form), and have a master template file now, which loads the designated content for each of the sites pages when clicked. I am looking to switch a class state, using jQuery) when a page is loaded.

    So when "Works", in the include navigation, is clicked and loaded it would go from:
    Code:
    <div id="navMenu">
      <ul>
        <li><a href="/" class="home">Home</a></li>
        <li><a href="/works" class="works">Works</a></li>
        <li><a href="/about" class="about">About</a></li>
        <li><a href="/tutorials" class="tutorials">Tutorials</a></li>
        <li><a href="/contact" class="contact">Contact</a></li>
      </ul>
    </div>
    To this when the "works" page content is loaded.
    Code:
    <div id="navMenu">
      <ul>
        <li><a href="/" class="home">Home</a></li>
        <li><a href="/works" class="worksSelected">Works</a></li>
        <li><a href="/about" class="about">About</a></li>
        <li><a href="/tutorials" class="tutorials">Tutorials</a></li>
        <li><a href="/contact" class="contact">Contact</a></li>
      </ul>
    </div>


    Any help?
    Professional Pixel Pusher Designing the world around you. | Working daily to reach 10,000 hours of practice.

  • #2
    something to the effect of:

    $(document).ready(function() {
    $('#navMenu a').click(function() {
    $(this).addClass('worksSelected');
    }, function() {
    $(this).removeClass('works');
    });
    });

    or...you could do it via css by adding a body id and targeting the nav that way using the same class of 'works'...
    Last edited by flutterby nut; 08-27-2009, 02:17 PM. Reason: changed ul li to 'a'
    Monarchs Rule!

    Comment


    • #3
      Looks decent to me! Muchos gracias!!!

      and I'm assuming here, but I just toss that code at the top of my works.php pages that gets loaded into the template. Right?

      I will look into the alternate method as well and desypher which will best suit my needs. *teeters off to go research*
      Professional Pixel Pusher Designing the world around you. | Working daily to reach 10,000 hours of practice.

      Comment


      • #4
        you do need to also link to the jQuery js as well

        the disadvantages i see to doing via jQuery is if js is disabled, nothing is marked selected...and, you have to account for your other links in the list i'm assuming...ie, 'homeSelected', 'aboutSelected', etc...

        the advantage to css is that you'll already have a hover state for the a and a class assigned...so if you add a body id to each page, you could do something like:

        #navMenu a.works:hover, #works #navMenu a {background: blue;}

        such that when you're on another page and hover over the works link the background is blue and when you're on the works page, the background stays blue...

        make sense?
        Monarchs Rule!

        Comment


        • #5
          Makes sense, the only issue I foresee is just getting it to work right

          CSS associated with "works and worksSelected":
          Code:
          #navMenu a.works { width:176px; height:50px; margin:8px 0 0 0; background:url('../images/support/navAll.gif') 0 0 ; }
          	#navMenu a.works:hover { background:url('../images/support/navAll.gif') 0 -60px; }
          	#navMenu a.works:active, a.worksSelected { width:176px; height:50px; margin:8px 0 0 0; background:url('../images/support/navAll.gif') 0 -120px; }

          The jquery library is already loaded on page enter since it is located in the template file.
          Professional Pixel Pusher Designing the world around you. | Working daily to reach 10,000 hours of practice.

          Comment


          • #6
            you can do it without the .worksSelected class altogether by adding:

            <body id="works">

            to works page, and label the other pages accordingly...then your css would look like:

            #navMenu a.works:hover { background:url('../images/support/navAll.gif') 0 -60px; }
            #navMenu a.works:active, #works #navMenu a.works { width:176px; height:50px; margin:8px 0 0 0; background:url('../images/support/navAll.gif') 0 -120px; }

            then for home add #home #navMenu a.home, #about #navMenu a.about, etc for all your other links...

            the only problem i forsee is that a.works may not be specific/powerful enough to take effect (sometimes an id carries more weight than a class)...i usually use an id on the li when i do sprites...for example:

            #navMenu li#works a:active, #works #navMenu li#works a

            so, if the class fails, you can try the id...
            Monarchs Rule!

            Comment


            • #7
              *thumbs up* I will give this a shot when I get home tonight!

              Thanks Flutterby_nut!!!
              Professional Pixel Pusher Designing the world around you. | Working daily to reach 10,000 hours of practice.

              Comment


              • #8
                you're welcome!

                fyi...google: 'specificity wars'...andy clarke puts out a 'chart' that's really helpful...in case you didn't know...
                Monarchs Rule!

                Comment


                • #9
                  I broke down and just tried this on my lunch break, and couldn't get the active state to remain on the page once loaded. So after getting frustrated with that just went the jquery route and it works just fine.

                  I understand that if someone doesn't have javascript turned on they won't be able to see this effect, but it doesn't bother me THAT much. The page will still load, the button just will not have a 'on' state shown.

                  This is the jquery code that I ended up using:
                  Code:
                  <script type="text/javascript">
                  $(document).ready(function() {
                  	$('#navMenu a').removeClass('works');
                  	$('#navMenu a').addClass('worksSelected');
                  });
                  </script>
                  I just replaced with bolded part with the associated class name that I wanted to remove/add. Also, just place the at the top of each of the pages that you are loading into the core.

                  Thanks again for all of your help Flutterby_Nut!
                  Professional Pixel Pusher Designing the world around you. | Working daily to reach 10,000 hours of practice.

                  Comment


                  • #10
                    ahh!...i envisioned having a long js entry on each page accounting for every different page scenario...but the short snippet on each page with classes changed works in a pinch...

                    i suspect the css is a specificity issue...play with it when you have time
                    Monarchs Rule!

                    Comment


                    • #11
                      I will fiddle with it all when I have time.

                      Also note: I don't have to call the jquery script everything time because it is located in the main_template.php file. So it is automatically called for every page.
                      Professional Pixel Pusher Designing the world around you. | Working daily to reach 10,000 hours of practice.

                      Comment

                      Mediabistro A division of Prometheus Global Media home | site map | advertising/sponsorships | careers | contact us | help courses | browse jobs | freelancers | content | member benefits | reprints & permissions terms of use | privacy policy Copyright © 2014 Mediabistro Inc. call (212) 389-2000 or email us
                      Working...
                      X