Scrolling div issue - javascript

Scrolling div issue - javascript

I'm trying to solve a problem with scrolling on website. Take a look at this
site.
Scrolling down causes to slide up the "hidden" part of site. I wanna achieve the same effect, and it needs to be smooth sliding as well. I've tried to use scrollTop() and animate() but it doesn't work. I'm using JQuery. Let me post my code, here it is:
HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<link href="stylin.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$(".button").toggle(function(){
$("#blocks").animate({top: 200}, 500 );
},
function(){
$("#blocks").animate({top: 760}, 500 );
});
});
</script>
<script type="text/javascript">
$(document).ready( function() {
$(document).scroll( function() {
$("#blocks").animate({top: (780-$(this).scrollTop())}, 1000 );
});
});
</script>
</head>
<body>
<div id="main">
<div id="photo">
</div>
<div id="blocks">
<div id="button_block">
<a href="#" class="button" ><img src="scrollup.png" /></a>
</div>
</div>
</div>
</body>
</html>
CSS
#main {
width: 1500px;
position:absolute;
}
#photo{
position:fixed;
top:0;
width:1500px;
height:780px;
background-color:blue;
z-index:0;
}
#blocks{
position:absolute;
top: 760px;
width: 100%;
height: 1000px;
background-color: red;
z-index:1;
}
#button_block{
position:absolute;
width:100%;
height:64px;
top:-32px;
}
.button
{
display:block;
position: absolute;
right: 686px;
}
Div blocks should be the one sliding up while scrolling.
Look at this part:
<script type="text/javascript">
$(document).ready( function() {
$(document).scroll( function() {
$("#blocks").animate({top: (780-$(this).scrollTop())}, 1000 );
});
});
</script>

#main {
width: 1500px;
position:absolute;
}
#photo{
position:fixed;
top:0;
width:1500px;
height:780px;
background-color:blue;
z-index:0;
}
#blocks{
position:absolute;
top: 760px;
width: 100%;
height: 1000px;
background-color: red;
z-index:1;
}
#button_block{
position:absolute;
width:100%;
height:64px;
top:-32px;
}
.button
{
display:block;
position: absolute;
right: 686px;
}
#scroll_to_top{
display:none;
position:fixed;
bottom:15px;
right:20px;
opacity:0.8;
z-index:9999;
}
#scroll_to_top:hover{
opacity:1;
}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<link href="stylin.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$(".button").toggle(function(){
$("#blocks").animate({top: 200}, 500 );
},
function(){
$("#blocks").animate({top: 760}, 500 );
});
});
</script>
<script type="text/javascript">
$(function(){
var stt_is_shown = false;
$(window).scroll(function(){
var win_height = 300;
var scroll_top = $(document).scrollTop();
if (scroll_top > win_height && !stt_is_shown) {
stt_is_shown = true;
$("#scroll_to_top").fadeIn();
} else if (scroll_top < win_height && stt_is_shown) {
stt_is_shown = false;
$("#scroll_to_top").fadeOut();
}else if{
<script type="text/javascript">
$(document).ready( function() {
$(document).scroll( function() {
$("#blocks").animate({top: (780-$(this).scrollTop())}, 1000 );
}
});
});
</script>
});
$("#scroll_to_top").click(function(e){
e.preventDefault();
$('html, body').animate({scrollTop:0}, 1000);
});
});
</script>
<script type="text/javascript">
$(document).ready( function() {
$(document).scroll( function() {
$("#blocks").animate({top: (780-$(this).scrollTop())}, 1000 );
});
});
</script>
</head>
<body>
<div id="main">
<div id="photo">
</div>
<div id="blocks">
<div id="button_block">
<a href="#" class="button" ><img src="scrollup.png" /></a>
</div>
</div>
</div>
<img src="scrollup.png" />
</body>
</html>
I changed the if else statements and added a new one try it!

Related

jquery image slider fadeIn not working

