Author Topic: JQuery Help again  (Read 7518 times)

-KEN-

  • Some Other Mofo
  • Jackass In Charge
  • Posts: 1001
  • Karma: +75/-100
Re: JQuery Help again
« Reply #15 on: December 14, 2011, 02:23:24 AM »
And to be a little fancier, if you use prependTo to prepend the menu to the userlink div, the hover exit event will fire when you leave either the userlink div OR the menu, meaning it won't blink away when you move the cursor from the userlink div to the menu.

Code: [Select]
<html>
    <head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){ 
            // cache the menu object for optimum performance
            var $menu = $("#menu"), pos, width;
           
            var showMenu = function(){
                //get the position of the placeholder element
                pos   = $(this).offset();
                width = $(this).width();
                //show the menu directly over the placeholder
                $menu.css({ "left": (pos.left + width) + "px", "top":pos.top + "px" }).prependTo("#userlink").show();
            }
            var hideMenu = function() {
                $menu.hide();
            }

            $("#userlink").hover(showMenu, hideMenu);
        });


    </script>
    </head>
    <body>
        <div style="position: absolute; display: none;float:left;" id="menu">
            <a href="#">Settings</a>
            <a href="#">Logout</a>
        </div>
        <div style="float:left;" id="userlink">John Smith</div>
    </body>
</html>

ober

  • Ashton Shagger
  • Ass Wipe
  • Posts: 14305
  • Karma: +73/-790
  • mini-ober is taking over
    • Windy Hill Web Solutions
Re: JQuery Help again
« Reply #16 on: December 14, 2011, 10:04:31 AM »
Maybe it was the order.  I did what you said, but it wasn't in that order and it didn't work.

Anyways, thanks for the help.

ober

  • Ashton Shagger
  • Ass Wipe
  • Posts: 14305
  • Karma: +73/-790
  • mini-ober is taking over
    • Windy Hill Web Solutions
Re: JQuery Help again
« Reply #17 on: December 15, 2011, 11:11:12 AM »
Hey -Ken-, is there a reason to do the functions like:

