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();
});
Related
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");
}
});
});
};
});
I'm trying to spawn randomly generated targets on the screen using a function to copy an invisible image of the target to be spawned at a random place within the screen using window object properties.
For this to happen I think the image have to have position set to absolute, but then several images may be spawned in a way that they will overlap, how can I prevent this from happening?
The div element where I copy my first image and also store the other copies.
<div id="targetsDiv">
<img src="target2.png" alt="target_shot" class="target" />
</div>
Inside the script:
var x_pixels = window.innerWidth - 180;
var y_pixels = window.innerHeight - 180;
var x_midScreen = window.innerWidth / 2;
var y_midScreen = window.innerHeight / 2;
var xRandom = Math.floor(Math.random()*x_pixels) +1;
var yRandom = Math.floor(Math.random()*y_pixels) +1;
var targetCollection = document.getElementById("targetsDiv");
var targetCopy = targetCollection.innerHTML
var targetList = document.getElementsByClassName("target");
targetList[0].style.display = "none";
var targetNr = 1;
var numberOfSpawns = 3;
function spawnTargets () {
while (targetNr <= numberOfSpawns) {
if ((xRandom < x_midScreen - 126 || xRandom > x_midScreen + 26) || (yRandom < y_midScreen - 126 || yRandom > y_midScreen + 26)) {
targetCollection.innerHTML += targetCopy;
targetList[targetNr].style.left = xRandom + "px";
targetList[targetNr].style.top = yRandom + "px";
targetNr++;
}
xRandom = Math.floor(Math.random()*x_pixels) +1;
yRandom = Math.floor(Math.random()*y_pixels) +1;
}
}
PS: I appreciate all help, tips and tweaks that you guys provide:) Thanks for helping
The area you want to exclude in the centre of the screen is rather large, and on my little laptop, there isn't even any room to still show the random positioned images.
But anyway, this piece of code should do the job -- I added some infinite loop protection which on my PC was a life-saver:
HTML (added style attribute)
<div id="targetsDiv">
<img src="target2.png" alt="target_shot" class="target"
style="visibility:hidden"/>
</div>
JavaScript:
window.addEventListener('load', function () {
var targetCollection = document.getElementById("targetsDiv");
var template = document.getElementsByClassName("target")[0];
var targetWidth = template.offsetWidth;
var targetHeight = template.offsetHeight;
var x_pixels = window.innerWidth - targetWidth;
var y_pixels = window.innerHeight - targetHeight;
var x_midScreen = window.innerWidth / 2;
var y_midScreen = window.innerHeight / 2;
function spawnTargets (numberOfSpawns) {
var targets = [];
var count = 0; // infinite recursion protection
for (var i = 0; i < numberOfSpawns; i++) {
do {
do {
var x = Math.floor(Math.random()*x_pixels);
var y = Math.floor(Math.random()*y_pixels);
if (count++ > 200) {
console.log('give up');
return;
}
} while ((x >= x_midScreen-450 && x <= x_midScreen+300) && (y >= y_midScreen-350 || y <= y_midScreen+200));
for (var j = 0; j < i; j++) {
if (x >= targets[j].x - targetWidth && x <= targets[j].x + targetWidth &&
y >= targets[j].y - targetHeight && y <= targets[j].y + targetHeight) break; // not ok!
}
} while (j < i);
targets.push({x, y});
img = document.createElement('img');
img.src = template.src;
img.setAttribute('width', targetWidth + 'px');
img.setAttribute('height', targetHeight + 'px');
img.className = template.className;
targetCollection.appendChild(img);
img.style.left = x + "px";
img.style.top = y + "px";
}
}
spawnTargets(3);
});
I've got the following code. I am working on an array. I found a javascript array instructions..if this is wrong, I'd love help to find out if there is a jQuery version of this.
My issue comes into play when I am trying to implement an if() and else if() conditions to the array. I am using i (variable) to count items in array.
It is saying that there is an issue on the line that reads else if(width <= Sizes[i]) { $(element).attr('src', 'images/' + Sizes[i] + '/' + name[name.length - 1]) }
Also, it appears that the array isn't working at all. Its pulling the default image.
I am probably doing this wrong. I am doing this trying to figure out how arrays work and implementing them into a code I already have. Can someone please help solve this? It isn't working. The code works perfectly without the array, so it is something in the array.
$(document).ready(function() {
window.onresize = resize;
function resize() {
var img = $('img.resizable');
var width = $(window).innerWidth();
var Sizes, sLength, i;
img.each(function(index, element) {
var name = element.src.split('/') // Split is a native javascript function, which 'splits' the string into an array with the components
Sizes = [2880, 1920, 1000, 600];
sLength = Sizes.length;
for (i = 0; i < sLength; i++) {
if (i == 0) {
if (width <= Sizes[i]) {
$(element).attr('src', 'images/' + Sizes[i] + '/' + name[name.length - 1])
}
}
if (i > 0) {
else if (width <= Sizes[i]) {
$(element).attr('src', 'images/' + Sizes[i] + '/' + name[name.length - 1])
}
}
} else {
$(element).attr('src', 'images/2880/' + name[name.length - 1])
}
})
}
resize();
});
The actual script I am trying to convert
$(document).ready(function() {
window.onresize = resize;
function resize() {
var img = $('img.resizable');
var width = $(window).innerWidth();
img.each(function(index, element) {
var name = element.src.split('/') // Split is a native javascript function, which 'splits' the string into an array with the components
if(width <= 600) {
$(element).attr('src', 'images/600/' + name[name.length - 1]) // This name[name.length -1] trick is being used to select the 'last value in the string' based on the length of the string.
}
else if(width <= 1000) {
$(element).attr('src', 'images/1000/' + name[name.length - 1])
}
else if(width <= 1920) {
$(element).attr('src', 'images/1920/' + name[name.length - 1])
}
else {
$(element).attr('src', 'images/2880/' + name[name.length - 1])
}
})
}
resize();
});
Here's a solution that simplifies matters by using Array#filter to select the appropriate width; the appropriate size will sit in the first position of the sizes array:
$(document).ready(function() {
window.onresize = resize;
resize();
});
function resize() {
// use $.each to iterate over each element
$('img.resizable').each(function(index, element) {
// get the image name directly
var name = element.src.substring(element.src.lastIndexOf('/'));
// let's whittle down sizes to *only* those that fit our screen width
var sizes = [600, 1000, 1920, 2880].filter(function(s){
return window.innerWidth < s || s == 2880;
});
// update the image with whatever size is in the first position
$(element).attr('src', 'images/' + sizes[0] + name);
});
}
We can move the resize function definition outside of your on ready handler, to make it globally accessible. We can dispense with use of split to just find whatever is after the last / (the image name). And we can avoid using loops and if statements with breaks, which tend to be difficult to read and maintain.
This is a bit verbose and follows your array starting with the largest value which I used instead of hard coding that for the "largest" (last) conditional. Remove the console logs prior to deployment.
$(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();
});
You are referencing Sizes array using lowercase s at sizes[i], where sizes is not defined
I hope this could solve your problem:
$(window).on('resize', function (e) {
var img = $('img.resizable');
var width = $(window).innerWidth();
var Sizes, sLength, i;
img.each(function (index, element) {
var name = element.getAttribute('src').split('/') // Split is a native javascript function, which 'splits' the string into an array with the components
Sizes = [2880, 1920, 1000, 600].sort((a, b) => {return a - b;});
sLength = Sizes.length;
for (i = 0; i < sLength; i++) {
if (width <= Sizes[i]) {
$(element).attr('src', 'images/' + Sizes[i] + '/' + name.pop())
console.log('New src for image N. ' + index + ' is: ' + $(element).attr('src'));
break;
}
}
});
});
$(function () {
// simulate a resize on dom ready: for testing
$(window).trigger('resize');
});
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<img class="resizable" src="images/100/nameofimage1.png">
<img class="resizable" src="images/100/nameofimage2.png">
You want something like this probably:
sort_array_small_to_large(Sizes)
for (i = 0; i < Sizes.length; i++)
{
if (width <= Sizes[i])
{
size = Sizes[i]
break
}
}
$(element).attr('src', 'images/' + size + '/' + name[name.length - 1])
This is for view zoom image when mouse over on thumbnail. IT'S WORKS !!!
1. Code for html (smarty)
<{html_image onmouseout="view_zoom(this, '');" onmouseover="view_zoom(this, this.src);" file=$img}>
2. Code for js :
function view_zoom(o, i)
{
if(i!=''&&i.indexOf('noimage.jpg') == -1)
{
var s = i.replace('small','big');
var aTag = o;
var leftpos = toppos = 0;
do {aTag = aTag.offsetParent; leftpos += aTag.offsetLeft; toppos += aTag.offsetTop;
} while(aTag.offsetParent != null);
var X = o.offsetLeft + leftpos + 100;
var Y = o.offsetTop + toppos - 20;
document.getElementById('big_zoom').style.left = X + 'px';
document.getElementById('big_zoom').style.top = Y + 'px';
document.getElementById('big_zoom').style.display = 'block';
document.getElementById('big_zoom').innerHTML='<img src="'+s+'" onload="if(this.width<200) {$(\'big_zoom\').style.display = \'none\');}else if(this.width>300){this.width=300;}$(\'big_zoom\').style.width=this.width+\'px\';"/>'
} else {
document.getElementById('big_zoom').style.display = 'none';
}
}
3. code for css :
.big_zoom {width:200px;z-index:1000;position:absolute;padding:5px; background:#FFFFFF;}
.big_zoom img{border:#AACCEE 1px solid;padding:5px;}
don't forget to add this line in html
<div class="big_zoom" id="big_zoom" style="display:none;"></div>
lol !!!
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) { ... }