This jQuery code will highlight the div box when clicked.
I want to get the highlight on load, how can I do that?
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<style type="text/css">
div { margin: 0px; width: 100px; height: 80px; background: #666; border: 1px solid black; position: relative; }
</style>
<script>
$(document).ready(function() {
$("#div1").click(function () {
$(this).effect("highlight", {}, 3000);
});
});
</script>
</head>
<body">
<div id="div1"></div>
</body>
</html>
Put the statement for highlight in document.ready at the same level you are binding click event..
Live Demo
$(document).ready(function() {
$("#div1").effect("highlight", {}, 3000); //this will highlight on load
$("#div1").click(function () {
$(this).effect("highlight", {}, 3000);
});
});
Alternatively, this way might be a little cleaner in that if you add some other effects that you want to show on the click state, you only need to define them one time.
$(document).ready(function() {
$("#div1").click(function () {
$(this).effect("highlight", {}, 3000);
});
$('#div1').click();
});
Javascript
$(document).ready(function() {
$("#div1").effect("highlight", {}, 3000);
});
This will highlight the div1 when the document is ready. If you also want a click handler, you can keep it and put in whatever code you want (ie. you can also keep the effect in there as well, if you want to).
Fiddle
Related
If you run this code snippet you will see a button. If you click on it, it will rotate. I have the exact same code in Visual Studio (as you can see in the picture below). However, when i debug the code or press 'view in browser (Google Chrome)' it doesn't work at all.
$("#rotate").click(function () {
if ($(this).css("transform") == 'none') {
$(this).css("transform", "rotate(45deg)");
} else {
$(this).css("transform", "");
}
});
body {
}
#rotate {
width: 30px;
height: 30px;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/css.css" />
<script src="scripts/jquery-2.1.1.js"></script>
<script src="scripts/JavaScript.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<button id="rotate"></button>
</body>
</html>
Did you wrap your button binding inside $(document).ready(function () { });? That is not clear from your example because it works fine if it is.
Or place your javascript code beneath the button without the &(document).ready function, that also works because if it is above the button the browser will try to bind a button that does not exits yet.
<script>
$(document).ready(function () {
$("#rotate").click(function () {
if ($(this).css("transform") == 'none') {
$(this).css("transform", "rotate(45deg)");
} else {
$(this).css("transform", "");
}
});
});
</script>
<style>
#rotate {
width: 100px;
height: 30px;
}
</style>
<button id="rotate" type="button">button</button>
This question already has answers here:
Code working in jsFiddle but not in browser
(2 answers)
Closed 9 years ago.
I am trying to implement this simple jquery code into my website, I can not make it work!
Here is whole html code (everything is the same as in the WORKING jsfiddle version, however it will not work):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="js/jquery-1.9.0.min.js"></script>
<style>
div#test {
background: #b977d1;
margin: 3px;
width: 150px;
height: 20px;
float: right;
display: none;
overflow:hidden;
}
button#aa {
float: right;
}
</style>
</head>
<body>
<script type="text/javascript">
$("#aa").click(function () {
$("div#test").animate({
width: 'toggle'
});;
});
</script>
<div id="test">TEST das das dsa</div>
<button id="aa">Toggle</button>
</body>
</html>
I am getting very frustrated with this :P
If anyone can help me with this, I will be more than thankful! :)
Include your jquery inside $(document).ready() jsfiddle do this automatically
try this:
$(document).ready(funciton(){
$("#aa").click(function () {
$("div#test").animate({
width: 'toggle'
});;
});
});
You need to set your jQuery code in callback of the ready function.
$(function() {
// when the document is ready
// here, your code
});
You need to wrap your code inside DOM ready handler to make sure that Document Object Model (DOM) is ready for JavaScript code to execute.
This step has been done automatically by jsFiddle when you include jQuery library.
$(function(){
$("#aa").click(function () {
$("div#test").animate({
width: 'toggle'
});;
});
});
If you want to run your code once the entire page (images or iframes), not just the DOM, is ready, put your code inside $(window).load(function() { ... })
$(window).load(function() {
$("#aa").click(function () {
$("div#test").animate({
width: 'toggle'
});;
});
})
Hi I am trying to open one div on mouse hover of second div.
The div 1 is display is none by default but when user hover on div 2 the div 1 will be displayed.
But it's not working.
My code :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<style>
.testtmpblock{
display: none;
background-color: black;
height: 100px;
width: 100px;
}
.tmpd{
height: 100px;
width: 100px;
background-color: blue;
}
</style>
<script>
$(document).ready(function () {
$(document).on('mouseenter', '.tmpd', function () {
$(this).find(".testtmpblock").show();
}).on('mouseleave', '.tmpd', function () {
$(this).find(".testtmpblock").hide();
});
});
</script>
</head>
<body>
<div class="tmpd">
kjkjkj
</div>
<div class="testtmpblock">
data
</div>
</body>
</html>
div testtmpblock will be appear on hover of div tmpd but it's not working.
I have also write Script for it.
Any guidance that where I am wrong ?
You need to use next instead of find as find is used for desendants and your required element is not descendant.
Live Demo
$(document).ready(function () {
$(document).on('mouseenter', '.tmpd', function () {
$(this).next(".testtmpblock").show();
}).on('mouseleave', '.tmpd', function () {
$(this).next(".testtmpblock").hide();
});
});
You can avoid next if only single element has class testtmpblock
$(document).ready(function () {
$(document).on('mouseenter', '.tmpd', function () {
$(".testtmpblock").show();
}).on('mouseleave', '.tmpd', function () {
$(".testtmpblock").hide();
});
});
If the divs are next to each other you do this with CSS only:
.testtmpblock {
display: none;
}
.tmpd:hover ~ .testtmpblock {
display: block;
}
If you want to animate it you can use CSS3 transitions.
99% of time you can get away with CSS only, and the animations will be faster with transitions. It's all about how you handle the markup. If you make the hidden element a child then it's always doable with just CSS, for example:
<div class="tmpd">
kjkjkj
<div class="testtmpblock">
data
</div>
</div>
And you'd use a selector like so:
.tmpd:hover .testtmpblock {}
try next()
$(document).on('mouseenter', '.tmpd', function () {
$(this).next(".testtmpblock").show();
}).on('mouseleave', '.tmpd', function () {
$(this).next(".testtmpblock").hide();
});
$(document).ready(function () {
$('body').on('hover','.tmpd', function () {
$(".testtmpblock").show();
}, function () {
$(".testtmpblock").hide();
}
);
});
I am trying this code. It is supposed to generate an image and set its container div to full-screen when the p is clicked.
<html>
<head>
<style>
img { height: 643px; width: 860px; }
img:-moz-full-screen { height: 643px; width: 860px; }
div:-moz-full-screen { background: white; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function() {
$("p").click(function() {
setTimeout(function() {
$("body").prepend("<div><img src = 'http://i.stack.imgur.com/lBZKC.jpg?s=128&g=1' /></div>");
$("div").get(0).mozRequestFullScreen();
},5000);
});
});
</script>
</head>
<body>
<p>Foo</p>
</body>
What it does is wiat for 5 seconds and prepend the image all right, but it is not set to full-screen. However, if you remove the timer and do it normally:
$("p").click(function() {
$("body").prepend("<div><img src = 'http://i.stack.imgur.com/lBZKC.jpg?s=128&g=1' /></div>");
$("div").get(0).mozRequestFullScreen();
});
it works fine, it prepends the image and immediately sets it to full-screen.
Is this intentional, or a bug? Either way, is there any way to make it work?
The method has to be called in response to a user input event (ie. keypress, mouseevent).
I have an odd situation in which I need to modify the position of a draggable element as soon as the user starts dragging it. So, during the draggable element's start event handler, I'm trying to set the position. It doesn't respond to the position change unless - and this is weird - I do something to cause a javascript error after I change the position. Here's an example:
<html>
<head>
<title>Drag reposition test</title>
<script type="text/javascript" src="js/css_browser_selector.js"></script>
<script type="text/javascript" src="development-bundle/jquery-1.3.2.js"></script>
<script type="text/javascript" src="development-bundle/ui/jquery-ui-1.7.1.custom.js"></script> <!-- Includes JQuery UI Draggable. -->
<style type="text/css">
#draggable { width: 150px; height: 150px; padding: 0.5em; }
</style>
<script type="text/javascript">
$(function() {
$("#initialdragger").draggable({
start: function(e, ui) {
$('#initialdragger').css('top', 400);
x = y; // Javascript error, which weirdly causes a redraw.
}
});
});
</script>
</head>
<body>
<div id="initialdragger" class="ui-widget-content" style="border-width: 1px; border-color: black; background-color: orange; width: 300px">
<p>Drag me around</p>
</div>
</body>
</html>
How can I legitimately cause a redraw to happen in this context? JQuery's hide() and show() don't work and neither do these methods.
I think binding a mousedown event will get you what you want
<script type="text/javascript">
$(function() {
$("#initialdragger").draggable();
$('#initialdragger').bind("mousedown", function(e) {
$(this).css('top', 400);
});
});
</script>