I am building an Image slider from this tutorial. youtube.com
I cannot get the first image to fadeIn
I have reviewed the code several times but cannot see where i went wrong.
Here is my code
HTML
<DOCTYPE html>
<html>
<head>
<title>Helping Develope | Jquery Slider</title>
<link rel="stylesheet" href="css/slider.css" type="text/css">
<meta charset="utf-8">
</head>
<body>
<div class="wrapper">
<div id='slider'>
<img id="1" src="Images/Image1.jpg">
<img id="2" src="Images/Image2.jpg">
<img id="3" src="Images/Image3.png">
<img id="4" src="Images/Image4.png">
</div>
<a href="#" class='left'>Previous</a>
<a href="#" class='right'>Next</a>
</div>
<script src="js/jquery.js"></script>
<script src="js/slider.js"></script>
</body>
</html>
CSS
.wrapper{
width: 600px;
margin: 0 auto;
}
#slider {
width:600px;
height:400px;
overflow:hidden;
margin:30px auto;
}
#slider > img{
width: 600px;
height:400px;
float:left;
display:none;
}
a {
padding:5px 10px;
background-color:#F0F0F0;
margin-top:30;
text-decoration: none;
color: red;
}
a.left{
float:left;
}
a.right{
float:right;
}
Javascript
var sliderInt=1;
var sliderNext=2;
$(document).ready(function(){
$("#slider > img#1").fadeIn(300);
startSlider()
});
function startSlider(){
count = $("#slider > img").size();
loop= setInterval(function(){
if(sliderNext > count) {
sliderNext=1;
sliderInt=1;
}
$("#slider>img").fadeOut(300);
$("#slider>img#" + sliderNext).fadeIn(300);
sliderInt = sliderNext;
sliderNext = sliderNext + 1;
}, 3000);
}

In your code you added }}; insted of });
var sliderInt=1;
var sliderNext=2;
$(document).ready(function(){
$("#slider > img#1").fadeIn(300);
startSlider()
});
function startSlider(){
count = $("#slider > img").length;
loop= setInterval(function(){
if(sliderNext > count) {
sliderNext=1;
sliderInt=1;
}
$("#slider>img").fadeOut(300);
$("#slider>img#" + sliderNext).fadeIn(300);
sliderInt = sliderNext;
sliderNext = sliderNext + 1;
}, 3000);
}
.wrapper{
width: 600px;
margin: 0 auto;
}
#slider {
width:600px;
height:400px;
overflow:hidden;
margin:30px auto;
}
#slider > img{
width: 600px;
height:400px;
float:left;
display:none;
}
a {
padding:5px 10px;
background-color:#F0F0F0;
margin-top:30;
text-decoration: none;
color: red;
}
a.left{
float:left;
}
a.right{
float:right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<DOCTYPE html>
<html>
<head>
<title>Helping Develope | Jquery Slider</title>
<link rel="stylesheet" href="css/slider.css" type="text/css">
<meta charset="utf-8">
</head>
<body>
<div class="wrapper">
<div id='slider'>
<img id="1" src="http://placehold.it/600x400g/ff0000">
<img id="2" src="http://placehold.it/600x400g/00ff00">
<img id="3" src="http://placehold.it/600x400g/0000ff">
<img id="4" src="http://placehold.it/600x400g/000000">
</div>
<a href="#" class='left'>Previous</a>
<a href="#" class='right'>Next</a>
</div>
<script src="js/jquery.js"></script>
<script src="js/slider.js"></script>
</body>
</html>

Here is the working snippet. Is it what are you searching for?
var sliderInt=1,
sliderNext=2;
$(document).ready(function() {
$("#slider > img#1").fadeIn(300);
})
.wrapper {
width: 600px;
margin: 0 auto;
}
#slider {
width:600px;
height:400px;
overflow:hidden;
margin:30px auto;
}
#slider > img{
width: 600px;
height:400px;
float:left;
display:none;
}
a {
padding:5px 10px;
background-color:#F0F0F0;
margin-top:30;
text-decoration: none;
color: red;
}
a.left{
float:left;
}
a.right{
float:right;
}
<DOCTYPE html>
<html>
<head>
<title>Helping Develope | Jquery Slider</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<meta charset="utf-8">
</head>
<body>
<div class="wrapper">
<div id='slider'>
<img id="1" src="Images/Image1.jpg">
<img id="2" src="Images/Image2.jpg">
<img id="3" src="Images/Image3.png">
<img id="4" src="Images/Image4.png">
</div>
<a href="#" class='left'>Previous</a>
<a href="#" class='right'>Next</a>
</div>
<script src="js/jquery.js"></script>
<script src="js/slider.js"></script>
</body>
</html>

Smooth scroll on button click: Not working for me but works great in the Code Snippet

