Not sure why the jquery .click is not triggering, please help.
HTML/js can be found here enter code herehttps://jsfiddle.net/o2gxgz9r/10192/
.click() does not work even when if statements are removed, I am aware that left does not work on start due to position = 1.
Two things need to be correct:-
1. this code:-
$('div.left-arrow').click(function() {
if (position > 1){
//your code here
}
});
It will never go forward because if condition will return false (as you already defined position =1).
So either change this condition to position >= 1 or make position =2; //or more
2. Your both left-arrow and right-arrow div's have no content. so physically they don't occupy any area on browser, and clicking to them is not possible.
So Add some icon/content or add some CSS height/width so that physically click will be possible.
Solution for your problem:-
Add z-index: 99; like below:-
.left-arrow{
left:0;
bottom:0;
z-index: 99;
}
.right-arrow{
right:0;
bottom:0;
z-index: 99;
}
And don't forget to change condition position >1 to position >= 1
Working example:- https://jsfiddle.net/4ywa7a5x/
Your jquery.click is triggering in right way. You have applied condition that if "position> 1" only then it will trigger and you have initialized "position =1" that is why it is not triggering, once you set "position> 1" it will trigger.
define function as below and give the proper css to div by that it ll acquire proper space in browser.
$('.left-arrow').click(function() { });
I found your code have this line.
var position = 1;
And inside your click function
$('div.left-arrow').click(function() {
if (position > 1){
//your code here
}
});
This will never work because your position is 1. So made it 2 for work or
$('div.left-arrow').click(function() {
if (position >= 1){
//your code here
}
});
However, I click into both of your div section with your code position -= 1; it still works file
Hope this help
Related
I'm using js to move my background photo from left to right and to move the header text right to left and down while scrolling. However, I'd like to stop the script once I'm past the header section.
<script type="text/javascript">
$(window).scroll(function(){
$('#header').css("background-position",parseInt($(this).scrollTop()*-0.65));
$('#header').css("padding-bottom",parseInt($(this).scrollTop()*.8));
$('#headtext').css("padding-top",parseInt($(this).scrollTop()*1));
$('#headtext').css("padding-right",parseInt($(this).scrollTop()*.5));
$('#headtext').css("padding-left",parseInt($(this).scrollTop()*-.5));
if (parseInt($(this).scrollTop() > 10000) {
return;
}
})
</script>
I've been trying to add if or while statements to the above but every time I do, the js stops working. I have little knowledge of jquery so I'm not sure if the syntax is incorrect or if I need to approach this differently.
Thank you!
jQuery(document).scroll(function(){
if(jQuery(window).scrollTop()>jQuery('#foobar').position().top){
/* something */
console.log('stopped');
} else {
/* something else */
console.log('resumed');
}
});
Where #foobar equals the element that will be used as a trigger, for the above code snippet, when it reaches the top of the screen.
You can use the offset() function from jQuery to calculate if the header is still in view. Something like this:
if(($('#header').offset().top + $('#header').height()) < $(window).scrollTop()) {
// Do something
}
Keep in mind that this snippet is seriously unoptimized code, so take the necessary steps to make it better.
You are missing a parentheses in your if statement. If you move it to the top of that block and flip your > to a < it will stop running the script once it gets to the 10000 or whatever you set as your header. here is your code updated
$(window).scroll(function(){
if (parseInt($(this).scrollTop()) < 10000) {
$('#header').css("background-position",parseInt($(this).scrollTop()*-0.65));
$('#header').css("padding-bottom",parseInt($(this).scrollTop()*.8));
$('#headtext').css("padding-top",parseInt($(this).scrollTop()*1));
$('#headtext').css("padding-right",parseInt($(this).scrollTop()*.5));
$('#headtext').css("padding-left",parseInt($(this).scrollTop()*-.5));
}
})
Usually I don't ask questions...I'm looking for a solution until I give up,
and this is the case here.
There are many similar questions to my but after a thorough search I found nothing.
So the question is:
After selecting a checkbox the div at the bottom of the page
shuold be sticky untill the user scrolling down to the original place where it was.
I have a great example from kickstarter web site :
If only I could know how they do it :)
If I was not clear enough I'd love to explain myself better.
Thanks in advance
After clicking on checkbox,
You can add these CSS lines to div
position:fixed;
bottom:0;
you want to add position: fixed and attach it to the bottom of the container when checked
html
<div class="wrapper">
<input type="checkbox" id="check"/>
<div id="foot"></div>
</div>
js
var check = document.getElementById('check');
var foot = document.getElementById('foot');
check.addEventListener('change', function () {
if (check.checked) {
foot.style.position = 'fixed';
foot.style.bottom = 0;
}
});
fiddle - http://jsfiddle.net/qak2ept6/
EDIT - http://jsfiddle.net/qak2ept6/1/ restore when unchecked
EDIT EDIT - http://jsfiddle.net/qak2ept6/3/ attach on scroll
when you check the check box. create div with position fixed and store the offset of the bottom edge of the window that would be normally your window height. Assign scroll event and keep checking if the scroll value is equal to the offset you have stored and when it reached just remove the fixed position from the div.
My guess (and if I was doing it) It'll be done by monitoring scroll position and applying a css style or not accordingly.
Something like
Inject it in invisible state in to the document
Note it's position (y coord)
Apply class to make it stick to the bottom of the window and show
On scroll, as soon as you get near the expected yCoord, remove the class and let it assume it's rightful place in the document
On further scroll (when you scroll away), re-apply class until you scroll back
HTH
If i have understood your question, I guess what you want is here
function sticky_relocate() {
var window_top = $(window).scrollTop();
var div_top = $('#sticky-anchor').offset().top
if (window_top > div_top) {
$('#sticky').addClass('stick');
} else {
$('#sticky').removeClass('stick');
}
}
$(function () {
$(window).scroll(sticky_relocate);
sticky_relocate();
});
If not, please explain us with more code and what exactly you need
$(document).scroll(function(e){
var eTop = $(this).scrollTop()
$('.popup').each(function(i){
log(eTop);
if($(this).offset().top - topLimit <= eTop){
$(this).fadeIn();
}
});
});
I got this Fiddle, where i want to use fadeIn() on elements, when they are 100 pixels from the top of the screen. I give JavaScript 3 values to use in comparison, to know when that should happen, but I doesn't work... I measured the values myself via a log-function I used, and it should work, but it just doesn't... I was hoping anyone maybe could see an error I cant... Thanks
The problem is that the image is hidden, so offsetTop doesn't work.
Removing
.popup{
display:none;
}
fixes it.
Demo
It can't work because:
var eTop = $(this).scrollTop()
and
$(this).offset().top
is the same value and your IF condition is never met.
The problem is that your image is hidden, so offsetTop won't work as #Oriol point out. but you can get around with that by measuring the text height, because the image is just after the text. working version is this: http://jsfiddle.net/D6tE2/6/
$(document).scroll(function(e){
var eTop = $(this).scrollTop()
$('.popup').each(function(i){
if($('p').height() < eTop){
$(this).fadeIn();
}
});
});
Another solution
There's really two problems at play here:
1: display: none takes your object out of the correct DOM position, so when your img is hidden, the calculation on its page offset is always the same as scrollTop (i.e., at 0,0 relative to the document root).
2: Even if you compensate for this by using something like opacity: 0 - which places it in the correct place in the DOM, fadeIn expects display: none to be set, so we have to manually hide() the entry and reset it's opacity, then fadeIn.
You could just animate it setting the opacity to 0 to start with. To have the same effect as display none, you can set the position to absolute at first. I also added a check for the show class so the code does not run again when it is already shown
http://jsfiddle.net/D6tE2/14/
$(document).scroll(function(e){
var eTop = $(this).scrollTop()
$('.popup').each(function(i){
log(eTop);
if(!$(this).hasClass('show') && $(this).offset().top < eTop){
$(this).addClass('show').animate({'opacity' : '1'}, 500);
}
});
});
CSS
.popup{
opacity: 0;
position: absolute;
}
.show {
position: static;
}
I have a sticky nav I'm working on, I was able to gather some code from some other posts, however I'm running into one issue, the nav area I'm hiding after scroll won't show back up when scrolling to the top of the page. I attempted to write an else if statement, but no luck, thanks.
$(window).scroll(function(){
if($("#navheader").offset().top <= $(window).scrollTop)
$("#navheader").css({"display":"block","top":"0px", "left":"0px"});
else
$("#navheader").css({"display":"none"});
});
This might be easier
Looks like the issue was that you need a () after scrollTop on window.
var n = $("#navheader");//get nav
var nh = n.offset().top;//get nav offset
var go = true;//toggle execute so it doesn't fire on every match
$(window).scroll(function(){
var wh = $(this).scrollTop();//window scroll
if(wh <= nh && !go) {//show
n.show();
go = true;
} else if (wh > nh && go) {//hide
n.hide();
go = false;
}
});
made a fiddle: http://jsfiddle.net/filever10/cxJ6a/
edit: added a go toggle to stop fire on every match of the if/then. this way it fires once each way.
If you console.log:
console.log($("#navheader").offset().top)
On the scroll event, you will see that once the IF statement becomes true it will return always 0. Since the element is fixed and it has top: 0 it will always have 0.
The solution you ask?
Make the offest global variable and check it.
var navOff = $("#navheader").offset().top;
$(window).scroll(function(){
if(navOff <= $(window).scrollTop())
$("#navheader").css({"display":"block","top":"0px", "left":"0px"});
else
$("#navheader").css({"display":"none"});
});
But since your $("#navheader") is probably set to display: none and it will probably return 0 even this way...
So you have a few options.
Make some holder of the navigation and target it's offest.
Hard code the value.
Make it visibility: hidden; instead of display: none; (that way you can target the offest)
I need to receive the elements left and top property in the middle of the CSS transition. Currently I use jQuery position method and it seem to be working to some point.
I have made 2 examples to show my problem more clearly:
1) Here is NON-working example where position of element is printed to console. The correct position is received till the elements transition is changed to its original position. After the first change in transform value, the position is not updated anymore. jsFiddle link: http://jsfiddle.net/PCWDa/8/
2) Here is WORKING example with only difference in the way position of the element is reported to us: position is outed to input (type=text) elements value. jsFiddle link: http://jsfiddle.net/PCWDa/9/
Conclusion: the jQuerys position() method appears not to receive the correct position when dom elements properties does not receive any updates (like updating value of text element etc).
Bug? This could be bug in jQuery, css or browser itself? Are there any workarounds to get first example working - to get correct position in the middle of transition at any time without making changes to dom element properties like in second example.
jsFiddle code:
To get example 1 code, change variable working to false and to get example 2 , to true.
css
.box{
width: 100px;
height: 100px;
background-color: red;
position: relative;
-webkit-transition: all 5000ms ease;
}
.box_moved{
-webkit-transform: translateX(300px);
}
html
<div class="box"></div>
<input type="text" class="val">
javascript
var direction = false;
var working = false;
window.forward = function(){$('.box').addClass('box_moved')}
window.backward = function(){$('.box').removeClass('box_moved')}
window.swap = function(){
if( direction = !direction )
forward()
else
backward();
}
window.getlocation = function(){
if(working)
$('.val').val( $('.box').position().left );
else
console.log($('.box').position().left);
}
window.setInterval("swap()",3000);
window.setInterval("getlocation()",200);