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));
}
})
Related
I'm trying to create some sort of info "Scroll Down" button (not clickable) which has to be visible while scroll bar is up on top, fade out when scroll down a few pixels and fade back in when up again.
So far I was able to create the arrow and the message so far as well as the fading part.
Here is a fiddle: https://jsfiddle.net/8b3jL7r0/1/
var btn = $("#button");
$(window).scroll(function() {
if ($(window).scrollTop() < 100) {
btn.addClass("show");
} else {
btn.removeClass("show");
}
});
var btn2 = $("#scrolltxt");
$(window).scroll(function() {
if ($(window).scrollTop() < 100) {
btn2.addClass("showx");
} else {
btn2.removeClass("showx");
}
});
The problem with is that the arrow and the info text 'Scroll Down' does not appear right from the beginning, you have to scroll down a bit so they appear on top and then everything works smooth. Any clue how to make them visible right from the first load of the code?
Any idea how could I transfer all this code into one single code module in WordPress and have it work exactly like in the fiddle ? Because I've tried to insert it but it seems to not work at all, nothing appears on the page, not the arrow nor the info text.
I just added the inital classes to both elements:
https://jsfiddle.net/4e2cafju/
<div id="button" class="show"></div>
<div id="scrolltxt" class="showx">scroll down</div>
for 2:
You should be able to put these elements directly into a template. You should be able to add the css to the style sheet. And you could lnk to an external JS file. That would probably be best practice. You could also put all the code into a single page. I'm not sure how your wordpress install / theme is set up.
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
I am trying to get the height of my navigation and apply it to a margin-top so I can offset my banner. My navigation is fixed so I'm trying to compensate for that so my banner isn't hidden underneath.
// Offset Banner to Height of Navigation
function bannerOffset() {
var bannerTop = $('.x-navbar').height();
$('#banner-carousel').css('margin-top', bannerTop);
}
This, I thought would do it, but it doesn't reflect anything at all in the front-end.
UPDATE
$(document).ready(function() {
var bannerTop = $('.x-navbar').outerHeight();
$('.x-main').css('margin-top', bannerTop);
$(window).scroll(function() {
var bannerTopScroll = $('.x-navbar.scroll').outerHeight();
if ($(document).scrollTop() > 1) {
$('.x-main').css('margin-top', bannerTopScroll);
}
});
});
So I thought I had this, but on load, the margin-top of .x-main is 245px. When I scroll it becomes 85px. I can see the numbers go down to that. The issue is when I scroll back up to the top the value doesn't go back to 245px. It's not very consistent, but I often get 144px. I should add that, and this is probably why, I have another function that changes the height of my .x-navbar when .scroll is added to it.
$(window).scroll(function() {
if ($(document).scrollTop() > 1) {
$('.x-navbar').addClass('scroll');
} else {
$('.x-navbar').removeClass('scroll');
}
});
So I am not sure how to make this all smooth and working properly. If I reload the page the .x-mainis back to 245px. When I scroll back to the top it's not calculating properly.
Your code works. Maybe you want to use $.outerHeight() instead, your selectors are wrong, or you're experiencing margin collapsing.
It's worth noting that $.height() returns an integer value, so in your $.css() line, you should change bannerTop to bannerTop + 'px' so that the CSS has a unit and not just a number... but it looks like jQuery is doing that automagically for me here. You might try it and see.
var bannerTop = $('.x-navbar').height();
$('#banner-carousel').css('margin-top', bannerTop);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="x-navbar">x-navbar<br>x-navbar<br>x-navbar<br>x-navbar<br>x-navbar<br>x-navbar<br>x-navbar<br>x-navbar<br></div>
<div id="banner-carousel">banner carousel</div>
i'm working on a split scrolling site with two columns. And it's working great, but there is one problem i can't seem to solve. It's when i stop scrolling and the columns are positioned like this:
They need to automatically position themselves next to each other, so the user gets to see the full nicely aligned image. Now i've tried using Jquery Inview:
$('.content:nth-child(2)').one('inview', function (event, visible) { // i know the selector is wrong just for example purposes
if (visible == true) {
$('col.left').css( "top", "0" );
} else {
// element has gone out of viewport
}
});
But that doesn't seem to do the trick.. Using inview is probably the wrong way to go anyway. Now i have tried googling a solution but i can't seem to be able to find anything that does the trick. Does anyone know a plugin that does this for me? Or if someone can point me in the right direction that would be awesome.
JSFIDDLE
Thanks in advance
You could call a function to align the left and right after the user has completed scrolling. This example assumes the left and right columns are the same (as in your example).
...
$(window).scroll(function () {
$('.right').css('top', (top + $(window).scrollTop()) + 'px');
clearTimeout(t);
t = setTimeout(function(){scrollend();},200);
});
function scrollend(){
//console.log("scrollend");
clearTimeout(t);
$('.right').css('top', (0 - $(window).scrollTop()) + 'px');
}
...
E.G: http://jsfiddle.net/u9apC/4/
I'm making a website and have "borders" around my main content. I say "borders" because its not a CSS border, but div's with a background image.
Now I have my left and right div borders (#cont-border-left/right) height set explicitly to 675px, and I have another div (#extend-l/r) just under that which I want to expand down the page when the main content goes past 675px.
I'd like to to this using only CSS if possible, but if not JavaScript/JQuery would be a great solution for me as well.
I was going to paste a bunch of the code here, but it would probably just be easier to view the source, because I think it will make more sense if you can see it all together.
Saw this on a similar question... But I'm not great with jQuery or JavaScript.
$(document).ready(function()
{
if($('#leftColumn').height() > $('#rightColumn').height())
{
$('#rightColumn').height($('#leftColumn').height());
}
else
{
$('#leftColumn').height($('#rightColumn').height());
}
});
And turn it into something like:
$(document).ready(function()
{
if($('#content').height() > $('#cont-border-left').height())
{
$('#extend-l').height = $('#content' - 645px)
^The above line needs help / correcting
}
else
{
$('#extend-l').height = 0
}
});
Any ideas on what I should try out?
EDIT2: Still would like to know if someone has a pure CSS solution!
You might be interested in CSS3 border-images. See various:
css3.info: Border-image: using images for your border
css-tricks.com: Understanding border-image
border-image-generator
border-image
Figured it out. I was close with the edit I made.
Heres the work code should anyone need something similar in the future.
$(document).ready(function()
{
if($('#content').height() > $('#cont-border-left').height())
{
$('#extend-l').height($('#content').height()-675)
}
if($('#content').height() > $('#cont-border-right').height())
{
$('#extend-r').height($('#content').height()-675)
}
});