calling functions and click animations - javascript

I have one rectangle, 2 functions that animates different this rectangle at different window widths, and im calling the functions with a click. it Must work when screen resizes as well.
Problems:
1- it seems like when I load one function then the other cant work, only the first.
2- It doesn't work on the first click.
3- I have to write the same code for when the document is ready and when the document resize.
How can I fix this 3 points. thx. code below.
$(document).ready(function () {
function lateralMove() {
$(".rectangle-1").off("click").click(function () {
$(this).animate({
left: "+=50"
}, 500);
})
}
function horizontalMove() {
$(".rectangle-1").off("click").click(function () {
$(this).animate({
top: "+=50"
}, 500);
})
}
$(window).resize(function () {
screenWidth = $(this).width()
})
$(".rectangle-1").click(function () {
if (screenWidth > 300) {
lateralMove()
} else if (screenWidth <= 300) {
horizontalMove()
}
})
screenWidth = $(window).width()
if (screenWidth > 300) {
blackMove()
} else if (screenWidth <= 300) {
horizontalMove()
}
})
.rectangle-1 {
position: relative;
background-color: #000;
height: 100px;
width: 100px;
margin-top: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!doctype html>
<html>
<head></head>
<body>
<div>
<div class="rectangle-1"></div>
</div>
</body>
</html>

just cal a different function depending n a screen width:
function do_mobile(){
//do
}
function do_desktop(){
//do
}
$(".rectangle-1").on("click", function(){
if( $(window).width() > 300 ){
do_desktop();
}
else{
do_mobile();
}
})

This was just a matter of cleaning up your code (you had a function call to a function called blackMove() that was undefined) and you also needed to wrap the "assign movement" portion of your code in a function and call it on document ready and on window resize.
Here's the code pen:
http://codepen.io/nhmaggiej/full/azXgqw/
$(document).ready(function () {
function verticalMove() {
$(".rectangle-1").off("click").click(function () {
$(this).animate({
left: "+=50"
}, 500);
})
}
function horizontalMove() {
$(".rectangle-1").off("click").click(function () {
$(this).animate({
top: "+=50"
}, 500);
})
}
function assignMovement() {
screenWidth = $(this).width()
if (screenWidth > 600) {
verticalMove()
} else if (screenWidth <= 600) {
horizontalMove()
}
};
$(window).resize(function () {
assignMovement();
})
assignMovement();
});

This will move the square onload, onresize and when the square is clicked.
jsFiddle
function lateralMove(elementX) {
elementX.animate({
left: "+=50"
}, 500);
}
function horizontalMove(elementX) {
elementX.animate({
top: "+=50"
}, 500);
}
function elementMove() {
screenWidth = $(window).width();
elementX = $(".rectangle-1");
if (screenWidth > 300) {
lateralMove(elementX);
} else if (screenWidth <= 300) {
horizontalMove(elementX);
}
}
//move on resize
//Use a Timeout to ensure that the resize event is only fired once per change.
$(window).resize(function () {
clearTimeout(this.id);
this.id = setTimeout(elementMove, 500);
});
//move on click
$(".rectangle-1").click(function () {
elementMove();
})
//move on load
elementMove();

Related

scrollIntoView is not a function JS

My script should scroll down to an element 2 seconds after the page is loaded. It should work only on mobiles.
window.HTMLElement.prototype.scrollIntoView = function() {};
if (window.innerWidth < 500) {
setTimeout(function() {
let toogleElement = document.getElementsByClassName('eapps-google-maps-bar-toggle');
toogleElement.scrollIntoView({
behavior: 'smooth'
});
}, 2000);
}
#padding { height: 1000px; }
<div id="padding"></div>
<div class="eapps-google-maps-bar-toggle" eapps-link="barToggle">Foo</div>
First, you need to remove window.HTMLElement.prototype.scrollIntoView = function() {}; because you don't need to define your own funciton.
Second, document.getElementsByClassName return HTML collection and you can access the element your want by using toogleElement[0].
Example below
if (window.innerWidth < 2000) {
setTimeout(function() {
let toogleElement = document.getElementsByClassName('eapps-google-maps-bar-toggle');
toogleElement[0].scrollIntoView({
behavior: 'smooth'
});
}, 2000);
}
#padding { height: 1000px; }
<div id="padding"></div>
<div class="eapps-google-maps-bar-toggle" eapps-link="barToggle">Foo</div>

ScroolToTop show and hide based on user's scroll

How can show and hide a dive of scrolltotop.
Condition:
1. when user scrool down to 80 px it will be shown
2.if user clicks on it it it will take user to the top.
3. if a user stay 2 or more seconds in a certain position(it may maby 200px or more or less), the scroolbar also hidden. If he scroll up or down, the scroolbar visible then.
$(document).ready(function () {
$("#scrollup").hide('slow')
$(window).scroll(function (e) {
e.preventDefault();
if ($(window).scrollTop() > 80) {
$("#scrollup").show('slow');
}
if ($(window).scrollTop() < 80) {
$("#scrollup").hide('slow');
}
});
$(".scrollup").click(function () {
$("html, body").animate({ scrollTop: 0 }, 500);
return false;
});
});
i have done 1 and 2 condition , but how can i implement no 3?
Add setInterval(function(){ $("#scrollup").hide('slow'); }, 2000); and clear it on scroll
var idleInterval=null;
$(document).ready(function () {
$("#scrollup").hide('slow');
$(window).scroll(function (e) {
if(idleInterval != null)
clearTimeout(idleInterval);
idleInterval = setInterval(function(){ $("#scrollup").hide('slow'); }, 2000);
idleTime = 0;
e.preventDefault();
if ($(window).scrollTop() > 80) {
$("#scrollup").show('slow');
}
if ($(window).scrollTop() < 80) {
$("#scrollup").hide('slow');
}
});
$(".scrollup").click(function () {
$("html, body").animate({ scrollTop: 0 }, 500);
return false;
});
});
Demo:-
var idleInterval=null;
$(document).ready(function () {
$("#scrollup").hide('slow');
$(window).scroll(function (e) {
if(idleInterval != null)
clearTimeout(idleInterval);
idleInterval = setInterval(function(){ $("#scrollup").hide('slow'); }, 2000);
idleTime = 0;
e.preventDefault();
if ($(window).scrollTop() > 80) {
$("#scrollup").show('slow');
}
if ($(window).scrollTop() < 80) {
$("#scrollup").hide('slow');
}
});
$(".scrollup").click(function () {
$("html, body").animate({ scrollTop: 0 }, 500);
return false;
});
});
#pagewrap{
height:1000px;
}
#scrollup {
position: fixed;
color: white;
padding: 10px 30px;
background: red;
bottom: 30px;
right: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pagewrap">
<h1>Demo</h1>
<h2>Animated Scroll to Top</h2>
<div id="scrollup">
scroll to top
</div>
</div>

