We Keep Coding

Iframe don't fits JQuery UI dialog

When I try to open a URL using Iframe in a dialog JQuery box, I got this: http://s15.postimg.org/7qzx5y8vv/Sem_t_tulo.png
Here is my code: http://pastebin.com/Wqf0mGhZ
I want to make the dialog shows ALL the content, thanks...
EDIT:
Hey guys, I achieved this by putting the iframe in a div tag, like this:
<div id="imgWindow" title="this is a dialog" style="display:none;">
<iframe width="100%" height="100%" id="iframeImg" marginheight="0" frameborder="0>
</iframe>
</div>

I didn't go through all of your code, but maybe you
can just add autoResize call to open callback (on Dialog):
function openDialog(stringURL) {
$("#imgWindows").attr("src", stringURL);
$("#imgWindows").dialog("open", {
callback: function() {
autoResize('imgWindows');
}
});
}

Hide cursor from objects on the webpage

I want to hide my mouse cursor whenever someone goes over the object tag. But cursor:none is not working for objects while it works with rest of the page.
Here is what i am using but i am failing do it.
<object id="obj" class="obj" style="cursor:none;" data='bla-bla.pdf'
type='application/pdf'
width='1000px'
height='640px'>
cursor:none is not working. Please tell me any way to do this.

Just use an overlay; <object>s can act funny.
HTML:
<div id="obj_container">
<object id="obj" src="blablabla.pdf"></object>
<div id="obj_overlay"></div>
</div>
CSS:
#obj_container{
position:relative;
}
#obj{
position:absolute;top:0;left:0;
z-index:2;cursor:none;
}
See this JSFiddle demo for more complete code.

Yes try using div:
Your HTML:
<div style="cursor:none;">
<object id="obj" class="obj" data='bla-bla.pdf' type='application/pdf'
width='1000px' height='640px'>
</div>

How about something like this: http://jsfiddle.net/ZBv22/
It applies a mask over the object element where you specify cursor:none.
The only issue is if you need the object to be clickable/interacted with. Depending on your targeted browsers (modern, IE11+), you could add pointer-events: none to address that.
http://caniuse.com/pointer-events

Want to place a button to close the iFrame, but button click is not working

In my meteor based application i am using an I frame to show some contents to the user. It is working properly. But i want to place a close button which unloads the Iframe from the template when clicked.
I tried it as in the code given below by placing a button, but I am unable to get click event on it. means button click is not working. I am working with iframes for the first time.
Is this the right way to unload an iframe?
If not then how can i unload it, or what is the best way to unload an Iframe?
<template name="preview">
<div style='display:none'>
<div id='preview' style='padding:10px; background:#fff;'>
<button id="close_content_file">Close</button>
<iframe frameborder="1" src="{{preview_url}}" align="left" width="100%" height="500px" >
</iframe>
</div>
</div>
Template.preview.events({
'click #close_content_file':function(){
console.log(" previev butoon has been clicked");
$("#preview").fadeOut();
},
});
I placed a <button></button> in the div to close or unload the Iframe. but click is not working on that button.If I place the button in the div which is hidden. The button is working there. Iframe is opening on the complete screen. means it over lays the omplete screen as bootstrap modal dialogbox.can i place a button in the Iframe itself? . help will be appreciable

There is an issue with the binding of event with the button. Use this way.
$("#close_content_file").bind("click", function() {
//console.log(" previev butoon has been clicked");
$("#preview").fadeOut();
});

I don't know which JS lib you are using, and also I'm a little confused about the
<div style='display:none'>
but I make a little modification so it works fine with jQuery ,
here is the link http://jsfiddle.net/QHxac/

how to change a div from an iframe in another div

I have two divs
<div id="leftdiv"><!--#exec cgi="test.cgi"--></div>
<div id="rigthdiv" >
<iframe name="rigthdiv" class="contentiframe"allowTransparency="true" frameborder="0" src="iframebg.html"><body STYLE="background- color:transparent"></iframe>
</div>
I am trying to change the leftdiv from iframe. I called the js below from the iframe but nothing changed. What's wrong? Thanks
function test() {
parent.document.getElementById("leftdiv").innerHTML = 'Processing complete.';
}

It won't work on chrome, but it can work on firefox or IE. Chrome doesn't support iframe normally when you use javascript. You can try to use JQuery.

How to show hidden content where the contents images don't load until the content is shown?

What would be a good way to show hidden content with javascript, without having the image elements <img src="myimage.jpg"> of the hidden content load their images in google chrome or any other browsers until the content is actually shown?
hiding the content with the css rule display: none will not prevent the images from loading, and I would like to avoid using ajax calls.

EDIT 1 as discussed in the comments, a better alternative would be to use a template. As an example I picked John Resig’s Microtemplating engine:
<div id="content_container">
<script type="text/html" id="content">
<div>
<img src="..."/>
</div>
</script>
</div>
<button onclick="document.getElementById('content_container').innerHTML = tmpl('content', {});">show div</button>
See fiddle
EDIT 2
As the original poster commented, it's perfectly possible to grab the contents of a <script type="text/html"> element. Templating engine's not necessary:
<div id="content_container">
<script type="text/html" id="content">
<div>
<img src="..."/>
</div>
</script>
</div>
<button onclick="document.getElementById('content_container').innerHTML = document.getElementById('content').innerHTML;">show div</button>
First Answer
(see in edits)

To do what you want within your requirements you could have javascript write the content when you want it displayed. So you would store your HTML in a javascript string and just use script to then insert it into the page when you want it. Its not a very nice way of doing it but it would mean that it would only load images at that point.
Alternatively you could put the HTML in but have the images pointing at nothing (or a blank placeholder, etc.) and then use script to programatically populate the image sources to the correct values when you call the show function to show the page.
Which of these you choose is probably more about readability than anything else though I would favour the second approach (just tweaking the image sources).

First, define a CSS style:
.invisible {
display: none;
}
Add this class to the objects in the HTML. Then anywhere in the JavaScript, simply add or remove the class, or change the display to block or float etc. In jQuery:
http://api.jquery.com/addClass/
http://api.jquery.com/show/
EDIT:
If you don't want the image to load, then use an AJAX call instead.
http://api.jquery.com/jQuery.get/
jQuery.get('myImage.jpg', function(data) {
jQuery('.imageContainer').html(data);
});
EDIT 2:
Load the src into the img once it's needed. You could check the scroll position etc.
http://jsfiddle.net/LYMRV/

Seems like it is possible to hide content using a script tag with type="text/html", it even prevents any images and iframes from loading in the background,
for example:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
document.addEventListener('click',function(e){
if(e.target.id=='content_show'){
e.preventDefault();
document.getElementById('content_visible').innerHTML = document.getElementById('content_hidden').innerHTML;//document.getElementById('content_hidden').text also works
}
});
</script>
</head>
</body>
<img src="image1.jpg"/>
<script type="text/html" id="content_hidden">
<img src="image2.jpg"/>
<img src="image3.jpg"/>
<img src="image4.jpg"/>
</script>
Show Content
<div id="content_visible"></div>
</body>
</html>
Only thing to keep in mind is to avoid placing script tags inside #content_hidden.
Now if anyone is friendly enough to point out every flaw in this method, so that we can all benefit.