I'm a beginner in JavaScript and jQuery. My css and JavaScript codes are external to html file. There are already answers for this question and i tried, tried all the codes but scrolling does not work. I don't know what i missed. jQuery is installed (Even CDN).
Well, this code works in the snippet so probably something wrong with javaScript or JQuery. Still i don't know what is my mistake. Please help.
$("#btn1").click(function() {
$('html,body').animate({
scrollTop: $("#fir").offset().top},
'slow');
});
$("#btn2").click(function() {
$('html,body').animate({
scrollTop: $("#sec").offset().top},
'slow');
});
.button1{ position:absolute; top:130px; left:150px; font-size: 10px; cursor:pointer; color:#000000;}
.main{ width: 100%; height:500px; background:black; }
.first{ width: 100%; height: 1000px; background: green; }
.second{ width: 100%; height: 1000px; background: blue; }
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<script src="http://code.jquery.com/jquery-2.2.1.min.js"></script> <!-- JQuery CDN -->
<script>window.jQuery || document.write('<script src="JQuery.js"><\/script>');</script> <!-- JQuery library -->
<script src="js/script.js" type="text/javascript"></script> <!-- my javascript -->
<div class="main">
<button id="btn1" type="button" class="button1">Sign Up</button>
<button id="btn2" type="button" class="button1" style=left:250px>Sign In</button></div>
<div id="fir" class="first"></div>
<div id="sec" class="second"></div>
</body>
</html>

I have combined (for simplicity of my test) all the elements into singe .html file with some modifications and it works for me:
move script tags at the end of the document
add document.ready() logic
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<style type="text/css">
.button1{ position:absolute; top:130px; left:150px; font-size: 10px; cursor:pointer; color:#000000;}
.main{ width: 100%; height:500px; background:black; }
.first{ width: 100%; height: 1000px; background: green; }
.second{ width: 100%; height: 1000px; background: blue; }
</style>
<div class="main">
<button id="btn1" type="button" class="button1">Sign Up</button>
<button id="btn2" type="button" class="button1" style=left:250px>Sign In</button></div>
<div id="fir" class="first"></div>
<div id="sec" class="second"></div>
<script src="http://code.jquery.com/jquery-2.2.1.min.js"></script> <!-- JQuery CDN -->
<script type="text/javascript">
$( document ).ready(function() {
$("#btn1").click(function() {
$('html,body').animate({
scrollTop: $("#fir").offset().top},
'slow');
});
$("#btn2").click(function() {
$('html,body').animate({
scrollTop: $("#sec").offset().top},
'slow');
});
});
</script>
</body>
</html>

My jQuery slider doesn't work properly

I have developed a custom slider. I'm having only one image animation occur, and the other images are not displaying. How do I show the other images with an animation?
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
.Slider
{
width: 800px;
height: 350px;
overflow: hidden;
margin: 30px auto;
background-image:url(http://cdn.css-tricks.com/wp-content/uploads/2011/02/spinnnnnn.gif);
background-repeat: no-repeat;
background-position: center;
}
.Shadow
{
background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSb6KDmhtvsBAzkpXLHcijTuE_gYERTMkx5xpkbUS0lwV8ByTFx);
background-repeat: no-repeat;
background-position: top;
width: 864px;
height: 144px;
margin: -60px auto;
}
.Slider img{
width: 800px;
height: 350px;
display: none;
}
</style>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript">
function Slider()
{
$(".Slider #1").show("fade",500);
$(".Slider #1").delay(5500).hide("slide",{direction:'left'},500);
}
var slderCount=$(".Slider img.").size();
var count=2;
setInterval(function()
{
$("Slider #"+count).show("slide",{direction:'left'},500);
$("Slider #"+count).delay(5500).hide("slide",{direction:'left'},500);
if(count==slderCount)
{
count=1;
}
else
{
count=count+1;
}
},6500);
</script>
</head>
<body onload="Slider();">
<div class="Slider">
<img id="1" src="http://accessengsl.com/wp-content/files_mf/1.jpg" border="0" alt="Helping develop"/>
<img id="2" src="http://accessengsl.com/wp-content/files_mf/trincokanthaleroad.jpg" border="0" alt="Helping concrete" />
<img id="3" src="http://accessengsl.com/wp-content/files_mf/08_new.jpg" border="0" alt="no develop" />
</div>
<div class="Shadow"> </div>
</body>
</html>

Change var slderCount=$(".Slider img.").size(); to
var slderCount=$(".Slider img").length;

Your slider count selector is wrong:
var slderCount=$(".Slider img.").size();
Should be:
var slderCount = $(".Slider").find("img").length;
But honestly, you are just reinventing the wheel. Use tinycarousel or any other slider plugin.

Trym
setInterval(function()
{
$(".Slider #"+count).show("slide",{direction:'left'},500);
$(".Slider #"+count).delay(5500).hide("slide",{direction:'left'},500);
if(count==slderCount)
{
count=1;
}
else
{
count=count+1;
}
},6500);

How to move div horizontally

I am trying to the div box with image move left to right,
I tried another script: http://jsfiddle.net/bala2024/MzHmN/
Here is the html code
<!DOCTYPE html>
<html>
<head></head>
<body style>
<div id="slideleft" class="slide">
<button>slide it</button>
<div class="inner">Slide to the left</div>
<div style="width:50px; height:50px">
<img src="sceen.jpg">
</div>
</div>
</body>
</html>
CSS
.slide {
position: relative;
background-color: gray;
height: 100px;
width: 500px;
overflow: hidden;
}
.slide .inner {
position: absolute;
left: -500px;
bottom: 0;
background-color:#e3e3e3;
height: 30px;
width: 500px;
}
JS
$(document).ready(function () {
$('#slideleft button').click(function () {
var $lefty = $(this).next();
$lefty.animate({
left: parseInt($lefty.css('left'), 10) == 0 ? -$lefty.outerWidth() : 0
});
});
});

You will need to apply width to main container. Please replace it with below line and check in your browser.
<div id="slideleft" class="slide" style="width:100px; margin:0 auto">

use margin for outer space and padding for inner space
try this
<!DOCTYPE html>
<html>
<head>
</head>
<body style>
<div id="slideleft" class="slide">
<button>slide it</button>
<div class="inner">Slide to the left</div>
<div style="width:50px; height:50px; margin-left: 100px;"><img src="sceen.jpg">
</div>
</div>
</body>
</html>

Click the following link to watch live demo... Click Here
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Animation test</title>
<style>
</style>
<script type="text/javascript">
$(document).ready(function() {
$("#b").animate({left: "+=500"}, 2000);
$("#b").animate({left: "-=300"}, 1000);
});
</script>
</head>
<body>
<div style="position:relative">
<div id="b" style="position:absolute;">B</div>
</div>
</body>
</html>

CSS:
div.inner{
background:black;
margin-left:0;
width:100px;
animation:sample 2s;
-webkit-animation:sample 2s;
}
keyframes sample{
from{margin-left:100%;}
to{margin-left:0%;}
}
#-webkit-keyframes sample{
from{margin-left:100%;}
to{margin-left:0%;}
}
fiddle: http://jsfiddle.net/apRMU/17/

slideshow pause button doesn't work

This is a slideshow,and my problem is the pause button doesn't work and it doesn't pause the slideshow.It doesn't have any errors in firebug.The button changes to resume but doesn't pause the slideshow.
I will be really really thankfull for your help.
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm6.aspx.cs" Inherits="WebApplication4.WebForm6" %>
<!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 runat="server">
<title></title>
<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script type="text/javascript" src="cycle.js"></script>
<script style="text/javascript">
$(function () {
$('.slider img:gt(0)').hide();/*hides first 2th 3th pics*/
setInterval(function () {
$('.slider :first-child').fadeOut()
.next('img').fadeIn()
.end().appendTo('.slider');
},
3000);
});
$(document).ready(function ($) {
$('#playbutton').click(function () {
$(this).css('margin-left', '-9999px');
$('#pausebutton').css('margin-left', 0);
});
$('#pausebutton').click(function () {
$(this).css('margin-left', '-9999px');
$('#playbutton').css('margin-left', 0);
});
});
$(document).ready(function ($) {$('#playbutton').click(function() {
$('#mg').cycle('resume');
}); });
$(document).ready(function ($) {$('#pausebutton').click(function() {
$('#mg').cycle('pause');
});
});
</script>
<style type="text/css">
.slider
{
position:fixed;
width:750px;
height:400px;
background-color:white;
top: 9px; left: 12px; z-index:-1;
background:transparent url(loading.gif) no-repeat 50% 50%;
}
.slider img {
border-style: none;
border-color: inherit;
border-width: medium;
position:fixed;
top: 42px;
left: 50px;
height: 220px;
width: 651px;
bottom: 267px;
}
#pausebutton {
left: 356px;
margin-left:0px;
position:absolute;
top: 273px;
height: 27px;
}
#playbutton {
left: 356px;
margin-left:0px;
position:absolute; top: 273px;
height: 27px;
}
</style>
</head>
<body >
<div class="slider" id="mg" >
<img src="slider-2.jpg" />
<img src="slider-3.jpg" />
<img src="slider-4.jpg" />
</div >
<img src="play.png" alt="play button" title="Play" />
<a href="#" id="pausebutton" ><img src="pause.png" alt="pause button" title="Pause" /></a>
</body>
</html>

I think you'll need to stop the default behaviour of the <a> tag as clicking it will cause your page to refresh.
$('#pausebutton').click(function(e) {
e.preventDefault();
$('#mg').cycle('pause');
});

I think your code has logic error because when firebug hasn't any errors it show your code has not any Syntax errors.try debugging your code by firebug or check again your code. other thing is testing your code in multiple browser most of the time java scripts code dos not work true in all browsers .

Develop Reference

JavaScript is the programming language of the Web.

Scrolling div issue - javascript

Related

jquery image slider fadeIn not working

Smooth scroll on button click: Not working for me but works great in the Code Snippet

My jQuery slider doesn't work properly

How to move div horizontally

slideshow pause button doesn't work

Categories

Resources