Conflicting javascripts - javascript

I have two javascripts running on my webpage, one to dynamically resize the iframe height based on the content html and another to look up the title of the iframe content page and display it on the parent page. Both provided by other contributors on various forums.
My problem is if I have the iframe title displayed in the parent page code running all I get is a small iframe with vertical scroll bars. You can see this at www.katzxstitch.co.uk/shop (click on to the Terms and Conditions page).
If anyone could help I would be obliged. I am an amateur at html (trying to learn) and a total novice at javascript (also trying to learn).
Regards, Neil.
The javascript is as follows:
Resizing the iframe to the html content height:
function getDocHeight(doc) {
doc = doc || document;
// stackoverflow.com/questions/1145850/
var body = doc.body, html = doc.documentElement;
var height = Math.max( body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight );
return height;
}
function setIframeHeight(id) {
var content_iframe = document.getElementById(id);
var doc = content_iframe.contentDocument? content_iframe.contentDocument: content_iframe.contentWindow.document;
content_iframe.style.visibility = 'hidden';
content_iframe.style.height = "10px"; // reset to minimal height ...
// IE opt. for bing/msn needs a bit added or scrollbar appears
content_iframe.style.height = getDocHeight( doc ) + 4 + "px";
content_iframe.style.visibility = 'visible';
}
iframe title displayed in parent page
document.getElementByName('content_iframe')[0].onload = function(){
document.title = window.frames.content_iframe.document.title;
};
Could anyone advise please

Related

Javascript column resizing only working when page is refreshed

Hi — I've inherited a website that has a little javascript script that isn't working properly. I didn't code it myself and am a javascript n00b, so please forgive my ignorance.
The site switches from 3-column view to 1-column view depending on window size, and there's a script to make one particular section of the site convert neatly between the two views (by setting the column heights such that they stack neatly). I've noticed that if I resize the window without refreshing, the column heights fail to adjust. How can I fix this?
Thanks!
<script type="text/javascript">
function adjust_col_heights() {
if (window.innerWidth > 991) {
var col_1_height = document.getElementById('col-1').clientHeight;
var col_2_height = document.getElementById('col-2').clientHeight;
var col_3_height = document.getElementById('col-3').clientHeight;
console.log("adjusting heights from:", col_1_height, col_2_height, col_3_height);
var col_max_height = Math.max(Math.max(col_1_height, col_2_height), col_3_height);
var css_height = col_max_height + "px";
document.getElementById('col-1').style.height = css_height;
document.getElementById('col-2').style.height = css_height;
document.getElementById('col-3').style.height = css_height;
document.getElementById('poem').style.position = "absolute";
}
else {
document.getElementById('poem').style.position = "relative";
}
}
adjust_col_heights();
window.onresize = adjust_col_heights;
</script>
window.onload = function () {
resizeElements();
window.addEventListener('resize', resizeElements);
}
function resizeElements() { ... }

Iframe with height based on page content height

in my Wordpress site I use a plugin that allows me to view external pages in an iframe that changes its height based on the height of the content.
The page I try to load in the iframe is a simple html page that calls a javascript.
This however prevents the iframe from changing its height.
Can it be solved in any way?
Thanks.
Here is the code of the html page that must be loaded into the iframe:
<body>
<script type="text/javascript" src="https://www.domain-name.com/script-name.php?param1=1&param2=22"></script>
</body>
give div ID or Call and the CSS
height : 100vh ;
try this code on load
function resizeIFrameToFitContent( iFrame ) {
iFrame.width = iFrame.contentWindow.document.body.scrollWidth;
iFrame.height = iFrame.contentWindow.document.body.scrollHeight;
}
window.addEventListener('DOMContentLoaded', function(e) {
var iFrame = document.getElementById( 'iframe_block' );
resizeIFrameToFitContent( iFrame );
// or, to resize all iframes:
var iframes = document.querySelectorAll("iframe");
for( var i = 0; i < iframes.length; i++) {
resizeIFrameToFitContent( iframes[i] );
}
} );

How to add div and have it behave like a dev console?

