I have a page with 4 tiles that display 2 options when a mouse hovers over it: New Form and Form List
However, I want these two options hidden unless the user is currently hovered over the tile. This is working fine but it does it 2 or 3 times after the first hover event. Basically, on page load, the 2 options are hidden and the tiles are displayed. Once I hover into the first tile, the two options then get displayed using the .show() method. If my mouse leaves the tile, the .hide() method is called hiding the two options.
However, if I hover my mouse back into the same tile, it executes both .hide() and .show() 2 times and sometimes even more than that. I'm assuming I'm doing something stupid but can't find any help on the web. JSFiddle can be found here: http://jsfiddle.net/n97M8/
CODE:
<!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>
<title></title>
<style type="text/css">
.container
{
height: 150px;
text-align:center;
}
.FormTiles
{
position: relative;
text-align: center;
vertical-align: middle;
float:left;
width: 150px;
height: 0px;
margin-left: auto;
margin-right: auto;
background-color: green;
color: white;
display: inline;
font-family: Verdana;
font-size:small;
margin-right: 5px;
padding-bottom: 150px;
}
#optionsContainer, #optionsContainer1, #optionsContainer2, #optionsContainer3
{
position: absolute;
width: 100%;
text-align: center;
bottom: 0;
background-color: gray;
padding-top: 3px;
padding-bottom: 3px;
display: none;
}
</style>
</head>
<body>
<div class="container">
<div class="FormTiles" id="workForInspector">Work For Inspector Form
<div id="optionsContainer">
<div class="FormTilesNewForm">New Form</div>
<div class="FormTilesToList">Form List</div>
</div>
</div>
<div class="FormTiles" id="Form2">Form 2
<div id="optionsContainer1">
<div class="FormTilesNewForm">New Form</div>
<div class="FormTilesToList">Form List</div>
</div>
</div>
<div class="FormTiles" id="Form3">Form 3
<div id="optionsContainer2">
<div class="FormTilesNewForm">New Form</div>
<div class="FormTilesToList">Form List</div>
</div>
</div>
<div class="FormTiles" id="Form4">Form 4
<div id="optionsContainer3">
<div class="FormTilesNewForm">New Form</div>
<div class="FormTilesToList">Form List</div>
</div>
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#workForInspector").hover(function () {
$("#optionsContainer").show("fast");
});
$("#workForInspector").mouseout(function () {
$("#optionsContainer").hide("fast");
});
});
</script>
</body>
</html>
Use jQuery's .stop() function to stop the queueing of mouse movements:
$("#workForInspector").hover(function () {
$("#optionsContainer").stop().show("fast");
}, function () {
$("#optionsContainer").stop().hide("fast");
});
jsFiddle example
Related
I want fix on mouse over and mouse out so it can work for div.As you can see it cant worked,i dont know why.I want to do it when i move my mouse to change it to yellow,the other colors should be aqua.I did a lot but it didn't worked for me.How can i do single div be yellow by mouserover and how can i do it mouseout to do it aqua?thanks a lot
<!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" lang="en">
<head>
<title>exams</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
#style
{
background-color: #00FFFF;
border-style: dotted;
}
#node2
{
background-color:#00FFFF;
border-style: dashed;
}
#node3
{
background-color: #00FFFF;
border-style: solid;
}
#node4
{
background-color: #00FFFF;
border-style: ridge;
}
#node5
{
background-color: #00FFFF;
border-style: inset;
}
#content {
margin:500px;
height: 800px;
width: 2000px;
background-color: red;
}
.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 200px;
background-color: white;
}
.feedback {
position: relative;
width: 60px;
}
#mybutton {
position: absolute;
top: 10px;
right: 10px;
}
}
#mybutton2{
position: absolute;
top:30px;
right:30px;
}
</style>
</head>
<body onload="myFunction()">
<h1 id="demo" onmouseover="mouseOver()" onmouseout="mouseOut()">
<div style="width:300px; height:200px; overflow:auto; background-color:#00FFFF;">
<span id="redText" style="color:red ">Red text for scroll test.</span>
<div style="height:200px;"></div>
</h1>
<h2 id="demo" onmouseover="mouseOver()" onmouseout="mouseOut()">
<div id="node2">keimeno1</div> </h2>
<h3 id="demo" onmouseover="mouseOver()" onmouseout="mouseOut()">
<div id="node3">keimeno2</div></h3>
<h4 id="demo" onmouseover="mouseOver()" onmouseout="mouseOut()">
<div id="node4">keimeno3</div><h4>
<h5 id="demo" onmouseover="mouseOver()" onmouseout="mouseOut()">
<div id="node5">keimeno4</div>
</div>
</h5>
<script>
function myFunction() {
alert("Page is loaded");
}
function mytimeFunction() {
setInterval(function(){ alert("Hello"); }, 5000);
timetrick();
}
function timetrick() {
var elmnt = document.getElementById("content");
elmnt.scrollIntoView();
}
}
function mouseOver() {
document.getElementById("demo").style.color = "yellow";
}
function mouseOut() {
document.getElementById("demo").style.color = "aqua";
}
</script>
<div id="mybutton">
<button class="1">first button</button>
</div>
<div id="mybutton2">
<button class="2">Second button</button>
</div
</body>
</html>
The solution for your functionality to work is to update the formatting in your script. It is quite obvious it wouldn't work because the script has an abundance of syntax errors. Firstly check your script block and you will find you've added a lone brace after the timetrick func, that prevents the mouseOver func to even get defined during runtime. Also the header tags (h1, h2,...) are very messy. For example, you have an extra div endtag before the h5 endtag. Also, like many others have already stated: remove the 'demo' id's. They are unnecessary. And add document.getElementById("node2").style.color = "yellow"; instead of the demo part. duplicate those lines inside of the function for every node in your body. This should be more than enough to make the mouseover work correctly.
Something like that could be helpful?
$('.acqua').mouseover(function() {
$('.acqua' ).css('background-color','yellow');
});
$('.acqua').mouseout(function() {
$('.acqua' ).css('background-color','aqua');
});
.acqua{
background-color: aqua;
padding: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="acqua">Some text here</div>
Is it possible to check via javascript if client click on background image which is defined in css file to some div class ? ..
.volume {
width: 40%;
margin: auto;
padding-left: 40px;
background: url(../img/speaker.png) left center no-repeat;
height: 30px;
line-height: 30px;
margin-top: 2em;
}
I really don t want to change HTML file because I am not an owner..
here is the HTML code
<div class="volume">
<div class="progress-bar">
<div class="progress">
<span></span>
</div>
</div>
</div>
You can accomplish this simply by placing a transparent element over the speaker icon, and assigning a click event to it.
See this jsfiddle.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<style type="text/css">
.volume {
width: 40%;
margin: auto;
padding-left: 40px;
/*background: url(../img/speaker.png) left center no-repeat;*/
background: url(http://findicons.com/files/icons/1672/mono/32/speaker.png) left center no-repeat;
height: 30px;
line-height: 30px;
margin-top: 2em;
}
#overlay {
z-index: 1000;
background-color: transparent;
height: 32px;
width: 32px;
position: relative;
right:40px;
bottom:2px;
}
</style>
</head>
<body>
<div class="volume">
<div class="progress-bar">
<div class="progress">
<span></span>
</div>
</div>
</div>
<script type="text/javascript">
var $overlay = $('<div id="overlay""></div>').click(function() { overlay_click(); } );
$('div.volume').prepend($overlay);
function overlay_click() {
alert('icon was clicked');
}
</script>
</body>
</html>
I'm not sure what / how this looks on your end, but if you wish to check if a user clicked on the .volume div (and not the .progress-bar or .progress), you can simply check the target of the click event:
var volume = document.querySelector('.volume');
volume.addEventListener('click', function(e) {
// check if it was the .volume div
if (e.target.className === 'volume') {
// do something
}
});
https://jsfiddle.net/j64fpb3m/1/
can you please tell me how to add hidden div or button behind the button?Actully I need to increase the click area without increase the x image size so that user can click in whole area.?
here is my code
<!DOCTYPE html>
<html>
<head>
<link href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div data-role="page" id="wrapper">
<button id="openPopup">openPOP</button>
<div data-role="popup" data-dismissible='false' id="testCaseId" data-theme="b" data-overlay-theme="a">Close
<div data-role="fieldcontain">
<label for="testCaseIDValue">TestCase Name:</label>
<input type="text" name="testCaseIDValue" id="testCaseIDValue" value="" class="inputTextTestCase" />
</div>
Done
</div>
</div>
</body>
</html>
js Code
$(function(){
$('#openPopup').click(function(){
$( "#testCaseId" ).popup( "open" );
})
})
Use the close icon as a centered background image of a larger element.
HTML
CSS
a {
display: block;
background: url("http://icons.iconarchive.com/icons/custom-icon-design/mini/24/Close-icon.png") no-repeat center center #eee;
width: 50px;
height: 50px;
}
Demo: http://jsfiddle.net/eAxb8/
Try setting a <div> that acts as a container for the button graphic and is the same color as your background, but clickable.
For example,
<a href = "whatever.com">
<div id="hidden_button">
<div id="button_graphic">
Button Text
</div>
</div>
</a>
stylesheet.css
a {
text-decoration: none;
}
#hidden_button {
background: #ffffff;
width: 300px;
height: 300px;
}
#button_graphic {
width: 150px;
height: 150px;
border: 4px solid black;
border-radius: 5px;
color: #ffffff;
text-align: center;
background-color: #F38630;
margin: auto;
margin-top: 75px;
}
If I've done my CSS correctly, this should create a square button with rounded edges that is 150px by 150px, with a container around it that is 300px by 300px and appears invisible, but is still clickable. Adjust the sizes to meet your needs.
To me, it seems like you look for an invisible area that acts like a button.
See the following fiddle. To remove the blue color, just delete the code style="background-color:lightblue"
http://jsfiddle.net/p943a/2/
I have a particular problem that I need help with.
I have a div which contains a lot of other divs which I would like to be able to zoom into. for example, a few of the child divs have text and I'd like the user to be able to zoom in to see what they say.
here is an example -- > http://jsfiddle.net/du5ye/3/
I've though that maybe I could use jquery to change the classes of everything inside, but I'd like to not hard code the new sizes, rather every property in the main wrapper div would get larger by a percentage as the user scrolls his mouse wheel. In addition, I'd like the user to be able to scroll around the div by dragging, quite like google maps. Is this kind of thing possible? and how would I go about it?
Here is the entire code for those that would rather avoid jsfiddle;
<!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" />
<title>Untitled Document</title>
<link href="Style.css" rel="stylesheet" type="text/css" />
</head>
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<style>
.layoutGreys {
background-color: #DDD;
border: solid thin #BBB;
padding-left: 10px;
padding-right: 10px;;
float: left;
}
.Group{
background-color: #955;
width: 50px;
height: 35px;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
margin-bottom: 10px;
float: left;
}
.Divider{
width: 10px;
height: 35px;
float: left;
<!--border-top: medium solid #999;-->
margin-top: 10px;
}
.wrapper{
width: 560px;
height: 175px;
background-color: #333;
border: thick #888 solid;
}
</style>
<body onload="CreateBox()">
<div id="wrapper" class="wrapper">
<div class="layoutGreys">
<div class="Group"></div>
<!-- Parent -->
<div class="layoutGreys">
<!-- Parent Icon -->
<div class="Group" style="float: none;"></div>
<!-- Children -->
<div class="layoutGreys">
<div class="Group"></div>
<div class="Divider"></div>
<div class="Group"></div>
<div class="Divider"></div>
<!-- Parent -->
<div class="layoutGreys">
<!-- Parent Icon -->
<div class="Group" style="float: none; "></div>
<!-- Children -->
<div class="layoutGreys">
<div class="Group"></div>
<div class="Divider"></div>
<div class="Group"></div>
<div class="Divider"></div>
<div class="Group"></div>
</div>
</div>
<div class="Divider"></div>
<div class="Group"></div>
</div>
</div>
<div class="Group"></div>
</div>
</div>
</body>
</html>
Have you tried the css zoom property? or maybe the css-transforms like scale()?
You can make your outer div overflow: scroll; and bind mouse down events to scroll the div for the pan and drag effect.
* I know this question is old, but It may help future visitors.
Try modifying this plugin to your needs - http://www.htmldrive.net/items/demo/394/JQuery.iviewer-zoom-image-and-to-drag-effect
Use zoomooz.js
It is a jQuery plugin for making web page elements zoom. It can be used for making Prezi like slideshows and for zooming to images or other details.
I am trying to use codaslider plugin and it does not work for me. I think I am doing everyhtings right but still its not working. Can someone help me finding out what am I making mistake. Here is my code below. The problem is it does not slide from one panel to antoher. I already went through the documentation but I do not know what is the mistake i am making here.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="plugins/jquery.coda-slider-2.0.js"></script>
<script type="text/javascript" src="plugins/jquery.easing.1.3.js"></script>
<script type="text/javascript">
$().ready(function() {
$('#codaslider5').codaSlider({
dynamicArrows: false,
dynamicTabs: false
});
});
</script>
<style>
#nav { width: 500px; background: blue; height: 50px; }
ul { list-style: none; margin: 0; }
#mainWrapper #nav ul li { float: left; margin-right: 40px; }
#slider { width: 500px; background: red; overflow: hidden; }
.codaslider { width: 1500px; background: greenyellow; }
.panel { width: 500px; height: 100px; float: left; }
.panel1 { background: green; }
.panel2 { background: lightblue; }
.panel3 { background: yellow; }
</style>
<title>title</title>
</head>
<body>
<div id="mainWrapper">
<div id="nav">
<ul>
<li class="tab1">Panel 1</li>
<li class="tab2">Panel 2</li>
<li class="tab3">Panel 3</li>
</ul>
</div>
<div id="slider">
<div class="codaslider" id="codaslider5">
<div class="panel panel1">
<h2>Panel 1</h2>
<p>This is panel 1</p>
</div>
<div class="panel panel2">
<h2>Panel 2</h2>
<p>This is panel 2</p>
</div>
<div class="panel panel3">
<h2>Panel 3</h2>
<p>This is panel 3</p>
</div>
</div>
</div>
</div>
</body>
Well, I must have been messing around with this for the past hour or so, wondering why it didn't work because like you because it all looked like it should be fine.
I think I found the solution. It seems to be that codaSlider is picky about the names you give to your slider objects - they must contain dashes and must be in sequential order.
Your slider is named '#codaslider5', you need to change this to '#coda-slider-1' (if you use 2, 3...n it doesn't work - presumably it expects you to actually have sliders 1, 2, 3, 4 if you want to use an ID of 5).
Here we go:
Change:
$('#codaslider5').codaSlider({
to
$('#coda-slider-1').codaSlider({
Next, change:
<div id="nav">
to
<div id="coda-nav-1">
Next, change:
<div class="codaslider" id="codaslider5">
to
<div class="coda-slider" id="coda-slider-1">
Or for lazyness here is the fixed file, and the diff.
This will mess with your CSS so you'll have to fix it. But hopefully this gets you back on track.