I am trying to scroll to top everytime the slide is loaded. So that I can start from top to scroll the slide.
I tried this:
onSliderLoad: function (el) {
el.window.slider.scrollTo(0,0);
}
but it didn't scroll the slider to its top when the new slide is loaded.
How can I make the slider to go to top ?
Related
I am using Shopisle theme. I have displayed product category drop-down filter widget on the left side of shop page. But on the smaller screens, it automatically shifts at the bottom of the page. How can it be displayed on the top in smaller screens?
It can be done with some javascript on the window resize event. The sidebar is really on the right side in the HTML markup (Or more specifically, it's below). It appears on the left because css has the main section floating right.
On resize, css removed the float at width 767px. So the side bar falls to the bottom.
With jQuery's insertBefore (http://api.jquery.com/insertbefore/) as well as insertAfter, the html markup can be switched.
NB: this example moves the entire sidebar. It can be modified a bit to move just a single widget if that's necessary. This indicates the general process.
**By the way, this script should be placed in a .js file for the child-theme. If a .js file is not already in place, then try adding it to the footer template file (preferably in child theme) within <script>...</script> tags.
var sidebar_at_top = false;
function formatdisplay(){
if(jQuery( window ).width() < 768){
if(!sidebar_at_top){
console.log('moving sidebar to before main area');
jQuery('.sidebar-shop').insertBefore(jQuery('.shop-with-sidebar'));
sidebar_at_top = true;
}
}else{
if(sidebar_at_top){
console.log('moving sidebar to after main area');
jQuery('.sidebar-shop').insertAfter(jQuery('.shop-with-sidebar'));
sidebar_at_top = false;
}
}
}
jQuery( window ).resize(function() {
formatdisplay();
});
jQuery( document ).ready(function() {
formatdisplay();
});
I just want change css property when scroll top of the page... not the bottom...
I tried
$(window).scroll(function(){
$(".class").css("position", "absolute");
//here change default position(fixed) when scroll(0.0)
});
In Firefox especially, I've run into an issue I can't figure out how to fix.
On the following page, when scrolling down the page jumps several times - mainly on smaller screens where the page doesn't have its full size displayed. You can replicate this issue by making your browser smaller than the page so you have to scroll.
It's on this page: http://www.nucanoe.com/frontier-accessories/
If I disable the position:fixed on the navigation selector, it fixes the issue - but we need the navigation to be sticky. Is there a solution to fix this? I'm thinking we may need to use jQuery somehow.
Thanks in advance!
After seeing you asking for help on another answer, I will try and explain more clearly for you.
The Problem
Your problem is when you add position:fixed to the navigation bar, it removes it from its place and sticks it at the top of the page. This is why the rest of your content jumps up - because the navigation bar is not where it was anymore.
How To Fix
You can get around this by wrapping your navigation element in a new div - let's call it nav-wrapper - and set its height to the same as your navigation element. These are known as placeholder elements. This new wrapper and your original navigation bar must always be the same height for the 'jump' to disappear.
<div class="nav-wrapper" style="height:80px;"> <-- add this
<div class="your-original-nav" style="height:80px"></div>
</div> <!-- add this
Now, when you set the navigation bar to fixed and it disappears to the top, the new wrapper we created with the same height keeps the page's content the same. When the fixed class has been removed, it sits back in the wrapper again, without pushing the content down.
A Suggestion
From what I can see on your site, there will be a big gap where the navigation bar was until the new fixed navigation reaches that point and covers it. What you want, is a little jQuery to figure out where to make the navigation fixed and where to hide it. I'll explain:
// cache the element
var $navBar = $('.your-original-nav');
// find original navigation bar position
var navPos = $navBar.offset().top;
// on scroll
$(window).scroll(function() {
// get scroll position from top of the page
var scrollPos = $(this).scrollTop();
// check if scroll position is >= the nav position
if (scrollPos >= navPos) {
$navBar.addClass('fixed');
} else {
$navBar.removeClass('fixed');
}
});
You may want to add further functionality to this example, as it is very, very basic. You would probably want to recalculate the offsets on window resize as one addition.
A Demo
This is a little demo which might help you - I was bored and feeling helpful :)
Made it this way now: Added an element before the nav:
<div class="nav-placeholder"></div>
And the jquery:
<script type="text/javascript">
$(document).on("scroll",function(){
if($(document).scrollTop()>150){
$(".nav-placeholder").height($(".nav").outerHeight());
} else {
$(".nav-placeholder").height(0);
}
});
</script>
When I scroll down to 150 the placeholder gets the height of the nav, when i scroll up again I set it's height to 0.
Here is a fiddle: https://jsfiddle.net/herrfischerhamburg/562wu62y/
You need to have a placeholder when your nav goes from relative to fixed.
Therefore you need to make a new div.
jQuery(".nav").wrap('<div class="nav-placeholder"></div>');
jQuery(".nav-placeholder").height(jQuery(".nav").outerHeight());
jQuery(".nav").wrapInner('<div class="nav-inner"></div>');
Remember to change ".nav", "nav-inner" and "nav-placeholder" to your desire.
For a fully functional sticky nav, check my website: http://www.swegre.se/
I solved the problem differently so on firefox as you can see in logs it scroll up itself so to stop this scrolling I made simple statement
$(document).ready(function () {
var header = $('#left-menu');
var offset = header.offset().top;
var up = true;
$(window).scroll(function () {
var scroll = $(window).scrollTop();
console.log(scroll + ' ' + offset )
if (scroll >= offset) {
header.addClass('sidebar-sticky');
if (up){
$(window).scrollTop(offset);
up=false;
}
} else {
up=true;
header.removeClass('sidebar-sticky');
}
});
});
that solution work for me when I can't specify height of div's I use.
I have page xyz.com that has a div id="abc". So I want to redirect to div abc from another page www.xyz.com/#abc.
can you tell me how to get xyz.com/#abc top position in number? I tried in body
var hash_value = window.location.hash.replace('#', '');// get abc
var top = $(hash_value).offset().top;
is not working . I want to redirect xyz.com/#abc will animate and scroll to #abc .
I have many div like #abc so I need something dynamic js code like
var top = $(this.hash).offset().top;
$('html, body').animate({scrollTop: top}, 500, function() {});
its working when I put
var top=1300;
1300 is the top position of #abc ;I want top position get dynamically for #add #bar
dynamically getting #abc is not possible then is it possible to pass value with
click here
Thanks in advance.
You will need javascript. You can do something as scroll. When you load the page, then after that scroll the page 28px down as
$('#abc').scrollTo(28); // scroll 28px down
You will use this function inside $('body').load(function ()
Put
#abc {padding-top:28px; margin-top:-28px;}
in your css.
Fiddle here: http://jsfiddle.net/MrLister/AGzX7/5/
You can test by showing http://jsfiddle.net/MrLister/AGzX7/5/show (normal view) or http://jsfiddle.net/MrLister/AGzX7/5/show#abc (with abc on top, starting below the menu bar).
(Make sure your window is narrow enough to enable #abc to scroll to the top, otherwise you won't see it!)
I agree with Afzaal
$('body').load(function(){
$('#abc').scrollTo(0, 28) // using plain javascript
})
or
$('body').load(function(){
$('#abc').scrollTop(28) // using jQuery
})
Im trying to achive a slideshow that looks like this
http://ge.tt/api/1/files/2AjKcVM/0/blob/x675?noinc=1
where the width is 100%, and keeps scrolling infinitely left or right, but always having an image in the center no matter the browser resolution. This is what ive got so far
http://fourcreeklandscape.com/index2.html
the slideshow images have a width of 800px, the left most image has a margin-left of -25%... which sorta looks like it works in a 1280px screen size.... but doesnt look like its suppose to when i resize the window.
Heres the slideshow code im using
$(document).ready(function() {
//move he last list item before the first item. The purpose of this is if the user clicks to slide left he will be able to see the last item.
$('#carousel_ul li:first').before($('#carousel_ul li:last'));
//when user clicks the image for sliding right
$('#right_scroll img').click(function(){
//get the width of the items ( i like making the jquery part dynamic, so if you change the width in the css you won't have o change it here too ) '
var item_width = $('#carousel_ul li').outerWidth() + 10;
//calculae the new left indent of the unordered list
var left_indent = parseInt($('#carousel_ul').css('left')) - item_width;
//make the sliding effect using jquery's anumate function '
$('#carousel_ul:not(:animated)').animate({'left' : left_indent},500,function(){
//get the first list item and put it after the last list item (that's how the infinite effects is made) '
$('#carousel_ul li:last').after($('#carousel_ul li:first'));
//and get the left indent to the default -210px
$('#carousel_ul').css({'left' : '-210px'});
});
});
//when user clicks the image for sliding left
$('#left_scroll img').click(function(){
var item_width = $('#carousel_ul li').outerWidth() + 10;
/* same as for sliding right except that it's current left indent + the item width (for the sliding right it's - item_width) */
var left_indent = parseInt($('#carousel_ul').css('left')) + item_width;
$('#carousel_ul:not(:animated)').animate({'left' : left_indent},500,function(){
/* when sliding to left we are moving the last item before the first list item */
$('#carousel_ul li:first').before($('#carousel_ul li:last'));
/* and again, when we make that change we are setting the left indent of our unordered list to the default -210px */
$('#carousel_ul').css({'left' : '-210px'});
});
});});
Any ideas? thanks
You can put this CSS on #carousel_ul
left: 50%;
margin-left: -1200px;
Just make sure it goes left to right. The only problem is if someone has a monitor wider than maybe 2000px, they will get a bit on the left with no image, when the slideshow first starts - but I think that is very few people.