We Keep Coding

How can I make it so this script executes only above a certain screen size?

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 :)

Remove function on browser width

I'm still very new to javascript and I'm learning as I build. This may be a simple fix but how would I disable a function on my parallax images ( or disable a specific js function in general ) on a smaller width?
Here's what I have so far that doesn't quite work but shows "undefined". I've been searching for a solution for a couple of days now with no luck. Any help would be appreciated.
var paraLlaxS = document.querySelector("#firstImgc2");
var paraLlaxS = document.querySelector("#secondImgc2");
var paraLlaxS = document.querySelector("#backbox1");
function setTranslate(xPos, yPos, el) {
el.style.transform = "translate3d(" + xPos + ", " + yPos + "px, 0)";
}
window.addEventListener("DOMContentLoaded", scrollLoop, false);
var xScrollPosition;
var yScrollPosition;
function scrollLoop() {
xScrollPosition = window.scrollX;
yScrollPosition = window.scrollY;
setTranslate(0, yScrollPosition * -0.2, firstImgc2);
setTranslate(0, yScrollPosition * 0.15, secondImgc2);
setTranslate(0, yScrollPosition * -0.6, backbox1);
requestAnimationFrame(scrollLoop);
if(window.innerWidth < 900) {
document.querySelector('#firstImgc2').innerHTML = window.removeEventListener("DOMContentLoaded", scrollLoop, false);
return;
} else {
}
}

