Easy way to Resize an Iframe with javascript - javascript

my case is a little different than the previous ones that have been posted so far.
I want my iframe to resize using a function with javascript.
The source for my iframe so far looks like this
<iframe id='bframe' onload='base=history.length;gothere(history.length);' name='bframe' src='http://source.com' style='border: 0pt none ; left: -794px; top: -166px; position: absolute; width: 1600px; height: 799px;' scrolling='no'></iframe></div>
The reason for the "onload" stuff is because I want the iframe to resize when an action within the iframe has been done! The only thing I need now is a function in javascript that allows me to change the width and height as well as top and left coordinates of the iframe.
That would be all, help is really appreciated!!!
Thanks
EDIT:
--
THANKS for the response but i seemingly can't get it to work:
Hey, thanks for your response.
I put my code like this into the part of my page
function resizeme() {
document.getElementById('bframe').onload = function() {
this.style.width = '1230px';
this.style.height = '1230px';
base = history.length;
gothere(history.length);
}
}
and I replaced the part in my code where it redirects to another page after the iframe content has changed to "resizeme()" (the redirection worked so the code must be correct)
However, nothing really changed - What is wrong?

Same as all (block-level) elements:
element.style.width = '123px';
element.style.height = '123px';
In this case:
<iframe id='bframe' onload="this.style.width='123px';this.style.height='123px';base=history.length;gothere(history.length);" name='bframe' src='http://source.com' style='border: 0pt none ; left: -794px; top: -166px; position: absolute; width: 1600px; height: 799px;' scrolling='no'></iframe></div>
You should really put it in a function, tho:
document.getElementById('bframe').onload = function() {
this.style.width = '123px';
this.style.height = '123px';
base = history.length;
gothere(history.length);
}
In your specific case,
function resizeme() {
document.getElementById('bframe').style.width = '1230px';
document.getElementById('bframe').style.height = '1230px';
}
document.getElementById('bframe').onload = function() {
resizeme();
base = history.length;
gothere(history.length);
}
At least that's what I think you're trying to do. It defines a resizeme function that you can call whenever you like, and also gives the iframe an onload function to call resizeme and do other stuff (base and gothere).

http://jsfiddle.net/TmUfE/
Here we go! The source is a bit messy I didn't code it and I'm not an expert in this. However it should do this:
Whenever a link is pressed (more like a submit button in the iframe), it should redirect the whole page to something else. That has been the original source and it worked for my "special" site which I didn't put in the jsfiddle so the source itself is working for that matter!
I wanted to modify it so that when the submit within the iframed is clicked, it resizes and repositions the iframe (to crop another part of the second page and also have a larger iframe shown the content of it).
I found that this part
<div style='overflow: hidden; margin-top:-5px; width: 403px; height: 313px; position: relative;' id='odiv'>
was also doing its part when it comes to resizing it (thats why it didnt work in the first place).
So the first task would be: To resize the iframe in the iframes source with the width and height and such + the part I just entered here as well (dont know how to figure that out
and how to resize them via code).
I would also be paying as some sort of "thank you" / donate to someone helpful because I really cannot get it done myself no matter how hard I try.

Related

javascript: "everything has finished drawing to the screen" event?

Is there a javascript event I can hook into that will let me know when everything has finished drawing to the browser screen? Images, backgrounds, and DOM elements with proper CSS.
I am setting up some "loading..." divs that should disappear only when the page is perfect and ready to be shown to the user.
I am aware of $(document).ready and onLoad, but these are not what I mean.
I am using angularJS, but I dont think this should matter.
thanks!
As you may know, $(document).ready only waits for HTML structure and Javascript to load to trigger.
You better use :
$(window).load(function(){
//do stuff here
});
to wait for everything in your page to load (even pictures)
Though this solution will not trigger any event, it should help you.
Define CSS like this:
#dvLoading
{
background:#000 url(images/loader.gif) no-repeat center center;
height: 100px;
width: 100px;
position: fixed;
z-index: 1000;
left: 50%;
top: 50%;
margin: -25px 0 0 -25px;
}
Use the above in
<div id="dvLoading"></div>
And then do this:
$(window).load(function(){
$('#dvLoading').fadeOut(2000);
});
Demo: http://jsfiddle.net/jquerybyexample/ssqtH/embedded/result/
Source:http://www.jquerybyexample.net/2012/06/show-loading-image-while-page-is.html
Because you're using AngularJS, I can assume that your images and content are mostly loaded dynamically, in which case you cannot (easily) know when exactly all your content is even generated, and hence you'd also have no idea when all your images will be loaded since everything will be loaded asynchronously.
What you could do is have your DOM placeholders for widgets/apps/controllers be set to a loading-like state by default (a loading.gif maybe?) and when Angular generates the content it will just replace it. Look at http://docs.angularjs.org/guide/animations for how to implement animations on certain directives.
Then within those widgets/apps/controllers you would have to do the same thing with the content within them...
So basically it's a cascading "loading screen", where each level of your application loads up like a water fountain.
What is wrong with the $(document).ready or onLoad functionality?
$(window).load(function()
{
$(".loading").hide();
}

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);

