I'm trying to write a script that will fix a DIV if the screen is a certain width. This is what I have so far, but the logic is not correct and I'm not sure how to write it.
var controller = new ScrollMagic();
var w = $(window).width();
if(w >= 500) {
var sidebar = new ScrollScene()
.triggerHook("0")
.setPin("#sidebar-pin")
.addTo(controller);
}
$(window).on('resize',function(){
if(w < 500) {
controller.removePin("#sidebar-pin",true);
} else {
var sidebar = new ScrollScene()
.triggerHook("0")
.setPin("#sidebar-pin")
.addTo(controller);
}
});
http://jsfiddle.net/gtowle/jxoewzoo/
The logic I'm aiming for is:
On page load, if the the window width is greater than 500, do A. If not, do nothing.
On window resize, if the window width becomes less than 500, do B, and if it becomes greater than 640, do A.
I think my problem is that I'm not sure how to trigger #2 once the window is resized.
The first problem is that you only calculated the window's width once (on page load).
It isn't updated, once you resized.
That's why the whole resize logic doesn't have any effect.
Another mistake you made was calling the removePin method on the controller.
It's a scene method.
Lastly your logic would create a new scene every time instead of updating the existing one.
So here's how you properly achieve your desired logic:
var controller = new ScrollMagic();
var sidebar = new ScrollScene({triggerHook: 0})
.addTo(controller);
// page load
if($(window).width() >= 500) {
sidebar.setPin("#sidebar-pin");
}
// resize
$(window).on('resize',function(){
var w = $(window).width();
if(w < 500) {
sidebar.removePin("#sidebar-pin",true);
} else if (w >= 640) {
sidebar.setPin("#sidebar-pin");
}
});
And here's your fiddle: http://jsfiddle.net/jxoewzoo/1/
hope this helps,
J
Instead use css mediaqueries for something like this.
The js code for onscroll:
var otherwise = true
if(w < 500) {
Do B;
otherwise = false;
}
if(w > 640) {
Do A;
otherwise = false;
}
If(otherwise) {
var sidebar = new ScrollScene()
.triggerHook("0")
.setPin("#sidebar-pin")
.addTo(controller);
}
Related
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 page I am working on has a tilt effect, which affects the orientation of the site body. I want to turn this off when the page reaches a mobile viewport; I have looked and tried a few thing but can't seem to get the effect I want. The code below is what i am using. This script runs separate from my main JS code.
window.addEventListener("mousemove",function(e) {
var width = window.innerWidth;
var height = window.innerHeight;
var clientHeight = document.body.clientHeight;
var skew = {};
skew.y = (20 * ((e.x / width) - 0.5));
skew.x = -(20 * ((e.y / height) - 0.5));
document.body.style.webkitTransform = "perspective("+clientHeight+"px) rotateX("+skew.x+"deg) rotateY("+skew.y+"deg)";
});
CSS changes won't remove themselves, so you'll have to remove the transform manually if the browser window is under your desired size.
Check on window resize,
window.addEventListener('resize', function() {
if (window.innerWidth < 568) {
document.body.style.webkitTransform = '';
}
});
And also make sure not to reapply it if the user moves their mouse.
// This is the function you already have
window.addEventListener('mousemove', function(e) {
if (window.innerWidth < 568) {
return;
}
...
}
My site is www.to-hawaii.com. The length of the right panel is controlled by the length of the middle panel. In other words the middle panel will adjust to the length of the right panel which is naturally shorter. In some cases though the right panel is longer, see here http://www.to-hawaii.com/bg/ and this creates a strange scroll on the right. Is there a way to fix that? In other words if there is a way to have the script work like this: if the middle panel is longer than the right panel, match the right's panel width so it is as long as the middle panel and if the right panel is longer, match the middle panel's width so it is the same length as the right panel.
The function I am currently using to make the right panel width match the middle panel width is:
$(document).on('ready',function(){
if($(window).width() > 768){
var heightLeft = $(".leftpanel").height();
var heightMiddle = $(".midpanel").height();
if(heightLeft >= heightMiddle){
$(".rightpanel").css("height",heightLeft - 10);
$(".midpanel").css("height",heightLeft - 10);
}else{
$(".rightpanel").css("height",heightMiddle +2);
}
}
$(window).resize(function(){
if($(window).width() >= 768){
$(".rightpanel").css("height", "auto");
$(".midpanel").css("height", "auto");
var heightLeft = $(".leftpanel").height();
var heightMiddle = $(".midpanel").height();
if(heightLeft >= heightMiddle){
$(".rightpanel").css("height",heightLeft - 10);
$(".midpanel").css("height",heightLeft - 10);
}if(heightLeft < heightMiddle){
$(".rightpanel").css("height",heightMiddle +2);
}
}
if($(window).width() < 561){
$(".rightpanel").css("height", "auto");
$(".midpanel").css("height", "auto");
}
})
})
you could try something like this:
$(document).on('ready',function(){
var rightHeight = $('.rightPanel').height();
var leftHeight = $('.leftPanel').height();
var midHeight = $('.midPanel').height();
if (rightHeight > midHeight) {
midHeight = rightHeight;
$('.midPanel').css('height', midHeight);
}
else if (midHeight > rightHeight) {
rightHeight = midHeight;
$('.rightPanel').css('height', rightHeight);
}
// If window is resized
window.addEventListener("resize", adjustPanes);
function adjustPanes(rightHeight, midHeight) {
if (rightHeight > midHeight) {
midHeight = rightHeight;
$('.midPanel').css('height', midHeight);
}
else if (midHeight > rightHeight) {
rightHeight = midHeight;
$('.rightPanel').css('height', rightHeight);
}
}
});
Alternatively, you could set all three panels to the height of the wrapper div that you have created.
This would make them each the same length.
$(document).on('ready',function(){
var wrapperHeight = $('#wrapper').height();
$('.midPanel').height(wrapperHeight);
$('.leftPanel').height(wrapperHeight);
$('.righttPanel').height(wrapperHeight);
});
I am fairly new to jQuery/javascript and I have a quick question, probably very simple but I can't seem to figure it out.
I want to change a variable value when the window width has changed. The reason I'm doing it with jQuery is that I can't alter the width or height via css.
This is my code:
<script type="text/javascript">
var jwheight = 390,
windowSize = $(window).width();
$(window).resize(function(){
if (windowSize < 992) {
jwheight = 39;
}
})
player.initialize(800, jwheight, "player", "http://www.website.com", "http://www.website.com/static/images/logo.png", true);
</script>
So I want to change the height (jwheight) when the window width is smaller than 992px.
All help would be appreciated, thank you.
your windowSize is outside the resize function, so it will always have the same value. You should use the width inside the function as follows:
<script type="text/javascript">
var jwheight = 390;
$(window).resize(function(){
if ($(window).width() < 992) {
jwheight = 39;
}
})
player.initialize(800, jwheight, "player", "http://www.website.com", "http://www.website.com/static/images/logo.png", true);
</script>
Check the $(window).width() value inside the resize event, and resize the player depending on the result.
You would want to calculate the height depending on the width, then compare that to the current height so that you don't call player.resize when there isn't actually a size change:
var jwheight = 390;
$(window).resize(function(){
var newHeight = $(window).width() < 992 ? 39 : 390;
if (newHeight != jwheight) {
jwheight = newHeight;
player.resize(800, jwheight);
}
})
player.initialize(800, jwheight, "player", "http://www.website.com", "http://www.website.com/static/images/logo.png", true);
I am wondering how I can use Javascript to get a windows size and then set (really clear) an HTML ID with it.
I am currently working on a site that has a "default" navigation ID of "access" which I want to blank out if the windows size is less than 800 px wide.
This is the page I am working on and if the ID is cleared I can then setup the mobile navigation to work with bootstrap.
`window.onload = function() {
var w = window.innerWidth;
if(w < 800) {
document.getElementById('access').removeAttribute('id');
}
}
window.onload = function() {
var w = window.innerWidth;
if(w < 800) {
document.getElementById('access').removeAttribute('id');
}
}
window.onresize = function() {
var w = window.innerWidth;
if(w < 800) {
document.getElementById('access').removeAttribute('id');
}
}
Use
var w = window.innerWidth;
to get the width of the page.
and then,
window.onload = function() {
if(w < 800) {
document.getElementById('access').removeAttribute('id');
}
}
You probably want to add this functionality in resize too.
EDIT: put the code in window.onload
Based on the comment,
window.onload = function() {
var accessElem = document.getElementById('access');
var updateAccess = function() {
var w = window.innerWidth;
if(w < 800) {
accessElem.removeAttribute('id');
}
else {
accessElem.setAttribute('id', 'access');
}
};
window.onresize = updateAccess; // call updateAccess on resize
updateAccess(); // call once on load to set it.
};
Also, in my opinion, adding/removing id is not a great idea.