load another page when slide toggle - javascript

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

How to Slide right to left JQuery HTML CSS

$(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'
});
});
});

show div on click with Jquery

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>

Display Image on Mouseover

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 to make Overflow Link?

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>

simple test in Jquery isn't working. green square doesn't show

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>

Categories