Develop Reference

Resize iframe and window on div click

I'm making a cricket registration website with a group of people who decided to use Ruby on Rails for the database management. We're also trying to make it one page, so I have the registration forms currently loading in on iFrames. I know this isn't ideal, and if we were using PHP, I'd be able to use Ajax, but I don't know any other way around using iFrames. The difficulty with this is, I can't resize these iFrames when a button inside them is clicked. For example, there is this:
<div class="links">
<%= link_to_add_association 'Add Player', f, :players %>
</div>
Which is a button inside the 'links' class that says "Add player". When clicked, it will extend the content downwards, populating it with more forms to fill in. However, because the Iframe already has it's height, it doesn't adjust properly, leaving the extra content hidden.
Is there any way I can fix this? Alternatively, is there any way I can avoid using iFrames while still maintaining the one page aspect?
Cheers guys!

there's a iframe onload event which can you override the existing height of you're iframe. Let say:
<iframe id='stipsImage' onload='iFrameLoaded()' src='http://...' />...</iframe>
then on your javascript:
//apply css on iframe when ready
iFrameLoaded() {
$('#stipsImage').contents().find("body")
.append($("<style> " +
" body{ text-align: center; } " +
" img{ width: 700px; height: 748px; margin: auto; border: 1px solid #ccc } " +
"</style> "));
}

insert div at top of page without overlaying using javascript

I wonder if anyone can help me please ?
Basically I have a snippet of Javascript that I want to be able to give people. So the following is true :
I can't control wherabouts in the page they decide to put the snippet (for various reasons) - It could be in the middle, the end, wherever.
All the snippet does is put a small DIV at the top of their page. At the moment I am doing the following (this is the snippet):
<div id="mydiv" style="display:none; position: fixed; top: 0; left: 0; z-index: 999; width: 100%; height: 40px; background-color:red; text-align:center; color:white"><br>Message Inside Div</div>
<script>if (Condition) { document.getElementById("mydiv").style.display = "block"; }</script>
Now, that works a treat and when "Condition" is true, it shows the div. However, using this method it overlays the div with it fixed to the top of the page.
However, I also want to do it so that the div is inserted at the top of the page but scrolls with the page as normal and DOESN'T overlay the content at the top (IE: It pushes the content down when it appears).
Any ideas on how I would do that please, remember : I don't have any access to their page (I don't even know what else is on the page) and the snippet I give them could go anywhere on the page.

I guess you can't avoid meddling with the existing code and stylings - but in case you're worried about existing top-margins on body, just check for this value first. ie. get the body top margin value, add your elements height, reapply. Example in jquery syntax (out of simplicity, can do the same in vanilla javascript)
$('body').css('margin-top',$('body').css('margin-top') + yourdiv-height);

Hide page until everything is loaded Advanced

