I'm using this script which I purchased from some website in German, so I can't understand the instructions. Basically, I want to make it so this is only triggered on screens above 768 pixels. I've tried a few different things and can't seem to get it to work. I'm not very well versed in Javascript. If someone could show me how to do this, I would be very grateful.
$(document).ready(function() {
//Build Bubble Machines with the Bubble Engine ------------------------
var SoapBubbleMachineNumber1 = $('fn').BubbleEngine({
particleSizeMin: 0,
particleSizeMax: 60,
particleSourceX: 0,
particleSourceY: 500,
particleAnimationDuration: 5000,
particleDirection: 'right',
particleAnimationDuration: 6000,
particleAnimationVariance: 2000,
particleScatteringX: 500,
particleScatteringY: 300,
gravity: -100
});
//Start Bubble Machine 1 ---------------------------------------------
SoapBubbleMachineNumber1.addBubbles(50);
});
var w = window,
d = document,
e = d.documentElement,
g = d.getElementsByTagName('body')[0],
x = w.innerWidth || e.clientWidth || g.clientWidth;
if(x > 768){
//your code here.
}
The first part is a pretty robust function to find the window width.
What you would then do is wrap your code shown in a function and call the function within the //your code here
part
first google translator is your friend ;) If nothing works ask a german like me ;) Anyhow :
function executeme(minWidth,minHeight){
var width = window.innerWidth|| document.documentElement.clientWidth||
Document.body.clientWidth;
var height = window.innerHeight || document.documentElement.clientHeight ||
document.body.clientHeight;
if (width < minWidth){return false;}
if (height < minHeight){return false;}
return true;
}
this will work on the browser window
If you want to know how much space is left in a div for example
function getGeometry(id){
try{
var element=document.getElementById()
} catch (ex){
return false;
}
var rect = element.getBoundingClientRect();
// uncomment to see the whole show :)
// console.log(rect);
return rect;
}
function runOnElementGeometry(id,minWidth,minHeight){
try{
var element=document.getElementById()
} catch (ex){
return false;
}
var rect = element.getBoundingClientRect();
if (rect.width < minWidth){return false;}
if (rect.height < minHeight){return false;}
return true;
}
if you need also the position of the element on the page you need to add the scroll positions (not needed for the width and height)
var x = window.scrollX
var y = window.scrollY
Now you can check whats going on and either start your bubbeles or even not :)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.