I have a series of divs, that serve as a demo page. Initially I have only the first div showing, with the other 2 hidden using jQuery hide() on page load.
There is a button on each div which triggers a jQuery event of hiding the current div and showing the next div in the sequence.
I would like on the very last div (div 3), once displayed to also show the previous 2 divs, but to have div 3 still display. Meaning, the user can scroll up to see the other two divs, but without scrolling they will still be viewing div 3.
$(document).ready(function () {
$(".page-2").hide();
$(".page-3").hide();
$(".overlay").show();
$(".overlay-button").click(function () {
$(".overlay").hide();
$(".page-1").fadeOut(1000);
$(".page-2").show("slow");
});
$(".arrow-down").click(function () {
$(".page-2").fadeOut(1000);
$(".page-3").show();
$(".page-2").show();
$(".page-1").show();
});
});
This code brings the view back up to the first div (".page-1").
The problem is that when you have all of them open the height of the page changes and the scrollbar gets left behind, to fix this you can force the scrollbar to scroll to the bottom of the page with the following snippet:
$('html, body').scrollTop($(document).height());
Related
I am trying to get the following behavior to occur: When the popup element is shown, I want to prevent any and all elements from scrolling unless they are the popup and the elements within it. The behavior currently is that when scrolling within the popup element, you will reach the bottom or the top and the rest of the document continues to scroll.
About the code:
The popup itself is a fixed div that appears on the page (on click) when an anchor link is clicked, so the 'prevent scroll' action should occur when the anchor is clicked.
I have put random elements to represent that the content outside the popup is out of your control to style it; therefore it should not matter what this content is other than it being straight forward HTML elements.
The below jsFiddle contains what I have accomplished so far. My problem is certainly in 'how' to grab these elements that I need scroll prevention to occur upon.
Here is is: jsFiddle.
Your help is greatly appreciated!
You can change the overflow of the body and do something like this:
// shows pop up
$("#showPopup").click(function () {
$('body').css({
overflow: 'hidden'
});
$(".popup").fadeToggle(500);
$(".overlay").fadeToggle(500);
// selects anything but the popUp and its children and
$('body > *:not(.popup)').css({
"overflow-y": "hidden"
});
});
// closes pop up
$(".closePopup").click(function () {
$('body').css({
overflow: 'auto'
});
$(".overlay").fadeToggle(500);
$(".popup").fadeToggle(500);
$('body > *:not(.popup)').css({
"overflow-y": "scroll"
});
});
Setting the overflow to hidden will hide the scroll bar when the pop up is shown. Then, when you close it you set the overflow to auto and then you can scroll the page.
I am trying to integrate Royal Slider within my website. However I am having trouble with the first slide when the slider is within tabs on my page.
For example, you can see at http://christierichards.co.uk/slidertest/newtemplatefix.php that the slider is working perfectly (there is no styling as of yet).
On this page http://christierichards.co.uk/slidertest/newtemplate.php when you click on before and after (this is the tab I want the slider appearing in) the first slide does not show until you click tab 2 and then the height seems to appear.
I have managed to fix it within the tabs but this is only by adding a fixed height onto .rsOverflow. I cannot use a fixed height as I need the auto-height feature to work for clients to add their own photos. So I need a different way around it.
There must be a piece of conflicting code somewhere however I am stumped! Any help would be appreciated.
Thanks
The slider is being initialised while it is hidden behind a tab. Because of this, it cannot calculate its height and width, and is invisible. When you change to the next item in the slider, the heights and widths are recalculated, which is why you can see it again.
You can either add an initial height to .rsOverflow, or (re)initialise the slider when the tab is clicked, and the contents are made visible.
For example:
var sliderInitialised = false;
$j( "#tabs" ).tabs({
activate: function( event, ui ) {
// Check the activated tab, is the one that contains the slider
if(!sliderInitialised) {
// Initialise slider ...
sliderInitialised = true;
}
}
});
Alternatively, the slider could be initialised before all the tab contents are hidden.
I have this function:
$(document).ready(function() {
$("#toggle-area").click(function() {
$("#show-area").toggle(300);
});
});
It displays some text when user click on the link. The problem is I have 12 links, one below the other, and the vertical scrollbar appears. However, when I scroll down and click on the 12th link (for example), my scrollbar jumps on the top of the page and I have to scroll down until the end to see the text that appeared.
How do I avoid this jump, and keep my list where it was before the click?
Here is the link - JSFiddle
Thanks in advance.
You could use preventDefault to skip the default hyperlink behaviour.
suppose #toggle-area are a hyperlink element.
$(document).ready(function() {
$("#toggle-area").click(function(e) {
$("#show-area").toggle(300);
e.preventDefault();
});
});
Ive setup a basic code where my div containing a table overflows into a scroll.
I want to be able to click on an item in the table displaying a div over the top and then once done return to the scroll position i was in on the previous div. In Firefox my code works perfectly and does everything as expected, but in IE i get no errors or functionality. The page basically works as normal without returning to my scrollpoint, just the top of the table.
function previousPage(){
toggleDivEvent('TableDisplay');
$('#TableDisplay').data('scroll');
$('#<%= buttonGoBack.ClientID%>').hide();
}
function newUserClick() {
$('#TableDisplay').data('scroll',$('#TableDisplay').scrollTop());
$('#<%= buttonGoBack.ClientID%>').show();
clearItems();
toggleDivEvent('ModifyUser');
}
Cant really specify what all the other code does, as its quite a large page. Basically my div containing the table called #TableDisplay is given an attribute 'scroll' with the scroll position when the new user function is clicked, which hides the TableDisplay div and shows the newuser div. previousPage function does the opposite and returns back to the TableDisplay div using the scroll attribute to find the scroll position and return to it.
When I hover over a div, I want another div (which starts as display:none) to partially expand downward, revealing only the top of its contents. How can I partially expand a hidden div with jQuery? Preferably so that the div fades out towards the bottom. There don't seem to be parameters for the toggle() command or fadeIn() that allow partial expansion.
Edit
Unfortunately, the requirements don't allow a separate 'teaser' div to be used. The hidden div containing all the text has to be partially expanded.
Let's say you want to only show the top 30 pixels of the hidden div:
var HowManyPixelsToShow = 30;
$(body).on({
mouseenter: function() { ShowInfoBoxDiv($(this)); },
mouseleave: HideInfoBoxes
}, '.info-box');
function ShowInfoBoxDiv(TheInfoBox) {
//this assumes the 'more-info' divs are located after the '.info-box' divs
TheInfoBox.next('.more-info')
.css('overflow':'hidden')
.height(HowManyPixelsToShow)
.slideDown(500);
}
function HideInfoBoxes() {
$('.more-info').hide();
}
instead of toggling the entire div, separate the inner contents into a teaser div, and a content div, then toggle only the teaser div when you want a sneak peak
You can use jQuery's animate function to show a preview. (open it a certain amount) Add a PNG with a transparent gradient to the bottom of that div to have it fade to white.
Start the #contentDiv with a height of 0px.
$("#hoverDiv").hover(
function(){
$("#contentDiv").animate({"height":"100px"});
},
function(){
$("#contentDiv").animate({"height":"0px"});
}
);