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>
Related
$(document).ready(function() {
$("#One").click(function() {
$("#Two").animate({
width: 'toggle'
}, -10);
});
});
<script src="jquery-3.2.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-
3.2.1.min.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://jquery-
ui.googlecode.com/svn/tags/latest/ui/jquery.effects.core.js"></script>
<script src="http://jquery-
ui.googlecode.com/svn/tags/latest/ui/jquery.effects.slide.js">
</script>
<script>
</script>
<div id="One" style="width:50px;height:200px;background-
color:yellow;position:relative;top:300px;left:600px;">One</div>
<div id="Two" style="width:200px;height:200px;background-
color:black;position:relative;top:100px;left:400px;">Two</div>
Above is the code, my problem exactly is that I can't get it to slide normally. When I click on it it disappears then comes back on the second click. I just want it to slide normally.
Try adding this::
$(document).ready(function() {
$("#One").click(function() {
$("#Two").animate({
left: '400px'
});
});
});
Now i try to make my site by fullpage.js plugin.
https://github.com/alvarotrigo/fullPage.js#callbacks
But there is a weird bottom area inside the section that have content which longer than their section height. (Section that have scrollOverflow)
Like this.
This is my code.
$(document).ready(function() {
$('#fullpage').fullpage({
'navigation': true,
paddingTop: '0',
paddingBottom: '0',
scrollOverflow: true,
afterLoad: function(anchorLink, index){
//using anchorLink
if(anchorLink == 'grey-fade-bg-slide'){
//alert("eoaehou");
$("body").css("background-image","url('img/team-bg.jpg')");
}
if(anchorLink == 'banner-slide'){
//$("#map").css("height","120px");
if(window.location.href.indexOf("our-team-bg-slide") > -1 || window.location.href.indexOf("contact-us-bg-slide") > -1 ) {
//alert("ccccc");
$("body").css("background-image","url('img/team-bg.jpg')");
}
}
if(anchorLink == 'blue-bg-slide'){
//alert("eoaehou");
$("body").css("background-image","url('img/banner-bg-image.jpg')");
}
},
afterRender: function(){
initMap();
$(".our-team-bg-section h3").css("margin-top","120px");
$(".contact-us-bg-section h3").css("margin-top","60px");
$(".grey-fade-bg-section h3").css("margin-top","120px");
}
});
});
All js file that i included.
<script src="js/jquery-1.12.4.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/scrolloverflow.min.js" type="text/javascript"></script>
<script src="js/jquery.fullPage.min.js" type="text/javascript"></script>
<script src="js/jquery.easings.min.js" type="text/javascript"></script>
So anyone know how to fix this?
Thanks!
You should be using the class fp-auto-height as detailed in the fullpage.js docs.
See the demo online or the one in codepen.
<div class="section">Whole viewport</div>
<div class="section fp-auto-height">Auto height</div>
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'm using bootstap for this one.
I want the class of each will change when scrolling to its section.
I successfully did that when I want to add 'active' or remove it.
but I bought an html design using 'selected',
to make it clear this is a sample of what I want to do (--HERE--)
this one only changes 'active' and each one is a 'link',
but in my work its 'selected' and each one is a 'scroll-link',
these are my buttons that I want to change:
<li class="home">
Home
</li>
<li>
About
</li>
and this is a section example :
<section id="home" class="slider-bg">
and this is the java script that I did:
<script class="scroll-link">
// ADDS ACTIVE CLASS TO LINKS WHEN SECTION WITH THE SAME SELECTOR AS THE HREF IS REACHED (CLASS .LINK IS NEEDED ON ALL <a> TAGS)
$(document).ready(function () {
$(window).scroll(function () {
var y = $(this).scrollTop();
$('.scroll-link').each(function (event) {
if (y >= $($(this).attr('href')).offset().top - 40) {
$('.scroll-link').not(this).removeClass('selected');
$(this).addClass('selected');
}
});
});
});
// SMOOTH SCROLLING (with negative scroll of 40 for header)
$(function () {
$('a[href*=#]:not([href=#])').click(function () {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html,body').animate({
scrollTop: (target.offset().top - 40)
}, 850);
return false;
}
}
});
});
vent.preventDefault();
</script>
and this is all the includes that the designer did:
<!-- jQuery & Helper library -->
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript" src="js/jquery.appear.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/modernizr-latest.js"></script>
<script type='text/javascript' src="js/jquery.fitvids.js"></script>
<script type="text/javascript" src="js/retina.js"></script>
<script type="text/javascript" src="js/jquery.fancybox.pack8cbb.js?v=2.1.5"></script>
<script type='text/javascript' src="js/owl.carousel.min.js"></script>
<script type="text/javascript" src="js/jquery.mixitup.min.js"></script>
<script type="text/javascript" src="js/masonry.pkgd.min.js"></script>
<script type="text/javascript" src="js/jquery.flexslider-min.js"></script>
<script type="text/javascript" src="js/stellar.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script type="text/javascript" src="js/jquery.themepunch.plugins.min.js"></script>
<script type="text/javascript" src="js/jquery.themepunch.revolution.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript" src="js/jquery.gmap.min.js"></script>
As you see I did write in my script:
vent.preventDefault();
this line will Override what ever preventing this from happening.
Please help me I'm new to web pages, But I'm a fresh graduate from CS.
I think there is a problem of vent.preventDefault();, this should be like event.preventDefault(); and inside the function where you pass event as a parameter, like:
<script class="scroll-link">
// ADDS ACTIVE CLASS TO LINKS WHEN SECTION WITH THE SAME SELECTOR AS THE HREF IS REACHED (CLASS .LINK IS NEEDED ON ALL <a> TAGS)
$(document).ready(function () {
$(window).scroll(function () {
var y = $(this).scrollTop();
$('.scroll-link').each(function (event) {
if (y >= $($(this).attr('href')).offset().top - 40) {
$('.scroll-link').not(this).removeClass('selected');
$(this).addClass('selected');
}
event.preventDefault();
});
});
});
// SMOOTH SCROLLING (with negative scroll of 40 for header)
$(function () {
$('a[href*=#]:not([href=#])').click(function () {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html,body').animate({
scrollTop: (target.offset().top - 40)
}, 850);
return false;
}
}
});
});
</script>
at the end of script it didn't get any event data.
I'm simply tring to make changes to my webpage by scrolling the page. And in this code I am trying to change the background color of a div that is fixed in page. What is wrong with this code?
<!DOCTYPE html>
<html>
<head>
<title>jQuery</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<style type="text/css">
body{
height: 5000px;
}
div{
height: 100px;
width: 100px;
background: red;
position: fixed;
top: 300px;
}
</style>
</head>
<body>
<div></div>
<script type="text/javascript">
function change(){
if( $(window).scrollTop() > 500 ){
$('div').css("background", "green");
} else{
$('div').css("background", "red");
}
}
change();
</script>
</body>
</html>
i think you should call it in .scroll() method:
$(function(){
$(window).on('scroll', function(){
change();
}).scroll();
});
or you can do shorten the code like this:
$(function(){
$(window).on('scroll', change).scroll();
});
Issue in your code is that you just called your function and that point of time the .scrollTop() value was 0 and it never gets updated.
so the solution is to put this function in an event of .scroll() the way suggested above. At every scroll it gets the new scrolltop position.
<script type="text/javascript">
$(document).scroll(function(){
if ($(window).scrollTop() > 500) {
$('div').css("background", "green");
} else {
$('div').css("background", "red");
}
});
</script>
Please try place your change within the document.ready..
other than that it looks OK.
<script type="text/javascript">
function change(){
if( $(window).scrollTop() > 500 ){
$('div').css("background", "green");
} else{
$('div').css("background", "red");
}
}
$(document).ready(function() {
change();
});
</script>
Instead of accessing $(window).scrollTop use $(document).scrollTop.
JQUERY CODE:
$(document).on('scroll',function () {
if( $(this).scrollTop() > 500 ){
$('aside').css("background", "green");
} else{
$('aside').css("background", "red");
}
});
$(document).scroll();
LIVE DEMO:
http://jsfiddle.net/dreamweiver/PBG9Z/15/
Happy Coding :)