Change href url once browser scrolls down - javascript

I am attempting to change a href url once the browser scroll down. I am swapping css classes based on browser position. I am swappping out an image with an anchor down tag applied to it with a logo that I now what to have a home link applied to it.
Check my site here: http://www.paynecocraft.com (WIP)
The main page has a yellow arrow at the bottom. Click it and the browser scrolls, the nav becomes sticky and the logo appears. I would like the logo to have a homepage link once it gets to that point.
Here is my html
<nav>
<ul class="inline-list main-links">
<li class="linkitem">About</li>
<li class="linkitem">Work</li>
<li class="linkitem">Store </li>
<li class="circlearrow"><a id="changeonscroll" href="#scrolldown"></a></li>
<li class="linkitem">Plans</li>
<li class="linkitem">Contact</li>
<li class="linkitem">Blog</li>
</ul>
</nav>
I'm referring to the "circlearrow" li.
Here is the javascript I am using, but its not working. I'm just now diving into Javascript so I probably don't have something right. Forgive me.
<script>
$(document).ready(function(){
$(window).bind('scroll', function() {
var navHeight = $( window ).height() - 80;
if ($(window).scrollTop() > navHeight) {
document.getElementById("changeonscroll").href = http://www.paynecocraft.com;
}
});
});
</script>

Try this:
JSFiddle (you need to resize the window to try to scroll)
$(document).ready(function () {
$(window).bind('scroll', function () {
var navHeight = $(window).height() - 80;
if ($(window).scrollTop() > navHeight) {
$("#changeonscroll").text('Hello World').attr('href', 'http://www.paynecocraft.com');
}
});
});

Related

Toggling visibility of icon when window is resized

