Thank you! Everything works perfectly now.
On Jan 23, 9:43 pm, Brandtley McMinn <bmcminn...@gmail.com> wrote:
> Hey Kevin,
>
> So one way to conditionally run a script based on the value of the link
> is to do this:
>
> <!-- HTML -->
> <ul id="nav">
> <li><a id="home" class="active" href="#">Home</a></li>
> <li><a id="about" href="#">About</a></li>
> <li><a id="contact" href="#">Contact</a></li>
> </ul>
>
> // JAVASCRIPT
> jQuery(document).ready(function() {
> var navItem = $("#nav a");
> navItem.click(function(){
>
> // remove initial active state
> navItem.removeClass("active");
>
> // <<< START NEW CODE!!!!
> // retrieve the id value 'this' <a> tag
> var navItemValue = $(this).attr('id');
>
> if ( navItemValue === "home") {
> alert("We are home");
> }
> else if ( navItemValue === "about") {
> alert("Pancakes are DELICIOUS!");
> }
> else if ( navItemValue === "contact") {
> alert("Something else is gonna happen if you press ok...
> not really :P");
> }
> // END NEW CODE >>>
>
> // add active state to pressed menu item
> $(this).addClass("active").preventDefault();
>
> });
>
> })();
>
> So using the same script we had last time, we just add another variable
> assignment and then our if-else logic. We're taking the current link
> element's id# attribute using $(this).attr() and assigning that to val
> navItemValue.
>
> This is the jQuery documention on the .attr() method
> --http://api.jquery.com/attr/
>
> By assigning 'this' id to a value, we can use that variable to create
> our logic. So if the id of home is "home", run this script.
>
> You can also run plugin function calls given your if statement evaluates
> properly.
>
> So say you had a modal window popup for a form submission.
>
> if ( navItemVal === "correct_variable") {
> jqPopupWindow();
>
> }
>
> but you can stuff any logic you wish within the respective 'if' statement.
>
> - Brandtley
>
> On 1/23/2011 10:15 PM, Kevin wrote:
>
>
>
>
>
>
>
> > That worked great, thanks.
>
> > But now if I want the links to actually do something with a
> > conditional statement, how do I extract the text from "this"?
>
> > something like "if (this.html()=="text)"?
>
> > On Jan 23, 5:07 pm, Brandtley McMinn<bmcminn...@gmail.com> wrote:
> >> Instead of trying to edit the CSS directly, just add a class like
> >> (.active) to the link's<a> tag.
>
> >> First off, get rid of your menulink# system. Targeting an ID with
> >> sub-classes is much easier to apply changes to since you can abstract
> >> the logic for each item with fewer instructions.
>
> >> <ul id="nav">
> >> <li><a class="active" href="#">Home</a></li>
> >> <li><a href="#">About</a></li>
> >> <li><a href="#">Contact</a></li>
> >> </ul>
>
> >> <ul id="miscNav">
> >> <li><a class="active" href="#">I'm not important</a></li>
> >> <li><a href="#">Test Link 1</a></li>
> >> <li><a href="#">Test Link 2</a></li>
> >> </ul>
>
> >> You can then style your .Active class accordingly and just have a
> >> generic fall back styling for your #nav links.
>
> >> Secondly, direct CSS modifications through javascript aren't necessary
> >> when you can simply add/take away classes:
>
> >> $(document).ready(function() {
>
> >> var navItem = $("#nav a"); // assign your selector to a variable
>
> >> navItem.click(function(){
>
> >> // remove initial active state from all possible menu items
> >> navItem.removeClass("active");
>
> >> // add active state to clicked menu item and prevent default
> >> link behaviour
> >> $(this).addClass("active").preventDefault();
>
> >> });
>
> >> })(); // make our document.ready a self-invoking function
>
> >> What this does is it removes the .active class from ALL list items
> >> within #nav and then adds the .active class to the specific item that
> >> fired the .click() event. Chaining .preventDefault() to the end of our
> >> ($this) selector is a much cleaner method for removing the default link
> >> behaviour VS return false [s1].
>
> >> Hope this helps a bit.
>
> >> - Brandtley McMinn
> >> Creative Director
> >> Gigglebox Studios
> >> giggleboxstudios.net
>
> >> PS:
> >> (
> >> s1 - sited from Sitepoint's "jQuery: Novice to Ninja" which is a book I
> >> highly recommend for learning the in's and out's of jQuery. link
> >> --http://www.sitepoint.com/books/jquery1/
> >> )
--
--
You received this because you are subscribed to the "Design the Web with CSS"
at Google groups.
To post: css-design@googlegroups.com
To unsubscribe: css-design-unsubscr...@googlegroups.com