You could add a conditional return at the beginning of you function. But if the width increases again you would need to listen for that to start the loop again.
function scrollLoop() {
if(window.innerWidth < 900)return;
...

I borrowed a solution from another post.
Listen for browser width for responsive web design?
This code is compatible with a wider variety of browsers as getting the screen size can vary depending on the browser.
var width = 0;
function getWindowSize() {
if (document.body && document.body.offsetWidth) {
width = document.body.offsetWidth;
}
if (document.compatMode=='CSS1Compat' &&
document.documentElement &&
document.documentElement.offsetWidth ) {
width = document.documentElement.offsetWidth;
}
if (window.innerWidth) {
width = window.innerWidth;
}
return(width);
}

Replace element if its in viewport for x seconds

Hello currently im using this code, to check if element is in viewport and then replacing it with something else. Anyone have any ideas how can I make it to replace element only if its in viewport for, by example atleast 2 seconds?
var test = {
elementViewportChecker: function(el) {
var rect = el.getBoundingClientRect(),
top = rect.top,
height = rect.height,
el = el.parentNode;
do {
rect = el.getBoundingClientRect();
if(top <= rect.bottom === false)
return false;
if((top + height) <= rect.top)
return false;
el = el.parentNode;
} while(el != document.body);
return top <= document.documentElement.clientHeight;
},
isElementIntoView: function(el) {
return this.elementViewportChecker(el);
},
};
if(test.isElementIntoView(element)) {
element.doSomething();
}
I've tried multiple ways, but none of them worked. I would really a appreciate if someone could help me with this.

Positining elements according to browser size

I have a question about positining elements on the screen. When I start my program, it calculates the browser's width and half of the height. I do it only at the beginning. So my horizontal scroller stands at the center, but when I change the browser size during program run, of course it doesn't stand at center. How can I do that?
My calculation of width and height:
function GetWidth()
{
var x = 0;
if (self.innerHeight)
{
x = self.innerWidth;
}
else if (document.documentElement && document.documentElement.clientHeight)
{
x = document.documentElement.clientWidth;
}
else if (document.body)
{
x = document.body.clientWidth;
}
return x;
}
function GetHeight()
{
var y = 0;
if (self.innerHeight)
{
y = self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientHeight)
{
y = document.documentElement.clientHeight;
}
else if (document.body)
{
y = document.body.clientHeight;
}
return y;
}

Hopefuly this will help you: Media Queries CSS
Have a read about these, its what i use to display and control my content between mobiles,tablets and desktops.
Its very hand and easy to use.

use the onresize-event to readjust your gui.
function resize() {
// do something here
}
window.onresize = resize;

Check if element is visible on screen [duplicate]

This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
jQuery - Check if element is visible after scroling
I'm trying to determine if an element is visible on screen. In order to to this, I'm trying to find the element's vertical position using offsetTop, but the value returned is not correct. In this case, the element is not visible unless you scroll down. But despite of this, offsetTop returns a value of 618 when my screen height is 703, so according to offsetTop the element should be visible.
The code I'm using looks like this:
function posY(obj)
{
var curtop = 0;
if( obj.offsetParent )
{
while(1)
{
curtop += obj.offsetTop;
if( !obj.offsetParent )
{
break;
}
obj = obj.offsetParent;
}
} else if( obj.y )
{
curtop += obj.y;
}
return curtop;
}
Thank you in advance!

--- Shameless plug ---
I have added this function to a library I created
vanillajs-browser-helpers: https://github.com/Tokimon/vanillajs-browser-helpers/blob/master/inView.js
-------------------------------
Intersection Observer
In modern browsers you can use the IntersectionObserver which detects where an element is on the screen or compared to a parent.
The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport.
Today I would probably lean toward this API if I need to detect and react to when an element has entered or exited the screen.
But for a quick test/lookup when you just want to verify if an emelemt is currently on screen I would go with the version just below using the getBoundingClientRect.
Using getBoundingClientRect
Short version
This is a lot shorter and should do it as well:
function checkVisible(elm) {
var rect = elm.getBoundingClientRect();
var viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight);
return !(rect.bottom < 0 || rect.top - viewHeight >= 0);
}
with a fiddle to prove it: http://jsfiddle.net/t2L274ty/1/
Longer version
And a version with threshold and mode included:
function checkVisible(elm, threshold, mode) {
threshold = threshold || 0;
mode = mode || 'visible';
var rect = elm.getBoundingClientRect();
var viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight);
var above = rect.bottom - threshold < 0;
var below = rect.top - viewHeight + threshold >= 0;
return mode === 'above' ? above : (mode === 'below' ? below : !above && !below);
}
and with a fiddle to prove it: http://jsfiddle.net/t2L274ty/2/
A more traditional way to do it
As BenM stated, you need to detect the height of the viewport + the scroll position to match up with your top position. The function you are using is ok and does the job, though its a bit more complex than it needs to be.
If you don't use jQuery then the script would be something like this:
function posY(elm) {
var test = elm, top = 0;
while(!!test && test.tagName.toLowerCase() !== "body") {
top += test.offsetTop;
test = test.offsetParent;
}
return top;
}
function viewPortHeight() {
var de = document.documentElement;
if(!!window.innerWidth)
{ return window.innerHeight; }
else if( de && !isNaN(de.clientHeight) )
{ return de.clientHeight; }
return 0;
}
function scrollY() {
if( window.pageYOffset ) { return window.pageYOffset; }
return Math.max(document.documentElement.scrollTop, document.body.scrollTop);
}
function checkvisible( elm ) {
var vpH = viewPortHeight(), // Viewport Height
st = scrollY(), // Scroll Top
y = posY(elm);
return (y > (vpH + st));
}
Using jQuery is a lot easier:
function checkVisible( elm, evalType ) {
evalType = evalType || "visible";
var vpH = $(window).height(), // Viewport Height
st = $(window).scrollTop(), // Scroll Top
y = $(elm).offset().top,
elementHeight = $(elm).height();
if (evalType === "visible") return ((y < (vpH + st)) && (y > (st - elementHeight)));
if (evalType === "above") return ((y < (vpH + st)));
}
This even offers a second parameter. With "visible" (or no second parameter) it strictly checks whether an element is on screen. If it is set to "above" it will return true when the element in question is on or above the screen.
See in action: http://jsfiddle.net/RJX5N/2/
I hope this answers your question.

Could you use jQuery, since it's cross-browser compatible?
function isOnScreen(element)
{
var curPos = element.offset();
var curTop = curPos.top;
var screenHeight = $(window).height();
return (curTop > screenHeight) ? false : true;
}
And then call the function using something like:
if(isOnScreen($('#myDivId'))) { /* Code here... */ };