So in my portfolio which is at http://wrobbins.me/new if you click a portfolio piece the #headerwrap expands to the window height. A group of 'showcase' is then loaded into the #job-display. I want to disable the main page's scrolling, and have the showcase be scrollable so the information wont be cut off (as you can see is happening now). This is what I'm using to expand the #header-wrap on click.
var viewport = $(window).height();
$('#header-wrap').animate({height: viewport}, 700, function(){
$('#job-display').load("content.html#" + job, function(){
$('#job-display').fadeIn(700);
jcheck = 1;
});
});
In addition, when a portfolio piece is clicked on the site, the page jumps up to the top of the page and then expands the header-wrap. How would I go about stopping it from jumping?
To make the div scrollable you need to specify a height to #job-display. for example
$('#job-display').height(500);
To remove the page scroll ,You have specify overflow-y : scroll for html tag. You will need to make it as overflow-y : hidden
Related
I am trying to create an effect similar to "Show div on scrollDown after 800px" answered by apaul34208 in this thread.
The problem is that I am also using this parallax effect on my website, which disables the normal window scroll, so the entire website is scrolling inside a certain div (.parallax) with 100% height. This also disables the desired effect.
Since the div I want to hide or show is supposed to be in fixed position it has to be located outside the scrolling .parallax div, but read the scroll position of the same div.
I have also tried solution from this thread, but I can't seem to make it work.
Right now I am using this script:
$(document).scroll(function() {
var y = $(this).scrollTop();
if (y > 800) {
$('.bottomMenu').fadeIn();
} else {
$('.bottomMenu').fadeOut();
}
});
which is working fine on non-parallax pages except for that the fixed div is displayed when page loads on top, disappears when scrolling down 1 px only to appear again after scrolling down 800 px.
But I guess I can't use scrollTop in what I am trying to achieve.
Any suggestions?
Have you tried:
.bottomMenu {
display: none;
}
If not, it will be shown when the page is loaded (the scroll function is not fired because you haven't scrolled yet) and hidden if you start scrolling because the if statement is evaluated as false because the y position is <800 and $('.bottomMenu').fadeOut(); runs.
I have a website where I show information inside an iframe. And the information inside the iframe comes form Salesforce domain. The data that is being fetched comes in the form of a "training guide" with several pages in it.
I have added the javascript code on both the domains for fixing the changing height thus removing the Vertical scrollbar. Code in salesforce page:
function retrieveInfo(){
parent.postMessage(document.body.scrollHeight, '*');
}
function showLoading(){
$('#dvLoading').show();
}
Code written in my website page is :
function resizeCrossDomainIframe(id, other_domain) {
var iframe = document.getElementById(id);
window.addEventListener('message', function(event) {
var height = parseInt(event.data); // add some extra height to avoid scrollbar
iframe.height = height + "px";
}, false);
}
and my iframe in the page is :
<iframe id="my_iframe" src="https://cp.secure.force.com/mydomainhome" width="100%" onload="resizeCrossDomainIframe('my_iframe', 'https://cp.secure.force.com/');" scrolling="yes"></iframe>
The data inside the iframe has a left pane and a right pane. Left pane contains a list of collapsable menu that shows respective course contents. The left pane manu expands on clicking.The issue that I am getting is that the javascript code for removing V-scroll is getting called on page load but once the page loads and I click on the left pane to expand it the v-scroll reappears.
This is how the page renders on page load:
This is how the page renders after I expand the left pane menus with inner scrollbar:
Is there a way I can prevent the Vertical scrollbar appear even after expanding the left pane menu. I do not want to reload the page on clicking on each of the left pane menu links though.
Would triggering the retrieveInfo on each window.resize event solve the issue?
By expanding the left menu, you are basically resizing the window of the iframe. If you repost your message, your iframe in the parent window will re-adjust accordingly.
I once solved this issue with an external library such as Iframe resizer (https://github.com/davidjbradshaw/iframe-resizer)
That might help you for browsers not supporting "postMessage".
I've got a mobile website that has a navigation menu that is displayed on click of a fixed position button in the top right. This menu is also fixed so that the top of the menu starts 10px below the bottom of the button. The problem is that this navigation menu can be longer than the height of the device being used, and when you try and scroll it will scroll the content behind the navigation menu seeing as it is fixed. Can someone help me get around this?
As per my comment:
You need to use JS to find the height of the screen, top of the menu and set the max height of the menu to the difference of these
For the height of the window use $('window').height()
For the menu's distance from the top of the browser: $('.menu').offset()
The function should live in the show menu event listener:
var maxHeight = $(window).height() - $('.menu').offset();
$('.menu').css({ "max-height" :maxHeight})
Make sure that overflow:scroll; is set on your menu
What you need to do is put a div with a class (I chose scrollable) inside the navigation menu that has the scrollable content and then set the css for that div to be something along the lines of :
div.scrollable{
overflow : auto;
position : relative;
}
That way, the div (and the inside content of the navigation menu) will be scrollable while the position overall of the menu remains fixed.
I have a single page website split into 5 pages (sections), each section fills the screen and when a user clicks on the nav it smoothly scrolls down to that section.
I cant figure out how to underline the anchor element in the upper nav once that page has been selected. I just want it to alert the user which page they are on and I would also need it to change even if the user uses the scroll bar to navigate to that section.
Each section of the page has an id which is linked from the nav. I know how to do this if each section was its own page but not when its a single page site.
Is there a jquery plugin or pure CSS way of doing this please?
jQuery would be your best bet on that one. This will automatically change the nav element when the user scrolls through the page. This works best if each section has the same height, but can be changed a bit to work with multiple section heights. Might need a little changing to fit into your site exactly.
//activates every time user scrolls
$(window).scroll(function () {
//gets the current scroll height
scroll = $(document).scrollTop()
//gets section height -- this is where the editing will have to be done if
//each section is a different height
H = $('.section_class_name').height()
//get the number of sections down
place = (scroll) / H;
place = Math.floor(place) - 1;
if($(document).scrollTop() >= H) {
//all other nav items have no background
$('#menu_ul li').css('background', '');
//the corresponding nav element has this background
$('#menu_ul li').eq(place).css({'background':'#505080','border-radius':'9px'});
}
})
I'm after some information on how to make the page's scroll bar scroll the overflow content of a div instead of the page once its scrolled to a certain point.
The end outcome is to scroll the page to the extent that the header isn't visible anymore, but from that point forward scroll the contents of the div - with the main scrollbar, not two nested scrollbars.
If the user scrolls back up, so that the div contents are all the way at the top again, the page should resume scroll and show the header again.
You can do it using the scrollTop property of your elements. First you'd need to determine where your header ended (the point to scroll your window to):
var header = $('#header');
var headerBottom = header.offset().top + header.height();
Then you could animate your window's scrollbar to this position:
$(window).animate({scrollTop: headerBottom});
Once that was taken care of, you would then get a reference to whichever element you wanted to then scroll by and animate its scrollTop position (same code as snippet above that scrolls the window).
Finally you would need a scroll event handler so you could determine when it was time to change which element you were scrolling the content by:
$(window).scroll(function(){
// logic to determine which element should be scrolling
});