Problem
I have a dropdown menu that toggles between a hamburger menu and a cross icon when the navigation opens and closes. However, if a user opens the menu, then resizes the window and the window width is still less than 768px (still open), it shows both the icons stacked on top of each other when it only should show the cross.
On a side note, I'm looking to just simplify the complexity of this Javascript snippet. I'm not sure that adding and removing a class of is-visible was the correct/best approach.
JSFiddle: https://jsfiddle.net/bdmebsu8/
scripts.js
$(function(){
// Window size
if ($(window).width() <= 768) {
$(".icon-cross").hide();
$(".icon-menu").addClass("is-visible");
$(".icon-menu").show();
} else {
$(".icon-menu").hide();
$(".icon-menu").removeClass("is-visible");
}
$(window).resize(function(){
var w = $(this).innerWidth();
if (w > 768) {
$(".nav__list--dropdown").hide();
$(".icon-cross").hide();
$(".icon-menu").hide();
$(".icon-cross").removeClass("is-visible");
$(".icon-menu").removeClass("is-visible");
} else {
$(".icon-cross").hide();
$(".icon-menu").show();
$(".icon-menu").addClass("is-visible");
}
});
// Dropdown menu
$(".nav__menu").on("click", function(){
$(".is-hidden").slideToggle("slow");
var menuVisible = $(".icon-menu").hasClass("is-visible")
if (menuVisible) {
$(".icon-menu").removeClass("is-visible");
$(".icon-menu").hide();
$(".icon-cross").addClass("is-visible");
$(".icon-cross").show();
} else {
$(".icon-cross").removeClass("is-visible");
$(".icon-cross").hide();
$(".icon-menu").addClass("is-visible");
$(".icon-menu").show();
}
});
});
index.html
<div class="dropdown">
<ul class="nav__list--dropdown is-hidden">
<li class="item--services--dropdown">Services</li>
<li class="item--projects--dropdown">Projects</li>
<li class="item--teaching--dropdown">Teaching</li>
<li class="item--blog--dropdown">Blog</li>
<li class="item--contact--dropdown">Contact</li>
</ul>
</div>
<div class="nav__menu">
<img src="src/img/sm-menu.png" class="icon-menu" alt="Open Menu">
<img src="src/img/cross-dark.png" class="icon-cross" alt="Close Menu">
</div>
What you could do to simplify your script:
$(function(){
function updateMenu(){
// all logic in here for checking width and show/hide/set classes
}
updateMenu(); // runs on doc ready
$(window).on("resize", updateMenu);
}

CSS animated hamburger icon and remove class on scroll?

I want to achieve 2 things when in responsive small screen size:
Create a onclick CSS animated 'hamburger' icon into a cross icon (now it is just a fadeIn/Out effect).
Remove class on scroll event so cross icon turns back in default hamburger icon.
I'm now using svg images for the nav-btn.
I know that i have to add a removeClass action on the scroll event, but tried some different things, but my JS-skills aren't that good.
Hope there is someone that can help or guide me threw this either the one or the other.
Here the FIDDLE
Screenshots:
Cross need to changes back in hamburger icon on scroll:
Html:
<header>
<nav>
<div class="col-nav">
Logo
</div>
<ul>
<li class="col-nav">Item1</li>
<li class="col-nav">Item2</li>
<li class="col-nav">Item3</li>
</ul>
</nav>
</header>
Javascript:
$(function() {
$('.nav-btn').click(function() {
$('nav ul').fadeToggle(300);
$(this).toggleClass("open");
})
});
$(window).scroll(function() {
if ($(this).scrollTop() > 50) {
$('nav ul').hide(); }
});
Add $('.nav-btn').removeClass('open');
$(window).scroll(function() {
if ($(this).scrollTop() > 50) {
$('nav ul').hide();
$('.nav-btn').removeClass('open');
}
});

Jquery menu doesnt open on touch screen devices

I have a drop down menu where the user selects a location and it scrolls to the div to reveal the address (10 different locations).
This works well in a desktop browser. However on the ipad, iphone and nexus it doesnt work because of touch screen.
This is my code:-
<html>
<div class="location">
<ul>
<li>Select an Office
<ul class="officeselect">
<li><a data-emailaddress="" data-address='<span class="address">99 Walnut Tree Close</span>
<span class="address">Guildford</span>
<span class="address">Surrey</span>
<span class="address">GU1 4UQ</span><br>
<span class="address">T: +44 1483 881500</span>
<span class="address">info#petroplan.com</span>' href="">UK Head</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="span4 alpha">
<div class="addresstitle">
<h3>Address</h3>
</div>
<div class="address">
</div>
</div>
</html>
<script>
// Scroll down to map and address function
$(".location ul li ul a").click(updateAddressDisplay);
function updateAddressDisplay(src) {
$('.office-sel-cont .chooser').text($(this).text());
var target = $(".address");
var source;
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
if (src === null)
source = $(".black-sectors li a.adr-src:eq(0)");
else
source = $(this);
target.fadeOut();
target.html(source.data("address") + source.data("emailaddress"));
target.fadeIn();
var chooser = $(this).parent().parent().parent().find('.chooser');
if (chooser.hasClass('open')) {
chooser.removeClass('open');
chooser.next($('.black-sectors')).animate({
'top': '60px',
'opacity': 0
}, 600, 'easeOutQuint', function() {
chooser.next($('.black-sectors')).toggle();
});
return false;
} else {
}
return false;
}
</script>
And I used this below from this website, but it's still dodgy.
<script>
$('.location ul li ul a').on('click touchend', function(e) {
e.preventDefault();
var el = $(this);
var link = el.attr('href');
window.location = link;
});
</script>
Thanks for your help.
this is the fiddle:-http://jsfiddle.net/ScVs9/
For your drop down list to work on a touch screen device you need to trigger the drop-down using a javascript click event rather than the css hover. Simple way would be create a class, called something like .active and then use a function like this:
$('.location a').on('click', function(){
$('.officeselect').toggleClass('active')
});
The active class would simply have visibility set to visible:
ul.officeselect.active {visibility:visible;}
The user should then be able to select the correct link and display the address as per usual.
I hope this helps

Box content scroll on mouse over

I have this navigation that can expand when the user clicks a drop down arrow, This navigations is held within a box container with overflow hidden. What I'm trying to achieve is when the users mouse is in the top 20% of the box it scrolls up, and when its in the bottom 20% it scrolls down. I've tried a various number of plugins and tried coding it myself but so far no luck!
This has to be responsive so I am working in percentages.
HTML SET UP:
<div class="container">
<div class="title">Where to next? <span>(this title will be fixed)</span></div>
<ul class="pagesNav">
<li>Page1</li>
<li class="has_children">
Page2
<ul class="children">
<li>Child1</li>
<li>Child2</li>
<li>Child3</li>
</ul>
</li>
<li>Page3</li>
<li>Page4</li>
<li>Page5</li>
<li>Page6</li>
</ul>
</div>
Take a look at my fiddle:
http://jsfiddle.net/7d8fA/
You can get the desired effect by this :
var height=$('.container').height();
var top20=(height/100)*20;
var top80=height-top20;
$('.container').mouseover(function(e) {
e.stopPropagation();
if ((e.clientY-e.currentTarget.offsetTop)<top20) {
$(".container").animate({
scrollTop: 0
}, 10);
} else if (e.clientY>top80) {
$(".container").animate({
scrollTop: height
}, 10);
}
});
forked fiddle -> http://jsfiddle.net/U5Uk8/

jquery hide/show based on scroll

So I was given a web template that uses a jquery library called sticky, and it "sticks" the navigation (starts at the bottom and moves up) at the top of the page, as you scroll.
I want to be able to plop a logo onto the navigation once it hits its resting place (post scroll). Similar to this website - http://99u.com/. Once you scroll past the image header, the logo fade's in to the nav bar and then stays on the page. Anyhow, here is the excerpt of the jquery code:
<script>
$(window).load(function() {
$('nav').sticky({ topSpacing:0, className: 'sticky', wrapperClassName: 'my-wrapper' });
});
</script>
And here is the excerpt of the html:
<div with image slideshow></div>
<nav>
<div class="container">
<div class="thirteen columns">
<ul id="nav" class="links">
<li id="sticker"><img src="[image i want to display after scroll]" /></li>
<li>About</li>
<li>Contests</li>
<li>etc.</li>
</ul>
</div>
</div>
</nav>
<div's and the rest of the page's content></div>
This whole template is responsive. Any help would be appreciated, or if someone can point me in the right direction. Thanks!
Take a look at scrollTop and offset.
This is untested but it would look something like this:
$(window).scroll(function(){
if($("#nav").offset().top <= $(window).scrollTop)
$("#nav").css({"position":"fixed","top":"0px", "left":"0px"});
else
$("#nav").css({"position":"relative"});
});
Basically, as the user scrolls, check the windows scroll position and if it passes the top of the nav, switch the nav over to fixed positioning. In my code above, the check on the way back may need a little tweaking but when they scroll to a position less than the height of the nav, put the nav back to relative positioning.
Also instead of switching to position fixed you could show/hide a totally separate nav, might actually make life easier.
-Ken
You can test the position property of the menu and when it changes, hide/show the image via adding/removing a class:
CSS:
#sticker.hidden { width:0; height:0; border:0; padding:0; margin:0; }
#sticker.hidden * { display:none; }
Javascript:
$(window).load(function () {
$('nav').sticky({
topSpacing: 0,
className: 'sticky',
wrapperClassName: 'my-wrapper'
});
var elem = $('#sticker');
var nav = $('nav');
var pos = nav.css('position');
$(window).scroll(function(){
if (nav.css('position')!=pos) { // if changed
if (pos=='fixed') {
elem.addClass('hidden');
} else {
elem.removeClass('hidden');
}
pos = nav.css('position');
}
});
});
jsfiddle
Thanks for the suggestions. They both helped! Here is what i ended up doing:
<script>
$(window).load(function() {
$('#sticker').css({'display':'none'});
$('nav').sticky({ topSpacing:0, className: 'sticky', wrapperClassName: 'my-wrapper' });
$(this).scroll(function() {
if($('nav').offset().top <= $(window).scrollTop()) {
$('#sticker').fadeIn('fast');
} else {
$('#sticker').css({'display':'none'});
}
});
});
</script>

Categories

Resources