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();
});
}
});
Related
I tried to change the width of div dynamically while scrolling.But it is not working.I have jquery-1.11.3.min.js in my directory and connect it with HTML file.The scrollfunction in my script appears in brown color instead of black.
This is my HTML file
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="jquery-1.11.3.min.js"></script>
<link rel="stylesheet" href="BooksExchanger.css"/>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<script src="BooksExchanger.js"></script>
<div id="packet"style="position:fixed">
<h1 id="welcome" >Welcome</p>
<h2 id="about">You Are Now Entering Into BBE</h2>
</div>
<img src="1.jpg"/>
<img src="2.jpg"/>
</body>
</html>
THis is my JS file(BooksExchanger.js)
$(document).ready(function(){
var scroll_pos = 0;
$(document).scroll(function() {
scroll_pos = $(this).scrollTop();
if(scroll_pos < 10 ) {
$("#welcome").css('width', 75);
} else if(scroll_pos > 25 && scroll_pos < 75) {
$("#welcome").css('width', 100);
} else if(scroll_pos > 75 && scroll_pos < 100){
$("#welcome").css('width', 125);
}else if(scroll_pos > 100){
$("#welcome").css('width', 150);
}
});
});
try adding the scroll event to $(window) instead of $(document)
I have an error in my javascript only when I run it locally, but when I run it on jsfiddle it works fine.
Javascript
var pos, scrollY,
$el = $('nav'),
navItems = $el.find('> span'),
menuHeight = $el[0].clientHeight,
sections = $('section').toArray(), // cache elements
pointOfAttachment = $el[0].getBoundingClientRect().top;
// Bind events
$(window).on('scroll.nav', updateNav)
.on('resize.nav', updateNav);
function updateNav(){
scrollY = window.pageYOffset || document.documentElement.scrollTop;
for( var i = sections.length; i--; ){
if( sections[i].getBoundingClientRect().top - menuHeight < 0 ){
navItems.filter('.' + sections[i].id).addClass('active').siblings().removeClass('active');
break;
}
navItems.removeClass('active');
}
if( scrollY > pointOfAttachment )
$el.addClass('fixed');
else
$el.removeClass('fixed');
}
// for initial page load
updateNav();
$("nav span").click(function() {
var sectionId = $(this).attr('class')
$('html, body').animate({
scrollTop: ($('#'+sectionId).offset().top - $('nav').height()) + 1
}, 300);
});
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript">
</script>
<script src="script.js" type="text/javascript">
</script>
<title></title>
</head>
<body>
<header>Header</header>
<nav>
<span class='a1'>Section 1</span>
<span class='a2'>Section 2</span>
<span class='a3'>Section 3</span>
</nav>
<div id='navPlaceholder'></div>
<section id='a1'>Some section..</section>
<section id='a2'>Another Section</section>
<section id='a3'>And another one</section>
</body>
</html>
When I run it on JSfiddle it works fine but when I run it locally I get the javascript error:
Uncaught TypeError: Cannot read property 'clientHeight' of undefined
Can anyone tell me why this would only happen locally, and how I can fix it please?
You should include script once DOM is ready:
<script src="script.js" type="text/javascript">
</body>
For example here, just before </body> closing tag
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);
}
});
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?
I have a few sites using geoPlugin and after Microsoft's IE Update on 9/24/2012 I'm having some strange issues. I first noticed that my nivo slider wasn't showing up on my homepage, so I dug into the console to find a
SCRIPT5009: 'geoplugin_countryCode' is undefined
I then debugged the same page in Google Chrome and everything is working fine there. I attempted to decipher the KB2744842 bulletin regarding that update
Here's my javascript:
<script src="https://ssl.geoplugin.net/javascript.gp" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
var country = geoplugin_countryCode();
if(country === 'CA'){
$('#notification').html('<div class="attention" style="display: none;">You are in Canada</div>');
$('.attention').fadeIn('slow');
$('html, body').animate({ scrollTop: 0 }, 'slow');
}else if(country != 'US'){
$('#notification').html('<div class="attention" style="display: none;">You are in the USA</div>');
$('.attention').fadeIn('slow');
$('html, body').animate({ scrollTop: 0 }, 'slow');
}else{
//nothing stupid IE
}
});
$('.geoClose').live('click', function() {
console.log('geoplugin notify closed');
document.cookie = 'geoClose=true;'
});
</script>
HTML:
<div id="wrapper">
<div id="header">Header Text</div>
<div id="notification"></div>
<div id="content">Content Here!</div>
<div id="footer"></div>
</div>
geoPlugin has recently changed some policies regarding SSL requests and apparently IE won't follow the redirect implemented while other browses will.
resulting code:
<script src="http://www.geoplugin.net/javascript.gp" type="text/javascript"></script>
<script src="http://www.geoplugin.net/statistics.gp" type="text/javascript"></script>
<!--<script src="https://ssl.geoplugin.net/javascript.gp" type="text/javascript"></script>-->
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
var country = geoplugin_countryCode();
if(country === 'CA'){
$('#notification').html('<div class="attention" style="display: none;">You are in Canada</div>');
$('.attention').fadeIn('slow');
$('html, body').animate({ scrollTop: 0 }, 'slow');
}else if(country != 'US'){
$('#notification').html('<div class="attention" style="display: none;">You are in the USA</div>');
$('.attention').fadeIn('slow');
$('html, body').animate({ scrollTop: 0 }, 'slow');
}else{
//nothing stupid IE
}
});
$('.geoClose').live('click', function() {
console.log('geoplugin notify closed');
document.cookie = 'geoClose=true;'
});
//]]>
</script>