I have 2 variables name first and last. When window size is less than 768px, i want first = 1 and last = 5. And when window size is greater than 768px, first = 1 and last = 3. Here is my code.
var first = 1;
var last = 5;
window.onresize = function(){
var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.getElementsByTagName('body')[0].clientWidth;
if (w <= 768){
first = 1;
last = 3;
}
if (w > 768){
first = 1;
last = 5;
}
}
It's worked. But when window size is 600px (less than 768px), i press F5 (refresh), first variable = 1 and last = 5 (these values are changed). I want when i press F5, if window less than 768px, its still 1 and 3. What can i do now? Help me. Thanks.
This is how it should be.
So now, we have one Function that set variables as per width of the Window.
We will call it two Times
When the page is loaded, you should Set Variables (First,Last) as per Size of window
When the page is Resized, you should Set Variables again.
var first = 1;
var last = 5;
function setVariables()
{
var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.getElementsByTagName('body')[0].clientWidth;
if (w <= 768){
first = 1;
last = 3;
}
if (w > 768){
first = 1;
last = 5;
}
}
window.onresize = function(){
setVariables();
}
setVariables();
Just move your function into a separate function and reuse it on page loading:
function checkWidth(){
var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.getElementsByTagName('body')[0].clientWidth;
if (w <= 768){
first = 1;
last = 3;
}
if (w > 768){
first = 1;
last = 5;
}
}
...
var first = 1;
var last = 5;
window.onresize = checkWidth;
window.onload = checkWidth;
Related
Hey guys my brain is afk right now so I am asking yall:
I am trying to make a reveal animation everytime the element is visible. At the moment this only works when you scroll down and make the element visible from the top. I want to extend this also for scrolling up and making the element visible from the bottom.
Can anyone please explain what I need to change in order to accomplish that?
JAVASCRIPT:
function reveal() {
var reveals = document.querySelectorAll(".reveal");
for (var i = 0; i < reveals.length; i++) {
var windowHeight = window.innerHeight;
var elementTop = reveals[i].getBoundingClientRect().top;
var elementVisible = 100;
var elementHidden = ;
if (elementTop < windowHeight - elementVisible) {
reveals[i].classList.add("active");
}
else {
reveals[i].classList.remove("active");
}
}
}
window.addEventListener("scroll", reveal);
reveal();
CSS:
.reveal{
transform: translateY(SOMEVALUEpx);
opacity: 0;
}
.reveal.active{
transform: translateY(0);
opacity: 1;
}
Add another check in your if statement to see if the element bottom has reached height 0 plus the elementVisible value.
function reveal() {
var reveals = document.querySelectorAll(".reveal");
var windowHeight = window.innerHeight;
var elementVisible = 100;
for (var i = 0; i < reveals.length; i++) {
var elementTop = reveals[i].getBoundingClientRect().top;
var elementBottom = reveals[i].getBoundingClientRect().bottom;
if (elementTop < windowHeight - elementVisible || elementBottom > 0 + elementVisible) {
reveals[i].classList.add("active");
} else {
reveals[i].classList.remove("active");
}
}
}
window.addEventListener("scroll", reveal);
reveal();
I also defined windowHeight and elementVisible outside the loop, as they don't need to be redefined for each iteration of the loop. All this happens in one single scroll.
I adapted this code to create a large div which scrolls horizontally inside a smaller div, depending on the position of the mouse.
You can see my example here.. http://thetally.efinancialnews.com/tallyassets/20years/index.html
What I am trying to achieve is for the inner (yellow) div to stop at a maximum of left:0px, in other words the far left of the yellow div will become stuck to the far left of the outer div if you go that far.
I tried to implement this with an 'if else' statement, however as this piece of code gets run every 30th of a second it creates a strange result, which I can't find a solution for. I'm sure its very simple but its stumped me
You can see my code here...
var x=0,
rate=0,
maxspeed=10;
var backdrop = $('.container');
var years = $('.events');
$('.direction', backdrop).mousemove(function(e){
var $this = $(this);
var left = $this.is('.left');
if (left){
var w = $this.width();
rate = (w - e.pageX - $(this).offset().left + 1)/w;
} else {
var w = $this.width();
rate = -(e.pageX - $(this).offset().left + 1)/w;
}
});
backdrop.hover(function(){
var scroller = setInterval( moveBackdrop, 30 );
$(this).data('scroller', scroller);
},
function(){
var scroller = $(this).data('scroller');
clearInterval( scroller );
});
function moveBackdrop(){
if ( parseInt(years.css("left"), 10) <= 0 ) {
x += maxspeed * rate;
var newpos = x+'px';
years.css('left',newpos);
} else {
years.css('left','0');
}
}
The code in question is right here at the end^
Is this what you were trying to do?
function moveBackdrop(){
if ( parseInt(years.css("left"), 10) <= 0 && rate < 0 ) {
// Means that the element is already at left: 0 or less,
// and we are trying to move it even more left with rate being negative.
// So keep the element at left: 0
years.css('left','0');
} else {
x += maxspeed * rate;
var newpos = x+'px';
years.css('left',newpos);
}
}
Extra note for future: parseInt uses base 10 by default :) so parseInt("20px") will equal 20
Final Edit: Ah there is an even better way to do it.
function moveBackdrop(){
x += maxspeed * rate;
if( x < 0 ) x = 0; // If left less than 0, fix it at 0
var newpos = x+'px';
years.css('left',newpos);
}
I was trying to create a auto slide for the slider using setInterval. It works like a charm when there's only one slider.
When there are 2 slider, the first slider wont work, and the second slider will slide faster, because there will be 2 setInterval and both are sliding the second slider. Anyway to make sure each setInterval slide their own slider?
var autoSlideTimer = 5;
var autoslide = setInterval(function () {
if (autoSlideTimer == 0) {
var slideMargin = offsetMarginLeft - width;
if (-slideMargin == (width * totalImages)) {
offsetMarginLeft = width;
displayImage = 0;
}
slider.style.marginLeft = (offsetMarginLeft - width) + 'px';
displayImage += 1;
pagination = element.getElementsByTagName('ul')[0];
pagination.innerHTML = paginate;
pagination.getElementsByTagName('li')[displayImage - 1].setAttribute("class", "displayed");
slider = element.getElementsByTagName('div')[0];
offsetMarginLeft = parseInt(slider.style.marginLeft.replace('px', ''));
autoSlideTimer = 5;
} else {
autoSlideTimer--;
}
}, 1000);
thanks
I work it out with another way, although is working but doesnt seems to be the perfect way
var event = new Event('build');
// Listen for the event.
element.addEventListener('build', function (e) {
function timeoutLoop()
{
setTimeout(function(){
if(autoSlideTimer == 0)
{
var slideMargin = offsetMarginLeft - width;
if(-slideMargin == (width * totalImages))
{
offsetMarginLeft = width;
displayImage = 0;
}
slider.style.marginLeft = (offsetMarginLeft - width) + 'px';
displayImage += 1;
pagination = element.getElementsByTagName('ul')[0];
pagination.innerHTML = paginate;
pagination.getElementsByTagName('li')[displayImage - 1].setAttribute("class", "displayed");
offsetMarginLeft = parseInt(slider.style.marginLeft.replace('px', ''));
autoSlideTimer = 5;
}else
{
autoSlideTimer--;
}
timeoutLoop();
},1000);
}
timeoutLoop();
}, false);
// Dispatch the event.
element.dispatchEvent(event);
At first, I used setInterval inside, yet the slider will be overwritten. But setTimeout is ok.
I tried to google this but couldn't find a solution. So the problem is I'm trying to execute something once if user window width is changed to specific width+-, however; the variable is undefined inside the function for some reason.
Here's the code:
jQuery(document).ready(function ($) {
var windowWidth = $(window).width();
var n = 1;
if(windowWidth >= 900) {
var tc = 3;
$(".debug").html(tc); // Making sure if user window width is 900 or more and tc is 3 on page load.
} else if (windowWidth <= 900) {
var tc = 2;
$(".debug").html(tc); // Making sure if user window width is 900 or less and tc is 2 on page load.
}
function liveWidthChange(){
var windowWidth = $(window).width();
$(".debug2").html("<b>current width:</b> " + windowWidth + " - <b>tc:</b> " + tc);
if (tc == 3 && windowWidth <= 900) {
// Shows how many times executed if activly changing browser width and the current value of tc
$(".debug").html("tc Value: " + tc);
var tc = 2;
}
}
// If the browser changes size
var RS = false;
$(window).resize(function() {
if (RS !== false) clearTimeout(RS);
RS = setTimeout(liveWidthChange, 200);
});
});
So if user has window width of 900 or more, it sets tc variable to 3, if user is resizing browser and it goes under 900, execute something.
Thanks in advance.
You need to declare tc in a place where all the functions will have access to it:
var windowWidth = $(window).width();
var n = 1;
var tc; // here, at the top.
Then you just need to remove the var in each location you set the value of tc.
I see several things.
You always redeclare the variable tc, instead you should move it on top
$(document).ready(function ($) {
var originalWidth = $(window).width();
var n = 1;
var tc = 2;
var MAX_WIDTH = 900;
[...]
You will be confused by naming two different variable with the same name:
In the ready block:
var originalWidth = $(window).width();
In the function:
var currentWidth = $(window).width();
You are using the operator '==' in order to compare integers, you should use '===' instead unless you know what you are doing.
x = "5"
>>> x == 5
true
>>> x === 5
false
In your condition you have
if(windowWidth >= 900) {} else if (windowWidth <= 900) {}
What if the windowWidth = 900, it will always go inside the first condition...
I beleive that you may want to use '<' or '>'
This text area is an auto expanding text area that stops expanding when it is the height of 4 lines.
mac problem http://dl.dropbox.com/u/8196173/mac_problem.PNG windows version http://dl.dropbox.com/u/8196173/windows_version.PNG
So the one on the left is how the text box is getting displayed on mac with Google chrome and the one on the right is how it is getting displayed on windows. The windows version is the correct one. For some reason chrome on mac does not add the same amount of height to the text area each time it expands which means that it ends up smaller and hence the extra space at the bottom. But for the life of me I don't know why it would behave like this just because its on a different OS.
I can include code if people really want it but its almost a hundred lines (there are other things being moved on the page when this expands) and I honestly don't see how it could be the code since it works on windows and only exhibits the odd behavior on osX.
Edit: this is happening inside of a chrome extension in case that makes a difference.
var temp = 0;
//function that actually handles the resizing
function resize() {
temp = text.style.height;
text.style.height = 18;
text.style.height = text.scrollHeight + 'px';
var styledef = window.getComputedStyle(text);
pixelMargin = parseInt(styledef.marginTop, 10);
num = parseInt(container.style.height, 10);
re_num = parseInt(reply_container.style.marginTop, 10);
var temp_num = parseInt(temp, 10);
text_height = parseInt(text.style.height, 10);
if(temp_num == 0) { //if nothing has been done in the text area do this
temp = text.style.height;
} else if(text_height == 18) { //else if the text area is only one line do this
text.style.marginTop = '3';
reply_container.style.marginTop = '0px';
container.style.height = '364px';
container.scrollTop = container.scrollHeight;
} else if(temp_num < text_height) { //else the box is getting bigger
if(text_height <= 66 ) {
pixelMargin -= 15;
num -= 16;
re_num += 16;
conversation_scroll_pos += 16;
text.style.marginTop = pixelMargin.toString() + 'px';
container.style.height = num.toString() + 'px';
reply_container.style.marginTop = re_num.toString() + 'px';
container.scrollTop = container.scrollHeight;
temp = text.style.height;
} else if(text_height >= 66 && temp_num > 20) { //case where the box has reached its max height and the user is still typing
temp = text.style.height;
} else if(text_height > 66 && pixelMargin == 3) { //edge case to handle cuting and pasting into the box
text.style.marginTop = '-42px';
reply_container.style.marginTop = '48px';
container.style.height = '316px';
container.scrollTop = container.scrollHeight;
temp = text.style.height;
}
} else if(temp_num > text_height) { //else the box is getting smaller
if(pixelMargin < 3 && pixelMargin >= -45 && text_height < 66) {
pixelMargin += 15;
num += 16;
re_num -= 16;
text.style.marginTop = pixelMargin.toString() + 'px';
container.style.height = num.toString() + 'px';
reply_container.style.marginTop = re_num.toString() + 'px';
temp = text.style.height;
}
}
}