jQuery scrollTop only working while scrolling with mouse

I have a navigationbar that decreases in size when I scroll down on the page and then it takes its normal size when scroll is at the top. It all works fine when scrolling with the mousescrollwheel, but when I manually click and drag the scrollbar on the page its as if it doesnt recognise the scrollTop value. It takes approx 5 seconds or so for it to realise that its on the top and then applies the style, whereas with the mousescrollwheel it works flawlessly.
$(window).scroll(function () {
var scrollPosition = $(document).scrollTop();
if (scrollPosition > "1") {
$("#topNav").animate({
height: "30px"
}, 90, function () {
});
$("#topNav li").animate({
padding: "5px 0 0 0"
}, 90, function () {
});
} else if (scrollPosition <= "1") {
$("#topNav").animate({
height: "50px"
}, 90, function () {
});
$("#topNav li").animate({
padding: "15px 0 0 0"
}, 90, function () {
});
}
});
What am I missing?
Please try this code:
$(window).on('scroll mousedown mouseup mousemove',function(){
var scrollPosition = $(document).scrollTop();
if (scrollPosition > "1") {
$("#topNav").animate({
height: "30px"
}, 90, function () {
});
$("#topNav li").animate({
padding: "5px 0 0 0"
}, 90, function () {
});
} else if (scrollPosition <= "1") {
$("#topNav").animate({
height: "50px"
}, 90, function () {
});
$("#topNav li").animate({
padding: "15px 0 0 0"
}, 90, function () {
});
}
})
From what i can see, scroll function is called whenever your mouse is over the scroll bar, even without click/drag event. It might be this is causing you the trouble.
Fiddle here
$(window).scroll(function () {
var scrollPosition = $(document).scrollTop();
if (scrollPosition > "1") {
alert('a');
} else if (scrollPosition <= "1") {
alert('a');
}
});
I gave up and decided to go with CSS classes instead, using transitions and it worked wonders. Now what the scroll does is just add and remove class to the li elements and nav. Thansk for all the answers!

