I just want the value to increase when scrolling down and decrease when scrolling up.
This is the HTML:
<html>
<head>
<script src="/jquery.min.js"></script>
<script src="9.js"></script>
<style>
#addit
{
position:fixed;
top:0px;
left:0px;
}
</style>
</head>
<body>
<div id="addit">
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br>
</body>
</html>
Here is the jQuery code:
$(window).scroll(function(){
var x=1;
x=x+1;
$("#addit").html(x);
});
As I am new to jQuery, I can't find a way for it!
Can anyone help?
You don't need a variable, just:
$(window).scroll(function(){
$("#addit").html($(window).scrollTop());
});
DEMO
Please try this:
$(window).scroll(function() {
$("#addit").html($(window).scrollTop());
});
Related
Hi guys im new to jquery/ javascript. i found some code in w3schools and i want to use it in my website. but i want the animation to trigger ever time i load the page. please help me how to do this
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
});
</script>
</head>
<body>
<p>Demonstrate fadeToggle() with different speed parameters.</p>
<button>Click to fade in/out boxes</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body>
</html>
i want to do something like this
<body onload="myFunction()">
<h1>Hello World!</h1>
<script>
function myFunction() {
alert("Page is loaded");
}
</script>
</body>
</html>
Is this what you wanted:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body onload="myFunction()">
<h1>Hello World!</h1>
<script>
function myFunction() {
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
}
</script>
</body>
</html>
try this
$(document).ready(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
if you are approaching for executing the function after Page loaded, then Put below JavaScript at end of your HTML design:
<script type="text/javascript">
window.onload = myFunction();
</script>
And define the function at start of the Page as you've done already!
So, final Code becomes like below:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
});
</script>
</head>
<body>
<p>Demonstrate fadeToggle() with different speed parameters.</p>
<button>Click to fade in/out boxes</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
<script type="text/javascript">
window.onload = myfunction();
</script>
</body>
</html>
Let me know by accepting it, if it works :)
I think best way is to use event listener.
<script type="text/javascript">
window.addEventListener('load',myfunction,false);
</script>
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>
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
I'm new to coding and hope someone could help me with my hopeless code skills. I'm trying to create a div that will animate on and off the screen on press a button. Here is what I've got so far.... it's probably stupidly wrong but I guess that's what this site is for.. here you go
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="test">Example Text</div>
<script>
function myFunction()
{
var position = test.position();
if("#test".position<0)
{
alert("hello");
$("#test").animate({
"left": 0
},1000);
}else{
$("#test").animate({
"left": -15
},1000);
});
}
</script>
</body>
</html>
This function is called when an image is clicked. My idea was to basically tell the div to animate onto the screen if it's position value is less than 0, which I think tells it that it's off the screen. If it doesn't detect it's value is offscreen, it means the div is onscreen at the moment and so it should animate away. I'd be very grateful of any help that anyone can provide. Thanks very much in advance!
Here you go.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="test">TESTTEST</div>
<input type="button" name="myButton" value="Click Me" onclick="myFunction()" />
<script>
function myFunction()
{
var divPosition = $("#test").offset();
if(divPosition.left < 0 )
{
$("#test").animate({
"left": 0
},1000);
}else{
$("#test").animate({
"left": -150
},1000);
};
}
</script>
</body>
</html>
And CSS:
#test{
background-color:white;
border:3px solid black;
font-size:30px;
position:absolute;
left:-20%;
top:10%;
}
Working Fiddle: http://jsfiddle.net/KeE4h/48/
Ok, so I recently started learning jQuery, but I'm having trouble with a little animation program I got off of the jQuery website.
So here is the problem. This program works:
<HTML>
<HEAD>
<script type="text/javascript" src="javascript/jQuery-1.7.1.min.js"></script>
<STYLE type="text/css">
#content {
background-color:#6688ff;
position:absolute;
width:100px;
height:100px;
padding:3px;
margin-top:5px;
left: 100px;
}
</STYLE>
</HEAD>
<BODY>
<input type="button" id="left" value="Left"/>
<input type="button" id="right" value="Right"/>
<div id="content">Move</div>
<script type="text/javascript">
$("#right").click(function() {
$("#content").animate(
{"left": "+=50px"},
"slow");
});
$("#left").click(function() {
$("#content").animate(
{"left": "-=50px"},
"slow");
});
</script>
</BODY>
</HTML>
But this program doesn't:
<HTML>
<HEAD>
<script type="text/javascript" src="javascript/jQuery-1.7.1.min.js"></script>
<script type="text/javascript">
$("#right").click(function() {
$("#content").animate(
{"left": "+=50px"},
"slow");
});
$("#left").click(function() {
$("#content").animate(
{"left": "-=50px"},
"slow");
});
</script>
<STYLE type="text/css">
#content {
background-color:#6688ff;
position:absolute;
width:100px;
height:100px;
padding:3px;
margin-top:5px;
left: 100px;
}
</STYLE>
</HEAD>
<BODY>
<input type="button" id="left" value="Left"/>
<input type="button" id="right" value="Right"/>
<div id="content">Move</div>
</BODY>
</HTML>
The only difference between the two programs is where I put the javscript, so could anyone explain me why that makes a difference? Thanks, cause that is confusing me.
The document isn't ready when the second jQuery code chunk runs, so it doesn't work.
Always wrap your jQuery code in a $(document).ready() statement:
$(document).ready() {
$("#right").click(function() {
$("#content").animate({"left": "+=50px"}, "slow");
});
$("#left").click(function() {
$("#content").animate({"left": "-=50px"}, "slow");
});
});
Your second code chunk is correct.
The browser load/parse/render html and javascript from top to bottom, the one doesn't work as you put it before those html elements and when it runs it can't found those html tags, use jQuery ready can avoid this: http://api.jquery.com/ready/
the css should come before any javascript so that the document has all the elements preloaded.
The second code block refers to #right before right is even declared.