Animate a div on and off screen when press a button - javascript

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/

Related

How to get the window to scroll all to left and top in JAVASCRIPT - no jQuery

I have the following code below. If I scroll all the way to the right and then reload the page, I expected (based on my javascript code) for the window to scroll all the way to the left. However this does not happen. Please can someone advise?
<html>
<head>
<meta charset="utf-8">
</head>
<style>
#_1{
border: 1px solid blue;
width:1500px;
height: 400px;
}
</style>
<body>
<div id="_1"></div>
</body>
<script>
window.onload = function(){
window.scrollTo(0,0);
}
</script>
I think you may try this?
window.onbeforeunload = function () {
window.scrollTo(0, 0);
}
Or
$(document).ready(function(){
$(this).scrollTop(0);
});
Hope that you like it :)

jQuery increase and decrease value on scrolling

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

setTimeout() doesn't make a transition effect

I was trying to make a red bar (created with a div and a red background-color) that can extend from 0 pixels in width to 200 pixels in width. My code works when I insert a window.alert(x.width) in the function myF(), but the code doesn't give me a transition when I don't put it in. Is it just a problem with the setTimeout()?
<!DOCTYPE html>
<html>
<head>
<script>
function myF(){
var x = document.getElementById("bar1").style;
if(parseInt(x.width)<200){
x.width = (parseInt(x.width)+1)+"px";
setTimeout(myF(),1);
}
}
</script>
</head>
<body onload="myF()">
<div id="bar1" style="width:0px; text-align:center; height:10px;background-color:red; font-size:10px; padding:0px; margin:0px;"></div>
</body>
</html>
you should do :
setTimeout(myF,1);
instead of :
setTimeout(myF(),1);

How does one create a DIV that appears in the bottom corner of the window (after a set amount of time)?

I would like to create a "LiveChat Offering" pop-up that appears in the bottom of the screen after our visitors arrive at a specific page, and have been on that page for say 30 seconds or so. I would like to keep the code jQuery/CSS if at all possible.
<script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script type="text/javascript">Some jQuery that will change the 'display:hidden;' to 'display:block;' on the DIV after 30 seconds</script>
<div id="live-chat" style="position:absolute;bottom:0px; right:100px;z-index:5;display:none;>
<h4>Need Help?</h4>
<p>Click the link below for assistance</p>
Chat with a salesman
</div>
Looks like you already got the position part, and you are asking about the delay part?
Something with setTimeout like this could work
$(document).ready(function() {
setTimeout(function() {
$('#live-chat').show();
}, [delay in ms]);
}
You probably also want to change the .show() to have some kind of effect to alert the user that it appeared.
Try this:
<script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script type="text/javascript">
$(document).ready(function() {
setTimeout(function() {
$("#live-chat").css({ "display" : "block" });
}, 30000); // 30 seconds in MS
});
</script>
<div id="live-chat" style="position:absolute;bottom:0px; right:100px;z-index:5;display:none;>
<h4>Need Help?</h4>
<p>Click the link below for assistance</p>
Chat with a salesman
</div>
Good luck!
Edit:
For sliding it in:
<script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script type="text/javascript">
$(document).ready(function() {
// Store our panel into a variable.
var $myPanel = $("#live-chat");
// Get the height of the panel dynamically.
var $myPanelHeight = parseInt($myPanel.height());
// Immediately set the opacity to 0 - to hide it and set its bottom to minus its height.
$myPanel.css({ "opacity" : 0, "bottom" : "-" + $myPanelHeight + "px" });
// Set a timeout for the panel to slide and fade in.
setTimeout(function() {
$myPanel.animate({
// The CSS properties we want to animate (opacity and bottom position).
opacity: 1,
bottom: '0'
}, 2000, function() {
// Animation complete.
// You can put other code here to do something after it has slid-in.
});
}, 30000); // 30 seconds in MS
});
</script>
<div id="live-chat" style="position: absolute; bottom: 0px; right:100px; z-index:5;">
<h4>Need Help?</h4>
<p>Click the link below for assistance</p>
Chat with a salesman
</div>
The following is a starting point that has the functionality I asked for :) Thanks everyone! I used Michael's example...
<!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>Untitled Document</title>
<script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script type="text/javascript">
$(document).ready(function() {
setTimeout(function() {
$("#live-chat").css({ "display" : "block" });
}, 5000); // 30 seconds in MS
});
</script>
</head>
<body>
<div id="live-chat" style="width:250px; height:150px; position:absolute; bottom:0px; right:100px; z-index:5; display:none; border:#ccc 1px dashed;">
<h4>Need Help?</h4>
<p>Click the link below for assistance</p>
Chat with a salesman
</div>
</body>
</html>
You can use the delay function of jQuery
$(document).ready(function() {
var miliseconds = 30000 //30 seconds
$("#live-chat").delay(miliseconds).hide();
}
here is a jsfiddle example for your code: jsfiddle

jQuery Progress bar and counter

I searched alot about this and tried some of my own but I can't seem to make it work.
What I'm trying to realize is a progress bar that adds 10 or subtracts 10 every time you press a button.
Example when you press the button UP you add 10 to the progress bar and when you press the button DOWN you remove 10 from the bar.
Whatelse I'd want to realize is a script that can "read" the status of the progressbar and with an if or else function display a text from a paragraph (If > 50 it'll fadeIn a text, else < 50 it'll fadeIn a different text)
Hope I explained myself well and hope anyone can help me. I'm still new in jQuery/JavaScript.
jQuery UI has a built-in progress bar that you can do what you want easily.
http://jqueryui.com/demos/progressbar/
Here's a simple implementation of what you're trying to do:
http://jsfiddle.net/makotosan/bW5Wd/3/
Here is a little example to get you started; there are a lot of capabilities to this script, don't be afraid to experiment a little bit:
<!doctype html>
<html lang="en" dir="ltr">
<head>
<title>Progress Bar</title>
<meta charset="utf-8" />
<style>
#progress {
position:relative;
width:25px;
height:100px;
border:2px solid #000;
background-color:#ccc;
}
#progress div {
position:absolute;
bottom:0;
height:0;
width:25px;
background-color:#f00;
}
span {
margin:10px auto;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function(){
// Define your variables
var interval=10;
var half=50;
var max=100;
var texts=['Less then 50...','More then 50!'];
var upButton=$('button[name="up"]');
var downButton=$('button[name="down"]');
var bar=$('#progress').find('div');
upButton.on('click',function(){
var height=bar.height();
if(height>=0 && height<max) {
var newHeight=parseFloat(height+interval,10);
bar.css('height',newHeight);
$('span').hide().text((newHeight<half) ? texts[0] : texts[1]).fadeIn();
}
});
downButton.on('click',function(){
var height=bar.height();
if(height>0 && height<=max) {
var newHeight=parseFloat(height-interval,10);
bar.css('height',newHeight);
$('span').hide().text((newHeight<half) ? texts[0] : texts[1]).fadeIn();
}
});
});
</script>
</head>
<body>
<h1>Progress Bar</h1>
<p>
<button name="up">Add</button> <button name="down">Remove</button>
</p>
<div id="progress">
<div> </div>
</div>
<span></span>
</body>
</html>

Categories