JavaScript - Help! Popup Box Follow The Mouse
hi
I have a popup box on a tag and I want to that this box will follow the mouse cursor when is onmouseover. site: http://www.actual-news.co.uk can you help me please thank you this is my popup box javascript code: Code: $(function () { $('.bubbleInfo').each(function () { // options var distance = 0; var time = 250; var hideDelay = 30; var hideDelayTimer = null; // tracker var beingShown = false; var shown = false; var trigger = $('.trigger', this); var popup = $('.popup', this).css('opacity', 0); // set the mouseover and mouseout on both element $([trigger.get(0), popup.get(0)]).mouseover(function () { // stops the hide event if we move from the trigger to the popup element if (hideDelayTimer) clearTimeout(hideDelayTimer); // don't trigger the animation again if we're being shown, or already visible if (beingShown || shown) { return; } else { beingShown = true; // reset position of popup box popup.css({ top: 10, left: 50, display: 'block' // brings the popup back in to view }) // (we're using chaining on the popup) now animate it's opacity and position .animate({ top: '-=' + distance + 'px', opacity: 1 }, time, 'swing', function() { // once the animation is complete, set the tracker variables beingShown = false; shown = true; }); } }).mouseout(function () { // reset the timer if we get fired again - avoids double animations if (hideDelayTimer) clearTimeout(hideDelayTimer); // store the timer so that it can be cleared in the mouseover if required hideDelayTimer = setTimeout(function () { hideDelayTimer = null; popup.animate({ top: '-=' + distance + 'px', opacity: 0 }, time, 'swing', function () { // once the animate is complete, set the tracker variables shown = false; // hide the popup entirely after the effect (opacity alone doesn't do the job) popup.css('display', 'none'); }); }, hideDelay); }); }); }); Similar TutorialsI'm wondering if theirs a way to make a dim light, sorta like a candle follow my mouse cursor on a webpage?
Hi, Is it possible to rotate a dial to follow the mouse cursor? I'm trying to recreate this: http://verbdesign.com/hl/rockwell/index.html but would rather it worked like this: http://www.actionscript.org/resource...-II/Page1.html ...but in javascript. Any help extremely welcome. Thanks, Richard I've got to have a typo somewhere, but i can't seem to find it. I need a new pair of eyes to point it out for me. background: trying to code a mouseover link for a nav bar. everything is working( hyperlink, normal image shows up) but when i mouse over the image swap doesn't happen. I have 2 parts of code. 1st preloads images and does the swap function. loads in <head> See below: Code: <SCRIPT language="javascript" type="text/javascript"> if (document.images) { /* preload images */ var subcontractorsOn = new Image (); subcontractorsOn.scr = "subcontractorsOn.gif"; var subcontractorsOff = new Image (); subcontractorsOff.scr = "subcontractorsOff.gif"; } function mouseOn (imgName) { if (document.images) document [imgName].scr = eval (imgName + "On.scr"); } function mouseOff (imgName) { if (document.images) document [imgName].scr = eval (imgName + "Off.scr"); } </SCRIPT> 2nd just calls the functions to preform the swap. this is in the <body> see code below Code: <a href="subcontractors.htm" onMouseOut="mouseOn('subcontractors')" onMouseOver="mouseOff('subcontractors')"> <img src="subcontractorsOff.gif" height="40" width="133" name="subcontractors" id="subcontractors" border="0" alt="subcontractors"></a> any insight would be great. regards, Fatmann66 Need a little help. I have a project to do for a client and he wants a "Follow Scrolling Style Menu" He gave me an example of the exact one he wants, http://redvsblue.com. When you scroll down the page, you'll see that the menu follows you on the top and when you get back to the top of the page, it locks back where its suppose to be. Trouble is I cant find anywhere that shows how to do it. I was able to *rip* the code from redvsblue and modify it (but I highly doubt thats legal ) So any help would be much appreciated. thanks in advance.
Hi, I'm kinda hoping this is possible but haven't found any reference to it... I have a parent page that opens a popup on click that launches a sidebar navigation on the right of the screen and resizes the parent page. What I am wanting to do is create a second popup (approx 250px high) that opens below the navigation (which is only around 600px high) but I have noticed that even when you have no status bar in the popup windows, they can still end up overlapping because of additional tools or plugins that the viewer has in their browser. Is there any way to get the popups to butt up against each other instead of overlapping? More like a relative popup? Any assistance would be appreciated. :-) hi, when i mouseon an image, how can i make it so, the image i'm mousingon and a second image both fade into alternate images, and then fade back out to the original images when i mouseoff? here is an example- http://www.javascript-fx.com/develop...t/ifctest.html . any help would be most appreciated.
Hi I have a requirement....I have a timer on a page. If the user leave the page (mouse goes off of that page) the timer starts and continues...and when the user comes into that page(mouse over that page) the timer goes off/STOP....Is this can be done?? using javascript??? pls help... I wrote this code for 1 image, and it is working perfectly fine: Code: function swapImage() { document.getElementById("linkedin").src = "images/glinkedin.png"; } function restoreImage() { document.getElementById("linkedin").src = "images/linkedin.png"; } the problem starts when I want to use this code for 4 images, can anyone correct it please: Code: function swapImage() { document.getElementById("linkedin").src = "images/glinkedin.png"; } { document.getElementById("facebook").src = "images/gfacebook.png"; } { document.getElementById("google").src = "images/ggoogle.png"; } { document.getElementById("twitter").src = "images/gtwitter.png"; } function restoreImage() { document.getElementById("linkedin").src = "images/linkedin.png"; } { document.getElementById("facebook").src = "images/facebook.png"; } { document.getElementById("google").src = "images/google.png"; } { document.getElementById("twitter").src = "images/twitter.png"; } I just want to know : the animation you know the eyes of the who follow the mouse I can not put it on my web how could I please help me thank you Hi frds , I have requirement that when ever I hover the mouse on image then the mouse pointer should be hand symbol , So for that I have written the code as <a style="cursor: hand;"> <img ....?</a> in IE it works fine but in Firefox it doesnot works Note : I have already used as <a href="#"> <img ....></a> but due to this , the screen is jumping when we click on image Thanks Raj Hi, Does anyone knows how to use this effect using javascript? http://www.modonline.com/ Really appreciate if someone can help me. Thank You, Nadun How to mouse over the image then the words will appear below it?
I have a pop-up message box, that I'd like help changing to a mouse-over message box. Any help would be appreciated. Thanks Code: <style> .msg { display:block; position:absolute; top:300px; left:300px; width:350px; background-color:#eeeeff; border-style:solid; border-width:1px; padding:15px 20px 5px 20px; } .msgclose { text-decoration:none; font-size:0.9em; font-variant:small-caps; margin-top:10px; } </style> <div id="popupMsg" class="msg"> You must read this message.<br> This is a test message box <br /> <div style="width:100%; text-align:right;"> <a class="msgclose" href="#" onclick="document.getElementById('popupMsg').style.display = 'block'; return false;"><font color="#800000">Close Window</font></a> </div> background: display 3-4 pictures and a generic parargraph. when you mouseover a picture the parargragh changes to the bio of the person pictured and doesn't change until a different picture is mouseovered or a reset butten is clicked. current code: i have adapted some code I found (thank you, donator) to basicly hide and unhide a span ID on mouseover. if functions as i want but the element id is hardcoded and i would like it to be dynamic on mouse location. not being that familair w/ coding and / or javascript; i'm stuck. Code: <script type="text/javascript"> var el; var cpic; //elementId via mouse position window.onload=function() { el=document.getElementById('pic1'); el.onmouseover=function() { changeText('hide','show') } } function changeText(cl1,cl2) { document.getElementById('span1').className=cl1; document.getElementById('span2').className=cl2; } </script> so the above works for 1 image, but as you can see "pic1" is hard coded. i figured i could define "cpic" to takes it's place, but i'm not sure how to get the elementId (i'm assuming it would be from the mouse position). if the above code is totaly the wrong approach let me know. it was just the first thing i found that seemed to do what i needed. on the HTML side "span1" is the default text and "span2" is the hidden mouseover text. i'm assuming that by adding 2 more pictures i'll need to add "span3" and "span4". i'll also have to find a way of hiding the other spans. I.E. if i go from pic2 to pic3 then, the pic2 text will have to be hidden before pic3 text is displayed. one thing i don't want to do is restrict the mouse to be focused on the picture to display the text. the text should change only when another picture is in focus or the rest button is clicked. any direction / suggestions would be a big help. regards, Fatmann66 is it possible to make the mouse be at a given position on the screen using javascript for example i am writing a element resize script and i would like to have it so when u click on the resize button the cursor moves to the bottom right corner of the element for the starting position
Hi once again! Is it possible to detect was the mouse on the move or not in the moment when button is released ? Hi, Wondering if anyone can help me out with some javascript. How do I check upon clicking a random object on the page that the object onmousedown is an image or not? Any help is much appreciated. -cantonboi I Need some help with mouse overs. I have 2 images, Image A and Image B. I need to mouse over Image A and have Image B change. Please help.
|