here I am trying to make my two id's #stop,#stop2 be fixed even after scrolling and make my #stop3 scroll till it reaches #footer once it reaches #footer both #stop,#stop2 should stop scrolling.here in my case both #stop,#stop2 are scrolling on to the #footer which should not happen, I dont know where I am going wrong, any help is accepted.Thank you in advance.
<!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>
<style>
.one{width:100px;border:1px solid #CCC;height:200px;float:left;margin:0px 20px;background:#F00;}
.footer{width:100%;height:800px;background:#339;clear:both;}
</style>
</head>
<body>
<div class="scroller_anchor"></div>
<div id="stop" class="one"></div>
<div class="one" id="stop3" style="height:2000px;">
</div>
<div id="stop2" class="one"></div>
<div class="scroller_anchor1"></div>
<div class="footer" id="footer"></div>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(window).scroll(function(e) {
var scroller_anchor = $(".scroller_anchor").offset().top;
var scroller_anchor1 = $(".scroller_anchor1").offset().top;
if ($(this).scrollTop() >= scroller_anchor && $("#stop,#stop2").css('position') != 'fixed')
{
$('#stop,#stop2').css({
'position': 'fixed',
'top': '0px'
});
$('#stop').css({
'left':'4%'
});
$('#stop2').css({
'right':'2%'
});
$('#stop3').css({
'left':'16.6%'
});
$('.scroller_anchor').css('height', '50px');
}
else if ($(this).scrollTop() > scroller_anchor1 && $('#stop,#stop2').css('position') != 'relative' )
{
$('#stop,#stop2,#stop3').css({
'position': 'relative',
'left':'inherit',
'right':'inherit'
});
}
else if ($(this).scrollTop() < scroller_anchor && $('#stop,#stop2').css('position') != 'relative' )
{
$('.scroller_anchor').css('height', '0px');
$('#stop,#stop2,#stop3').css({
'position': 'relative',
'left':'inherit',
'right':'inherit'
});
}
});
</script>
</html>
here is my fiddle jsfiddle.net/xPdD7
I've modified your js code a little bit for testing purposes, but all the hardcoded values can be changed to your particular needs:
$(window).scroll(function(e) {
var scroller_anchor = $(".scroller_anchor").offset().top;
var scroller_anchor1 = $(".scroller_anchor1").offset().top;
var footer = $(".footer").offset().top;
if ($(this).scrollTop() >= scroller_anchor && $("#stop,#stop2").css('position') != 'fixed')
{
$('#stop,#stop2').css({
'position': 'fixed',
'top': '8px'
});
$('#stop2').css({
'left':'280px'
});
$('#stop3').css({
'left':'140px'
}); }
if (($(this).scrollTop()+200) > footer )
{
$('#stop,#stop2').css({
'position':'absolute',
'top':'1800px'
});
}
});
Also here's an updated fiddle: http://jsfiddle.net/xPdD7/8/
Is this what you are trying to achieve?
Related
I have images in my page and if resulution of my page less than 768px my img src must change with data-tablet and if resulution of my page less than 480px my img src must change with data-mobil or if my resulution bigger than 768px img src must change with data-web or if my resulution bigger than 480 it must change with data-tablet I wrote some code for it but I guess there is something wrong with condition or syntax
$(document).ready(function(){
$(".box img").each(function(){
var getWeb = $(this).parents(".box").find("img").attr("data-web");
var getTablet = $(this).parents(".box").find("img").attr("data-tablet");
var getMobil = $(this).parents(".box").find("img").attr("data-mobil");
if ($(window).width() < 768) {
$(this).attr("data-src",getTablet);
}else if ($(window).width() < 480){
$(this).attr("data-src",getMobil);
}else if ($(window).width() > 480){
$(this).attr("data-src",getTablet);
}else if($(window).width() > 768)
{
$(this).attr("data-src",getWeb);
}
});
});
.box{
margin:10px;
float:left;
}
.box img{
width:300px;
}
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
</head>
<body>
<div class="box">
<img data-src="https://cdn.pixabay.com/photo/2017/01/18/21/34/cyprus-1990939_960_720.jpg" data-web="https://cdn.pixabay.com/photo/2017/01/18/21/34/cyprus-1990939_960_720.jpg" data-tablet="https://cdn.pixabay.com/photo/2017/01/31/09/30/raspberry-2023404_960_720.jpg" data-mobil="https://cdn.pixabay.com/photo/2017/01/20/15/12/ring-nebula-1995076_960_720.jpg" class="lazyload" />
</div>
<div class="box">
<img data-src="https://cdn.pixabay.com/photo/2017/01/20/15/06/orange-1995056_960_720.jpg" data-web="https://cdn.pixabay.com/photo/2017/01/20/15/06/orange-1995056_960_720.jpg" data-tablet="https://cdn.pixabay.com/photo/2014/06/29/12/46/apple-379373_960_720.jpg" data-mobil="https://cdn.pixabay.com/photo/2016/02/21/00/29/fruit-1213041_960_720.jpg" class="lazyload" />
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/2.0.7/lazysizes.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
by the way just these code works
else if ($(window).width() > 480){
$(this).attr("data-src",getTablet);
}
and click to see project on codepen
You need to run your check for window width and run your code on the resize event
window.onresize = function(event) {
[your code]
};
Try putting your code inside a function and calling it when document is ready:
$(document).ready(function(){
checksize();
function checksize(){
$(".box img").each(function(){
var getWeb = $(this).parents(".box").find("img").attr("data-web");
var getTablet = $(this).parents(".box").find("img").attr("data-tablet");
var getMobil = $(this).parents(".box").find("img").attr("data-mobil");
if ($(window).width() < 768) {
$(this).attr("data-src",getTablet);
}else if ($(window).width() < 480){
$(this).attr("data-src",getMobil);
}else if ($(window).width() > 480){
$(this).attr("data-src",getTablet);
}else if($(window).width() > 768)
{
$(this).attr("data-src",getWeb);
}
});
}
});
I need to code a website with onepage scroll sections without using a plugin(like fullPage.js). So i just created 6 sections like:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="hlpjs.js" type="text/javascript"></script>
<title>My Website</title>
<link href="hlpcss.css" rel="stylesheet" type="text/css">
</head>
<body>
<section id="section1">
<h1>text1</h1>
</section>
<section id="section2">
<h1>text2</h1>
</section>
<section id="section3">
<h1>text3</h1>
</section>
<section id="section4">
<h1>text4</h1>
</section>
<section id="section5">
<h1>text5</h1>
</section>
<section id="section6">
<h1>text6</h1>
</section>
</body>
and i tried to scroll through the sections in a javascript document like this:
var count = 1;
$(window).bind('mousewheel DOMMouseScroll', function(event){
if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
if (count < 6) {
count++;
$('html, body').animate({
scrollTop: $("#section"+count).offset().top
}, 2000);
}
} else {
if(count>1){
count--;
$('html, body').animate({
scrollTop: $("#section"+count).offset().top
}, 2000);
}
}
});
But its not working as it should. It's just scrolling randomly until it's at the top(or bottom) and then it stops.
I removed the if statements and added the complete callback so now it works. My only problem is now that I can scroll infinitely up and down but if i try to add any if statement the animations do not work at all(Any suggestions?). Otherwise i'm gonna go with that:
var count = 1;
$(window).bind('mousewheel DOMMouseScroll', function(event){
if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
count--;
$('html, body').animate({
scrollTop: $("#section"+count).offset().top
}, 1000,function(){
$('html, body').clearQueue();
});
}
else {
count++;
$('html, body').animate({
scrollTop: $("#section"+count).offset().top
}, 1000,function(){
$('html, body').clearQueue();
});
}
});
I've be working on a website which already has CSS elements and have tried to put a slider in a small css box, but isn't working for some reason. I'm using Jquery from Google API which i linked in the head tag
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Home Page</title>
<link rel="stylesheet" href="mystyle.css" type="text/css"/>
<script type="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <!---Link to Jquery Library--->
<script type="text/javascript" src="https://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 sc=$(".slider img").size();
var count=2;
setinterval(function(){
$(".slider#"+count).show("slide",{direction:'right'},500);
$(".slider#"+count).delay(5500).hide("slide",{direction:'left'},500);
if (count ==sc){
count=1;
}else{
count=count+1;
}
},6500);
}
</script>
</head>
<body onload="slider();">
<div id="RightColContainer">
<div id="RightColContent">
<div class="slider">
<img id="1" src="Slider/Image/Image1.jpg" border="0" alt="Razer Keyboard"/>
<img id="2" src="Slider/Image/Image2.jpg" border="0" alt="Microsoft Office"/>
<img id="3" src="Slider/Image/Image3.jpg" border="0" alt="Razer Mouse"/>
</div>
</div>
</div>
Try to wrap your code inside $(window).load(function() {....}) and remove the function slider from onload function of your body.
$(window).load(function () {
$(".slider#1").show("fade", 500);
$(".slider#1").delay(5500).hide("slide", {
direction: 'left'
}, 500);
var sc = $(".slider img").size();
var count = 2;
setinterval(function () {
$(".slider#" + count).show("slide", {
direction: 'right'
}, 500);
$(".slider#" + count).delay(5500).hide("slide", {
direction: 'left'
}, 500);
if (count == sc) {
count = 1;
} else {
count = count + 1;
}
}, 6500);
}
});
I have a fixed header and I want to change the color of the hyperlinks when I reach a certain position in the window.
How do i go about it in Jquery?
listen to the scroll event and keep a check on the scrollTop...if the scrollTop param reaches your desired position, change the color of your links.
Try this:
$(window.parent.document).scroll(function() {
if( $(this).offset().top >= xxx ){
....change text colour...
}
}
Use as follows :
<!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 src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(e)
{
$(window).scroll(function() {
var currpos = $(window).scrollTop();
if(currpos < 199)
{
if(currpos > 100)
{
$(".header").attr("color","red");
//$('#header').fadeTo(1,0.8,function(){});
}
}
else if(currpos < 299)
{
if(currpos > 200)
{
$(".header").attr("color","red");
//$('#header').fadeTo(1,0.6,function(){});
}
}
else if(currpos < 399)
{
if(currpos > 300)
{
$(".header").attr("color","red");
//$('#header').fadeTo(1,0.4,function(){});
}
}
else
{
$(".header").attr("color","red");
}
});
});
</script>
</head>
<body style="height:2000px;">
</body>
</html>
you can use various color on different window position as above
Use https://github.com/Prinzhorn/skrollr
Example html:
<div id='header'>
<a data-880='color: red'>Link</a>
</div>
using $(window).scroll() event you can check the location of window.
and base on that you can set the hyperlink color accordingly.
like this
$('#links a').click(function(){
$(this).addClass('selected');
$(this).siblings().removeClass('selected');
});
try this http://jsfiddle.net/TL9rh/
I'm using jQuery and HTML to make a slideshow, but I'm having some trouble: one image shows up, and the other slides don't. I can't figure out where the issue is. Has anyone experienced a similar issue?
Here's the 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>JQuery Slider</title>
<style type="text/css">
.slider{
width:800px;
height:350px;
overflow:hidden;
margin:30px auto;
}
.slider img{
width:800px;
height:350px;
display:none;
}
</style>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
<script type="text/javascript">
function Slider(){
$('#img1').show("fade", 500);
$('#img2').delay(5500).hide("slide", {direction:"left"}, 500);
var sc=$(".slider img").size();
var count=2;
setInterval(function(){
$(".slider#"+count).show("slide", {direction:"right"}, 500);
$(".slider#"+count).delay(5500).hide("slide", {direction:"left"}, 500);
if(count == sc){
count=1;
}else{
count=count+1;
}
}, 6500);
}
</script>
</head>
<body onload="Slider();">
<div class="slider">
<img id="img1" src="img/13052012438.jpg"border="0"alt="image1" />
<img id="img2" src="img/25052012442.jpg"border="0"alt="image2" />
<img id="img3" src="img/13052012439.jpg"border="0"alt="image3" />
<img id="img4" src="img/25052012441.jpg"border="0"alt="image4" />
</div>
</body>
</html>
Use this...
$(document).ready(function(){
$('#img1').show("fade", 500);
$('#img2').delay(500).hide("slide", {direction:"left"}, 500);
var sc=$(".slider img").size();
var count=2;
setInterval(function(){
$("#img"+count).show("slide", {direction:"right"}, 500);
$("#img"+count).delay(500).hide("slide", {direction:"left"}, 500);
if(count == sc){
count=1;
}else{
count=count+1;
}
}, 6500);
});
And see this jSfiddle example