I'm testing my webpage in browsers and it seems that some bits are not working in firefox and opera. I assume it's caused by jQuery used on my page.
This is my website: http://freshbeer.lv/ht/index.html
At the bottom of the source code you can find all jQuery code used (mainly to call and apply plugins). I'm having trouble to determine what is wrong, as there are no errors shown in console (firefox 20.0) Main dysfunctions are
player, just compare how it works in chrome and than check it out in firefox or opera, first of all it doesn't show "..." which signifies loading, secondly once you click play on another player, both songs keep playing, where as in other browsers first song would pause, so there would be only one song playing.
advertisement should have margins on top and bottom calculated by jQuery, it doesn't in opera and firefox.
So Am I missing something? Maybe I need to apply certain code standards?
That seems to be all, however I can't be sure.
I'll put code written by me here (most likely issue is in it), note, there are several jQuery plugins included above it.
<script type="text/javascript">
//Audio Player
audiojs.events.ready(function () {
var as = audiojs.createAll();
$('audio').each(function () {
var myAudio = this;
this.addEventListener('play', function () {
$('audio').each(function () {
if (!(this === myAudio)) {
this.pause();
}
});
});
});
});
$(document).ready(function() {
//Responsive add margins
function addMargin () {
var add = $(".advert");
var addMargin = add.css("margin-left");
add.css({
"margin-top": addMargin,
"margin-bottom": addMargin
});
}
addMargin();
$(window).resize(addMargin);
//Responsive Grid
var MusicGrid = (function() {
var $musicGridContainer = $('.grid'),
init = function() {
changeMusicGrid();
initEvents();
initPlugins();
},
changeMusicGrid = function() {
var w_w = $(window).width();
if (w_w <= 765) n = 1;
else if (w_w <= 1180) n = 2;
else n = 3;
},
initEvents = function() {
$(window).on('smartresize.MusicGrid', function(event) {
changeMusicGrid();
});
},
initPlugins = function() {
$musicGridContainer.imagesLoaded(function() {
setTimeout(function() {
$musicGridContainer.masonry({
itemSelector: '.article',
columnWidth: function(containerWidth) {
return containerWidth / n;
},
isAnimated: true,
animationOptions: {
duration: 150
}
});
}, 500);
});
};
return {
init: init
};
})();
MusicGrid.init();
});
//Preload Content
function preloadCode() {
if (preloadCode.done) return;
preloadCode.done = true;
clearTimeout(t);
$(".preloader").css("display", "none");
$(".grid").css({ opacity: 0, visibility: 'visible', marginTop: 20 }).animate({ marginTop: 0, opacity: 1 }, 550);
$('.article[id^="article-"]').each(function () {
if (parseInt(this.id.replace('article-', '')) % 3 === 0) {
$('#' + this.id).css({ marginTop: 50 }).animate({ marginTop: 0 }, 350);
} else if (parseInt(this.id.replace('article-', '')) % 2 === 0) {
$('#' + this.id).css({ marginTop: 100 }).animate({ marginTop: 0 }, 400);
} else {
$('#' + this.id).css({ marginTop: 150 }).animate({ marginTop: 0 }, 450);
}
});
$(".footer").css("display", "block");
}
var t = setTimeout(preloadCode, 6000);
$(window).load(preloadCode);
</script>
1. advertisement should have margins on top and bottom calculated by jQuery, it doesn't in opera and firefox. So Am I missing something? Maybe I need to apply certain code standards?
Your element has auto margins, so, depending on the browser, .css('margin-left') might return different values, including 0.
I recommend using the JsSizes library which is a lightweight plugin that will allow you to get the actual margins in pixels.
2. player, just compare how it works in chrome and than check it out in firefox or opera, first of all it doesn't show "..." which signifies loading, secondly once you click play on another player, both songs keep playing, where as in other browsers first song would pause, so there would be only one song playing.
Firefox and Opera don't support mp3 in their audio element, so it gets replaced by a flash object. Therefore you can't listen to those DOM events anymore.
Although, according to their annotated source code, the flash object has public methods play(), pause(), and isPlaying.
I'd recommend listening a click event on the 'play-pause' button and use these functions. Like this :
var as = ''; // You're going to have to make your as variable global to access it outside of your function.
audiojs.events.ready(function () {
as = audiojs.createAll();
$('.audiojs .play-pause').click(function(){ //Listening to the click event
var thisIndex = $(this).parents('.audiojs').index('.audiojs'); // When you create several players, as is an array of instances of players. Here we're finding the DOM index of the player so it reflects its position in the as array.
$.each(as, function(index,val){ //then, for each instance of players in the as array
if ( index != thisIndex && as[index].playing ) as[index].pause(); //If the player is already playing, and its index is different than the one we just clicked on, pause it !
});
});
});
Related
I have a specific effect I want for a website I'm building. As you can see in this website, I want the screen to "snap to" the next section after the user scrolls, but only after (not the instant) the scroll event has fired. The reason I don't want to use a plugin like panelSnap is because I
1: Want smaller code and
2. Want the website, when viewed on mobile, to have more of the "instant snap" effect (try reducing the browser size in the website mentioned above). I know I theoretically could try combining two plugins, like panelsnap and scrollify, and activate them appropriately when the browser is a certain width, but I don't know if I want to do that... :(
So all of that said, here's the code:
var scrollTimeout = null;
var currentElem = 0;
var options = {
scrollSpeed: 1100,
selector: 'div.panels',
scrollDelay: 500,
};
$(document).ready(function() {
var $snapElems = $(options.selector);
console.log($($snapElems[currentElem]).offset().top);
function snap() {
if ($('html, body').scrollTop() >= $($snapElems[currentElem]).offset().top) {
if (currentElem < $snapElems.length-1) {
currentElem++;
}
}else{
if (currentElem > 0) {
currentElem = currentElem - 1;
}
}
$('html, body').animate({
scrollTop: $($snapElems[currentElem]).offset().top
}, options.scrollSpeed);
}
$(window).scroll(function() {
if ($(window).innerWidth() > 766) {
if (scrollTimeout) {clearTimeout(scrollTimeout);}
scrollTimeout = setTimeout(function(){snap()}, options.scrollDelay);
}else{
//I'll deal with this later
}
});
});
My problem is that every time the snap function is called, it triggers the scroll event, which throws it into a loop where the window won't stop scrolling between the first and second elements. Here's the poor, dysfunctional site: https://tcfchurch.herokuapp.com/index.html Thank for the help.
You can use a boolean to record when the scroll animation in snap is in progress and prevent your $(window).scroll() event handler from taking any action.
Here's a working example:
var scrollTimeout = null;
var currentElem = 0;
var options = {
scrollSpeed: 1100,
selector: 'div.panels',
scrollDelay: 500,
};
$(document).ready(function() {
var scrollInProgress = false;
var $snapElems = $(options.selector);
console.log($($snapElems[currentElem]).offset().top);
function snap() {
if ($('html, body').scrollTop() >= $($snapElems[currentElem]).offset().top) {
if (currentElem < $snapElems.length-1) {
currentElem++;
}
}else{
if (currentElem > 0) {
currentElem = currentElem - 1;
}
}
scrollInProgress = true;
$('html, body').animate({
scrollTop: $($snapElems[currentElem]).offset().top
}, options.scrollSpeed, 'swing', function() {
// this function is invoked when the scroll animate is complete
scrollInProgress = false;
});
}
$(window).scroll(function() {
if (scrollInProgress == false) {
if ($(window).innerWidth() > 766) {
if (scrollTimeout) {clearTimeout(scrollTimeout);}
scrollTimeout = setTimeout(function(){snap()}, options.scrollDelay);
}else{
//I'll deal with this later
}
}
});
});
The variable scrollInProgress is set to false by default. It is then set to true when the scroll animate starts. When the animate finishes, scrollInProgress is set back to false. A simple if statement at the top of your $(window).scroll() event handler prevents the handler from taking any action while the animate scroll is in progress.
Have you considered using the well known fullPage.js library for that? Check out this normal scroll example. The snap timeout is configurable through the option fitToSectionDelay.
And nothing to worry about the size... it is 7Kb Gzipped!
I know I theoretically could try combining two plugins, like panelsnap and scrollify, and activate them appropriately when the browser is a certain width, but I don't know if I want to do that
fullPage.js also provides responsiveWidth and responsiveHeight options to turn it off under certain dimensions.
I have a page with a series of (HTML 5) videos whose audio needs to fade in or out depending on your position on the page (and it may be different for each video). I'm using jQuery Waypoints with the InView plugin to detect when an element is in the viewport. I'm not sure how to do it consistently, so that you don't cause unexpected behavior when you trip a waypoint while the volume is still decreasing or increasing.
var waypoint = new Waypoint.Inview({
element: $('#element')[0],
enter: function() {
$('#element')[0].volume = 0;
$('#ielement')[0].play();
incVol($('#element')[0]);
},
entered: function() {},
exit: function() {},
exited: function() {
decVol($('#element')[0]);
}
});
function incVol(e) {
setTimeout(function() {
if ((e.volume + .05) < 1) {
e.volume += .05;
incVol(e);
} else {
e.vol = 1;
}
}, 100)
}
function decVol(e) {
setTimeout(function() {
if ((e.volume - .05) > 0) {
e.volume -= .05;
decVol(e);
} else {
e.volume = 0;
e.pause();
}
}, 100)
}
This is an inconsistent attempt, if you trigger 'enter' while 'decVol' is still running you lose volume completely and have to trigger an 'exit', wait, and then trigger 'enter' again.
I've also tried something with jQuery's animate on volume. But that doesn't seem consistent either.
var waypoint = new Waypoint.Inview({
element: $('#element')[0],
enter: function() {
$('#element')[0].volume = 0;
$('#element')[0].play();
$('#element').animate({
volume: 1
}, 1000);
},
entered: function() {},
exit: function() {},
exited: function() {
$('#element').animate({
volume: 0
}, 1000, function() {
$('#element')[0].pause();
});
}
});
If I scroll up and down too fast, especially if I have multiple waypoints of this type in the page, then the queue of events becomes extensive and I have fade ins/outs happening far after the events have triggered (though, I prefer this implementation for the moment).
Any suggestions on how to achieve what I want a little better?
Prefacing the animate() function with stop() is the answer.
Something like:
$('#element').stop(true, false).animate({
volume: 1
}, 1000);
I have a single page site:
http://chiaroscuro.telegraphbranding.com/
Each section is dynamically sized based on the user's window. I'm trying to figure out how to have a jQuery smooth scroll function scroll to the top of each section when the link is clicked. It is working great for the first section, funding areas, where I just used a simple offset().top, but the others are not working because they don't know how far to scroll because the window size is always different.
I've been trying to get offset() or position() to work, but no dice. I appreciate any advice.
Here's my jQuery:
`
$(document).ready(function () {
var slowScrollFunding = $('#funding-areas').offset().top;
var slowScrollAbout = $('#about-us').offset().top;
var slowScrollProjects = $('#our-projects').offset().top + 600;
panelOpen = true;
$('#anchor-funding-areas').click(function(event) {
event.preventDefault();
if(panelOpen == true) {
$('#slide-panel-content').stop(true, true).animate({height: '0px'}, 600, function() {
$('#panel-content-container').hide();
$('.scrollableArea').css('z-index', '11');
// Scroll down to 'slowScrollTop'
$('html, body, #home-wrap').animate({scrollTop:slowScrollFunding}, 1000);
panelOpen = false;
});
}else{
$('html, body, #home-wrap').animate({scrollTop:slowScrollFunding}, 1000);
};
});
$('#anchor-aboutus').click(function(event) {
event.preventDefault();
if(panelOpen == true) {
$('#slide-panel-content').stop(true, true).animate({height: '0px'}, 600, function() {
$('#panel-content-container').hide();
$('.scrollableArea').css('z-index', '11');
// Scroll down to 'slowScrollTop'
$('html, body, #aboutus-wrap').animate({scrollTop:slowScrollAbout}, 1000);
panelOpen = false;
});
}else{
$('html, body, #home-wrap').animate({scrollTop:slowScrollAbout}, 1000);
};
});
$('#anchor-ourprojects').click(function(event) {
event.preventDefault();
if(panelOpen == true) {
$('#slide-panel-content').stop(true, true).animate({height: '0px'}, 600, function() {
$('#panel-content-container').hide();
$('.scrollableArea').css('z-index', '11');
// Scroll down to 'slowScrollTop'
$('html, body, #home-wrap').animate({scrollTop:slowScrollProjects}, 1000);
panelOpen = false;
});
}else{
$('html, body, #home-wrap').animate({scrollTop:slowScrollProjects}, 1000);
};
});
$('#header-logo').add('.homelink').click(function() {
if(panelOpen == false) {
$('.scrollableArea').css('z-index', '0');
$('#panel-content-container').show();
$('#slide-panel-content').stop(true, true).animate({height: '389px'}, 600, function() {
// Scroll down to 'slowScrollTop'
panelOpen = true;
});
};
});
});
`
$.offset and $.position can be a little unreliable, especially if you have lots of complicated layouts going on - as your page does. What I've used in the past is the following trick:
var de = document.documentElement ? document.documentElement : document.body;
var elm = $('get_your_anchor_element').get(0);
var destScroll, curScroll = de.scrollTop;
/// check for the function scrollIntoView
if ( elm.scrollIntoView ) {
/// get the browser to scrollIntoView (this wont show up yet)
elm.scrollIntoView();
/// however the new scrollTop is calculated
destScroll = de.scrollTop;
/// then set the scrollTop back to where we were
de.scrollTop = curScroll;
/// you now have your correct scrollTop value
$(de).animate({scrollTop:destScroll});
}
else {
/// most browsers support scrollIntoView so I didn't bother
/// with a fallback, but you could just use window.location
/// and jump to the anchor.
}
The above can occur on the click event. The only thing that needs to be improved is that different browsers scroll on different base elements (body or html). When I used this I had my own element that was scrollable so I didn't need to work out which one the agent was using... When I get a second I'll see if I can find a good bit of code for detecting the difference.
The above has worked in all the modern browsers I've tested (Firefox, Safari, Chrome) however I didn't need to support Internet Explorer so I'm not sure with regard to that.
update:
I'm not quite sure what is going on with your implementation - it is possible that the page is so heavy with content that you actually can see the .scrollIntoView() happening - this has never been my experience, but then I didn't have so much going on on-screen. With that in mind, I've implemented a bare bones system that I would advise you use and build each extra part you need into it:
http://pebbl.co.uk/stackoverflow/13035183.html
That way you know you have a working system to start with, and will easily detect what it is that stops it from working. With regards to chiaro.js your implementation seems to be ok - if a little exploded over many different areas of the file - however this part is slightly erroneous:
$('#anchor-aboutus').click(function() {
event.preventDefault();
if(panelOpen == true) {
$('#slide-panel-content')
.stop(true, true)
.animate({height: '0px'}, 600, function() {
$('#panel-content-container').hide();
$('.scrollableArea').css('z-index', '11');
elm.scrollIntoView(true)
.animate({scrollTop:destScroll}, 1000);
panelOpen = false;
});
}else{
elm.scrollIntoView(true).animate({scrollTop:destScroll});
};
});
In the code above you will only get the correct value of destScroll if panelOpen === true. Ahh, actually I've also spotted another problem - which will explain why it's not working:
elm.scrollIntoView(true)
.animate({scrollTop:destScroll}, 1000);
The above code is mixing pure JavaScript and jQuery, the elm var is a normal DOM element (this supports the scrollIntoView method). But you are then attempting to chain the animate method of jQuery into the mix - you should also be triggering the animate method on the element responsible for the scrollbar. What you should use is as follows:
$('#anchor-aboutus').click(function(e) {
var currentScroll, destScroll;
e.preventDefault();
if(panelOpen == true) {
$('#slide-panel-content')
.stop(true, true)
.animate({height: '0px'}, 600, function() {
$('#panel-content-container').hide();
$('.scrollableArea').css('z-index', '11');
currentScroll = de.scrollTop;
elm.scrollIntoView(true);
destScroll = de.scrollTop;
de.scrollTop = currentScroll;
$(de).animate({scrollTop:destScroll}, 1000);
panelOpen = false;
});
}else{
currentScroll = de.scrollTop;
elm.scrollIntoView(true);
destScroll = de.scrollTop;
de.scrollTop = currentScroll;
$(de).animate({scrollTop:destScroll}, 1000);
};
});
However, what you will also need to do is make sure your de element points to the right element - either html or body depending on the browser - for this you can use this:
var de;
/// calculate which element is the scroller element
$('body, html').each(function(){
if ( this.scrollHeight > this.offsetHeight ) {
de = this;
return false;
}
});
alert( $(de).is('body') ) /// will be true for Chrome, false for Firefox.
You will need to use this code in place of the following code:
var de = document.documentElement ? document.documentElement : document.body;
The reason for changing the code you were using is as follows:
/// store the current scroll position from the de element
currentScroll = de.scrollTop;
/// get the browser to do the scrollTo calculation
elm.scrollIntoView(true);
/// store where the browser scrolled to behind the scenes
destScroll = de.scrollTop;
/// reset our scroll position to where we were before scrollIntoView()
/// if you don't reset then the animation will happen instantaneously
/// because that is what scrollIntoView does.
de.scrollTop = currentScroll;
/// wrap the normal dom element de with jquery and then animate
$(de).animate({scrollTop:destScroll}, 1000);
I have the following function to calculate the loading progress of a video (quite common):
function updateProgressBar (video) {
if (video.buffered.length > 0) {
var percent = (video.buffered.end(0) / video.duration) * 100;
$('#loading').css({'width': percent + '%'});
console.log(percent);
if (percent == 100) {
console.log('video loaded!');
//everything is loaded, do something.
$(video).unbind('loadeddata canplaythrough playing'); //prevents the repetition of the callback
}
}
}
...bound to the 'progress' event (and some others as a safety meassure) inside a $(document).ready function:
var videoTest = document.getElementById("videoTest");
$('#videoTest').bind('progress', function () {
updateProgressBar (videoTest);
});
$('#videoTest').bind('loadeddata', function () {
updateProgressBar (videoTest);
});
$('#videoTest').bind('canplaythrough', function () {
updateProgressBar (videoTest);
});
$('#videoTest').bind('playing', function () {
updateProgressBar (videoTest);
});
You can view a live example here: http://www.hidden-workshop.com/video/
As you can see, it all works well on firefox, but in the rest of the browsers, the 'percent' variable never reaches the value of '100' as it would be expected; the function always stops at 90~, and thus I'm unable to know when the video has finished loading (vital for what I'm trying to do).
It's like the 'progress' event stops working before I can get the final value of 'percent', because if you click the 'play' button, the 'playing' event fires and then successfully calculates and reads the 'percent' variable's last value (which is 100).
Am I missing something, or is it a common issue? Is there any workaround I could use?
Thanks in advance!
var videoElement = null; //TODO set reference to video element
var checkVideoLoadingProgressTimerDelay = 50;
var checkVideoLoadingProgressTimerID = -1;
function getVideoLoadingProgress(){
var end = 0;
if(videoElement.buffered.length >= 1){
end = videoElement.buffered.end(0);
}
var progress = end / videoElement.duration;
progress = isNaN(progress) ? 0 : progress;
return progress;
};
function startCheckVideoLoadingProgressTimer(){
checkVideoLoadingProgressTimerID =
setTimeout(checkVideoLoadingProgressTimerHandler, checkVideoLoadingProgressTimerDelay);
};
function checkVideoLoadingProgressTimerHandler(){
var progress = getVideoLoadingProgress();
//TODO update progress bar
if(progress < 1){
startCheckVideoLoadingProgressTimer();
}
};
Also value "auto" for "preload" attribute of video not guarantee that user agent will load whole video.
I'd like to set something up on my site where when you scroll within 15% of the bottom of the page an element flyouts from the side... I'm not sure how to get started here... should I add a listener for a scroll function or something?
I'm trying to recreate the effect at the bottom of this page: http://www.nytimes.com/2011/01/25/world/europe/25moscow.html?_r=1
update
I have this code....
console.log(document.body.scrollTop); //shows 0
console.log(document.body.scrollHeight * 0.85); //shows 1038.7
if (document.body.scrollTop > document.body.scrollHeight * 0.85) {
console.log();
$('#flyout').animate({
right: '0'
},
5000,
function() {
});
}
the console.log() values aren't changing when I scroll to the bottom of the page. The page is twice as long as my viewport.
[Working Demo]
$(document).ready(function () {
var ROOT = (function () {
var html = document.documentElement;
var htmlScrollTop = html.scrollTop++;
var root = html.scrollTop == htmlScrollTop + 1 ? html : document.body;
html.scrollTop = htmlScrollTop;
return root;
})();
// may be recalculated on resize
var limit = (document.body.scrollHeight - $(window).height()) * 0.85;
var visible = false;
var last = +new Date;
$(window).scroll(function () {
if (+new Date - last > 30) { // more than 30 ms elapsed
if (visible && ROOT.scrollTop < limit) {
setTimeout(function () { hide(); visible = false; }, 1);
} else if (!visible && ROOT.scrollTop > limit) {
setTimeout(function () { show(); visible = true; }, 1);
}
last = +new Date;
}
});
});
I know this is an old topic, but the above code that received the check mark was also triggering the $(window).scroll() event listener too many times.
I guess twitter had this same issue at one point. John Resig blogged about it here: http://ejohn.org/blog/learning-from-twitter/
$(document).ready(function(){
var ROOT = (function () {
var html = document.documentElement;
var htmlScrollTop = html.scrollTop++;
var root = html.scrollTop == htmlScrollTop + 1 ? html : document.body;
html.scrollTop = htmlScrollTop;
return root;
})();
// may be recalculated on resize
var limit = (document.body.scrollHeight - $(window).height()) * 0.85;
var visible = false;
var last = +new Date;
var didScroll = false;
$(window).scroll(function(){
didScroll = true;
})
setInterval(function(){
if(didScroll){
didScroll = false;
if (visible && ROOT.scrollTop < limit) {
hideCredit();
visible = false;
} else if (!visible && ROOT.scrollTop > limit) {
showCredit();
visible = true;
}
}
}, 30);
function hideCredit(){
console.log('The hideCredit function has been called.');
}
function showCredit(){
console.log('The showCredit function has been called.');
}
});
So the difference between the two blocks of code is when and how the timer is called. In this code the timer is called off the bat. So every 30 millaseconds, it checks to see if the page has been scrolled. if it's been scrolled, then it checks to see if we've passed the point on the page where we want to show the hidden content. Then, if that checks true, the actual function then gets called to show the content. (In my case I've just got a console.log print out in there right now.
This seems to be better to me than the other solution because the final function only gets called once per iteration. With the other solution, the final function was being called between 4 and 5 times. That's got to be saving resources. But maybe I'm missing something.
bad idea to capture the scroll event, best to use a timer and every few milliseconds check the scroll position and if in the range you need then execute the necessary code for what you need
Update: in the past few years the best practice is to subscribe to the event and use a throttle avoiding excessive processing https://lodash.com/docs#throttle
Something like this should work:
$(window).scroll(function() {
if (document.body.scrollTop > document.body.scrollHeight * 0.85) {
// flyout
}
});
document.body.scrollTop may not work equally well on all browsers (it actually depends on browser and doctype); so we need to abstract that in a function.
Also, we need to flyout only one time. So we can unbind the event handler after having flyed out.
And we don't want the flyout effect to slow down scrolling, so we will run our flytout function out of the event loop (by using setTimeout()).
Here is the final code:
// we bind the scroll event, with the 'flyout' namespace
// so we can unbind easily
$(window).bind('scroll.flyout', (function() {
// this function is defined only once
// it is private to our event handler
function getScrollTop() {
// if one of these values evaluates to false, this picks the other
return (document.documentElement.scrollTop||document.body.scrollTop);
}
// this is the actual event handler
// it has the getScrollTop() in its scope
return function() {
if (getScrollTop() > (document.body.scrollHeight-$(window).height()) * 0.85) {
// flyout
// out of the event loop
setTimeout(function() {
alert('flyout!');
}, 1);
// unbind the event handler
// so that it's not call anymore
$(this).unbind('scroll.flyout');
}
};
})());
So in the end, only getScrollTop() > document.body.scrollHeight * 0.85 is executed at each scroll event, which is acceptable.
The flyout effect is ran only one time, and after the event has returned, so it won't affect scrolling.