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".
Related
I am using adminLTE template with fixed sidebar. i have issue in the sidebar section. when i click sub menu, sidebar scroll not displayed. but when i load chrome inspect element section, scrollbar appeared. why is that? please check attached images
but when i load inspect element, scroll bar appeared.
I am also facing same issue.The problem from scroll plugin height detection .For first time load its read some height and add scroll on respected data.
Then you expand the menu .its still perform the same height.
Why its working after developer mode open ?
Because the window was resized that scroll plugin detect new height
So we need manualy trigger the resize event on expand menu click/hover .use below code on click/hove while expand menu
setTimeout(function () {
$(window).trigger('resize');
},10)
create click/hover event on menu (inspect to find classname)
$(document).on('click hover','classnameOfMenu',function(){
setTimeout(function () {
$(window).trigger('resize');
},10)
})
I have a page with an iframe that displays an image and comments. I don't want anyone to be required to click in the iframe and scroll to see all the content. I've set the height of the iframe to 2500px in hopes that I would only have to scroll the parent frame to view all the content. This isn't working though, it just cuts off at the bottom of the window, forcing me to click inside the iframe and scroll to view everything.
in short, I want to view all content within iframe, without having to click inside the iframe to scroll inside it. any way to do this with css or js?
Is the iframe on the same domain?
It is not a good idea to give a pixel size to a variable size iframe.
This is a solution for a dynamic size:
<script type="text/javascript">
function resizeIframe(iframe) {
iframe.height = iframe.contentWindow.document.body.scrollHeight + "px";
}
</script>
and on you iframe in the html:
<iframe onload="resizeIframe(this)" ...
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
I'm building a progressively-enhanced, Bootstraped web application that features task-centric help on every page. The help area div (id="help_area") loads in a hidden state; generally when the user clicks on the "help" button (a id="nav_help_button"), the main content div condenses from span12 to span9, and the help area is revealed as a span3. This works well.
Because I want to support mobile and tablet, I'm using Bootstrap's responsive scaffolding. So if you are viewing the page on a narrow viewport, clicking on the help button "reveals" the hidden help area at the bottom of the page‡. I'm trying to use jQuery's .slideToggle()'s callback method to execute JavaScript (window.location.hash = "help_area";) that "jumps to" the help area after it is revealed, but having no luck with the jumping (it doesn't error; it just doesn't move browser focus to the help area).
How can I reveal a div at the bottom of a page, then jump to it? I'm also using preventDefault so the browser won't try to jump to the internal link before the target is revealed. Could that be the conflict?
Here's the relevant ECMA script:
$('#nav_help_button').click(function(event) {
"use strict"; //let's avoid tom-foolery in this function
event.preventDefault(); //don't let a tag try to jump us to #help_area before we reveal it
//adjust spans of main block and help area, set aria-hidden attribute on help block to help screen-readers
if ( $('#help_area').attr('aria-hidden')==='true' ) {
$('#content_container.span12').switchClass('span12', 'span9', 300);
$('#help_area').delay(300).slideToggle(300, function() { window.location.hash = "help_area"; }).attr('aria-hidden', 'false');
}
else {
$('#help_area').slideToggle(300).attr('aria-hidden', 'true');
$('#content_container.span9').delay(300).switchClass('span9', 'span12', 300);
}
});
I have also set up a JSFiddle that illustrates the problem.
To duplicate
open http://fiddle.jshell.net/jhfrench/HdCbu/7/show
then resize that browser window until "PTO, AIT Life, Hours Worked", etc stacks on top of each other
click on the button in the upper-right corner (the one with three white horizontal bars) to reveal the nav menu
click on the blue "help" button to execute the reveal/jump-to.
‡ As the right-most div, everything to the left of it gets stacked on top, so the newly "revealed" help area is generally below the visible portion of the page.
Related:
Javascript to make the page jump to a specific location
http://api.jquery.com/event.preventDefault/
http://api.jquery.com/slideToggle/
Your JSFiddle does jump when I do exactly as you say (steps 1-4) for my browser, which is Chrome 24. What's your browser?
But perhaps this is your problem. If I navigate to http://fiddle.jshell.net/jhfrench/HdCbu/7/show/#help_area (note the appended hash tag) and perform your steps 1-4, my browser does NOT jump. Note that when you first navigate to that URL, there is no visible #help_area. Thus, the URL you're navigating to specifies a hash tag that's invisible. Perhaps the browser is a bit confused by this and just leaves the #help_area hash tag in a bad state. It won't allow scrolling to it from then on, even after it becomes visible. Speculation, but I hope it's helpful!
We needed a footer toolbar that stays at the bottom of the page, and sticks to some area when page is scrolled below that area.
We did achieved this using following script:
fixed div on bottom of page that stops in given place
But there is an issue on some page where the footer toolbar just disappears from the page, and then appear again when page is scrolled down further.
We found that this particular issue appears only on few page, when the page has some contents like Images, Video, or Ajax load other content where the content is filled in (or space is being filled) after page has loaded.
I have no clue how to fix this.
Here is the link from live site with problem page.
http://www.sandiegopchelp.com/services/cellphone-repair/htc/
http://www.sandiegopchelp.com/top-10-tips-to-help-secure-your-computer/
http://www.sandiegopchelp.com/notes-on-the-phablet-does-the-world-need-one/
It is usually more visible on blog posts with many comments. May be due to Disqus comments being loaded after the page has loaded completely.
How does this look?
http://jsfiddle.net/LukeGT/NxSc3/
$(window).scroll(function() {
$('#bar').css('position', 'static');
console.log($('#bar').position().top);
console.log($(window).scrollTop() + $(window).height());
if ($(window).scrollTop() + $(window).height() < $('#bar').position().top + $('#bar').height()) {
$('#bar').css('position', 'fixed');
}
});
setTimeout(function() {
$('#extra').show();
}, 1000);
I simulated the late loading of images by just showing a few extra divs after 1 second. I believe the problem arises from the fact that the height of the page changes after the code for the bar runs, so it's behaving as it should if the page were shorter (without the images/ajax etc).
What I do instead is position the bar in it's place at the bottom of the page each time the page is scrolled, calculate its height from the top there, and compare this with the scroll height. If we're too far up, it positions the bar in a fixed position at the base of the page, and otherwise leaves it alone. It works smoothly in Chrome, but I haven't tested elsewhere.
I guess this is a problem with the $(window).height() function. Check here. For all the dynamic contents like Images, Video or Ajax-loaded content the height is not added to the result of $(window).height() unless it is specified somewhere in the HTML or CSS (and from the referred link I see this happens only in Chrome. You might want to confirm on this though). To those dynamic contents you can either try adding the height attribute in html or height attribute in the corresponding style.
This is not the answer but i have found something while inspecting your website...
This is you actual HTML when its working fine as you want..
<div class="footer-toolbar-container" id="sticky_for_a_while" style="position: fixed; ">
but when it is not working, the Position attribute is changing from Fixed to Relative .
<div class="footer-toolbar-container" id="sticky_for_a_while" style="position: relative; ">
you can check you script for that or post you script here...
At initial state, your div is in position: relative so its offset is based on the container element, not on the total height of the page. The variable stickyOffset is set based on that relative offset, that is why it gets clip down sooner than expected while scrolling and also why it works in your JSFiddle as the container there is the page (Iframe) itself.
In your $(document).ready function, you'll need to add the offset of not only the footer but also the rest of the offset on top of the containing element so that the offset is based on the total page instead of the containing div.
Hope that helps.
By looking at your example on http://www.sandiegopchelp.com/services/cellphone-repair/htc/ using chrome, I can see that your footer disappears when it gets at the "related links" section. At this moment, you set the position of the footer to "relative" so it will replace it in the regular flow of the document and its position is actually below the "related links" section which is why it disappears off screen (below "related links").
but you calculated the position at which it should become relative on page load only where you should have recalculated it after having added the "related links" section as it changes the page height (I understood that you added afterward, am I right?).
Try adding a zero height div just above the position of the sticky div, which will remain at that position as the page resizes, then check that position as you scroll to determine the position where the sticky div should stop.
Finally got it fixed by two techniques, setting explicit height wherever possible using CSS and delaying jQuery function after all images are loaded. Refer this: Delay some jQuery function until all images are loaded completely