resize and calling function

I have this function that when you click on the html it checks the width of a number of elements and compares it with the windows width. I can't get it to work with the resize function. I think I'm calling it wrong.
$(document).ready(function() {
$(window).resize(function() {
var conditionWidth = checkWidth()
});
function checkWidth() {
var elementWidth = 1;
$("div>div").each(function() {
if ($(this).width() > $("html").width() / 2) {
elementWidth = 2;
}
});
return elementWidth;
}
var conditionWidth = checkWidth()
$("body").off("click").click(function() {
alert(conditionWidth);
});
})
div div {
position: relative;
height: 100px;
width: 100px;
margin-top: 20px;
}
.rectangle1 {
background-color: black;
width: 100px;
}
.rectangle2 {
background-color: red;
width: 200px;
}
.rectangle3 {
background-color: black;
width: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
<div class="rectangle1"></div>
<div class="rectangle2"></div>
<div class="rectangle3"></div>
</div>
Since you are using var to declare the variable in the resize handler the the variable is local to the resize handler method and the value of the closure scope(dom ready handler) is not updated.
$(document).ready(function () {
var conditionWidth = checkWidth()
$(window).resize(function () {
//when you use var it becomes a local variable
conditionWidth = checkWidth()
});
function checkWidth() {
var elementWidth = 1;
$("div>div").each(function () {
if ($(this).width() > $("html").width() / 2) {
elementWidth = 2;
}
});
return elementWidth;
}
$("body").off("click").click(function () {
alert(conditionWidth);
});
})

Minus a few pixels from jQuery height()

Ok, amateur question here but im really bumping my head.
Using the jQuery below, i would like to add margin-top:-100px; to the height value.
Please help! Thanks :)
$(function () {
function HomePageSize() {
$('#home').css({
width: $(window).width(),
height: $(window).height()
});
}
$(window).resize(function () {
HomePageSize();
});
HomePageSize();
});
You can just add the css.
$('#home').css('margin-top','-100px');
Here code:
$(function () {
function HomePageSize() {
$('#home').css({
width: $(window).width(),
height: $(window).height()
});
}
$(window).resize(function () {
HomePageSize();
});
addMargin();
function addMargin() {
$('#home').css({'margin-top':'-100px'});
}
});
If I understand correctly this should do it:
$(function () {
function HomePageSize() {
var winHeight = $(window).height(); // store height in variable
var myMargin = winHeight - 100; // deduct 100 from height
$('#home').css({
width: $(window).width(),
height: winHeight,
marginTop: myMargin // assign calculated value to margin-top
});
}
$(window).resize(function () {
HomePageSize();
});
HomePageSize();
});
If you already have margin-top of -100px assigned to some element like #home, then You can try this
$(function () {
function HomePageSize() {
$('#home').css({
width: $(window).width(),
height: $(window).height() + parseInt($("#home").css("margin-top"))
});
}
$(window).resize(function () {
HomePageSize();
});
HomePageSize();
});

Categories

Resources