What is the simplest way to do the following?
When user moves his mouse over the red box- the green box appears
If user moves his cursor from red to green box- the green box doesn't disappear
When user moves his cursor away from the green box (and not back to the red box)- the green box vanishes.
The red box doesn't touch the green box- like on the picture.
Here's what I tried but that doesn't solve the problem:
$('#red').mouseenter(function()
{
$('#green').show();
});
$('#green').mouseleave(function()
{
$('#green').hide();
});
The problem here is that the green box vanishes once you move your cursor from red one.
I think you are trying to make this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
.red {
width: 200px;
height: 200px;
background-color: red;
}
.green {
display: none;
width: 200px;
height: 200px;
background-color: green;
}
.divider {
height: 200px;
}
</style>
</head>
<body>
<div class="red"></div>
<div class="divider"></div>
<div class="green"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".red").mouseenter(function(){
$(".green").show();
});
$(".green").mouseleave(function(){
$(".green").hide();
});
});
</script>
</body>
</html>
Related
I am having is trying to have a grey background, but with text over top of it rather than before or after the grey square.
Here is my code, an HTML document with JS and CSS integrated:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
/* Change svg background color. */
.area {
background-color: #75738a;
}
</style>
</head>
<body>
<svg width="2000px" height="2000px" class="area">
<script>
write("Power up to the top");
</script>
</svg>
<script>
// start game "press any to continue"
document.addEventListener('keypress', (event) => {
}, false);
</script>
</body>
</html>
Previously, I was drawing a square and expecting to be able to put text on it. I realized instead of setting it to print a square, I needed to set the background image in HTML, and use CSS to center and fullscreen it.
<body>
<img src="gymbackground.jpg" id="bg" alt="">
<body>
HTML^
<style>
#bg {
position: fixed;
top: 0;
left: 0;
/* Preserve aspet ratio */
min-width: 100%;
min-height: 100%;
}
</style>
CSS within HTML^
I'm trying to resize a box (orange box), but my issue is that I can ONLY resize it to the right and bottom , but I cannot resize it to the top (I only want to be able to resize it to the top).
Also after re-sizing it to the top I don't want it to resize the green box (I want the green box to be static, meaning that I don't want it to change its size, the orange box should be over it). I have tried and cannot come up with good results. Using jQuery or pure JavaScript works fine with me.
Here's my code:
<html>
<head>
<meta charset="utf-8">
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script><!-- CSS -->
<script>
$(function() {
$( "#orangeBox" ).resizable();
});
</script>
</head>
<body>
<div id="greenBox" class="ui-widget2">
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
</div>
<p></p>
<div id="orangeBox" class="ui-widget">
<p>This is the Orange Box</p>
</div>
</body>
</html>
CSS code:
.ui-widget {
background: orange;
border: 1px solid #DDDDDD;
color: #333333;
}
.ui-widget2 {
background: #cedc98;
border: 1px solid #DDDDDD;
color: #333333;
}
#orangeBox {
width: 300px; height: 150px; padding: 0.5em;
text-align: center; margin: 0;border:2px solid black;
}
#greenBox {
width: 340px; height: 150px; padding: 0.5em;
text-align: center; margin: 0; border:2px solid black;
}
You can do it like this:
$(function() {
$( "#orangeBox" ).resizable({
handles:'n,e,s,w' //top, right, bottom, left
});
});
working example Link in JSFiddle : http://jsfiddle.net/sandenay/hyq86sva/1/
Edit:
If you want it to happen on a button click:
$(".btn").on("click", function(){
var height = $("#orangeBox").offset().top; // get position from top
console.log(height);
$("#orangeBox").animate({
height: "+="+height+'px'
}, 1000);
});
and add this in your HTML:
<button class="btn">Click here to resize</button>
Working fiddle: http://jsfiddle.net/sandenay/hyq86sva/4/
Try this in your script :
$(function() {
$( "#orangeBox" ).resizable({
handles: 'n, e, s, w'
});
});
Hope this helps !!
I use photoswipe plugin. Photoswipe close when i tap close button. But after photoswipe hided, div tap event triggered on image that was under photoswipe div. How i can prevent this behavior?
For example:
<!DOCTYPE HTML >
<html>
<head>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript" src="jquery.mobile-1.0a4.1.js"></script>
<style type="text/css">
div
{
width: 300px;
height: 300px;
}
.first
{
background-color: black;
}
.second
{
width: 200px;
height: 200px;
position: absolute;
top : 50px;
left: 50px;
background-color: red;
z-index: 2;
}
</style>
<script type="text/javascript">
$(function()
{
$('.first').tap(function()
{
$(this).css({backgroundColor : 'green'});
});
$('.second').tap(function()
{
$(this).hide();
});
})
</script>
</head>
<body>
<div class='first'></div>
<div class='second'></div>
</body>
</html>
How it work
-tap second div
-fired tap event on second div
-second div hide
-fired tap event on first div
What i want
-tap second div
-fired tap event on second div
-second div hide
-nothing happening
What i should do in second div tap handler for prevent firing tap event on first div?
I changed example to see what events triggered
$(function()
{
$('.first').bind('vmousedown',function()
{
info('vmousedown first' )
}).bind('vmouseup', function(){
info('vmouseup first')
})
.bind('click',function(){
info('click first');
}).bind('tap', function(){
info('tap first');
});
$('.second').bind('vmousedown',function()
{
info('vmousedown second' )
}).bind('vmouseup', function(){
info('vmouseup second');
})
.bind('click',function(){
info('click second');
}).bind('tap', function(){
info('tap second');
$(this).hide();
});
});
PC output:
vmousedown second
vmouseup second
click second
tap second
Android :
vmousedown second
vmouseup second
tap second
vmousedown first
vmouseup first
click first
tap first
Well I think the problem is you are using jQM Alpha (jquery.mobile-1.0a4.1.js), upgrading to the latest release I think it works as expected. Also you might bind the tap event .bind('tap', function()
http://jsfiddle.net/LFPNC/
JS
$(function()
{
$('.first').tap(function()
{
$(this).css({backgroundColor : 'green'});
});
$('.second').tap(function()
{
$(this).hide();
});
});
HTML
<!DOCTYPE HTML >
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
<div class='first'></div>
<div class='second'></div>
</body>
</html>
CSS
div
{
width: 300px;
height: 300px;
}
.first
{
background-color: black;
}
.second
{
width: 200px;
height: 200px;
position: absolute;
top : 50px;
left: 50px;
background-color: red;
z-index: 2;
}
I have a div that rotates around the x-axis, around its center, so that the top half "falls away" from the screen while the bottom half comes toward the screen. When I try to capture the onclick event, I only get it from the div if I click on it below its centre. If I click on it above its center, the containing div receives the onclick event.
I've tried moving the div to the front with z-index and translateZ(), but still the containing div receives the onclick when I click on the top half of the div.
How can I get the div to receive the onclick event, regardless of where on the div it is clicked?
Here's a sample that demonstrates the problem:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
function onMainClick() {
console.log('onMainClick()');
}
function onContainerClick() {
console.log('onContainerClick()');
}
</script>
<title>Click Test</title>
</head>
<body>
<div onclick="onContainerClick()" style="width: 200px; height: 200px; background-color: burlywood">
<div onclick="onMainClick()" style="width:100%; height: 100%; background-color: grey; -webkit-transform: perspective(1000px) rotateX(45deg)"></div>
</div>
</body>
</html>
onMainClick() is not called when clicking the top half of the grey div.
Built the case in a jsfiddle, I don't exactly know what the perspective rotation does, but the solution is to give the other div a z-index of -1...
CSS
#div1 {
width: 200px;
height: 200px;
background-color: burlywood;
z-index: -1;
}
#div2 {
width: 100%;
height: 100%;
background-color: grey;
-webkit-transform: perspective(1000px) rotateX(45deg);
}
Update: correct jsfiddle link...
I am trying to add a border to a div element when the moust is hovering on the div, but I found after the border is aded, the boder will occupy some space and make the content move. See the snippet below. Is it possible to avoid move the content in this case when the border is displayed?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/lib.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#test-id').hover(function() {
console.log("test-id");
$('#test-id').css('border', '5px dotted');
},
function() {
$('#test-id').css('border', 'none');
}
);
});
</script>
</head>
<body style="margin-bottom:0px;margin-top:0px;">
<div>
<div style="width: 300px;">
</div>
<div id="test-id">
jfdjkfjdsfjaldsjfsjf
</div>
</div>
</body>
</html
>
Use CSS 'outline' property instead of border. Which will not occupy element space.
Hope will help you.
Try maintaing the border all the time, and just change the color from transparent to whatever color you want it to have when its visible. You could also use a the background color as the "off" color, but that means it has to overly a solid colored element.
Bin ,
Yes border is also cacluated as part of width. So do one thing give a border before itselef with the same color as background , once you mouseover you can change the color , so that it won't push the other ones down.
This is the behavior how the css render.
You need to set the margin to prevent this.
$('#test-id').css('margin', '-5px');
1 Solution is that you make the with: on hover -2px or another one on normal state, with the border color seted to the box color (or background color of the body).
ex 1:
<body>
<div class="container"></div>
</body>
body { background: #ccc; }
.container { width: 200px; height: 200px; background: #fff; }
.container:hover { width: 198px; border: 1px solid #000; }
ex 2: (best solution)
<body>
<div class="container"></div>
</body>
body { background: #ccc; }
.container { width: 200px; height: 200px; background: #fff; border: 1px solid #fff; } // or #ccc
.container:hover { border: 1px solid #000; }