So basically I have a div which I would like to make some kind of animation with, first I tried to toggle the div then completely remove the div from the DOM using .remove() jquery function. But the problem that I'm having right now is that the toggle effects is not taking place, it is just going straight to the remove() code. I tried to delayed the code but same thing happened. Can someone help me to understand why my codes is behaving like that? Please run the snippet below you will notice that theres not toggle effect.
function remv(){
$(".myDiv").toggle( "clip" );
$(".myDiv").remove();
alert('PORTUGAL IS GOIN TO WIN THE WORLD CUP AND CANT DO NOTHING ABOUT IT!');
document.getElementById("test").innerHTML="Portugal will be winner of the fifa world cup 2018";
}
.myDiv{
height:100px;
width:100px;
background-color: orange;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
<div class="container">
<center><h3><p id="test">Click on the surprise box</p></h3></center>
<center>
<div class="myDiv" onclick="remv()"></div><br>
</center>
</div>
</body>
</html>
What about this?
function remv() {
$(".myDiv").toggle(
"clip",
function() {
$(".myDiv").remove();
alert('PORTUGAL IS GOIN TO WIN THE WORLD CUP AND CANT DO NOTHING ABOUT IT!');
document.getElementById("test").innerHTML="Winner of the fifa world cup 2018";
$( "#dialog" ).dialog();
}
);
}
.myDiv{
height:100px;
width:100px;
background-color: orange;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
<div class="container">
<center><h3><p id="test">Click on the surprise box</p></h3></center>
<center>
<div id="dialog" >
<img src="https://i.gifer.com/JgI9.gif" alt="Placeholder Image" />
</div>
<div class="myDiv" onclick="remv()"></div><br>
</center>
</div>
<script>
$( "#dialog" ).hide();
</script>
</body>
</html>
You will need to call .remove() in the 'complete' callback of .toggle() so it will wait for the animation to complete.
$(".myDiv").toggle("clip", function() {
$(".myDiv").remove();
});
Documentation: http://api.jquery.com/toggle/
function remv(){
$(".myDiv").toggle( "clip" );
$(".myDiv").remove();
alert('PORTUGAL IS GOIN TO WIN THE WORLD CUP AND CANT DO NOTHING ABOUT IT!');
document.getElementById("test").innerHTML="Portugal will be winner of the fifa world cup 2018";
}
.myDiv{
height:100px;
width:100px;
background-color: orange;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
<div class="container">
<center><h3><p id="test">Click on the surprise box</p></h3></center>
<center>
<div class="myDiv" onclick="remv()"></div><br>
</center>
</div>
</body>
</html>
Related
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>YES</title>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"> </script>
</head>
<body>
<img id="dramatic" src="statefair.jpg" width="400px" height="400px">
<br>
<button id="make_visible">HIDE</button>
<style>
img#dramatic {
display: none;
}
</style>
<script>
$("button#make_visible").on("click", function() {
$("img#dramatic").slideDown();
});
</script>
</body>
</html>
I am working with a book and in the book I am learning jquery's slideDown/Up method. I ran the code originally on my main web page and it will not work. So I just created a simple YES.html(seen above) to make sure I was coding it correctly. However it will not slide up or down image. I don't know what I am missing for this to work. I am a beginner so I could be missing something simple. Please explain your answer/solution in steps if possible or maybe guide me to a web page tutorial of some sort. Thanks.
are you looking for something like this?
$('#make_visible').on('click', function (e) {
/* method 1 */
/*if ($('#dramatic').css('display') === 'none') {
$('#dramatic').slideDown();
$(this).html('Hide');
}
else {
$('#dramatic').slideUp();
$(this).html('show');
}*/
/* method 2 */
$('#dramatic').slideToggle();
this.innerHTML = this.innerHTML == 'HIDE' ? 'SHOW' : 'HIDE';
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="make_visible">HIDE</button>
<br />
<img id="dramatic" src="statefair.jpg" width="400px" height="400px" />
You didn't import jQuery, to use jQuery UI you have to import jQuery first.
Think this helps:
<!DOCTYPE html>
<html>
<head>
<title>YES</title>
<script
src="https://code.jquery.com/jquery-3.2.1.js"
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"> </script>
</head>
<body>
<img id="dramatic" src="statefair.jpg" width="400px" height="400px">
<br>
<button id="make_visible">HIDE</button>
<style>
img#dramatic {
display: none;
}
</style>
<script>
$("button#make_visible").on("click", function() {
$("img#dramatic").slideDown();
});
</script>
</body>
</html>
jQquery UI needs jQuery to function, so you should include that first. I used jQuery 1.3.2 as that seem to be the best fit for jQuery UI 1.8.
The book might be a bit dated as the latest version is 1.12.
I also changed the "onclick" code a bit:
$( "button#make_visible" ).click(function() {
$("img#dramatic").slideDown();
});
img#dramatic { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<body>
<img id="dramatic" src="https://upload.wikimedia.org/wikipedia/commons/4/4c/Wisconsin_State_Fair.jpg" width="400px" height="400px">
<br>
<button id="make_visible">HIDE</button>
</body>
I am trying to make a navbar out of text that hides/shows different divs. I want to have it so when you click on one of the options, the text turns red to show that it's been selected, and whatever other item is selected is "unselected". I am fairly new to JavaScript, but I thought the best way to do this is to add a class to it onClick, and remove the class from its siblings onClick. But it's not working—nothing happens onClick. What am I doing wrong?
<html>
<head><title>test</title>
<style>
.reddish { color:red; }
</style>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script type="text/javascript" language="javascript">
function redFunction() {
$( '.navItem' ).addClass( 'reddish' );
}
</script>
</head>
<body>
<p class="navItem" onClick="redFunction()">Option 1</p>
<p class="navItem" onClick="redFunction()">Option 2</p>
<p class="navItem" onClick="redFunction()">Option 3</p>
</body>
</html>
Javascript code should be seperated from css !
<style>
.reddish { color:red; }
</style>
<script type="text/javascript" language="javascript">
function redFunction() { $( "p" ).addClass( 'reddish' ); }
</script>
I am trying to pause a parallax div and replace it with a static image. The jQuery code below works very well, but it kills ALL of the other divs (I only have one additional in the code below as an example). How can I just isolate the divs in the <section> area?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Close to Working</title>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<style>
.parallax-layer {
position:absolute;
}
.hundred {
width:auto;
height: 390px;
}
</style>
</head>
<body>
<div style="background-color:rgba(0, 0, 0, 0.3)">
<img src="./images/top_logo.png" alt="" />
</div>
<section>
<button class='pushme'>Pause Sliding Images</button>
<script>
$(".pushme").click(function () {
var $el = $(this);
$el.text($el.text() == "Resume Sliding Images" ? "Pause Sliding Images": "Resume Sliding Images");
});
</script>
<div class="hundred">
<div id="port" style="position:relative;top:-15px;">
<div style="left: 0%; margin-left: 0;" class="parallax-layer">
<div>
<img src="./images/para.png" alt="" class="fadeIn fadeIn-4s fadeIn-Delay-4s" />
</div>
</div>
</div>
</div>
</section>
<div style="display: none"><img src="./images/ch_logo.png" alt=""/></div>
<script>
$( "button" ).click(function() {
$( "div" ).toggle( "slow" );
});
</script>
<script type="text/javascript" src="para3_files/jquery_002.js"></script>
<script type="text/javascript" src="para3_files/jquery_003.js"></script>
<script type="text/javascript" src="para3_files/jquery.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(xvalue){
// Declare parallax on layers
jQuery('.parallax-layer').parallax({
mouseport: jQuery("#port"),
yparallax: false
});
});
</script>
<script type="text/javascript" src="./js/home2.js"></script>
</body>
</html>
If you are talking about $( "div" ).toggle( "slow" ); toggling all of your divs, that is because that is what it is doing.
If you use $( "section div" ).toggle( "slow" );, it will only toggle divs inside of sections
I have a problem with flip effect on jquery plugin.When the image rotates it does not rotate correctly.I dont know why but i spent hours and no solution please help.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="Flip-jQuery/jquery-1.9.1.js"></script>
<script src="Flip-jQuery/jquery-ui-1.7.2.custom.min.js"></script>
<script src="Flip-jQuery/jquery.flip.min.js"></script>
<script src="Flip-jQuery/jquery.flip.js"></script>
<title>Untitled Document</title>
<script type="text/javascript">
$(document).ready(function(){
$("#box1").on('mouseover',function(){
$(".flip").flip({
direction:'lr',
content:'hello',
color:'red'
});
})
$('.revert').on('click',function(){
$('.flip').revertFlip();
})
});
</script>
#main{
border:1px solid red;
width:500px;
height:auto;
position:absolute;
}
#box1, #box2{
border:2px solid black;
width:100px;
height:100px;
margin:10px;
cursor:pointer;
}
</style>
<div id='main'>
<div id='box1' class='flip'>
box1
</div>
<div id='box2'>
box2
</div>
<a style=" float:right;" href="#" class="revert">Click to revert</a>
</div>
Here is the whole code.I have tried anything but nothing.
Thanks in advance.
Try this
$(document).ready(function(){
$("#box1").on('mouseover',function(){
$(".side2").flip({
direction:'lr', //in the flip API direction seems to come first in every example
content:'hello',
color:'red'
});
})
});
You also have a syntax error in your HTML:
<div id='main'>
<div id='box1' class='side1'"> <!-- HERE remove that double quote -->
box1
</div>
<div id='box2' class='side2'>
box2
</div>
</div>
You have included the flip.js plugin twice in your HTML header.
Check this thing i get what the problem was. Basically you are triggering twice the mouse over event JavaScript/jQuery: event fired twice
Thanks ALOT guys! I've got it working now, thank you!
I have a hopefully easy question:
This: http://jsfiddle.net/gSAjV/2/
is what I want to achieve, but I can't seem to get it working.
I'm all new to javascript, so I'm not sure how to properly put the script in the html document.
I have tried the <script type="text/javascript"> and others, but it just doesn't work.
So i wondered if anyone would take the time to put it in a html document and get it working, and ofcourse posting the entire code. I would be very greatfull!
my doc:
<html>
<head>
<style>
.parentDiv{
border:1px solid black;
padding:10px;
width: 80px;
margin:5px;
display:relative;
}
.childDiv{
border:1px solid blue;
height: 50px;
margin:10px;
}
</style>
<script type='text/javascript'>
$('.childDiv').click(function(){
$(this)
.css('background-color','#00ff66')
.siblings()
.css('background-color','#ffffff');
});
</script>
</head>
<body>
<div id="divParent1" class="parentDiv">
Group 1
<div id="child1" class="childDiv">
Child 1
</div>
<div id="child2" class="childDiv">
Child 2
</div>
</div>
<div id="divParent2" class="parentDiv">
Group 2
<div id="child1" class="childDiv">
Child 1
</div>
<div id="child2" class="childDiv">
Child 2
</div>
</div>
</body>
</html>
Put this somewhere in your html file:
<script type="text/javascript">
$(document).ready(function() {
$('.childDiv').click(function(){
$(this).parent().find('.childDiv').css('background-color','#ffffff');
$(this).css('background-color','#ff0000');
});
});
</script>
You can put it more or less anywhere, but just before the </body> tag would be a good place.
And as #MarkK has rightly pointed out, you need to reference the jQuery library itself.
This goes between <head> and </head>:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
In jsfiddle, you can right-click on the Results pane and View Source. This will give you the exact html that produces the result.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.4.min.js'></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type='text/css'>
.parentDiv{
border:1px solid black;
padding:10px;
width: 80px;
margin:5px;
display:relative;
}
.childDiv{
border:1px solid blue;
height: 50px;
margin:10px;
}
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$('.childDiv').click(function(){
$(this).parent().find('.childDiv').css('background-color','#ffffff');
$(this).css('background-color','#ff0000');
});
});//]]>
</script>
</head>
<body>
<div id="divParent1" class="parentDiv">
Group 1
<div id="child1" class="childDiv">
Child 1
</div>
<div id="child2" class="childDiv">
Child 2
</div>
</div>
<div id="divParent2" class="parentDiv">
Group 2
<div id="child1" class="childDiv">
Child 1
</div>
<div id="child2" class="childDiv">
Child 2
</div>
</div>
</body>
</html>
You just need to import jQuery (the library that contains the $ functions). This is simple, just add
<script src="http.//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
to your HTML, before your other script.
<html>
<head>
<!--inclue jquery - change the path 'src'. the default is jquery.js is on the same location of this html-->
<script type="text/javascript" src="jquery.js"></script>
<sript type="text/javascript">
jQuery().ready(function($){
$('.childDiv').click(function(){
$(this).parent().find('.childDiv').css('background-color','#ffffff');
$(this).css('background-color','#ff0000');
});
});
</script>
</head>
<body>
<!--the content paste your html here-->
</body>
</html>