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

  • <b>
    Reply to Suggestion please
    <b>
    Brain, pencil, paper, Adobe Illustrator
    Today, 06:22 AM
  • Carlo
    Reply to Illustrator Gradient on Grouped Objects
    Carlo
    Select the group apply no fill to it

    keep the group selected

    Go to appearance panel, second icon atthe bottom of the panel frim the left Add new fill.

    With the fill...
    Today, 06:12 AM
  • john14
    Suggestion please
    john14
    Which tool is better for logo design?
    Today, 06:04 AM
  • PrintDriver
    Reply to Happy Last Friday of August!!!
    PrintDriver
    Kitty and Kool, thanks for the years of making Friday mornings fun.

    Re other chat platforms, I've given up fighting "progress"
    I'm waiting for drones to deliver my groceries...
    Today, 03:52 AM
  • kibblex
    Illustrator Gradient on Grouped Objects
    kibblex
    I've been working on my logo. I pathfinder'd the P out of the B and now the pieces are grouped. When I apply a gradient from the gradient panel, I can't seem to adjust it with the gradient tool the same...
    Today, 03:26 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