|
JavaScript - Popup On Hovering Os Mouse
Similar Tutorialshi 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);
});
});
});
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 I have a splash page for my website. On it is one main image and four smaller, navigational ones that when are hovered on will change the main image. I found a script to use, but it only works for one smaller image. Here's the script and where I have placed it in the body tag. Code: <SCRIPT language="JavaScript">
<!--
if (document.images)
{
pic2on= new Image(100,25);
pic2on.src="blog.jpg";
pic2off= new Image(100,25);
pic2off.src="back1.jpg";
pic3on= new Image(100,25);
pic3on.src="collective.jpg";
pic4on= new Image(100,25);
pic4on.src="hosting.jpg";
pic5on= new Image(100,25);
pic5on.src="portfolio.jpg";
}
function lightup(imgName)
{
if (document.images)
{
imgOn=eval(imgName + "on.src");
document[imgName].src= imgOn;
}
}
function turnoff(imgName)
{
if (document.images)
{
imgOff=eval(imgName + "off.src");
document[imgName].src= imgOff;
}
}
//-->
</SCRIPT>
<body>
<div id="container">
<div id="title">
<IMG SRC="back1.jpg" name="pic2" width="500px" height="456px" border="0">
<p>
<A HREF="newpage.html" onMouseover="lightup('pic2')" onMouseout="turnoff('pic2')">
<IMG SRC="blog.png" name="pic1" width="100px" height="50px" border="0">
</A> //
<A HREF="newpage.html" onMouseover="lightup('pic3')" onMouseout="turnoff('pic3')">
<IMG SRC="collective.png" name="pic1" width="100px" height="50px" border="0">
</A> //
<A HREF="newpage.html" onMouseover="lightup('pic4')" onMouseout="turnoff('pic4')">
<IMG SRC="hosting.png" name="pic1" width="100px" height="50px" border="0">
</A> //
<A HREF="newpage.html" onMouseover="lightup('pic5')" onMouseout="turnoff('pic5')">
<IMG SRC="portfolio.png" name="pic1" width="100px" height="50px" border="0">
</A>
</body>
Any assistance on where I've gone wrong is appreciated. Thanks. Hi , I have this code in whitch I wanned an element to exchange between 2 CSS3 classes, but it isn't working, can any one help me out? Here it goes: Code: var addClass = function (valor, elemento) {
if (!elemento.className) {
elemento.className = "nothing";
} else if (elemento.className.indexOf(valor) !== -1) {
return;
} else {
elemento.className += " ";
elemento.className += valor;
elemento.getAttribute("class");
}
};
var linkHover = function () {
var links = document.getElementsByTagName("a"), aLen = links.length, i;
console.log(links);
console.log(aLen);
for (i = 0; i < aLen; i += 1) {
links[i].onmouseover = function () {
if (this.className.indexOf("rotateRight") === -1 && this.className.indexOf("rotateLeft") === -1) {
addClass("rotateRight", this);
}
};
links[i].onmouseout = function () {
if (this.className.indexOf("rotateRight") !== -1) {
this.className.replace(/rotateRight/gi, "rotateLeft");
} else if (this.className.indexOf("rotateLeft") !== -1) {
this.className.replace(/rotateLeft/gi, "rotateRight");
}
console.log(this.className);
};
}
};
window.onload = function () {
linkHover();
};
Thanks! 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 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 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 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 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
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 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>
How to mouse over the image then the words will appear below it?
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 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... Do you guys have any idea how I could move a div around a page on mouse down? Like drag and drop it where I want it to be on the page and grab its x,y position? If you guys have any code snippets or tips that would be greatly appreciated thanks! Im wanting to make a div move according to where the mouse is IE if the mouse is on the left the div moves right and visa versa. I've got the pixels for where the middle of the screen is but im unsure what to do next. If anyone can help ill be very grateful, ill try and find an example to help illustrate what i mean. Error: Code: Error ``TypeError: window.event is undefined'' [x-] in file ``file:///C:/Users/Martyn%20Ball/Desktop/test.php#'', line 6, character 0. Code: Code: <html>
<head>
<title>Testing Javascript</title>
<script type="text/javascript">
function test() {
alert(window.event.clientX);
}
function doSomething(e) {
var posx = 0;
var posy = 0;
if (!e) var e = window.event;
if (e.pageX || e.pageY) {
posx = e.pageX;
posy = e.pageY;
}
else if (e.clientX || e.clientY) {
posx = e.clientX + document.body.scrollLeft
+ document.documentElement.scrollLeft;
posy = e.clientY + document.body.scrollTop
+ document.documentElement.scrollTop;
}
// posx and posy contain the mouse position relative to the document
// Do something with this information
}
</script>
</head>
<body>
X Position: <div id="x"></div>
Y Position: <div id="y"></div>
<br />
<a href="#" onMouseOver="test()">Test Link</a><br />
<a href="#" onClick="doSomething('y')">Type of Event</a>
</body>
</html>
(Taken from external website so I can understand how it works). Hi I have a control on the left side of the page which sits inside a div. The control reacts to where the mouse is positioned within the div. This works fine in IE but I cant get it working in Firefox. Heres what I have: Code: <div id="divcon" class="boxContentLeft" OnMouseMove="SetValues(event);">
function SetValues(event)
{
var ev=(!event)?window.event:event; //Moz:IE
if (ev.pageX) { //Mozilla or compatible
/* The absolute position of the control */
var MarqPos = GetAbsPosition(divcon);
alert('MarqPos x = '+MarqPos.x+'\nMarqPos y = '+MarqPos.y);
/* Relative to this div */
MousePointerDivX = ev.pageX-MarqPos.x;
MousePointerDivY = ev.pageY-MarqPos.y;
alert('MousePointerDivX = '+MousePointerDivX+'\nMousePointerDivY = '+MousePointerDivY);
/* Relative to the top left of the viewable area */
MousePointerClientX = ev.pageX;
MousePointerClientY = ev.pageY;
alert('MousePointerClientX = '+MousePointerClientX+'\nMousePointerClientY = '+MousePointerClientY);
}
else if(ev.clientX) { //IE or compatible
/* Relative to this div */
MousePointerDivX = window.event.x;
MousePointerDivY = window.event.y;
alert('MousePointerDivX = '+MousePointerDivX+'\nMousePointerDivY = '+MousePointerDivY);
/* Relative to the top left of the viewable area */
//MousePointerClientX = window.event.clientX;
//MousePointerClientY = window.event.clientY;
//alert('MousePointerClientX = '+MousePointerClientX+'\nMousePointerClientY = '+MousePointerClientY);
/* The absolute position of the control */
var MarqPos = GetAbsPosition(divcon);
alert('MarqPos x = '+MarqPos.x+'\nMarqPos y = '+MarqPos.y);
/* The mouse position relative to top left of page */
//MousePointerX = mouseX(window.event);
//MousePointerY = mouseY(window.event);
//alert('MousePointerX = '+MousePointerX+'\nMousePointerY = '+MousePointerY);
/* The control relative to the top left of the parent control */
//var OffsetLeft = marquees.offsetLeft;
//var OffsetTop = marquees.offsetTop;
//alert('OffsetLeft = '+OffsetLeft+'\nOffsetTop = '+OffsetTop);
}
else { //old browsers
return false;
}
setInterval("",20);
}
// Calculates the object's absolute position, and width and height
function GetAbsPosition(object) {
var position = new Object;
position.x = 0;
position.y = 0;
if( object ) {
position.x = object.offsetLeft;
position.y = object.offsetTop;
if( object.offsetParent ) {
var parentpos = GetAbsPosition(object.offsetParent);
position.x += parentpos.x;
position.y += parentpos.y;
}
}
position.cx = object.offsetWidth;
position.cy = object.offsetHeight;
return position;
}
Using IE only I didnt need to find out the position of the DIV within the page as I could just use 'window.event.x' which would return the x coordinate within the DIV. I dont think you can do that with Firefox so you have to get the coordinate of the mouse and then subtract the coordinates of the DIV. But when Im calling GetAbsPosition(divcon) I get Error: divcon is not defined. Can somebody please tell me why I can call GetAbsPosition from IE and it works but I get an error calling the same thing in Firefox. Thanks |
|||||||