I am attempting to make a DIV fall when a piece of text is hovered upon. This is the original effect and this:
var $dropDiv = $('#dropDiv');
$('#holder p').on('hover', function () {
// Get position of clicked div
var offset = $(this).offset();
// Get dimensions of said div
var h = $(this).outerHeight();
var w = $(this).outerWidth();
// Get dimensions of dropping div
var dh = $dropDiv.outerHeight();
var dw = $dropDiv.outerWidth();
// Determine middle position
var initLeft = offset.left + ((w / 2) - (dw / 2));
// Animate drop
$dropDiv.css({
left: initLeft,
top: $(window).scrollTop() - dh,
opacity: 0,
display: 'block'
}).animate({
left: initLeft,
top: offset.top - dh,
opacity: 1
}, 800, 'easeOutBounce');
});
is my code. At first I thought it was a problem with my libraries, so I switched to the versions the fiddle has.
<script src="fall.js"></script>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
The fiddle also had some CSS so I matched up to it
#holder {
position: absolute;
top: 200px;
left: 100px;
}
#dropDiv {
display: none;
position: absolute;
top: -20px;
background: #ccc;
}
I even checked the error console and there are no errors, but it still doesn't work. What am I doing wrong and how can I fix it? I am using Safari Version 5.1.10 and expect it to work for me and Chrome users at least.
This should be the order.
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script src="fall.js"></script>
try wrapping the code inside -
$(document).ready(function() {
//code here
});
It is possible that your javascript is not getting executed to to the problem of the same being run prior to the elements being loaded to the DOM
+
If your specified javascript is inside fall.js, since it uses jquery load the fall.js file after jquery.
Where have you include your code ? I had similar problem.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
</head>
<body>
YOUR HTML CODE
<script type="text/javascript"> your code</script>
or
<script src="fall.js"></script>
</body>
</html>
Include your jQuery code after the html code. bottom in tag
that should work
also put your code inside ready function
$(document).ready(function(){
your code here...
})
You need to take 2 Steps -
1) ORDERING - The js file/code using jquery lib. functions should always come jquery file is included
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script src="fall.js"></script>
2) ELEMENT SHOULD BE AVAILABLE IN DOM - Either the js/script should be the last thing in the body or use jquery dom ready event
(More Detail Here)
I can spot a little Javascript vs. CSS confusion here.
$('#holder p').on( 'mouseover', function() {
// code
});
You can use:
$(function(){
//you code here
})
Related
(This is a follow-up on my previous question if anybody is interested in the background story for entertainment purposes. It will probably not help you understand this question.)
Here are two elements <aside> and <main> who have got their width and height via JavaScript so that their combined width is the width of your screen (note that their display is inline-block). If you run this code in your web browser (a maximized browser so that the width of your browser equals the width of your screen) you might note that the body surprisingly does not properly fit the elements:
<!DOCTYPE html>
<html>
<body>
<aside></aside><!-- comment to remove inline-block whitespace
--><main></main>
<script>
var h = screen.height/100;
var w = screen.width/100;
var e = document.getElementsByTagName("aside")[0].style;
e.display = "inline-block";
e.backgroundColor = "lightblue";
e.width = 14*w + "px";
e.height = 69*h + "px";
e.marginRight = 0.5*w + "px";
e = document.getElementsByTagName("main")[0].style;
e.display = "inline-block";
e.backgroundColor = "green";
e.width = 85.5*w + "px";
e.height = 69*h + "px";
e = document.getElementsByTagName("body")[0].style;
e.margin = e.padding = "0";
e.backgroundColor = "black";
</script>
</body>
</html>
If you however give the JavaScript a delay, the elements are rendered properly. This suggests that the body somehow "needs time" to figure out its correct width:
<script>
setTimeout(function() {
[...]
}, 200);
</script>
It is also possible to give the body the specified width of screen.width instead of introducing the delay, by adding the following line. This supports the previous guess that the body does not immediately know its correct width (unless specified):
<script>
[...]
e.width = 100*w + "px";
</script>
Even though I have taken the freedom to throw wild guesses to explain this, I do not actually have a clue to what is going on.
Why are the elements not placed properly in the first place, and why do these two solutions work?
(Note: It is also possible to fix this by setting the whitespace of the body to nowrap with e.whiteSpace = "nowrap";, but I suspect this does not do the same thing as the other two. Instead of creating space for the elements inside the body, this simply forces the elements to be next to each other even though there is not enough room in the body.)
You should wait for the DOM to be available before running your code, see here: pure JavaScript equivalent to jQuery's $.ready() how to call a function when the page/dom is ready for it. That is possibly why setTimeout works. Also you should assign seperate variable names for your different elements.
// self executing function before closing body tag
(function() {
// your code here
// the DOM will be available here
})();
Is there a reason you are using Javascript and not CSS to accomplish this task? I suggest giving your elements css ids ie id="aside", then set your css styles:
html,body {
width: 100%;
height: 100%;
}
#aside {
display:inline-block;
position: relative;
float: left;
width: 14%;
height: 69%;
background: blue;
}
#main {
display:inline-block;
position: relative;
float: left;
width: 86%;
height: 31%;
background: azure;
}
I'm taking real simple examples from their documentation in one I re-size and re-position a photo. The re-size part works fine but it won't re-position.
Here's my code:
<head>
<meta charset="UTF-8">
<title>animate</title>
<style type="text/css">
#test { width: 100px; height: 100px; background-color: #f72; }
</style>
<!--CDN link for the latest TweenMax-->
**<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>**
</head>
<body>
**<div id="test"></div>
<img id="photo" src="Putin.jpg">**
<script>
**var photo = document.getElementById("photo");
TweenLite.to(photo, 2.5, {width:100}); // this works
TweenLite.to(photo, 4, {left:300}); // this does nothing
var thing = document.getElementById('test');
TweenLite.to(thing, 1, {left:200}); // this does nothing
TweenLite.to(thing, 1, {top:100}); // this does nothing**
</script>
</body>
you can run it here: http://www.jimslounge.com/gsap_test/
Updated:
I would always wait until the window has loaded before executing code that relies on a external libraries:
window.onload = function(){
var photo = document.getElementById("photo");
TweenMax.to(photo, 4, {x:300});
}
Secondly, you are loading the TweenMax library, so you need to use TweenMax instead of TweenLite
Thirdly, besides not quite being sure if you need to define your block as position absolute when not animating the padding or margin, you should definitely pass the x instead of left attribute
TweenMax.to(photo, 4, {x:300});
Give it a go and let me know if this helps
See a working example here:
http://jsfiddle.net/Hitbox/QbyCU/1/
Let's say I have a button and a big div. Upon the button being pressed, the code "appends" a new div inside the big div. That new div appended is then stuck on there because apparently, I didn't make the right code to make it live draggable?
Also, I'm trying to fix it so when they "appended"... that they aren't "stacked" going from up to down... maybe in a random place between the div...
http://jsbin.com/obizel/3/
Here's what I have so far...
Your libraries are our of kilter. I changed them from:
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"</script>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
to:
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/jquery-ui.min.js"></script>
So, it looks like you had a mismatch and you were loading the same library twice. All works when you change those lines.
I've updated your JSBin to get you started. Your libraries have been updated, too (out of order before).
Notice that your container(#box) must be positioned relatively because the draggable plugin makes your .new_boxes positioned absolutely. See the CSS for details.
The new JS :
$(document).ready(function () {
function createBox($parent, left, top) {
var $box = $('<div class="new_box">Hello world</div>');
$box.appendTo($parent);
$box.draggable({
containment: $parent,
grid: [10, 10]
});
$box.css({
left: left,
top: top
});
}
$(".add").click(function (e) {
var $container = $("#box"),
w = $container.width(),
h = $container.height();
createBox($container, Math.random() * w, Math.random() * h);
});
});
I have an HTML element that I need to track another element. Specifically, I need to have the top left and top right corners of both elements be positioned the same. When a window gets resized, the resize event gets triggered and I can adjust the position of the dependent element. However, if the element being tracked is repositioned (but not resized), I do not see any DOM event.
How can we find out if a DOM element has been moved? We are using the latest jQuery.
Here is a code sample.
Note that elementOne and mouseTracking divs are there to show elements that get moved for "some" reason that is outside the control of my code.
This code works for the elementOne case.
MouseTrackingTracker does not track a moving element.
ResizerTracker does not put the border around the complete text in the overflow case.
I would like the trackingDivs to move and resize no matter the reason for the tracked element's reasons for changing.
This code relies on the window resize being the hooked event. Hooking some event that fires when the element changes its dimensions is closer to what I need.
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.js"></script>
<style type="text/css">
#elementOne { float : right;width : 200px; display:inline-block}
#resizer { float : left; display:inline-block}
.trackedDiv { width:50px; height:50px; background-color: blue }
.trackingDiv { position:absolute; z-index: 1; border:3px green; border-style: solid;}
</style>
<script>
$(function() {
$( window ).bind("resize",function(){
$("#elementOne").trigger("reposition");
$("#mouseTracking").trigger("reposition");
$("#resizer").trigger("reposition");
});
var repositionFunction = function(selfish, element){
var self = $(selfish);
var offset = self.offset();
var selfTop = offset.top;
var selfLeft = offset.left;
var selfWidth = self.width();
var selfHeight = self.height();
$(element).css({
top: selfTop,
left: selfLeft,
width : selfWidth,
height : selfHeight
});
}
$(document).mousemove(function(ev){
$("#mouseTracking").position({
my: "left bottom",
of: ev,
offset: "3 -3",
collision: "fit"
});
});
var timedShort = function() {
$('#resizer').html("Really short").resize();
setTimeout(timedLong, 10000);
}
var timedLong = function() {
$('#resizer').html("Really longggggggggggggggggggggggggggggggggggggggggggggggggggg text").resize();
setTimeout(timedShort, 10000);
}
setTimeout(timedLong, 10000);
$("#elementOne").bind("reposition",
function() { repositionFunction(this, "#elementOneTracker"); });
$("#mouseTracking").bind("reposition",
function() { repositionFunction(this, "#mouseTrackingTracker"); });
$("#resizer").bind("reposition",
function() { repositionFunction(this, "#resizerTracker"); });
});
</script>
</head>
<body>
<div class="trackedDiv" id="mouseTracking">tracks mouse</div>
<div class="trackingDiv" id="mouseTrackingTracker"></div>
<div style="clear:both;"></div>
<div class="trackedDiv" id="resizer">resizer: resizes</div>
<div class="trackingDiv" id="resizerTracker"></div>
<div class="trackedDiv" id="elementOne">elementOne: floats to the right</div>
<div class="trackingDiv" id="elementOneTracker"></div>
</body>
</html>
You can fire custom events with jquery whenever you reposition the element.
$( window ).bind("resize",function(){
$("#elementOne").css({
top: 200,
left: 200
}).trigger("reposition");
});
// and now you can listen to a "reposition event"
$("#elementOne").bind("reposition",function(){
var self = $(this);
$("#elementTwo").css({
top: self.css("top"),
left: self.css("left")
});
});
So you can provide event hooks yourself with some manual coding, which is useful since cool events like DOMAttrModified and so on, are not fully supported in all browsers. The downside, you have to do it all yourself.
Unfortunately, there are no reliable events to tell you when an element moves or is resized. You could resort to polling the element, though that won't necessarily be the most performant solution:
setInterval(repositionElement, 10);
Another option is to make your element "track" the other element purely through CSS. For this to work, you'll need a "wrapper" around the element you're tracking, and the other element:
#wrapper-around-element-to-track
{
position: relative;
}
#tracked-element
{
position: absolute;
/* set top and left to position, if necessary */
}
#tracking-element
{
position: absolute;
/* set top and left to position, if necessary */
}
Since you're already using jQuery, you can also use the resize event plugin to simulate the resize event on any element, but if I recall the last time I looked at it, it simply does the polling like I mentioned.
There is the DOMAttrModified event, but its only impleneted in Firefox and Chrome. But as you need a JavaScript function to start the element moving, you can firing a custom event with Jquery in this place.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 7 years ago.
Improve this question
I'm trying to make a "bubble" that can popup when the onmouseover event is fired and will stay open as long as the mouse is over the item that threw the onmouseover event OR if the mouse is moved into the bubble. My bubble will need to have all manners of HTML and styling including hyperlinks, images, etc.
I've basically accomplished this by writing about 200 lines of ugly JavaScript but I would really like to find a jQuery plugin or some other way to clean this up a bit.
Qtip is the best one I've seen. It's MIT licensed, beautiful, has all the configuration you need.
My favorite lightweight option is tipsy. Also MIT licensed. It inspired Bootstrap's tooltip plugin.
This can be done easily with the mouseover event as well. I've done it and it doesn't take 200 lines at all. Start with triggering the event, then use a function that will create the tooltip.
$('span.clickme').mouseover(function(event) {
createTooltip(event);
}).mouseout(function(){
// create a hidefunction on the callback if you want
//hideTooltip();
});
function createTooltip(event){
$('<div class="tooltip">test</div>').appendTo('body');
positionTooltip(event);
};
Then you create a function that position the tooltip with the offset position of the DOM-element that triggered the mouseover event, this is doable with css.
function positionTooltip(event){
var tPosX = event.pageX - 10;
var tPosY = event.pageY - 100;
$('div.tooltip').css({'position': 'absolute', 'top': tPosY, 'left': tPosX});
};
Although qTip (the accepted answer) is good, I started using it, and it lacked some features I needed.
I then stumbled upon PoshyTip - it is very flexible, and really easy to use. (And I could do what I needed)
Ok, after some work I'm able to get a "bubble" to pop up and go away at all the right times. There is a LOT of styling that needs to happen still but this is basically the code i used.
<script type="text/javascript">
//--indicates the mouse is currently over a div
var onDiv = false;
//--indicates the mouse is currently over a link
var onLink = false;
//--indicates that the bubble currently exists
var bubbleExists = false;
//--this is the ID of the timeout that will close the window if the user mouseouts the link
var timeoutID;
function addBubbleMouseovers(mouseoverClass) {
$("."+mouseoverClass).mouseover(function(event) {
if (onDiv || onLink) {
return false;
}
onLink = true;
showBubble.call(this, event);
});
$("." + mouseoverClass).mouseout(function() {
onLink = false;
timeoutID = setTimeout(hideBubble, 150);
});
}
function hideBubble() {
clearTimeout(timeoutID);
//--if the mouse isn't on the div then hide the bubble
if (bubbleExists && !onDiv) {
$("#bubbleID").remove();
bubbleExists = false;
}
}
function showBubble(event) {
if (bubbleExists) {
hideBubble();
}
var tPosX = event.pageX + 15;
var tPosY = event.pageY - 60;
$('<div ID="bubbleID" style="top:' + tPosY + '; left:' + tPosX + '; position: absolute; display: inline; border: 2px; width: 200px; height: 150px; background-color: Red;">TESTING!!!!!!!!!!!!</div>').mouseover(keepBubbleOpen).mouseout(letBubbleClose).appendTo('body');
bubbleExists = true;
}
function keepBubbleOpen() {
onDiv = true;
}
function letBubbleClose() {
onDiv = false;
hideBubble();
}
//--TESTING!!!!!
$("document").ready(function() {
addBubbleMouseovers("temp1");
});
</script>
Here is a snippet of the html that goes with it:
Mouseover this for a terribly ugly red bubble!
I have programmed an useful jQuery Plugin to create easily smart bubble popups with only a line of code in jQuery!
What You can do:
- attach popups to any DOM element!
- mouseover/mouseout events automatically managed!
- set custom popups events!
- create smart shadowed popups! (in IE too!)
- choose popup’s style templates at runtime!
- insert HTML messages inside popups!
- set many options as: distances, velocity, delays, colors…
Popup’s shadows and colorized templates are fully supported by
Internet Explorer 6+, Firefox, Opera 9+, Safari
You can download sources from
http://plugins.jquery.com/project/jqBubblePopup
QTip has bug with jQuery 1.4.2. I had to switch to jQuery Bubble Pop up http://www.vegabit.com/jquery_bubble_popup_v2/#examples and it works great!
Sounds to me you dn't want the mouse over events: you want the jQuery hover() event.
And what you seem to want is a "rich" tooltip, in which case I suggest jQuery tooltip. With the bodyHandler option you can put arbitrary HTML in.
I'm trying to make a "bubble" that can
popup when the onmouseover event is
fired and will stay open as long as
the mouse is over the item that threw
the onmouseover event OR if the mouse
is moved into the bubble. My bubble
will need to have all manners of html
and styling including hyperlinks,
images, etc.
All those events fully managed by this plugin...
http://plugins.jquery.com/project/jqBubblePopup
ColorTip is the most beautiful i've ever seen
The new version 3.0 of the jQuery Bubble Popup plugin supports jQuery v.1.7.2, currently the latest and stable version of the most famous javascript library.
The most interesting feature of the 3.0 version is that You can use together jQuery & Bubble Popup plugin with any other libraries and javascript frameworks like Script.aculo.us, Mootols or Prototype because the plugin is completely encapsulated to prevent incompatibility problems;
jQuery Bubble Popup was tested and supports a lot of known and “unknown” browsers; see the documentation for the complete list.
Like previous versions, jQuery Bubble Popup plugin continues to be released under the MIT license; You are free to use jQuery Bubble Popup in commercial or personal projects as long as the copyright header is left intact.
download the latest version or visit live demos and tutorials at
http://www.maxvergelli.com/jquery-bubble-popup/
Autoresize simple Popup Bubble
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="bubble.css" type="text/css" rel="stylesheet" />
<script language="javascript" type="text/javascript" src="jquery.js"></script>
<script language="javascript" type="text/javascript" src="bubble.js"></script>
</head>
<body>
<br/><br/>
<div class="bubbleInfo">
<div class="bubble" title="Text 1">Set cursor</div>
</div>
<br/><br/><br/><br/>
<div class="bubbleInfo">
<div class="bubble" title="Text 2">Set cursor</div>
</div>
</body>
</html>
bubble.js
$(function () {
var i = 0;
var z=1;
do{
title = $('.bubble:eq('+i+')').attr('title');
if(!title){
z=0;
} else {
$('.bubble:eq('+i+')').after('<table style="opacity: 0; top: -50px; left: -33px; display: none;" id="dpop" class="popup"><tbody><tr><td id="topleft" class="corner"></td><td class="top"></td><td id="topright" class="corner"></td></tr><tr><td class="left"></td><td>'+title+'</td><td class="right"></td></tr><tr><td class="corner" id="bottomleft"></td><td class="bottom"><img src="bubble/bubble-tail.png" height="25px" width="30px" /></td><td id="bottomright" class="corner"></td></tr></tbody></table>');
$('.bubble:eq('+i+')').removeAttr('title');
}
i++;
}while(z>0)
$('.bubbleInfo').each(function () {
var distance = 10;
var time = 250;
var hideDelay = 500;
var hideDelayTimer = null;
var beingShown = false;
var shown = false;
var trigger = $('.bubble', this);
var info = $('.popup', this).css('opacity', 0);
$([trigger.get(0), info.get(0)]).mouseover(function () {
if (hideDelayTimer) clearTimeout(hideDelayTimer);
if (beingShown || shown) {
// don't trigger the animation again
return;
} else {
// reset position of info box
beingShown = true;
info.css({
top: -40,
left: 10,
display: 'block'
}).animate({
top: '-=' + distance + 'px',
opacity: 1
}, time, 'swing', function() {
beingShown = false;
shown = true;
});
}
return false;
}).mouseout(function () {
if (hideDelayTimer) clearTimeout(hideDelayTimer);
hideDelayTimer = setTimeout(function () {
hideDelayTimer = null;
info.animate({
top: '-=' + distance + 'px',
opacity: 0
}, time, 'swing', function () {
shown = false;
info.css('display', 'none');
});
}, hideDelay);
return false;
});
});
});
bubble.css
/* Booble */
.bubbleInfo {
position: relative;
width: 500px;
}
.bubble {
}
.popup {
position: absolute;
display: none;
z-index: 50;
border-collapse: collapse;
font-size: .8em;
}
.popup td.corner {
height: 13px;
width: 15px;
}
.popup td#topleft {
background-image: url(bubble/bubble-1.png);
}
.popup td.top {
background-image: url(bubble/bubble-2.png);
}
.popup td#topright {
background-image: url(bubble/bubble-3.png);
}
.popup td.left {
background-image: url(bubble/bubble-4.png);
}
.popup td.right {
background-image: url(bubble/bubble-5.png);
}
.popup td#bottomleft {
background-image: url(bubble/bubble-6.png);
}
.popup td.bottom {
background-image: url(bubble/bubble-7.png);
text-align: center;
}
.popup td.bottom img {
display: block;
margin: 0 auto;
}
.popup td#bottomright {
background-image: url(bubble/bubble-8.png);
}
Tiptip is also a nice library.
You can use qTip for this; However you'd have to code a little for launching it on mouseover event; And in case you want a default watermark on your text fields, you'd have to use the watermark plugin...
I realized that this leads to lot of repetitive code; So I wrote a plugin on top of qTip that makes it really easy to attach informational popup to form fields. You can check it out here: https://bitbucket.org/gautamtandon/jquery.attachinfo
Hope this helps.