Topic: JQuery Help again

[ober]

Also, can someone show me how to make this more efficient?  I haven't gotten a grasp on how JQuery passes around objects.

Code: [Select]

var showOverview = function(){
                $("#overview").show();
                $("#uirt").hide();
                $("#utilities").hide();               
                $("#overviewlink").addClass("shadow2");
                $("#overviewlink").addClass("activetab");
                $("#uirtlink").removeClass("shadow2");
                $("#uirtlink").removeClass("activetab");
                $("#utilitylink").removeClass("shadow2");
                $("#utilitylink").removeClass("activetab");               
        }
       
        var showUirt = function(){
                $("#overview").hide();
                $("#uirt").show();
                $("#utilities").hide();               
                $("#overviewlink").removeClass("shadow2");
                $("#overviewlink").removeClass("activetab");
                $("#uirtlink").addClass("shadow2");
                $("#uirtlink").addClass("activetab");
                $("#utilitylink").removeClass("shadow2");
                $("#utilitylink").removeClass("activetab");               
        }
       
        var showUtility = function(){
                $("#overview").hide();
                $("#uirt").hide();
                $("#utilities").show();               
                $("#overviewlink").removeClass("shadow2");
                $("#overviewlink").removeClass("activetab");
                $("#uirtlink").removeClass("shadow2");
                $("#uirtlink").removeClass("activetab");
                $("#utilitylink").addClass("shadow2");
                $("#utilitylink").addClass("activetab");               
        }
       
       
        $("#overviewlink").click(showOverview);
        $("#uirtlink").click(showUirt);
        $("#utilitylink").click(showUtility);



[Mike]

What happens if you use this instead:

Code: [Select]

<script type="text/javascript">
$(function()
{
    $("#overview").show();
    $("#overviewlink").addClass("shadow2");
    $("#overviewlink").addClass("activetab");
});
</script>


[micah]

some of the stuff you can chain together...

like:
$("#overviewlink").removeClass("shadow2");
$("#overviewlink").removeClass("activetab");

can simply be:
$("#overviewlink").removeClass("shadow2").removeClass("activetab");

so you're only calling the selector once

EDIT:  of course, you can apparently combine those anyway and remove more than one class in the same function.  see also.. http://api.jquery.com/removeClass/

$("#overviewlink").removeClass("shadow2 activetab");

[ober]

What happens if you use this instead:

Code: [Select]

<script type="text/javascript">
$(function()
{
    $("#overview").show();
    $("#overviewlink").addClass("shadow2");
    $("#overviewlink").addClass("activetab");
});
</script>


No change.  Still works in FF/Chrome, not in IE.

Thanks for that tip, Micah.

[ober]

Even better with the edit!

Ok, ignore the IE shit.  For some reason IE was blocking the scripts from running.  I just missed the stupid fucking bar at the bottom of the screen telling me that.

[Mike]

Even better with the edit!

Ok, ignore the IE shit.  For some reason IE was blocking the scripts from running.  I just missed the stupid fucking bar at the bottom of the screen telling me that.

Haha, browser UI fail.

[micah]

is IE ignore the included javascript file alltogether by any chance?

if you call it like this:
<script src="path/to/myFile.js">  it won't work in IE unless you close out the tag like:
<script src="path/to/myFile.js"></script>

[ober]

Nope, they're setup like this:

    <script type="text/javascript" src="js/jquery-1.7.min.js"></script>
    <script type="text/javascript" src="js/jquery.hoverIntent.minified.js"></script>
    <script type="text/javascript" src="js/superfish.js"></script>
    <script type="text/javascript" src="js/supersubs.js"></script>

[ober]

OK, new one.  I have a set of divs with the class 'utilbox'.  I have a list with the class 'utillink' and each list item has an id of u1, u2, etc..  When I click on an item in the list, I want to hide all of the utilbox elements and show the new one that I need.  I also want to apply a class to my utillink list item.

Help!

Code: [Select]

var showutilbox = function(i) {
            $("div.utilbox").hide();
            $("#util"+i).show();
        }
       
       
        var addgoclassutil = function(){
            $("div.utillink").removeClass("goclass");
            $(this).addClass("goclass");
        }
       
       
        $("#u1").click(addgoclassutil);
        $("#u1").click(showutilbox(1));
        $("#u2").click(addgoclassutil);
        $("#u2").click(showutilbox(2));

That isn't working.

[ober]

Here is the html:

Code: [Select]

<div id="utilmain" class="utilbox">
                                    <div id="utilmainhead">Utilities</div>
                                    Please select a utility to learn more about it or to provide parameters for the specific utility.
                                </div>
                               
                                <div id="util1" class="utilbox">1</div>
                                <div id="util2" class="utilbox">2</div>
                                <div id="util3" class="utilbox">3</div>
                                <div id="util4" class="utilbox">4</div>
                                <div id="util5" class="utilbox">5</div>
                                <div id="util6" class="utilbox">6</div>
                                <div id="util7" class="utilbox">7</div>


<ul>
                            <li id="u1" class="utillink">Upgrade Dictionary</li>
                            <li id="u2" class="utillink">Update Names</li>
                            <li id="u3" class="utillink">Reconcile</li>
                            <li id="u4" class="utillink">Reconcile Record</li>
                            <li id="u5" class="utillink">Dynamic Status</li>
                            <li id="u6" class="utillink">Notifications</li>
                            <li id="u7" class="utillink">Reconcile</li>                           
                        </ul>



[ober]

As usual, I was doing it all wrong.  This works:

Code: [Select]

$('#u2').click(function() {
            $('.utilbox').hide();
            $('#util2').fadeIn();
        });