I want to click a button on my page then another div toggle on and load in that div another page, but it doesn't work.
HTML:
<html>
<head>
<script type="text/javascript" src="js/jquery-1.7.2.min_1.js"></script>
<script>
$(document).ready(function() {
$('#clickme').click(function() {
$('#me').animate({
height: 'toggle'
}, 1000
);
$("#me").load("page2.html")
});
});
</script>
</head>
<body>
<div id="clickme" style="color: #FFFFFF;">
Click here
</div>
<div id="me" style="border:1px solid #000; width:900px; height:300px;">
</div>
</body>
</html>
I believe your function can be simplified to use the normal callback of toggle or slidetoggle
$(function() {
$('#clickme').on("click",function() {
$('#me').toggle(function() {
$(this).load("page2.html");
});
});
});
But you might want to load before toggling:
$(function() {
$('#clickme').on("click",function() {
$('#me').load("page2.html",function() {
$('#me').slideToggle();
});
});
});
Related
$(document).ready(function() {
$("#One").click(function() {
$("#Two").animate({
width: 'toggle'
}, -10);
});
});
<script src="jquery-3.2.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-
3.2.1.min.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://jquery-
ui.googlecode.com/svn/tags/latest/ui/jquery.effects.core.js"></script>
<script src="http://jquery-
ui.googlecode.com/svn/tags/latest/ui/jquery.effects.slide.js">
</script>
<script>
</script>
<div id="One" style="width:50px;height:200px;background-
color:yellow;position:relative;top:300px;left:600px;">One</div>
<div id="Two" style="width:200px;height:200px;background-
color:black;position:relative;top:100px;left:400px;">Two</div>
Above is the code, my problem exactly is that I can't get it to slide normally. When I click on it it disappears then comes back on the second click. I just want it to slide normally.
Try adding this::
$(document).ready(function() {
$("#One").click(function() {
$("#Two").animate({
left: '400px'
});
});
});
I want to show the div with id #flower when clicking on the link with id #button but it doesnt work. Heres is the code i wrote.. i made also a jsbin page to show you
any suggestions?
http://jsbin.com/xefanaji/3/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="front">
<div><p>Button</p></div>
</div>
<div id="flower">
<img src="http://2.bp.blogspot.com/-Gaz8V9dP5O0/UUjtKJPofuI/AAAAAAAALDQ/boET2Ns34aU/s320/blooming-flowers-35.jpg" alt="flower"/>
</div>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
$(document).ready(
function(){
$("#button").click(function () {
$("#flower").show("slow");
});
});
</script>
</body>
</html>
css
#button{
position:relative;
height:30px;
width:60px;
background-color:lightyellow;
left:40px;
top:40px;
}
#flower{
display:none;
position:relative;
top:-600px;
left:50px;
z-index:0;
}
#front {
z-index:1;
position:relative;
top:100px;
height:600px;
width:100%;
background-color:lightblue;
}
if i am not wrong.. you need to add id to your button ,if (<a ..>Button</a>) is the element you are talking about.
<div><p>Button</p></div>
//-^^^^^^^^^^----here
$("#button").click(function (e) {
e.preventDefault();
$("#flower").show("slow");
});
with CSS you have, i am sure you forget to add id to that a link
well few more thing,
always load script in your <head> section, and you don't need to add src in script tag
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
..
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
....
....
<script>
$(document).ready(
function(){
$("#button").click(function () {
$("#flower").show("slow");
});
});
</script>
Try this
<div id="front">
<div><p><a id="button" href="">Button</a></p></div>
</div>
<div id="flower">
<img src="http://2.bp.blogspot.com/-Gaz8V9dP5O0/UUjtKJPofuI/AAAAAAAALDQ/boET2Ns34aU/s320/blooming-flowers-35.jpg" alt="flower"/>
</div>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(document).ready(
function(){
$("#button").click(function (e) {
e.preventDefault();
$("#flower").show("slow");
});
});
</script>
DEMO
Put the jQuery library in the head section of your document like below
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
If you need button you can use span instead of anchor e.g.
<span class="button">Button</span>
then add a little styling
.button {
font-size: 12px;
color: #333;
}
.button:hover {
color: #ddd;
}
and then put this script just before </body> tag
<script>
$(function() {
$(".button").click(function () {
$("#flower").show("slow");
});
});
</script>
You could use the revised jQuery below to accomplish this, the reason your code isnt working is because your link doesnt have the id button set.
$('#front a:first').on('click',function(e){
e.preventDefault();
$('#flower').show();
})
You are missing id #button for that link.
<a id="button" href="">Button</a>
How do I display an image on mouse over? I also need to underline the text next to the image on mouse over? On mouseout I have to hide the image and make the text normal again.
This is my html field
<img src="img.jpg"> Name
Now when I load the page I want not to display the image unless I have the mouse over the place it should appear.
CSS
#test{
display:none
}
HTML
<img id="test" src="img.jpg"/> <span>Name</span>
jQuery
$(document).ready(function () {
$('span').on('mouseenter', function () {
$('#test').show();
$(this).css({
"text-decoration": "underline"
});
}).on('mouseleave', function () {
$('#test').hide();
$(this).css({
"text-decoration": ''
});
});;
});
DEMO
Documentation
jQuery
document.ready
jquery.on()
jQuery.show()
jQuery.hide()
jQuery.mouseenter
jQuery.mouseleave
You can do it the below way using the hover event.
jQuery:
$(document).ready(function () {
$('span').hover(function(){
$(this).addClass('underline'); //to make text underlined on hover
$('#image').show(); //displays image on mouse in
},function(){
$(this).removeClass('underline'); //remove underline on mouse out
$('#image').hide(); //hides image on mouse out
});
});
HTML:
<img class="hidden" id="image" src="img.jpg"/> <span>Name</span>
CSS:
.hidden{
display: none;
}
.underline{
text-decoration: underline;
}
Working Demo
As answered by Anton, you can use this one as well.
$(document).ready(function () {
$('span').hover(
function () {
alert("1");
$('#test').show();
},
function () {
alert("2");
$('#test').hide();
}
)
});
Jquery:-
$(document).ready(function(){
$("#textDiv").mouseover(function(){
$("#imageDiv").hide();
});
$("#textDiv").mouseout(function(){
$("#imageDiv").show();
});
});
HTML:-
<div id="textImage">
<div id="imageDiv" style="float:left;">
<img src="../images/login_background.png"></img>
</div>
<div id="textDiv"style="float:left;">
Name
</div>
</div>
CSS:-
#textImage a {text-decoration:none;}
#textImage a:hover {text-decoration:underline;}
HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Test</title>
<script type='text/javascript' src='http://identify.site88.net/jquery-1.9.1.js'></script>
<style type='text/css'>
#test{
display:none
}
</style>
<script type='text/javascript'>
$(window).load(function(){
$(document).ready(function () {
$('span').on('mouseenter', function () {
$('#test').show();
$(this).css({
"text-decoration": "underline"
});
}).on('mouseleave', function () {
$('#test').hide();
$(this).css({
"text-decoration": ''
});
});;
});
});
</script>
</head>
<body>
<img id="test" src="http://www.shop.hidra.com.tr/wp-content/uploads/image_1306_1.jpg"/> <span>Name</span>
</body>
</html>
How do you make a link that when pressed, displays more information about something without reloading the page? (i believe it is called overflow?)
an example would be here:
https://market.android.com/details?id=com.jiwire.android.finder&feature=featured-apps
click the MORE button under the Description section, and more description is showed and the entire webpage's content slides down WITHOUT need to reload
Thanks!
Make use of this
<!DOCTYPE html>
<html>
<head>
<style>
div { background:#de9a44; margin:3px; width:80px;
height:40px; display:none; float:left; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
Click me!
<div></div>
<div></div>
<div></div>
<script>
$(document.body).click(function () {
if ($("div:first").is(":hidden")) {
$("div").slideDown("slow");
} else {
$("div").hide();
}
});
</script>
<script>
$(document.body).click(function () {
if ($("div:first").is(":hidden")) {
$("div").show("slow");
} else {
$("div").slideUp();
}
});
</script>
</body>
</html>
Alright, so the green square is suppose to show when your mouse is on the red square, but it doesn't. Here is the code:
<html>
<head>
<script type="text/javascript"
src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
$("a").bind("mouseover",
function(){
$("b").css("display", "block");
});
$("a").bind("mouseout",
function(){
$("b").css("display", "none");
});
});
-->
</script>
</head>
<body>
<div class="a" style="background-color: #ff0000; height: 50px; width: 50px;"></div>
<div class="b" style="display: none; background-color: #00ff00; height: 50px; width: 50px;"></div>
</body>
</html>
Put a dot before each selector to form a class selector:
$(".a").bind("mouseover",
function(){
...
Your code can be reduced to this:
$(document).ready(function() {
$(".a").hover(function() {
$(".b").toggle();
});
});
http://jsfiddle.net/karim79/EkA6p/1/
Should be $(".a"). the selector needs a period. Where if you had id="a" then you would use ("#a"), but just doing $("a") will actually select all links i.e. <a href="">
http://jsfiddle.net/hZL94/
you need to set the class .a .b
<script type="text/javascript">
$(document).ready(function() {
$(".a").bind("mouseover",
function(){
$(".b").css("display", "block");
});
$(".a").bind("mouseout",
function(){
$(".b").css("display", "none");
});
});
</script>
It's becasue you try to select the <a> and <b> elements, instead of the <div class="a"> and <div class="b"> elements. $('.a') instead of $('a'). See jsFiddle.
$(document).ready(function() {
$(".a").bind("mouseover", function() {
$(".b").css("display", "block");
});
$(".a").bind("mouseout", function() {
$(".b").css("display", "none");
});
});
try this
<html>
<head>
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#a").bind("mouseover",
function(){
$("#b").css("display", "block");
});
$("#a").bind("mouseout",
function(){
$("#b").css("display", "none");
});
});
</script>
</head>
<body>
<div id="a" style="background-color: #ff0000; height: 50px; width: 50px;"></div>
<div id="b" style="display: none; background-color: #00ff00; height: 50px; width: 50px;"></div>
</body>
</html>