var showMenu = function(){

instead of:

function showMenu(){

?

Mike

  • Jackass In Charge
  • Posts: 11248
  • Karma: +168/-32
  • Ex Asshole - a better and more caring person.
Re: JQuery Help again
« Reply #18 on: December 15, 2011, 12:34:47 PM »
Yes

ober

  • Ashton Shagger
  • Ass Wipe
  • Posts: 14305
  • Karma: +73/-790
  • mini-ober is taking over
    • Windy Hill Web Solutions
Re: JQuery Help again
« Reply #19 on: December 15, 2011, 12:37:31 PM »
Thanks prick.  Care to give me the reason??

Mike

  • Jackass In Charge
  • Posts: 11248
  • Karma: +168/-32
  • Ex Asshole - a better and more caring person.
Re: JQuery Help again
« Reply #20 on: December 15, 2011, 12:42:30 PM »
For general purpose functions there isn't much reason.  But if you are trying to follow an OO pattern you can use that method to create an object method.  i.e.:
Code: [Select]
var User =
{
  login: function(){ /* do something */ },
  logout: function() { /* do something else */ },
};

You can also use that method if you want to limit the scope of who can call it.  I also use that method if it is a one off function.

ober

  • Ashton Shagger
  • Ass Wipe
  • Posts: 14305
  • Karma: +73/-790
  • mini-ober is taking over
    • Windy Hill Web Solutions
Re: JQuery Help again
« Reply #21 on: December 15, 2011, 12:48:04 PM »
Perfect, thanks for the explanation.

Perspective

  • badfish
  • Jackass In Charge
  • Posts: 4635
  • Karma: +64/-22
    • http://jeff.bagu.org
Re: JQuery Help again
« Reply #22 on: December 15, 2011, 02:13:42 PM »
Does it also allow you to pass a function as a parameter? (like function pointers in C)

Like:

Code: [Select]
var compare1 = function(x,y) {...}
var compare2 = function(x,y) {...}

function sort(compareFunc) {
   ...
   compareFunc(x, y);
}

Mike

  • Jackass In Charge
  • Posts: 11248
  • Karma: +168/-32
  • Ex Asshole - a better and more caring person.
Re: JQuery Help again
« Reply #23 on: December 15, 2011, 02:32:56 PM »
Yes.  It is quite common to use a lambda function right in line.

For example
Code: [Select]
var arr = [1,2,3,4,5,6].sort(function(a, b) {return b - a;});

micah

  • A real person, on the Internet.
  • Ass Wipe
  • Posts: 6915
  • Karma: +58/-55
  • Truth cannot contradict truth.
    • micahj.com
Re: JQuery Help again
« Reply #24 on: December 15, 2011, 02:34:05 PM »
wow.  i feel smarter today.  thanks for your insight!
"I possess a device, in my pocket, that is capable of accessing the entirety of information known to man.  I use it to look at pictures of cats and get in arguments with strangers."

Mike

  • Jackass In Charge
  • Posts: 11248
  • Karma: +168/-32
  • Ex Asshole - a better and more caring person.
Re: JQuery Help again
« Reply #25 on: December 15, 2011, 02:37:33 PM »
As a language javascript is quite impressive with what it can do.  It has come a long ways from 1998.

-KEN-

  • Some Other Mofo
  • Jackass In Charge
  • Posts: 1001
  • Karma: +75/-100
Re: JQuery Help again
« Reply #26 on: December 15, 2011, 10:35:16 PM »
I also just kinda prefer the way it looks.

Mike is right in that it scopes it, too. Any variable created with `var` is limited to the scope you created it in. For example:

Code: [Select]
function myFunc() { }
is global.

Code: [Select]
var myFunc = function() { }
is scoped to wherever you've defined it.

As a language javascript is quite impressive with what it can do.  It has come a long ways from 1998.

Amen. I actually enjoy programming with it, though the callbacks can get a little nuts.

ober

  • Ashton Shagger
  • Ass Wipe
  • Posts: 14305
  • Karma: +73/-790
  • mini-ober is taking over
    • Windy Hill Web Solutions
Re: JQuery Help again
« Reply #27 on: December 16, 2011, 11:54:08 AM »
Has anyone had any issues with IE not triggering events with JQuery?

Everything works great in FF, but nothing fires in IE.

micah

  • A real person, on the Internet.
  • Ass Wipe
  • Posts: 6915
  • Karma: +58/-55
  • Truth cannot contradict truth.
    • micahj.com
Re: JQuery Help again
« Reply #28 on: December 16, 2011, 11:57:43 AM »
sometimes, but its never been jQueries fault.  my biggest error I make all the time is putting to many commas in an object of parameters:
Code: [Select]
{ x:1,
    y:2,
    z:3,
  }
That'll work everywhere except less than IE9 until you take out the last comma after z:3

in general, jQuery is the great browser equalizer and has a reputation for working cross browsers.

what does your code look like that's not working?
"I possess a device, in my pocket, that is capable of accessing the entirety of information known to man.  I use it to look at pictures of cats and get in arguments with strangers."

ober

  • Ashton Shagger
  • Ass Wipe
  • Posts: 14305
  • Karma: +73/-790
  • mini-ober is taking over
    • Windy Hill Web Solutions
Re: JQuery Help again
« Reply #29 on: December 16, 2011, 12:12:39 PM »
Just an example... I trigger this at the end of the page load (right before the </body> tag) to setup an element:
Code: [Select]
<script type="text/javascript">
    $("#overview").show();
    $("#overviewlink").addClass("shadow2");
    $("#overviewlink").addClass("activetab");
</script>

Code: [Select]
<div id="quickviewlinks">
                <ul>
                    <li id="overviewlink">Overview</li>
                    <li id="uirtlink">uIRT</li>
                    <li id="utilitylink">Utilities</li>
                </ul>   
            </div>

Code: [Select]
<div id="overview" class="quickviewcontent">           
                <div id="announcements">
                    <div id="announceheader">Announcements</div>
                    <div class="announcement">Enrollment will be closing as of 15/Mar/2012.  Please make sure you have met your enrollment targets by that time.</div>
                </div>

... and some other basic html in this overview div