I would like to dynamically create a div on a page using JS and have it behave like a dev console behaves in Chrome and Firefox. By this, I mean that when the div is visible, it does not negatively impact the display of other DOM elements. It would simply either "push up" or "push down" elements on the page.
Is this possible without having to redesign the application's DOM elements to account for the "div console?"
I've tried generating the div as the first element on the page, but that still would not account for DOM elements that are position absolute or fixed:
div = document.createElement('div');
div.id = 'wc-test-window';
div.style.width = "100%";
div.style.height = "200px";
div.style.backgroundColor = '#eee';
div.style.position = 'relative';
div.style.top = 0;
div.style.right = 0;
div.style.display = 'none';
document.body.insertBefore(div, document.body.firstChild);
I'm disappointed in this community for all of the unconstructive comments and downvotes for a perfectly legitimate question. Anyway, I solved it using framesets and frames for anyone looking for a viable answer to this problem.
function showDevConsole() {
var fs = document.createElement('frameset'),
f1 = document.createElement('frame'),
f2 = document.createElement('frame');
fs.rows = "200,*";
fs.framespacing = "0";
// top frame - show the dev console
f1.name = "topframe";
f1.src = "dev-console.html";
f1.marginwidth = "0";
f1.marginheight = "0";
f1.noresize = "noresize";
f1.scrolling = "no";
// bottom frame - show current page
f2.name = "bottomframe";
f2.src = window.location;
f2.marginwidth = "0";
f2.marginheight = "0";
f2.scrolling = "auto";
f2.frameborder = "0";
// append the frames to the frameset
fs.appendChild(f1);
fs.appendChild(f2);
// replace the entire body with the framset containing both frames
$("body").replaceWith(fs);
return false;
}
I put the current page on the bottom frame and the "console" at the top. Any DOM manipulations that the top frame can do on the bottom frame will be done via JS using the name or id of the frame.

jQuery object scrollTop(value) when detached from body?

I'm doing a DOM manipulation in jQuery, wrapping body in some div elements, so I'm trying to match scroll position from window to div element after this transformations, but somehow it doesn't work.
Here's what I'm doing:
scrollPosition = $(window).scrollTop();
myBody = $("body").detach();
myBody.wrapInner("<div class='someclass'><div class='osm-website'></div></div>");
myWebsite = myBody.find('.osm-website');
myWebsite.scrollTop(scrollPosition);
and myWebsite scrollTop position is still 0
but if I do this:
myBody.appendTo('html');
$('.osm-website').scrollTop(scrollPosition);
it works.
I have to find a way to scroll it before appending it to dom because this scroll after appending to page causes a brief "flash" in Safari on Mac. I need it to be seemless.
Any help is greatly appreciated
If you are really appending the content directly to html you could simply use:
// Source: How to get height of entire document with JavaScript?
// http://stackoverflow.com/a/1147768/887539
var body = document.body;
var html = document.documentElement;
var height = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight );
$(window).scrollTop(height);
If not you could take your soon to be parent and find the last elements position and add the elements height:
var $parent = $('....');
var $lastChild = $parent.children().last();
var offset = $lastChild.offset();
var scrollPos = offset.top + lastChild.outerHeight(true);
$(window).scrollTop(scrollPos);

jQuery document ready buggyness with social sharing services

