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
Related
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>
I am trying to show products and when I apply the animation it applies to the whole div
for instance
<div class="product_area">
<div class="product">1</div>
<div class="product">2</div>
<div class="product">3</div>
<div class="product">4</div>
<div class="product">5</div>
</div>
$(document).ready(function()
{
$(".product_area").slideUp(); //Whole div slides up.
$(".product").slideUp(); //Just one product slides up.
}
What I want that one by one the product slides in from right.
Check this out
$(function(){
//$(".product_area").slideUp(); //Whole div slides up.
//$(".product").slideUp(); //Just one product slides up.
var delay = 500
$('.product').each(function(){
$(this).delay(delay).toggle( "slide" );
delay = delay+1500;
});
});
/* Put your css in here */
.product {
display:none;
width:100px;
background-color:#ccc;
padding:15px;
margin-bottom: 20px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="style.css" />
<script data-require="jquery" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="product_area">
<div class="product">1</div>
<div class="product">2</div>
<div class="product">3</div>
<div class="product">4</div>
<div class="product">5</div>
</div>
</body>
</html>
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 have made this site/webapp and you can drag the onion out of the white space it's in and onto anywhere on the page but, when you click the button at the left side it disappears when the rest of the div it was/is in. How can I make it not disappear when the user drags it out of the white box?
I used jQuery to make it slide out and in:
$( "#button" ).click(function() {
$( "#toggle" ).toggle( "slide" );
});
and this html to make it work:
<button id="button"><-></button>
<aside class="ingredients" id="toggle">
<section class="center">
<section class="onion" id="draggable"></section>
<section class="butter"></section>
</section>
</aside>
The sections use background images to make them appear:
.onion {
background-image: url(onion.png);
margin: 20px auto -300px auto;
}
.choppedonion {
background-image: url(choppedonion.png);
}
Try this in-built JQuery option for dragging.
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Draggable </title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery- ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style>
#draggable { width: 150px; height: 150px; padding: 0.5em; }
</style>
<script>
$(function() {
$( "#draggable" ).draggable();
});
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
<p>Drag me around</p>
</div>
</body>
</html>
find relevant documentation here
I am trying to position my Div wherever the user clicks on my Image.
test is my Div, and myimg is my image.
Here is my JS:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
$("#myimg").click(function(e){
$("#test").show(2000);
$("#test").offset({left:e.pageX,top:e.pageY});
})
})
</script>
However that does not work. Can anyone tell me what I am doing wrong?
Edit: Sorry, I forgot to mention that the Div wont show up, if I include the offset line, if I dont, it shows, but not at the right position.
Here is the full code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>xSky Software - Most likely the only software on Clickbank that exists.</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type='text/javascript' src='video/jwplayer.js'></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#myimg").click(function(e){
$("#test").show(2000);
$("#test").offset({left:e.pageX,top:e.pageY});
})
})
</script>
</head>
<body>
<!--Header and Logo-->
<div id="header">
<div id='mainvid'>This text will be replaced</div>
<script type='text/javascript'>
jwplayer('mainvid').setup({
'flashplayer': 'video/player.swf',
'file': 'video/Untitled1.mp4',
'controlbar': 'none',
'frontcolor': 'FFFFFF',
'lightcolor': 'FFFFFF',
'screencolor': 'FFFFFF',
'autostart': 'true',
'width': '709',
'height': '422'
});
</script>
</div>
</div>
<div id="test" style="width:100px; position:absolute; display:none; height:100px; border:#093 solid 2px; background:#0C6;">
Teeest
</div>
<!--Content-->
<div id="content">
<center><img src="Images/downloadbutton.png" id="myimg" /></center>
<br />
<div class="text">
OH YEAH!
</div>
</div>
<!--Footer-->
<div id="footer">
</div>
</body>
</html>
I think you probably want
$("#test").css({position:"absolute", left:e.pageX,top:e.pageY});
instead of
$("#test").offset({left:e.pageX,top:e.pageY});
It seems to work fine. I have set up a JSFiddle for you:
http://jsfiddle.net/JPvya/
Click on the image and the test div moves. The only change is using the $ short notation for JQuery instead of typing "JQuery" which, by the way is probably case sensetive and causing the problem!
This works well enough for me, so your problem is likely elsewhere.
HTML
<img id="myimg" src="http://placekitten.com/200/300"/>
<span id="test">This is a test</span>
CSS
#test {
display: none;
color: white;
}
JavaScript
$(function() {
$("#myimg").click(function(e) {
var o = {
left: e.pageX,
top: e.pageY
};
$("#test").show(2000).offset(o);
});
});
http://jsfiddle.net/mattball/haFMn/