Mouseover, Mouseout And Onclick In A <TD>
Jul 20, 2005
I am trying to accomplish a task that i thought would be easy -
and at this point - i'm starting to wonder...
I have a table setup, one column, ten rows
All the cells start off with a white background,
as the mouse passes over the cell, the background color
changes to a nice light blue. I have that working ok -
but the trick comes in as - when a user clicks in the
cell - i would like to change the background color to silver,
and when the user moves the mouse off of the cell - the background
will stay silver, until the user clicks another of the cells,
then that cell switches to silver, and the rest of the cells turn
to white
View 1 Replies
ADVERTISEMENT
Jan 29, 2007
I am reading values from a database into a table and I have it so that when the mouse is over a row the row is highlighted blue and when the mouse exits that row the row becomes white again - straight forward.
each row also has a check box with an onclick event and ultimately I would like when the checkbox is checked the row to be highlighted red and remain that colour. The problem is that the mouseover and mouseout events still fire. Is there way to disable these when the box is checked? Code:
View 14 Replies
View Related
Sep 7, 2011
I am a newbie on jQuery. I work on a project which will allow to find a room in a building. On the left of the page there is a plan of the floor, and on the right, a list of the rooms coming from a database. Every room is a link and when the mouse rolls over the link, the room is highlighted on the plan.
I use this function :
$('#link_1').mouseover(function(e) {
$('#sal_1').mouseover();}).mouseout(function(e) {
$('#sal_1').mouseout();}).click(function(e) { e.preventDefault(); });
$('#link_2').mouseover(function(e) {
$('#sal_2').mouseover();}).mouseout(function(e) {
$('#sal_2').mouseout();}).click(function(e) { e.preventDefault(); });
$('#link_3').mouseover(function(e) {
$('#sal_3').mouseover();}).mouseout(function(e) {
$('#sal_3').mouseout();}).click(function(e) { e.preventDefault(); });
But as far as I don't know how many rooms I have, I would like to use it in a loop, something like that :
var indTab = 1;
$('#link_'+indTab).mouseover(function(e) {
$('#sal_'+indTab).mouseover();}).mouseout(function(e) {
$('#sal_'+indTab).mouseout();}).click(function(e) { e.preventDefault(); });
indTab++;
It doesn't work like that. A second idea is to use .each()
$("[id^=link_]").each( function() { // all the id's starting with link_
$('#link_'+indTab).mouseover(function(e) {
$('#sal_'+indTab).mouseover();}).mouseout(function(e) {
$('#sal_'+indTab).mouseout();}).click(function(e) { e.preventDefault(); });
});
No success.
View 3 Replies
View Related
Nov 30, 2011
i have a problem in mouseover and mouseout events.when the mouse is on the image a div will show,but when mouse is on that shown div something loops happened.Here is the working example:Jsfiddle
View 2 Replies
View Related
Oct 28, 2010
It appears I can not put a mouseover and mouseout even on the same element. Which I find very strange because css can do it. why cant jquery ? What I am doing is enabling and disabling a textfield based on whether the mouse is over or off the textfield. if its over, its disabled, if its out then its enabled. Is this possible ?
[Code]...
View 2 Replies
View Related
Aug 8, 2010
I have this piece of HTML code:
Code:
<ul>
<li>Cat 1
<div class="actions">Edit | Delete</div>
<ul>
<li>SubCat 1
[Code]...
View 2 Replies
View Related
Feb 13, 2011
How can we show or hide a div on mouse over and mouseout. For the example below When we mouse over to the div1, div2 should be shown and div1 should be hide and vice versa.
E.g.:
<html>
<body>
<div id="div1">
div 1 content goes here....
</div>
<div id="2">
div2 content goes here.........
</div>
</body>
</html>.
View 5 Replies
View Related
Aug 15, 2010
How can ignore queuing in mouseover/mouseout in such codes like this:
I dont want cubes blink N times when the user does mouseover/out N times.
View 1 Replies
View Related
Aug 13, 2011
I have a mouseover part, but it (when it complete the mouseover action) also execute the mouseout actions, which is not supposed to happen.
My code:
$('#navigation li').live({
mouseover: function()
{
$(this).animate(
[Code]....
since it is not supposed to execute the mouseout actions when going mouseover.
View 1 Replies
View Related
Apr 2, 2009
I am trying to add mouseout and mouseover event to flash object using document.write so that I can show or hide text when someone rollover on flash but I am not sure how to do that? check my code and make any necessary changes to it.
<script language="JavaScript" type="text/javascript">
function CngTxt(id,txt){
var obj=document.getElementById(id);
if (txt){ obj.innerHTML=txt; }
[Code]....
View 2 Replies
View Related
Dec 6, 2010
This is what my code is supposed to do:
1. create a select list that changes the photo showing, (which I have)
2. create script so that when the user hovers over the image it shows a div
3. when the users mouse is off the image/div shows the coordinates where it last left
4. on mouseout hides the div again (this is the part I'm stuck on)
This is my html:
<style>
#selectdiv
{
position:absolute;
left:10px;
top:10px;
[Code]...
View 1 Replies
View Related
Aug 26, 2007
I need help with a java script that increases image size and decreases on mouseover and mouseout for multiple images per page. In an html page.
This script that I have tried to modify is for one image.
Here is the html page code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<head>
[Code]....
View 9 Replies
View Related
Jan 4, 2010
I'm having issues with the animate procedure in jQuery. I should start by saying that while I am not new to web developement and scripting, I am fairly new to jQuery so this may be fairly elementry to some of you pros out there.
Basically what I am doing is I have an image map with hot spots, when you mouse over a hot spot, another image (an enlarged version of the hot spot) appears (fading in and growing) and then disappearing on mouse out (fading out and shrinking). My problem is odd because it does not happen every time, but "sometimes" when you mouse over the first animation (grown and fade in) will run then second will run (shrink and fade out) and then repeat until you click outside of the hot spot and the popped-up image. I've noticed the problem mainly occurrs in Firefox (3.5) and rarely or never in IE (8) and Chrome (2).
[Code]...
View 1 Replies
View Related
Sep 24, 2009
I am using the fade in and fade out and mouse over and mouse out. What I am doing is creating a menu that fades in when the mouse if over the users image. The problem I run into is that when the background of the menu fades in with the buttons which are links. I notice that if you move the mouse over the buttons/links the menu and buttons fade out.I have 2 elements one is the menus background and the other element is the buttons/links on top of the background.
I have a fade out command when the mouse it off the menu background. So I am guessing when the mouse goes over the links/buttons it acts as if the mouse isn't no longer over the menu background element causing a fade out effect. What can I do to prevent the menu fading out when the mouse is over the buttons that are links. I want the users to be able to put their mouses on the buttons and be able to click on the buttons without the menu fading out but only fade out if the mouse is not longer on the background of the menu and is not over any of the buttons on the menus background.
I was woundering if I should do a if statement to check the conditions which would be where the mouse is over. If the mouse is over either the menu background meaning the menu or is over the buttons on the menu background meaning the opitions in the menu. Then don't do a fade out only do a fade out if the mouse is not over either the buttons or the menu itself.
View 4 Replies
View Related
Feb 1, 2011
I would like to write a jquery function that will work like this:
$(document).ready(function(){ifclick is made then do:
$("#wheel1").click(function(){ $(".wheels").show(500);});
leave the function
else:$("#wheel1").mouseover(function(){ $(".wheels").show(500);});
$("#wheel1").mouseout(function(){ $(".wheels").hide(500);});
View 1 Replies
View Related
Aug 19, 2010
I am trying to build this page where there are 3 levels of icons/contents. When user hovers on 1st level, they see the 2nd level. They now hovers on the second level and suppossed to get the 3rd levels of contents.My 1st/2nd levels worked fine.But when I added the 3rd level, could not make them to work.Problems: 1. the 2nd levels show up with multiple 3rd level items - suppossed to be all hidden.2. When I hover over the 2nd level - they are like frozen if the 3rd level is displayed. After hiding all the 3rd levels by doing mouseout - when I hover over a 2nd level, 3rd level shows up but when I move over to the next (2nd level), the corresponding 3rd level shows up without hiding the previous one. So again - displays multiple 3rd level items
var cr_event = $('#imgCE');
var info_center = $('#imgIC');
var tab_events = $('#tabCreateEvent');
[code]....
View 3 Replies
View Related
Jun 9, 2010
I am building some video player controls and when I mouse over/out the volume icon, I want the volume slider to appear and disappear. On the mouseout, I want it delayed so what I did was this:
$("#mutebtn").mouseover(
function() {
$("#slider").fadeTo("fast",1);
});
$("#mutebtn").mouseout(
function(){
$("#slider").fadeTo("fast",0).delay(2000);
});
It delays but it puts the delay on the mouseover. So naturally I put the delay on the mouseover and then the delay was on the mouseout which is the correct behavior.
View 15 Replies
View Related
Dec 15, 2009
i would like to show a div on mouseover via toggle and change it back on mouseout. right now my code looks like this:
$(".#image").mouseover(function(){
$(this).next("#posts").fadeToggle(200)
return false;
});
it works on mouseover but i have no about the mouseout part.
View 1 Replies
View Related
Sep 17, 2009
I added mouse in and mouse out affect like this in $
(document).ready function
$(document).ready(function(){
....
$(".StripMe tr").mouseover(function(){
[Code].....
My question is if i used jquery post method to change some div content, than this new div won't have mouseover and mouseout affect anymore, is there anyway to achieve it. Is that needed to trigger ready function again? Another question is can anyone teach me how to add click and dblclick event to the same div, because if i add both of them then it won't trigger dblckick event.
View 1 Replies
View Related
Mar 5, 2009
I am trying to build a Menu that will have a mouseover effect and when clicked will hold the mouseover image on mouseout. The problem I'm having is that when another menu item is clicked it will not reset the original button's mouseout and if the mouse ever touches it again it will, again, hold the mouseout image. I am aware that It would be easier to just use different pages, but I am wanting to eventually have hidden containers with further menu options drop down from the menu (just trying to explain why it needs to hold the image within the same page).
Here is the function that I have built so far(it doesn't work and I know there are some obvious problems with it, I'm mainly just trying to convey the logic I have used thus far). I am a new javascripter, and my experience is mainly with C#. I am trying to use document.(objectname).src as if it were a variable because It should have a value to return. I'm trying to store the mouseover image in var i, reset all the buttons and then put i(should be the mouseover image)back in the (objectname).src. This probably isn't allowed in javascript, but I left it so you can see how my mind is trying to accomplish this task.
Here you go:
function ClearMenu(xx){
var i
i = xx.src
document.news.src='news.jpg'
document.events.src='events.jpg'
document.press.src='press.jpg'
document.aboutus.src='about.jpg'
document.contact.src='contact.jpg'
document.join.src='join.jpg'
document.news.onmouseout="document.news.src='news.jpg'"
document.events.onmouseout="document.events.src='events.jpg'"
document.press.onmouseout="document.press.src='press.jpg'"
document.aboutus.onmouseout="document.aboutus.src='about.jpg'"
document.contact.onmouseout="document.contact.src='contact.jpg'"
document.join.onmouseout="document.join.src='join.jpg'"
xx.src = i
xx.onmouseout = i
}
My attempt to Call this function would look like this:
<img src="news.jpg" name="news" id="news" onmouseover="newshov.jpg" onmouseout="news.jpg" onclick="ClearMenu(news)"
View 7 Replies
View Related
Feb 11, 2010
I have this code for animating a vertical menu. It changes the width of a menu item to using .animate().
So the behaviour now is: When my mouse is over the menu item, it expands (width 220px), when I remove my mouse it shrinks back (width 95px). Now I want it to stay expanded when I click on it and shrink back and expand a new menu item when I click it.
Menu item are listed, using different css classes for designing their looks.
View 2 Replies
View Related
Jan 23, 2010
[Cod]...
What trying to achieve is to have a div which when you mouseover a div and h4 within will change properties.This is working but when you mouseover the div and pass over either the border of the containing div or the h4 text the animate/fadeTo repeat again. Is someone able to tell what Im doing wrong? Also you may notice the function is effecting more than one container div at a time which is not what Im going for.
Is there a way to seperate them like this or somehow?
[Code]...
View 3 Replies
View Related
Oct 15, 2010
I've tested across IE7,Firefox, Chrome, Safari and the only browser I experience this issue in is Opera. I have 3 icons at the bottom of the page (facebook, rainbow, charity logo) and on mouseover the whole site expands downwards (it's not supposed to do that). I've googled for reasons why it would do this but have found none. [URL]...
View 1 Replies
View Related
Nov 3, 2009
How do you hide a div on mouse out. I have a flash button that unhides the div and I want to hide it when the user's mouse is out of the boundaries of the div.
[URL]
here's the java to unhide it
Code Java:
<script type="text/javascript">
function unhide(divID) {
var item = document.getElementById(divID);
[Code]....
View 2 Replies
View Related
May 12, 2006
I have a function that is activated by a mouseover. The function
triggers an image rotation. I need to stop the rotation on the
mouseout but I don't know how to do this. the mouseover triggers the
rotate() function below. currently the mouseout produces the default
image but then it keeps cycling the other images.
<script language="javascript" type="text/javascript">
if(document.images) {
bubbles = new Image
off = new Image
bubbles.src = "images/bubbles.jpg"
off.src = "default.jpg"
}
else {
bubbles = ""
off = ""
}
adImages = new Array("images/whitemarble.jpg", "images/bubbles.jpg",
"images/oak.jpg")
thisAd = 0
imgCt = adImages.length
function rotate() {
if (document.images) {
thisAd++
if(thisAd == imgCt) {
thisAd = 0
}
document.ImgField.src=adImages[thisAd]
setTimeout("rotate()", 3 * 1000)
}
}
</script>
View 4 Replies
View Related
Jan 7, 2010
$
"a.mSelect"
.hover
function
{
var month = $
[Code]...
I have multiple div's acting as buttons, when you over over them it will show the respected div, but I would like this respected div to stay visible until the user hovers over another div button In the
View 3 Replies
View Related