html div not allowed to go off page

First off, let me give you a little background. I am creating a responsive page using % for positioning my divs. It allows the user to drag and drop items wherever they please. The issue arises when the user places the object to near the edge of the page. When you resize the browser the images start to go off the page and get cut off.
#div1
{
overflow: hidden;
right: <?php variable>;
bottom: <?php variable>;
}
#div2
{
overflow: hidden;
left: <?php variable>;
top: <?php variable>;
}
What I would like to try and do is allow the percentage's to control the placement up until the edge of the page. Then I would like to hardcode the variables to something like 10px so it never goes of the page.
I thought of doing this in javascript(if statement('s)), but thought maybe there was a simpler way(css properties). Any help or suggestions would be greatly appreciated.
Thanks,
Rob
If you are going to use javascript you need to have a separate function that triggers on browser resize:
window.onresize = function(event) {
//your code here
}
or if you are using the popular jQuery
$(window).resize(function(){
//your code here
});
is the same.
If you want to hardcode it with css use a #media query:
#media(max-width:767px) { /*or whatever you want to use to trigger the css that will be used after browser size fits your problem */
.myImage {left:10px;top:10px;}
}
More info on what you can use with #media can be found here http://www.w3.org/TR/css3-mediaqueries/
If you ask me I think that you will accomplish a much more solid solution using javascript and since I suspect you are using js to drag elements around just go with it for resizing and repositioning too.

Galleria Deletion Icon

I've been working with the Galleria package to create a image gallery. I'm now wanting to add a deletion tool so that a user can delete any image they so desire.
Using this demo as a baseline, I've taken the elements of code which I need and tried to incorporate it into my gallery page here. The problem is, is that I cannot get the 'bin' icon to appear at the bottom of each image, and hence I'm unable to see whether the function which makes the image disappear from screen actually works. I don't need the code that deletes the image from the server. I'll be dealing with that later on.
I'm really quite new to Javacript and jQuery, so please feel free to speak down to me. But I've been working on this for weeks now and I just can't find a solution.
I just wondered whether someone could perhaps look at this and let me know where I'm going wrong.
Many thanks and regards
adding this style to your CSS rule:
.btn-delete {
width: 14px; height: 14px;
margin: 38px 0 0 66px;
position: absolute;
}
.icon-remove { background-position: -312px 0; }
.icon-white { background-image: url('http://twitter.github.com/bootstrap/assets/img/glyphicons-halflings-white.png'); }
and in your jQuery:
$(".galleria-image").append(
"<span class='btn-delete icon-remove icon-white'></span>");
$(".btn-delete").live("click", function() {
var img = $(this).closest(".galleria-image").find("img");
alert('Deleting image... ' + $(img).attr("src"));
return false;
});
this will do something like:
Now, you can simply send an ajax request using $.get() for example, passing the ID/SRC of the image that the user wanted to delete and refresh your code/remove all images that belong to that selected one.

Unable to Hide Vertical Scroll Bar on Web Page

I am displaying an HTML page within another HTML page depending on which link is selected using the following function:
function loadProject(sel) {
var url = sel[sel.selectedIndex].value;
if(url) {
document.getElementById('projectContainer').innerHTML = '<' + 'object id="foo" name="foo" type="text/html" data="'+url+'"><\/object>';
} else {
document.getElementById('projectContainer').innerHTML = "Please select a project.";
}
}
And, I have a div tag inside the HTML with the id of projectContainer. This works, except for the fact that a vertical scroll bar is always shown no matter what I do to remove it. (It shouldn't be - even if I put nothing into the object, the vertical bar is still shown.) I have tried to edit the CSS in the following:
object {
width: 100%;
border: none;
overflow: hidden;
}
but that is not accomplishing what I'm looking for. Any suggestions? Thanks.
Using an <object> is new to me but very similar to an iframe, I suppose: It means that there is a document body that is separate from the surrounding document.
You need to declare overflow: hidden for the body inside the document you are embedding.
overflow: hidden won't work for content inside an iframe/frame/object. You are going to need to edit the CSS of the pages being rendered in the object tag. Also, I recommend you DO NOT do this, as you don't know if I have my browser set by default to have forced huge text due to bad sight or something similar, which would make the scrollbar unusable/hidden to me, hindering usability. Just don't do what you are trying to do.
make it overflow: auto; it works!

Categories

Resources