EntropySink
Technical & Scientific => Programming => Topic started by: ober on December 12, 2011, 11:10:51 AM
-
I'm trying to make it so that when you mouseover a link, it brings up a div that I manage:
$(document).ready(function(){
$("#userlink").mouseover( showMenu );
});
// 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" }).show();
}
I'm using that, but the div "menu" doesn't ever show up. I know it's triggering the function because I can get an alert to fire, but the rest apparently isn't working.
<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>
What am I doing wrong??
-
you could try using hover() instead of mouseover
like:
$("#userlink").hover( function(){ /* mouseover stuff goes here */ }, function(){ /* mouseout goes here */ });
edit: also, considering including the hover intent plugin (http://cherne.net/brian/resources/jquery.hoverIntent.html). Helps keep annoying popup divs from displaying when the user is just trying to move their mouse around the screen and doesn't want to see your dumb popup. It works by adding a configurable delay to the trigger. Usage: the function becomes $("#userlink").hoverIntent();
edit2: i'm working on a project right now that does this if you want to look at some live code:
http://dev71.thepitagroup.com/portfolio/properties/... the function for the mouseover starts at or around line 954 (ctrl+F and paste: "tooltip" display )
-
also, is there a reason why you're making your function a var?
var showMenu = function(){ }
instead of the more simple:
function showMenu(){ }
-
Well, I'm trying to use this as a menu system. Multiple links will link to different 'dropdowns' which are just divs.
I guess I'm not sure why hover would work any different than mouseover?
-
I'm basing it off of this (in response to the var question):
http://stackoverflow.com/questions/158070/jquery-how-to-position-one-element-relative-to-another
-
Your menu system for that site is exactly what I'm looking for... I have to check that out.
-
I'm basing it off of this (in response to the var question): http://stackoverflow.com/questions/158070/jquery-how-to-position-one-element-relative-to-another
ok. thats probably fine, I just never do it that way; I wonder which is better? I've probably been wrong all along :)
-
I'm trying to make it so that when you mouseover a link, it brings up a div that I manage:
Good god, why? Those are annoying as hell.
-
I'm trying to make it so that when you mouseover a link, it brings up a div that I manage:
Good god, why? Those are annoying as hell.
again, hoverIntent :D
sometimes they make sense.. check out the link i posted an mouseover content in the giant datatable.
-
I'm trying to make it so that when you mouseover a link, it brings up a div that I manage:
Good god, why? Those are annoying as hell.
Maybe I'm not explaining myself. All I want to do is have a link (like to a username), and when they mouseover it, a div appears just below it with links to the user settings and logout. Nothing insane.
-
I'm trying to make it so that when you mouseover a link, it brings up a div that I manage:
Good god, why? Those are annoying as hell.
Maybe I'm not explaining myself. All I want to do is have a link (like to a username), and when they mouseover it, a div appears just below it with links to the user settings and logout. Nothing insane.
You may live.
-
Might have to try this: http://users.tpg.com.au/j_birch/plugins/superfish/#examples
-
You're caching the $("#menu") object before $(document).ready() fires -- could that be it? Try moving it into .ready() function.
Since JS is asynchronous, what's really happening is that you're defining a function to fire on ready, then trying to grab the menu div as a jQuery object, then defining the showMenu function. The trick is, the 'ready' won't fire until the DOM has fully loaded, but the call to grab $("#menu") could happen well before that since you've defined it outside of .ready().
This shit bites me in the ass all the time.
-
I'm basing it off of this (in response to the var question):
http://stackoverflow.com/questions/158070/jquery-how-to-position-one-element-relative-to-another
If anyone can get the stuff from that link to work, I want to see the actual code you used. I don't get it.
-
I'm basing it off of this (in response to the var question):
http://stackoverflow.com/questions/158070/jquery-how-to-position-one-element-relative-to-another
If anyone can get the stuff from that link to work, I want to see the actual code you used. I don't get it.
I'm tellin' you, you just have to move it into .ready():
<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" }).show();
}
$("#userlink").mouseover( showMenu );
});
</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>
-
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.
<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>
-
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.
-
Hey -Ken-, is there a reason to do the functions like:
var showMenu = function(){
instead of:
function showMenu(){
?
-
Yes
-
Thanks prick. Care to give me the reason??
-
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.:
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.
-
Perfect, thanks for the explanation.
-
Does it also allow you to pass a function as a parameter? (like function pointers in C)
Like:
var compare1 = function(x,y) {...}
var compare2 = function(x,y) {...}
function sort(compareFunc) {
...
compareFunc(x, y);
}
-
Yes. It is quite common to use a lambda function right in line.
For example
var arr = [1,2,3,4,5,6].sort(function(a, b) {return b - a;});
-
wow. i feel smarter today. thanks for your insight!
-
As a language javascript is quite impressive with what it can do. It has come a long ways from 1998.
-
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:
function myFunc() { }
is global.
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.
-
Has anyone had any issues with IE not triggering events with JQuery?
Everything works great in FF, but nothing fires in IE.
-
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:
{ 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?
-
Just an example... I trigger this at the end of the page load (right before the </body> tag) to setup an element:
<script type="text/javascript">
$("#overview").show();
$("#overviewlink").addClass("shadow2");
$("#overviewlink").addClass("activetab");
</script>
<div id="quickviewlinks">
<ul>
<li id="overviewlink">Overview</li>
<li id="uirtlink">uIRT</li>
<li id="utilitylink">Utilities</li>
</ul>
</div>
<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
-
Also, can someone show me how to make this more efficient? I haven't gotten a grasp on how JQuery passes around objects.
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);
-
What happens if you use this instead:
<script type="text/javascript">
$(function()
{
$("#overview").show();
$("#overviewlink").addClass("shadow2");
$("#overviewlink").addClass("activetab");
});
</script>
-
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");
-
What happens if you use this instead:
<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.
-
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.
-
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.
-
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>
-
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>
-
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!
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.
-
Here is the html:
<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>
-
As usual, I was doing it all wrong. This works:
$('#u2').click(function() {
$('.utilbox').hide();
$('#util2').fadeIn();
});