I try my code but it is not working please check the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<button>Click me</button>
<p style="width: 90px; background-color: #40FF08">This is a test peragraph</p>
</body>
</html>
<script>
$(document).ready(function() {
$("button").click(function() {
$("p").animate({
left: '400px'
});
});
});
</script>
That is because the position property of the p element is static and left won't work on static elements - change it to say relative and it works - see demo below:
$(document).ready(function() {
$("button").click(function() {
$("p").animate({
left: '400px'
});
});
});
p {
width: 90px;
background-color: #40FF08;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button>Click me</button>
<p>This is a test peragraph</p>
Add position: relative and your animation will work just fine.
p {
width: 90px;
background-color: #40FF08;
position: relative; <-- like this
}
$(document).ready(function() {
$("button").click(function() {
$("p").animate({
left: '400px'
});
});
});
p{
width: 90px;
background-color: #40FF08;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Click me</button>
<p>This is a test peragraph</p>
Related
I am trying to have multiple scripts run in my html sheet, and it seems to not be working. All the other scripts work except for the script for the blinking function. I don't see what the problem is. Can you find the issue with my code? Thanks in advance!
Here is my code below:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: coral;
color: white;
}
.text2{
color: white;
width: 100px;
float: right;
padding-top: 10px;
}
</style>
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".btn1").on('click',function(){
$("p").hide();
$(".text2").hide()
$('body').css("background", "black");
});
});
</script>
<script>
//blink
var element = $(".text2");
var shown = true;
setInterval(toggle, 500);
function toggle() {
if(shown) {
element.hide();
shown = false;
} else {
element.show();
shown = true;
}
}
</script>
</head>
<body>
<p>This is a paragraph.</p>
</div>
<div class="text2">
-- : --
</div>
<button class="btn1">online</button>
</body>
</html>
The second script must be inside a JQuery function.
$(document).ready(function(){
var element = $(".text2");
var shown = true;
setInterval(toggle, 500);
function toggle() {
if(shown) {
element.hide();
shown = false;
} else {
element.show();
shown = true;
}
}
});
The second script's contents should be in the document ready handler otherwise the code attempts to locate and work with the .text2 element before that element has been parsed into memory.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: coral;
color: white;
}
.text2{
color: white;
width: 100px;
float: right;
padding-top: 10px;
}
</style>
<link rel="stylesheet" href="styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".btn1").on('click',function(){
$("p").hide();
$(".text2").hide()
$('body').css("background", "black");
});
var element = $(".text2");
var shown = true;
setInterval(toggle, 500);
function toggle() {
if(shown) {
element.hide();
} else {
element.show();
}
shown = !shown;
}
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<div class="text2">-- : --</div>
<button class="btn1">online</button>
</body>
</html>
Preview of how it should be: https://www.youtube.com/embed/8qKRf0cg3Co
As in the video, I have to click on the img to get a large view of the img under it.
So far this is my code:
HTML:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>JQUERY</title>
<script src="jquery/jquery-2.1.1.min.js"></script></head>
<body>
<center>
<div id="wrapper">
<div id="nav">
<div id="overbalk"></div>
<img src="images/foto_01.png" align="top" class="foto" />
<img src="images/foto_02.png" align="top" class="foto" />
<img src="images/foto_03.png" align="top" class="foto" />
<img src="images/foto_04.png" align="top" class="foto" />
</div>
<div id="content">
<img src="images/foto_01.png" align="top" class="slide_foto" />
</div>
</div>
</center>
</body>
</html>
CSS:
<style>
body {
padding: 0;
margin: 0;
background-color: black;
}
#nav {
width: 600px;
margin: 0px auto;
}
#overbalk {
width: 600px;
height: 30px;
position: absolute;
background-color: black;
}
.foto {
width: 75px;
height: 75px;
margin-top: -20px;
border: 1px solid black;
}
.foto:hover {
cursor: pointer;
}
#content {
position: absolute;
top: 50px;
z-index: -2;
width: 100%;
}
.slide_foto {
margin-left:-3200px;
}
</style>
JS:
$(document).ready(function (){
$('.foto').mouseenter(function () {
$(this).animate({marginTop: '+=50'}, 200);
});
$('.foto').mouseleave(function (){
$(this).animate({marginTop: '-=50'}, 200);
});
$('.foto').click(function () {
$(this).next('#content').show();
});
});
I also tried this:
$('.foto').on('click', function () {
$('#content').html(nieuwe_foto).show();
var nieuwe_foto = $(this).attr('src');
$('.slide_foto').attr('src', nieuwe_foto);
}
None of this worked, and got a little bit stuck, the images aren't showing below the small images.
You need to make 2 changes:
Remove this style class from <style>
.slide_foto {
margin-left:-3200px;
}
Make this change in your onclick handler
$('.foto').on('click', function () {
var nieuwe_foto = $(this).prop('src');
$('.slide_foto').prop('src', nieuwe_foto);
});
I have made a working fiddle with sample images https://jsfiddle.net/sachin_puthran/c2qgjpj1/
The following doesn't do anything since nieuwe_foto is undefined until the next line and div#content is already visible .show() doesn't do anything either.
$('#content').html(nieuwe_foto).show();
The .show() isn't what you're looking for. It will essentially "unhide" an element. So if an element has a display: none style then .show() will restore the initial display style. See the docs.
You're closer with your second attempt though. All you want to do in the $('.foto').click function is set the src of the .slide_foto element to what is currently in the src of the this object.
I want to change the opacity of the main image when the mouse hover on the right image simple as that:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
#main {
opacity: 1;
}
#right {
position: absolute;
margin-left: -310px;
margin-top: 320px;
visibility: hidden;
}
#center {
position: absolute;
margin-left: -655px;
margin-top: 20px;
visibility: hidden;
}
</style>
<script>
$(document).ready(function () {
$("#right").hover(function () {
$("main").css("opacity","0.4");
$("right").css("visibility","visible");
}, function () {
$("main").css("opacity","1");
$("right").css("visibility","hidden");
});
});
</script>
</head>
<body>
<img id="main" src="img/1477253.jpg">
<img id="right" src="img/Untitled-1.png">
<img id="center" src="img/Untitled-2.png">
</body>
</html>
but when the mouse get on the hidden right image nothing happen. what am missing here?
You cannot hover over a hidden element.You are binding event to #right which is visibility:hidden
change css properties of right to:
#right {
position: absolute;
margin-left: -310px;
margin-top: 320px;
}
now the element can be seen in DOM and hover event is triggered
JSBIN
you are missing the # id in the jQuery selector
$(document).ready(function () {
$("#right").hover(function () {
$("#main").css("opacity","0.4");
$("#right").css("visibility","visible");
}, function () {
$("#main").css("opacity","1");
$("#right").css("visibility","hidden");
});
});
I have solved it , instead of using visibility: hidden; I used opacity: 0; and this way it worked fine , thanks for the comments guys :)
try this
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
#main {
opacity: 1;
}
</style>
<script>
$(document).ready(function () {
$("#right").hover(function () {
$("#main").css("opacity","0.4");
$("#right").css("visibility","visible");
}, function () {
$("#main").css("opacity","1");
$("#right").css("visibility","hidden");
});
});
</script>
</head>
<body>
<img id="main" src="img/1477253.jpg" />
<img id="right" src="img/1477253.jpg" />
<img id="center" src="img/Untitled-2.png" />
</body>
</html>
Remove css class i.e #right and #center and see the result. Due to this class you are not able to see the image.
You are missing # and hidden element means it is gone. You cannot get mouse hover on it. Use opacity 0 instead. Another point, your image position may not show image on the screen, except it is very large, so I comment it.
Here is the modified version.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
#main {
opacity: 1.0;
}
#right {
/*position: absolute;*/
/*margin-left: -310px;*/
/*margin-top: 320px;*/
opacity: 0.0;
}
#center {
/*position: absolute;*/
/*margin-left: -655px;*/
/*margin-top: 20px;*/
opacity: 0.0;
}
</style>
<script>
$(document).ready(function () {
$("#right").hover(function () {
$("#main").css("opacity","0.4");
$("#right").css("opacity","1.0");
}, function () {
$("#main").css("opacity","1");
$("#right").css("opacity","0.0");
});
});
</script>
</head>
<body>
<img id="main" src="img/1477253.jpg">
<img id="right" src="img/Untitled-1.png">
<img id="center" src="img/Untitled-2.png">
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
#main {
opacity: 1;
}
#right {
position: absolute;
margin-left: -310px;
margin-top: 320px;
visibility: hidden;
}
#center {
position: absolute;
margin-left: -655px;
margin-top: 20px;
visibility: hidden;
}
</style>
<script>
$(document).ready(function () {
$("#right").hover(function () {
$("#main").css("opacity","0.4");
$("#right").css("visibility","visible");
}, function () {
$("#main").css("opacity","1");
$("#right").css("visibility","hidden");
});
});
</script>
</head>
<body>
<img id="main" src="img/1477253.jpg">
<img id="right" src="img/Untitled-1.png">
<img id="center" src="img/Untitled-2.png">
</body>
</html>
Use this.
$(document).ready(function () {
$("#right").mouseover(function () {
$("#main").css("opacity", "0.4");
$("#right").css("opacity", "1");
}).mouseleave(function () {
$("#main").css("opacity", "1");
$("#right").css("opacity", "0");
});
});
DEMO
Referring to jsFiddle's [code][1] by CSWING,
why does this indicate "TypeError: this.domNode is null (26 out of range 15) in dojo.js".
Here is my code copied from CSWING, for learning and testing,
<!DOCTYPE html>
<html>
<head>
<style>
html, body /*standard layout for every dojo webpage*/
{
width: 100%;
height: 100%;
padding: 0px;
margin: 5px;
overflow: hidden;/*no scrollbar used*/
}
#standby {
position: absolute;
top: 50%;
left: 50%;
width:32px;
height:32px;
margin-top: -16px;
margin-left: -16px;
/*
width: 300px;
height: 300px;
background-color: #e7e7e7;
*/
}
</style>
<link rel="stylesheet" href="../dojo1_8/dijit/themes/claro/claro.css">
<script>dojoConfig = {parseOnLoad: true}</script>
<script src="../dojo1_8/dojo/dojo.js"></script>
</head>
<body class="claro">
<div id="standby">
<div id="btn" data-dojo-type="dijit.form.Button" data-dojo-props="label:
Go'"></div>
</div>
<script>
require(["dojox/widget/Standby","dijit/form/Button",
"dojo/store/Memory",'dijit/form/ComboBox',
"dojo/on", "dojo/domReady!"],
function(Standby, Button, Memory, on, ComboBox)
{
var standby = new Standby
({
id: "standbyObj",
target: "btn",
color: "transparent",
zindex: "auto",
duration: "1000"
});
dojo.body().appendChild(standby.domNode);
standby.startup();
on(dojo.byId('btn'), 'click', function()
{
standby.show();
//simulate a request. hide the timeout in 5 seconds
setTimeout(function()
{
standby.hide();
}, 5000);
});
});
</script>
</body>
</html>
Please advise.
Thanks
clement
[1]: http://jsfiddle.net/cswing/253Te/
Looking at my original fiddle, I believe that
dojo.byId('btn')
should be
dijit.byId('btn')
If that doesn't solve your problem, then I would set firebug to Break on Errors. When the error occurs, look at the stack trace to find more information about where the error is coming from and what might be causing it.
Yeah, basically I have this:
Effect.ScrollTo("bottom", { duration: 5.0 });
So what I want is to stop this effect while it's scrolling whenever I want to.
Any help?
var scrollEffect = Effect.ScrollTo("bottom", { duration: 5.0 });
...
scrollEffect.cancel();
This code below works perfectly for me:
<html>
<head>
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js" type="text/javascript"></script>
<style type="text/css" media="screen">
body { font-size: 30px; }
#destination { margin-top: 1400px; }
#start { position: fixed; top: 10px; left: 20px;}
#stop { position: fixed; top: 50px; left: 20px;}
</style>
<script type="text/javascript" charset="utf-8">
function startEffect() {
scrollEffect = Effect.ScrollTo("destination", { duration: 8.0 }); return false;
}
function stopEffect() {
scrollEffect.cancel(); return false;
}
</script>
</head>
<body>
<a id="start" href="#" onclick="return startEffect();">Start Effect</a>
<a id="stop" href="#" onclick="return stopEffect();">Stop Effect</a>
<p id="destination">Scroll Destination</p>
</body>
</html>
What I currently have working currently is having a div as follows:
<div id="pausepos" style="position:absolute;"></div>
Then having the JavaScript cancel the scrolling and move it back to where the original position was:
fallingPosTempArr = $("thetop").viewportOffset();
fallingPosTemp = -1*fallingPosTempArr[1];
$("pausepos").setStyle({
"top" : fallingPosTemp + 'px'
});
scrollEffect.cancel();
setTimeout(function () { Effect.ScrollTo("pausepos", { duration: 0.0 }); }, 10);
It works, but on slower browsers you can see how the page jumps back to the top and then back again.