I have a strange issue that might have to do with jQuery document ready. Below is an html and script block that contains the usual social networking scripts. The Javascript block below displays the dd_outer div on the left edge of the body div, and when the browser window is shrunk, the div is faded out and the dd_footer div is faded in. The fadein and fadeout between the two divs works OK.
The problem is two fold: one issue is when the browser window is full width (1200px+), the Facebook script will not load and display consistently; it sometimes appears and sometimes doesn't, sometimes after a page reload and sometimes doesn't. (No browser or .htaccess caching is involved). Only the Facebook share fails to show consistently; all other services show OK.
The second problem that when the browser window is narrow - 650 px or so, when the dd_outer div is not displayed and the dd_footer div is - the footer div will not show on a page reload until the browser window is moved the smallest amount. Then the the div will display, Facebook share and all. For a mobile device, this is a problem because the browser window will be narrow to begin with and shouldn't need to be "nudged" to make the dd_footer div display.
This problem may have come into play because I have adapted this code from a WordPress plugin that used options to set the position of the dd_outer div and scroll height. That's the reason for the variables above the document ready call.
Is this the issue with what seems to be a document ready issue?
How can the variables be integrated into the script itself? It doesn't matter if they are hardcoded; I can change them when needed.
I'd throw this in a jsfiddle to demo but the divs won't realistically float with the window resizing.
I haven't included the CSS for clarity.
This is the html and social script block:
<div class='dd_outer'><div class='dd_inner'><div id='dd_ajax_float'>
<div class="sbutton"><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
<div class="sbutton">
Tweet<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></div>
<div class="sbutton"><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div>
<div class="sbutton"><script src="http://platform.linkedin.com/in.js" type="text/javascript"></script>
<script type="IN/Share" data-counter="top"></script></div>
</div></div></div>
In the footer is <div id="dd_footer">that contains the same social scripts as above</div> and are faded in and out by the script below:
This is the jQuery that positions the dd_outer social services to the left and fades it out and fades in the dd_footer div.
<script type="text/javascript">
var dd_top = 0;
var dd_left = 0;
var dd_offset_from_content = 70; var dd_top_offset_from_content = 10;
jQuery(document).ready(function(){
var $floating_bar = jQuery('#dd_ajax_float');
var $dd_start = jQuery('#dd_start');
var $dd_end = jQuery('#dd_end');
var $dd_outer = jQuery('.dd_outer');
// first, move the floating bar out of the content to avoid position: relative issues
$dd_outer.appendTo('body');
dd_top = parseInt($dd_start.offset().top) + dd_top_offset_from_content;
if($dd_end.length){
dd_end = parseInt($dd_end.offset().top);
}
dd_left = -(dd_offset_from_content + 55);
dd_adjust_inner_width();
dd_position_floating_bar(dd_top, dd_left);
$floating_bar.fadeIn('slow');
if($floating_bar.length > 0){
var pullX = $floating_bar.css('margin-left');
jQuery(window).scroll(function () {
var scroll_from_top = jQuery(window).scrollTop() + 30;
var is_fixed = $dd_outer.css('position') == 'fixed';
if($dd_end.length){
var dd_ajax_float_bottom = dd_end - ($floating_bar.height() + 30);
}
if($floating_bar.length > 0)
{
if(scroll_from_top > dd_ajax_float_bottom && $dd_end.length){
dd_position_floating_bar(dd_ajax_float_bottom, dd_left);
$dd_outer.css('position', 'absolute');
}
else if ( scroll_from_top > dd_top && !is_fixed )
{
dd_position_floating_bar(30, dd_left);
$dd_outer.css('position', 'fixed');
}
else if ( scroll_from_top < dd_top && is_fixed )
{
dd_position_floating_bar(dd_top, dd_left);
$dd_outer.css('position', 'absolute');
}
}
});
}
});
jQuery(window).resize(function() {
dd_adjust_inner_width();
});
var dd_is_hidden = false;
var dd_resize_timer;
function dd_adjust_inner_width() {
var $dd_inner = jQuery('.dd_inner');
var $dd_floating_bar = jQuery('#dd_ajax_float')
var width = parseInt(jQuery(window).width() - (jQuery('#dd_start').offset().left * 2));
$dd_inner.width(width);
var dd_should_be_hidden = (((jQuery(window).width() - width)/2) < -dd_left);
var dd_is_hidden = $dd_floating_bar.is(':hidden');
if(dd_should_be_hidden && !dd_is_hidden)
{
clearTimeout(dd_resize_timer);
dd_resize_timer = setTimeout(function(){ jQuery('#dd_ajax_float').fadeOut(); }, -dd_left);
jQuery('#dd_footer').fadeIn();
}
else if(!dd_should_be_hidden && dd_is_hidden)
{
clearTimeout(dd_resize_timer);
dd_resize_timer = setTimeout(function(){ jQuery('#dd_ajax_float').fadeIn(); }, -dd_left);
jQuery('#dd_footer').fadeOut();
}
}
function dd_position_floating_bar(top, left, position) {
var $floating_bar = jQuery('#dd_ajax_float');
if(top == undefined) top = 0 + dd_top_offset_from_content;;
if(left == undefined) left = 0;
if(position == undefined) position = 'absolute';
$floating_bar.css({
position: position,
top: top + 'px',
left: left + 'px'
});
}
</script>
jQuery .ready() does not wait for iframes and other external media to load. These social buttons tend to work by inserting an iframe. The load event does wait for iframes etc, so you could try using that event instead, i.e.
jQuery(window).load(function () {
/* put the code you had inside .ready() here */
});
The problem comes with your idea: $(document).ready() fires when the DOM is ready, not when all scripts are ready!
an idea would be to search for trigger of that social-APIs you are using or just delay your calculations (e.g. via setTimeout).
Keep in mind that they are asyncron, even if you specify "async" on the script-tag to be false, you still dont know when they will activate or are finished.
I suggest to use the standard DOM event window.onload if you want to make sure that all the external assets, scripts, images, etc. are loaded first before you do something:
window.onload = function () {
// your script that needs to run after all the external assets are loaded
}
Reference: https://developer.mozilla.org/en-US/docs/DOM/window.onload
I just ran into similar problems with the facebook script... I just used the integration in the HEAD-section with javascript and added an "asynchronous"-attribute to the javascript-embedding script which then fires an asynchronous "heeey, facebook is ready now, too"-event to my jQuery-eventqueue...
I can't help you in detail, because I don't totally understand what you WANT to do and would reorganize the whole code A LOT... so - contact me private (email/skype) or try figuring out... I used that lines of code: pastie.org/private/9m4b9eet1dzzkl6duqpkrg

Categories