For some reason a JS script is only triggering once the user has scrolled a tiny bit, however it loads perfectly fine on desktop on page load.
Potential causes:
WP Rocket JS optimisations? (UPDATE: Deactivated, issue persists)
CDN Serving files?
Code:
window.onload = function () {
$('div.wistia_responsive_padding').each(function() {
var wistia = $(this);
var actualHeight = $(this).children(".video-wrapper").height();
var containerHeight = $(this).height();
var currentMargin = 30;
currentMargin = $(".marginFinder").height();
var differentHeight = (actualHeight - containerHeight) + currentMargin;
if(differentHeight < 0) {
$(this).css("margin-bottom", differentHeight+"px");
}
$(window).resize(function () {
actualHeight = wistia.children(".video-wrapper").height();
containerHeight = wistia.height();
currentMargin = $(".marginFinder").height();
differentHeight = (actualHeight - containerHeight) + currentMargin;
if(differentHeight < 0) {
wistia.css("margin-bottom", differentHeight+"px");
}
});
});
};
I believe it was to do with a console error with jQuery functions being used without declaring "$", however, it was not showing up in my local version only on the staging server:
jQuery(function ($) {
window.onload = function() {
$('div.wistia_responsive_padding').each(function() {
var wistia = $(this);
var actualHeight = $(this).children(".video-wrapper").height();
var containerHeight = $(this).height();
var currentMargin = 30;
currentMargin = $(".marginFinder").height();
var differentHeight = (actualHeight - containerHeight) + currentMargin;
if(differentHeight < 0) {
$(this).css("margin-bottom", differentHeight+"px");
}
$(window).resize(function () {
actualHeight = wistia.children(".video-wrapper").height();
containerHeight = wistia.height();
currentMargin = $(".marginFinder").height();
differentHeight = (actualHeight - containerHeight) + currentMargin;
if(differentHeight < 0) {
wistia.css("margin-bottom", differentHeight+"px");
}
});
});
};
});
Related
I've got the following script
$(document).ready(function() {
window.onresize = resize;
var sizes = [2880, 1920, 1000, 600];
function resize() {
//console.log('si');
var img = $('img.resizable');
var width = $(window).innerWidth();
img.each(function(index, element) {
var name = element.src.split('/');
name = name[name.length - 1];
var setto = 0;
for (var i = sizes.length; i >= 0; i--) {
//console.log(i,width,setto, sizes[i]);
if (width <= sizes[i]) {
setto = sizes[i];
break;
}
}
setto = width >= sizes[0] ? sizes[0] : setto;
$(element).attr('src', 'images/' + setto + '/' + name);
});
}
resize();
});
It works with IMG tags: <img src="images/August-Vision-Night.png" class="resizable" alt=""/>
I'm trying to adapt it to work with a parallax background image. Instead of changing src it needs to change data-image-src
<div id="contentsection_1_container" class="parallax-window parallax-resizable" data-parallax="scroll" data-image-src="images/texture-clouds.png">
I attempted the following code; however, it didn't work at all. I'm new to this, so I have no clue how to actually fix the script.
$(document).ready(function() {
window.onresize = resize;
var sizes = [2880, 1920, 1000, 600];
function resize() {
//console.log('si');
var img = $('.parallax-resizable');
var width = $(window).innerWidth();
img.each(function(index, element) {
var name = element.data-image-src.split('/');
name = name[name.length - 1];
var setto = 0;
for (var i = sizes.length; i >= 0; i--) {
//console.log(i,width,setto, sizes[i]);
if (width <= sizes[i]) {
setto = sizes[i];
break;
}
}
setto = width >= sizes[0] ? sizes[0] : setto;
$(element).attr('data-image-src', 'images/' + setto + '/' + name);
});
}
resize();
});
Hi I have some js code that do typing effect on my web page it start typing when you scroll down end of page. For first it work normally but when you start scroll faster down to up the typing effect goes crazy how can I fix that
demo page
code
$(window).scroll(function (e) {
var elem = $(".hello-page");
var scrollTop = $(window).scrollTop();
var blockTop = elem.offset().top;
var docHeight = $(document).height();
var windowH = $(window).height();
if (scrollTop >= blockTop) {
var helloPageA = $(".hello-page").find("a");
var text = helloPageA.attr("data-text");
helloPageA.text('');
$.each(text.split(''), function (i, letter) {
setTimeout(function () {
helloPageA.html(helloPageA.html() + letter);
}, 150 * i);
});
} else {
elem.find("a").text('');
}
});
jsfiddle example
Thanks for your help
So, here is the solution - http://jsfiddle.net/u3ojjx8r/1/
I borrowed initial structure of the code from previous answer here and it was removed unfortunately, therefore I can't mention one of the co-authors. Though the code looked quite similar to topic-starter's one.
The idea of the code below is to separate the queuing of characters to render and the actual rendering. Another important improvement is always have control over timeouts, i.e. never schedule more than one timeout. That allows you to cancel them any time without unpredicted/uncontrolled behavior.
var timeoutVar;
var queue = [];
var drawQueueTimeout = -1;
var helloPageA = $(".hello-page").find("a");
function pushQueue (element) {
console.log('pushQUeue', element.char);
queue.push(element);
checkQueue();
}
function flushQueue () {
console.log('flushQueue');
queue = [];
clearTimeout(drawQueueTimeout);
drawQueueTimeout = -1;
}
function checkQueue () {
console.log('checkQueue', queue.length, drawQueueTimeout);
if (queue.length > 0 && drawQueueTimeout < 0) {
console.log('schedule drawQueue');
drawQueueTimeout = setTimeout(drawQueue, 150);
}
}
function drawQueue () {
drawQueueTimeout = -1;
console.log('draw queue');
if (queue.length > 0) {
var element = queue.shift();
console.log('drawQueue', element.char);
helloPageA.html(helloPageA.html() + element.char);
}
checkQueue();
}
$(window).scroll(function (e) {
var elem = $(".hello-page");
var scrollTop = $(window).scrollTop();
var blockTop = elem.offset().top;
var docHeight = $(document).height();
var windowH = $(window).height();
if (scrollTop + windowH == docHeight) {
// Empty anything typed so far
helloPageA.empty();
flushQueue();
var text = helloPageA.attr("data-text");
helloPageA.text('');
$.each(text.split(''), function (i, letter) {
pushQueue({
char: letter,
index: i
});
});
} else {
helloPageA.empty();
flushQueue();
}
});
Here is my code:
function centerAlign(image, parent) {
image.load(function() {
var imageWidth = image.width();
var parentWidth = parent.width();
if(imageWidth != 0) {
var trim = (parentWidth - imageWidth) / 2;
image.css("marginLeft", trim);
}
});
}
$(window).resize(function() {
centerAlign($(".swiper-slide img"), $(".swiper-slide"));
});
$(document).ready(function() {
centerAlign($(".swiper-slide img"), $(".swiper-slide"));
});
It runs the function on page load however not on window resize. Any thoughts?
Found the solution, I was calling load within resize. Guessing as it's already loaded it wont run on resize. Changed to:
function centerAlign(image, parent) {
var imageWidth = image.width();
var parentWidth = parent.width();
if(imageWidth != 0) {
var trim = (parentWidth - imageWidth) / 2;
image.css("marginLeft", trim);
}
}
$(window).resize(function() {
centerAlign($(".swiper-slide img"), $(".swiper-slide"));
});
$(document).ready(function() {
$(".swiper-slide img").load(function() {
centerAlign($(".swiper-slide img"), $(".swiper-slide"));
});
});
Now I'm only calling load within ready() and not within resize(). Hope this helps anyone else.
I was (trying to) load jQuery 1.9.1 un-minified from CDN: "Uncaught TypeError: Cannot call method 'call' of undefined jquery-1.9.1.js:648". So I updated the reference, and am apparently getting an equivalent error, now for minified:
Uncaught TypeError: Cannot call method 'call' of undefined jquery-1.11.0.min.js:2
n.extend.each jquery-1.11.0.min.js:2
(anonymous function) site.js:26
j jquery-1.11.0.min.js:2
k.fireWith jquery-1.11.0.min.js:2
n.extend.ready jquery-1.11.0.min.js:2
K jquery-1.11.0.min.js:2
The page is at http://ccachicago.pragmatometer.com; the first SCRIPT tag is:
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
(The page is POSH plus CSS styling and a light touch of JavaScript dust; it's simple by modern webapp standards...)
--EDIT--
Regarding my code, the page has, as its only script contents:
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="/media/js/site.js"></script>
<script>
function slideshow()
{
var width = (jQuery(window).width() - 70) * .8;
var factor = width / 1024;
var height = 420 * factor;
jQuery('#slideshow').attr('height', height + 'px');
jQuery('#slideshow').attr('width', width + 'px');
};
slideshow();
jQuery(window).resize(slideshow);
</script>
The site.js file has:
/**
* Override jQuery.fn.init to guard against XSS attacks.
*
* See http://bugs.jquery.com/ticket/9521
*/
(function () {
var jquery_init = jQuery.fn.init;
jQuery.fn.init = function (selector, context, rootjQuery) {
// If the string contains a "#" before a "= 0) {
var bracket_position = selector.indexOf(' hash_position) {
throw 'Syntax error, unrecognized expression: ' + selector;
}
}
}
return jquery_init.call(this, selector, context, rootjQuery);
};
jQuery.fn.init.prototype = jquery_init.prototype;
})();
jQuery(function()
{
jQuery.each(jQuery('h1').add('h2').add('h3').add('h4').add('h5').add('h6').add('ul#navigation')).function(index, element)
{
var bounds = jQuery(element).offset();
var image_left = bounds.left;
var image_top = bounds.top + bounds.height;
var image = jQuery('');
image.style.position = 'absolute';
image.style.top = image_top + 'px';
image.style.left = image_left + 'px';
}
function set_search_width()
{
var offset = 950;
var width = jQuery(window).width() - offset;
jQuery('#menu-search').css('max-width', width + 'px');
jQuery('#menu-search').css('width', width + 'px');
jQuery('#query').width(width - 80);
}
jQuery(window).resize(set_search_width);
set_search_width();
});
sfHover = function()
{
var sfEls =
document.getElementById('nav').getElementsByTagName('li');
for(var index = 0; index
/**
* Override jQuery.fn.init to guard against XSS attacks.
*
* See http://bugs.jquery.com/ticket/9521
*/
(function () {
var jquery_init = jQuery.fn.init;
jQuery.fn.init = function (selector, context, rootjQuery) {
// If the string contains a "#" before a "<", treat it as invalid HTML.
if (selector && typeof selector === 'string') {
var hash_position = selector.indexOf('#');
if (hash_position >= 0) {
var bracket_position = selector.indexOf('<');
if (bracket_position > hash_position) {
throw 'Syntax error, unrecognized expression: ' + selector;
}
}
}
return jquery_init.call(this, selector, context, rootjQuery);
};
jQuery.fn.init.prototype = jquery_init.prototype;
})();
jQuery(function()
{
jQuery.each(jQuery('h1').add('h2').add('h3').add('h4').add('h5').add('h6').add('ul#navigation')).function(index, element)
{
var bounds = jQuery(element).offset();
var image_left = bounds.left;
var image_top = bounds.top + bounds.height;
var image = jQuery('<img src="/media/images/foldback.png">');
image.style.position = 'absolute';
image.style.top = image_top + 'px';
image.style.left = image_left + 'px';
}
function set_search_width()
{
var offset = 950;
var width = jQuery(window).width() - offset;
jQuery('#menu-search').css('max-width', width + 'px');
jQuery('#menu-search').css('width', width + 'px');
jQuery('#query').width(width - 80);
}
jQuery(window).resize(set_search_width);
set_search_width();
});
sfHover = function()
{
var sfEls =
document.getElementById('nav').getElementsByTagName('li');
for(var index = 0; index < sfEls.length; index++)
{
sfEls[i].onmouseover = function()
{
this.className += " sfhover";
}
sfEls[i].onmouseout = function()
{
this.className = this.className.replace(new RegExp(
" sfhover\\b"), "");
}
}
}
if (window.attachEvent)
{
window.attachEvent("onload", sfHover);
}
You have incorrect syntxis
What do you whant to do with ?
jQuery(function()
{
jQuery.each(jQuery('h1').add('h2').add('h3').add('h4').add('h5').add('h6').add('ul#navigation')).function(index, element)
{
var bounds = jQuery(element).offset();
var image_left = bounds.left;
var image_top = bounds.top + bounds.height;
var image = jQuery('<img src="/media/images/foldback.png">');
image.style.position = 'absolute';
image.style.top = image_top + 'px';
image.style.left = image_left + 'px';
}
function set_search_width()
{
var offset = 950;
var width = jQuery(window).width() - offset;
jQuery('#menu-search').css('max-width', width + 'px');
jQuery('#menu-search').css('width', width + 'px');
jQuery('#query').width(width - 80);
}
jQuery(window).resize(set_search_width);
set_search_width();
});
maybe code below is what you want ? ( find elements, i think it is better use complex selector, and apply function to each element )
jQuery('h1').add('h2').add('h3').add('h4').add('h5').add('h6').add('ul#navigation').each(function(index, element)
{
var bounds = jQuery(element).offset();
var image_left = bounds.left;
var image_top = bounds.top + bounds.height;
var image = jQuery('<img src="/media/images/foldback.png">');
image.style.position = 'absolute';
image.style.top = image_top + 'px';
image.style.left = image_left + 'px';
});
The offending line is: site.js line 26
if should be something like
jQuery.each(jQuery('h1').add('h2'), function(index, element) { ... })
not
jQuery.each(jQuery('h1').add('h2')).function(index, element) { ... }
I have an element with animated top margin. I need to detect if it isn't too close from the border, and if it is, scroll parent div to lower position, to prevent animated element from hiding. Here is an example:
http://jsfiddle.net/zYYBR/5/
This green box shouldn't be below the red line after clicking the "down" button.
Do you mean this?
var new_margin;
var step = 75;
var limit = $("#max")[0].offsetTop;
$('#down').click(function() {
var goStep = step;
var elHeight = $("#animated")[0].offsetTop + $("#animated")[0].offsetHeight;
if((elHeight + step) > limit)
{
goStep = limit - elHeight;
}
new_margin = goStep + parseInt($('#animated').css('margin-top'));
$("#animated").animate({marginTop: new_margin}, 1000);
});
http://jsfiddle.net/zYYBR/8/
EDIT: Or maybe something like that (of course you can improve the calculation, because currently it's very buggy with scroll):
var new_margin;
var step = 75;
$('#down').click(function () {
scroll(1000);
});
var scrollTimer = null;
$("#container").bind("scroll", function () {
clearTimeout(scrollTimer);
scrollTimer = setTimeout(function () { scroll(1); }, 10);
});
function scroll(speed) {
var scrollStep, animationStep = step;
var currentBoxBottom = $("#animated")[0].offsetTop + $("#animated")[0].offsetHeight;
var nextCurrentBoxBottom = currentBoxBottom + step;
var limit = $("#max")[0].offsetTop + $("#container")[0].scrollTop;
if (nextCurrentBoxBottom > limit) {
if (limit >= $("#container")[0].scrollTop) {
scrollStep = $("#container")[0].scrollTop + nextCurrentBoxBottom - limit;
}
else {
scrollStep = $("#container")[0].scrollTop - nextCurrentBoxBottom - limit;
animationStep = nextCurrentBoxBottom - limit;
}
$("#container")[0].scrollTop = scrollStep;
}
new_margin = animationStep + parseInt($('#animated').css('margin-top'));
$("#animated").animate({ marginTop: new_margin }, speed);
}
http://jsfiddle.net/zYYBR/13/
Do you mean something like this?
I have the same visual result as Alex Dn did, but I added a little extra direction to what I think you're talking about. If it's what you're looking for I'll make updates:
var new_margin;
var step = 75;
var limit = $("#max")[0].offsetTop;
$('#down2').click(function() {
var anim = $("#animated");
var hrOff = $("#max").offset();
var thOff = anim.offset();
new_margin = Math.min(hrOff.top - thOff.top - anim.height(), 75);
console.log(new_margin, hrOff.top, thOff.top);
var st = 0;
if (new_margin < 75) {
st = 75 - new_margin;
//have container scroll by this much?
}
anim.animate({
marginTop: "+=" + new_margin
}, 1000);
});
http://jsfiddle.net/zYYBR/10/