I have a webpage which heavily makes use of jQuery.
My goal is to only show the page when everything is ready.
With that I want to avoid showing the annoying page rendering to the user.
I tried this so far (#body_holder is a wrapper inside body):
$(function(){
$('#body_holder').hide();
});
$(window).load(function() {
$("#body_holder").show();
});
This works completely fine, but messes up the layout.
The problem is that hiding the wrapper interferes with the other jQuery functions and plugins used (eg layout-plugin).
So I guess there must be another trick to do this. Maybe lay a picture or div over the body until window.load has occurred?
What approaches do you use?
EDIT:
The solution most likely has to be another way than display:none or hide();

Anything done with jQuery will normally have to wait for document.ready, which is too late IMHO.
Put a div on top, like so:
<div id="cover"></div>
set some styles:
#cover {position: fixed; height: 100%; width: 100%; top:0; left: 0; background: #000; z-index:9999;}
and hide it with JS when all elements are loaded:
$(window).on('load', function() {
$("#cover").hide();
});
Or if for some reason your script uses even longer time then the DOM elements to load, set an interval to check the type of some function that loads the slowest, and remove the cover when all functions are defined!
$(window).on('load', function() {
$("#cover").fadeOut(200);
});
//stackoverflow does not fire the window onload properly, substituted with fake load
function newW()
{
$(window).load();
}
setTimeout(newW, 1000);
#cover {position: fixed; height: 100%; width: 100%; top:0; left: 0; background: #000; z-index:9999;
font-size: 60px; text-align: center; padding-top: 200px; color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li>This</li>
<li>is</li>
<li>a</li>
<li>simple</li>
<li>test</li>
<li>of</li>
<li>a</li>
<li>cover</li>
</ul>
<div id="cover">LOADING</div>

Here is a jQuery solution for those looking:
Hide the body with css then show it after the page is loaded:
CSS:
html { visibility:hidden; }
JavaScript
$(document).ready(function() {
document.getElementsByTagName("html")[0].style.visibility = "visible";
});
The page will go from blank to showing all content when the page is loaded, no flash of content, no watching images load etc.

You should try setting visibility to hidden instead of display:none. Setting visibility to hidden will retain all elements positions and dimensions, thus it shouldn't create layout problems.

Start your HTML with:
<body style="opacity:0;">
At the end of your script:
document.body.style.opacity = 1;

Stumbled upon this and tried #9ete's solution but it didn't help me.
This worked instead:
CSS:
html { visibility:hidden; }
JS:
window.addEventListener('load', function () {
document.getElementsByTagName("html")[0].style.visibility = "visible";
});
As per documentation for window, the load event is fired after all the content (images included) is loaded while $document says that ready is fired after only the DOM is ready.

Your question is valid, but I would not get in a practice of hiding or covering the page while things are spinning up.
It keeps the user from understanding what's happening on the page. While lots of things may need to load, different parts of the page should spring to life as they're loaded. You should get in the practice of locking controls that are not ready, perhaps displaying a spinner or some other progress indicator over them. Or setting the cursor to wait on loading items.
This keeps the user in the loop and allows him to see and interact with parts as they come online instead of obscuring all parts until everything is ready.
You will normally want to load the things the user needs the quickest access to, usually stuff above the fold, first. Loading is a prioritization that can easily be coordinated with Promises.
At the very least seeing the page allows the user to get his bearings and decide what to do. Be transparent.

I was seeking a non-javascript solution so I found one that is working on most browsers in acceptable manner.
Since the loading order of CSS rules matters;
Define the hiding class in the first CSS file or inline in head.
.hidden-onpage-load{ display: none; }
In the body, the class can be used as
<div class="hidden-onpage-load"> ... </div>
Redefine it inline or in a CSS file after all other CSS and JS files are loaded
.hidden-onpage-load{ display: block; }

The simplest solution I've come up with is to wrap the body in a as suggested previously, but set it as hidden from the get go, then use JQuery (or javascript) to unhide on load after all components are loaded.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="bodyDiv" hidden>
Hello World!
</div>
<script>
$(document).ready(function() {
// add JQuery widget loads here
$("#bodyDiv").show(); // reveal complete page
})
</script>

Don't forget, a lot of frameworks use javascript to structure a page. To prevent the page from showing before these modification have been made you'll need to do something like what is described here (e.g. run a script at the end of the page to show the real contents of the page):
Detect if any JavaScript function is running

If you have a div #bodyholder then you can put display:none in your CSS for it and then with jQuery do:
$(document).ready(function() {
$('#body_holder').show();
});
I don't see why hiding a div should interfere with the loading of anything, because all it means is it is hidden. However, if you have lots of jQuery being used then make sure you wrap it in $(document).ready which will make sure that the DOM is fully loaded before the Javascript is executed
A further point is that HTML/CSS is designed for progressive loading, and if you do it properly then you can get a nice progressive loading of content for your users. I personally wouldn't want my users getting a white screen for a few seconds until everything was loaded. Move your Javascript to the end of the page so that it doesn't block loading and get content onto the screen as quickly as possible.

JavaScript: How to block the whole screen while waiting for ajax response

I have a screen in which there are different functions. There is a dropdown box onchange of which an Ajax call goes and a jsp page is returned in response. This response i then put inside a div below my dropdown box.
Now what i want is that untill this jsp is not filled in the div element the screen is blocked either by an alert box or some other dialog box.
How can i achieve this ?

You can use blockui jquery plugin from here. Call blockUI before making ajax call and unblockUI in your ajax callback.

#linusunis fed,
If you want to prevent the user from clicking on anything I suggest overlaying a div element & maybe making it semi-transparent. Below is CSS for the div & jQuery code to animate displaying the screen overlay and removing the screen overlay. Just call "block_screen" when you make your call & "unblock_screen" after you received the data & placed your new div on the page. This is just off the top of my head so you may need to double check for errors but it looks good to me.
You need to include jQuery on the page for this to work. Download it here: http://code.jquery.com/jquery-1.7.1.min.js
<style type="text/css">
.blockDiv {
position: absolute:
top: 0px;
left: 0px;
background-color: #FFF;
width: 0px;
height: 0px;
z-index: 10;
}
</style>
<script type="text/javascript" language="javascript">
function block_screen() {
$('<div id="screenBlock"></div>').appendTo('body');
$('#screenBlock').css( { opacity: 0, width: $(document).width(), height: $(document).height() } );
$('#screenBlock').addClass('blockDiv');
$('#screenBlock').animate({opacity: 0.7}, 200);
}
function unblock_screen() {
$('#screenBlock').animate({opacity: 0}, 200, function() {
$('#screenBlock').remove();
});
}
</script>

I would use Jquery and Jquery UI. Jquery UI provides a modal dialog in which you could place a loading message that will keep the user from clicking elsewhere on the screen.
http://jqueryui.com/demos/dialog/#modal

If you actually want to block the UI, just make the AJAX request synchronous.

Just use a boolean flag, which until is set (on receiving content), you lock the functionality. And once this flag is set, proceed further. Assuming you do have control over those functions.

you can use a div, along with z-index, opacity and cursor styling. although I don't know you application, blocking the entire page doesn't sound like a great user experience to me. perhaps you could place the div only over the affected area of the page

Printing content loaded from server

I'm loading some picture from server by JS after whole page is loaded.
Means by user click i'm loading some image and insert it into DOM.
This image has unique ID, now i want to print out this image ONLY by JS help.
I did style file for printing purpose
* {
display:none;
visibility: none;
}
html, body, #out_image_1 {
background: none;
display: block !important;
left: 0px;
margin: 0px;
padding: 0px;
position: relative;
top: 0px;
}
and calling print such
$("#print-button2").click(function() {
window.print();
return false;
})
but page is blank (empty) Where i'm wrong ?
Thanks

There are a couple reasons it might not be printing.
Your image may be contained in another element, but according to your CSS, the parent element is still display:none
Your CSS will work only if #out_image_1 is a direct child of body:
http://jsfiddle.net/RXMx8/
But not if #out_image_1 has any parent elements other than body and html:
http://jsfiddle.net/RXMx8/1/
I'm betting that's the issue, but other reasons could be:
Your browser is not set to print images by default. Using window.print() may skip the "print preview" which could allow you to toggle this setting on.
Your HTML is OK, but you're targeting the wrong element.
You're out of ink ; )
Even though you're adding the element with javascript, you should still be able to print it. For debugging, remove the * { display:none; } and see what happens.
* By the way, it should be visibility: hidden;; "none" is not a valid value, but it's redundant with display:none anyways so you don't need it at all.