I am having an issue with my nav bar not working correctly with the ScrollTop Javascript. It works in Chrome and Safari but not Firefox.
This is all the code I currently have on the site. I want the nav bar to follow the scroll once the nav bar is at the top of the page. Please view in Firefox as that is where I am having the issue!
Html
<body>
<div class="container">
<nav class="bottom" id="nav">
<div class="buttonWrapper">
<a href="#about">
<div class="navButton">About</div>
</a>
<a href="#designs">
<div class="navButton">Designs</div>
</a>
<a href="#contact">
<div class="navButton">Contact</div>
</a>
</div>
</nav>
<div class="largeLogo"></div>
</div>
<div class="container about" id="about">
<div class="sideBar about">
<div class="sidebarText"></div>
<p></p>
</div>
</div>
<div class="container designs" id="designs">
<div class="view view-ninth">
<img src="images/11.jpg" />
<div class="mask mask-1"></div>
<div class="mask mask-2"></div>
<div class="content">
<h2>Hover Style #9</h2>
<p>Some Text</p>
Read More
</div>
</div>
<div class="sideBar designs">
<div class="sidebarText"></div>
</div>
</div>
<div class="container contact" id="contact">
<div class="sideBar contact">
<div class="sidebarText"></div>
</div>
</div>
</body>
JavaScript
$(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
}, 1000);
return false;
}
}
});
});
window.addEventListener("scroll", navTop, false);
function navTop() {
var nav = document.getElementById("nav");
var about = document.getElementById("about").offsetTop - 1;
if (document.body.scrollTop > about) {
nav.className = "minimize";
} else {
nav.className = "bottom";
}
}
Fiddle
The issue is with document.body.scrollTop. Try using below code :
function navTop() {
var nav = document.getElementById("nav");
var about = document.getElementById("about").offsetTop - 1;
var scrollTop = $(document).scrollTop();
if (scrollTop > about) {
nav.className = "minimize";
} else {
nav.className = "bottom";
}
}
$(document).scrollTop(); / $(window).scrollTop(); works for both Firefox and Chrome
Related
I have created tabs. There are 3 tab items and tabs content is sliders.When i use these slideshows without tabs it works fine. But when used tabs, the slider of tab2 or tab3 sometimes does not load. It only occurs sometimes. What I have learnt that it loads perfectly on page load when using no tabs, But with tabs I have to hide the other 2 tabs on page load. So when click on these tabs, the slideshow does not appear /load sometimes.It also works fine sometimes. Tabs working fine the text content also.
I have been working on shopify, so using slideshow of theme.
Here is the code for html code for tabs:
<ul class="tabs">
<li>
<a data-toggle="tab" href="#menu1">Tab 1</a>
</li>
<li>
<a data-toggle="tab" href="#menu2">Tab 2</a>
</li>
<li>
<a data-toggle="tab" href="#menu3">Tab 3</a>
</li>
</ul>
<!-- Code for tabs Contnet -->
<div id="menu1">
<section class="homepage-slideshow js-homepage-slideshow">
<div class="gallery-cell slide1">
<div class="oc_img_container">
<img src="image1.jpg"/>
</div>
</div>
<div class="gallery-cell slide1">
<div class="oc_img_container">
<img src="image2.jpg"/>
</div>
</div>
<div class="gallery-cell slide1">
<div class="oc_img_container">
<img src="image3.jpg"/>
</div>
</div>
</section>
</div>
<div id="menu2">
<section class="homepage-slideshow js-homepage-slideshow">
<div class="gallery-cell slide1">
<div class="oc_img_container">
<img src="image21.jpg"/>
</div>
</div>
<div class="gallery-cell slide1">
<div class="oc_img_container">
<img src="image22.jpg"/>
</div>
</div>
<div class="gallery-cell slide1">
<div class="oc_img_container">
<img src="image23.jpg"/>
</div>
</div>
</section>
</div>
<div id="menu3">
<section class="homepage-slideshow js-homepage-slideshow">
<div class="gallery-cell slide1">
<div class="oc_img_container">
<img src="image31.jpg"/>
</div>
</div>
<div class="gallery-cell slide1">
<div class="oc_img_container">
<img src="image32.jpg"/>
</div>
</div>
<div class="gallery-cell slide1">
<div class="oc_img_container">
<img src="image33.jpg"/>
</div>
</div>
</section>
</div>
Javascript for tabs
<script type="text/javascript">
$(document).ready(function() {
$('ul.tabs').each(function(){
var active, content, links = $(this).find('a');
active = links.first().addClass('active');
content = $(active.attr('href'));
links.not(':first').each(function () {
$($(this).attr('href')).hide();
});
$(this).find('a').click(function(e){
active.removeClass('active');
content.hide();
active = $(this);
content = $($(this).attr('href'));
active.addClass('active');
content.show();
return false;
});
});
});
</script>
I am working in shopify and the using the slider of theme, here is the code for slideshow from theme.
var slideshow = {
init: function(){
$('.js-homepage-slideshow').each(function (index, value){
var $homepageSlider = $(this);
var settings = {
slideshowSpeed: $homepageSlider.data('slideshow-speed')*1000,
slideshowTextAnimation: $homepageSlider.data('slideshow-text-animation'),
adaptiveHeight: $homepageSlider.data('adaptive-height')
}
//initiate the slideshow
if (!$homepageSlider.hasClass('flickity-enabled')){
var arrowShow = $homepageSlider.find('.gallery-cell').length === 1 ? false : true;
$homepageSlider.flickity({
adaptiveHeight: settings.adaptiveHeight,
wrapAround: true,
cellAlign: 'left',
imagesLoaded: true,
prevNextButtons: arrowShow,
draggable: arrowShow,
pageDots: usePageDots,
autoPlay: settings.slideshowSpeed,
arrowShape: arrowSize
});
if (settings.slideshowTextAnimation != ''){
var flkty = $homepageSlider.data('flickity');
setTimeout(function() {
$homepageSlider.find('.gallery-cell:nth-child(1) .caption-content').addClass('animated ' + settings.slideshowTextAnimation);
}, 400);
$homepageSlider.on( 'select.flickity', function() {
if($homepageSlider.is(':visible')) {
var currentSlide = flkty.selectedIndex + 1;
setTimeout(function() {
$homepageSlider.find('.caption-content').removeClass('animated ' + settings.slideshowTextAnimation);
$homepageSlider.find('.gallery-cell:nth-child(' + currentSlide + ') .caption-content').addClass('animated ' + settings.slideshowTextAnimation);
}, 400);
}
});
}
}
if ($homepageSlider.find('.gallery-cell').length > 1) {
$homepageSlider.addClass('multi-image');
} else {
$homepageSlider.addClass('single-image');
}
$homepageSlider.find('.gallery-cell').each(function(){
var buttonWidth = 0;
$(this).find('.action_button').each(function(){
$button = $(this);
if($(this).width() > buttonWidth){
buttonWidth = $(this).width();
}
});
$(this).find('.action_button').width(buttonWidth);
});
});
},
unload: function($target){
var $slider = $target.find('.js-homepage-slideshow');
$slider.flickity('destroy');
}
}
I've been trying to code a count-up that would be triggered when a specific div is visible on the screen.
I've been going from forum to forum, but none of the examples I used seems to work for me.
It only seems to trigger it correctly if the page is refreshed while the div is visible, otherwise the count-up doesn't seem to activate.
Could anyone help please? Thank you all in advance.
HTML:
<section id="facts_section" style="background:#fff;">
<h1 class="main-title">fun facts about us</h1>
<div class="row">
<div class="columns large-3 medium-3">
<h2 class="count">8</h2>
</div>
<div class="columns large-3 medium-3">
<h2 class="count">15</h2>
</div>
<div class="columns large-3 medium-3">
<h2 class="count">80</h2><span class="percent">%</span>
</div>
<div class="columns large-3 medium-3">
<h2 class="count">5</h2>
</div>
</div>
</section>
jQuery:
//COUNTUP & MAP/HERO TOGGLE
$times = 0;
$(window).scroll(function() {
var hT = $('#facts_section').offset().top,
hH = $('#facts_section').outerHeight(),
wH = $(window).height(),
wS = $(this).scrollTop();
console.log((hT - wH), wS);
if (wS > (hT + hH - wH) && $times == 0) {
$('.count').each(function() {
$(this).prop('Counter', 0).animate({
Counter: $(this).text()
}, {
duration: 1000,
easing: 'swing',
step: function(now) {
$(this).text(Math.ceil(now));
}
});
});
$times++;
}
});
I have a series of blocks that repeat like this:
<div class="producto_banner">
<div class="positioner">
<div class="left">
<div class="titulo">Title</div>
<div class="subtitulo">Subtitle</div>
<div class="introduccion">Intro</div>
<a class="boton" href="#">anchor</a>
</div>
<div class="right">
<img src="image source">
</div>
</div>
</div>
<div class="producto_banner">
<div class="positioner">
<div class="left">
<div class="titulo">Title</div>
<div class="subtitulo">Subtitle</div>
<div class="introduccion">Intro</div>
<a class="boton" href="#">anchor</a>
</div>
<div class="right">
<img src="image source">
</div>
</div>
</div>
...
And I would like to animate the .right div inside each of them when they come into view.
So far I have this:
function isScrolledIntoView(elem) {
var centerY = Math.max(0,((jQuery(window).height()-
jQuery(elem).outerHeight()) / 2)
+ jQuery(window).scrollTop());
var elementTop = jQuery(elem).offset().top;
var elementBottom = elementTop + jQuery(elem).height();
return elementTop <= centerY && elementBottom >= centerY;
}
$(window).on("scroll resize", function() {
console.log('scrolling');
$(".producto_banner").each(function(index, element) {
if (isScrolledIntoView(element)) {
$(this).find('.right').animate({'right':'50px'},1000);
}
});
});
But for some reason it’s only animating the last 2 blocks (out of 5)
I have more than one data and I want to load ajax when scroll reaches 80% or near doesn't matter..I try to use jscrollbut I couldn't achieve than I would like to ask how can I do that ?
$('.lazy_content').each(function() {
var data_url = $(this).data("url");
var data_id = $(this).data("target-id");
var target = $("#" + data_id);
$.ajax({
url: data_url,
type: "POST",
beforeSend: function() {
target.html("");
},
success: function(data) {
$(data).each(function(index, el) {
target.append(el);
});
},
complete: function() {
$("#loading").hide();
},
error: function(jqXHR, textStatus, errorThrown) {
if (jqXHR.status == 500) {
target.html('Internal error: ' + jqXHR.responseText);
} else {
target.html('Unexpected error.');
}
}
});
})
.lazy_content{
border-bottom:3px solid #f0f0f0;
}
<div class="lazy_content" data-url="http://www.anitur.com.tr/popup/test-1-comments" data-target-id="PostsArea">
<h4>COMMENTS</h4>
<div id="PostsArea">
<div id="loading"><img src="http://betacontent.anitur.com.tr/web/assets/img/loading.gif"></div>
</div>
</div>
<div class="lazy_content" data-url="http://www.anitur.com.tr/popup/test-2-posts" data-target-id="CommentsArea">
<h4>POSTS</h4>
<div id="CommentsArea">
<div id="loading"><img src="http://betacontent.anitur.com.tr/web/assets/img/loading.gif"></div>
</div>
</div>
<div class="lazy_content" data-url="http://www.anitur.com.tr/popup/test-3-users" data-target-id="UsersArea">
<h4>USERS</h4>
<div id="UsersArea">
<div id="loading"><img src="http://betacontent.anitur.com.tr/web/assets/img/loading.gif"></div>
</div>
</div>
<div class="lazy_content" data-url="http://www.anitur.com.tr/popup/test-4-forums" data-target-id="ForumsArea">
<h4>FORUMS</h4>
<div id="ForumsArea">
<div id="loading"><img src="http://betacontent.anitur.com.tr/web/assets/img/loading.gif"></div>
</div>
</div>
<div class="lazy_content" data-url="http://www.anitur.com.tr/popup/test-5-us" data-target-id="UsArea">
<h4>FORUMS</h4>
<div id="UsArea">
<div id="loading"><img src="http://betacontent.anitur.com.tr/web/assets/img/loading.gif"></div>
</div>
</div>
<div class="lazy_content" data-url="http://www.anitur.com.tr/popup/test-6-text" data-target-id="textArea">
<h4>TEXT</h4>
<div id="textArea">
<div id="loading"><img src="http://betacontent.anitur.com.tr/web/assets/img/loading.gif"></div>
</div>
</div>
<div class="lazy_content" data-url="http://www.anitur.com.tr/popup/test-8-content" data-target-id="contentArea">
<h4>CONTENT</h4>
<div id="contentArea">
<div id="loading"><img src="http://betacontent.anitur.com.tr/web/assets/img/loading.gif"></div>
</div>
</div>
<div class="lazy_content" data-url="http://www.anitur.com.tr/popup/test-7-last" data-target-id="lastArea">
<h4>TEXT</h4>
<div id="lastArea">
<div id="loading"><img src="http://betacontent.anitur.com.tr/web/assets/img/loading.gif"></div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
please click to see full page
You can get the position of your window's top border ($(window).scrollTop()), current window's height ($(window).height()) and the absolute height of a document ($(document).height()). Position of your bottom border is position of your top border + window's height, right? So, the moment when your bottom border reaches the bottom of a document can be calculated this way:
$(window).scrollTop() + $(window).height() == $(document).height()
and it can be adjusted (as you said about 80%):
$(window).scrollTop() + $(window).height() > $(document).height() * 0.8
And combine it with a scroll handler:
$(window).on('scroll', function() {
var reachedBottom = $(window).scrollTop() + $(window).height() > $(document).height() * 0.8;
if (reachedBottom) {
# whatever you want to do
}
});
what about using body.offsetTop proprtional to body total height?
i am trying to iterate through the children of the div with class insides.
so far it has been a failure.
here is the html:
<div class="insides">
<div class="pen" style="background-image:url('images/video.png');background-size:cover">
<div class="cover"></div>
<div class="items">
<div class="title">
fullscreen-centered-blurred-video-background
</div>
<div class="desc">
Quick video covers fullscreen with blur effect and grayscale (looping) with working input fields
</div>
<a class="button button-secondary button-small" href="http://codepen.io/peterbs/pen/QpyrMb">
View On CodePen
</a>
</div>
</div>
<div class="pen" style="background-image:url('images/form.png');background-size:cover">
<div class="cover"></div>
<div class="items">
<div class="title">
Loading-form
</div>
<div class="desc">
Simple and fast loading form that is displayed after loading is finished
</div>
<a class="button button-secondary button-small" href="http://codepen.io/peterbs/pen/PpZExY">
View On CodePen
</a>
</div>
</div>
<div class="pen" style="background-image:url('images/horizontal.png');background-size:cover">
<div class="cover"></div>
<div class="items">
<div class="title">
align-vertically
</div>
<div class="desc">
Very easy javascript that aligns children vertically within its parents because css had weak support.
</div>
<a class="button button-secondary button-small" href="http://codepen.io/peterbs/pen/aJNEvB">
View On CodePen
</a>
</div>
</div>
<div class="pen" style="background-image:url('images/navbar.png');background-size:cover">
<div class="cover"></div>
<div class="items">
<div class="title">
navbar-animations
</div>
<div class="desc">
navigation bar with 3 different animations. One more will be coming soon.
</div>
<a class="button button-secondary button-small" href="http://codepen.io/peterbs/pen/dvMpyV">
View On CodePen
</a>
</div>
</div>
</div>
.pen has opacity: 0
and when the user scrolls down a little bit i want them to show 1 by 1.
here is the javascript:
$(document).ready(function(){
window.addEventListener('scroll',function(){
var scroll = $(this).scrollTop();
$('.content').css('transform', 'translateY( '+ scroll / 2 +'px )' );
if(scroll > 120){
for(x = 0; x <= 4 ; x++){
setTimeout(function(){
$('.insides:nth-child('+ x +')').css('opacity','1');
}, 700*x);
}
}else{
for(x = 0; x <= 4 ; x++){
setTimeout(function(){
$('.insides:nth-child('+ x +')').css('opacity','0');
}, 700*x);
}
}
});
var scroll = $(this).scrollTop();
if(scroll > 120){
for(x = 0; x <= 4 ; x++){
setTimeout(function(){
$('.insides:nth-child('+ x +')').css('opacity','1');
}, 700*x);
}
}else{
for(x = 0; x <= 4 ; x++){
setTimeout(function(){
$('.insides:nth-child('+ x +')').css('opacity','0');
}, 700*x);
}
}
});
i honestly have no idea why it is not working. it just doesn't show
here is a jsfiddle: https://jsfiddle.net/f176ch6r/
it doesn't look perfect in the fiddle but it does the job
Two problems here:
the nth-child selector must be applied on your .pen elements
because of the setTimeout all your $('.insides:nth-child('+ x +')') selectors will have the same x
here is what I would write:
window.addEventListener('scroll', _onScroll);
_onScroll();
function _onScroll(){
var x,
scroll = $(this).scrollTop(),
show = scroll > 120;
$('.content').css('transform', 'translateY( '+ scroll / 2 +'px )' );
for(x = 0; x <= 4 ; x++){
_toggle(x, show);
}
}
function _toggle(index, bShow){
setTimeout(function(){
$('.insides .pen:nth-child('+ (index + 1) +')').css('opacity', bShow ? 1 : 0);
}, 700*index);
}
I also updated your jsfiddle