How can i adjust an iframe after a button press? - javascript

I'm trying to adjust the iframe after a press of a button. The problem is when you press the button and look for a flight (for example from Madrid to Barcelona) and it shows you the flights, a second scrollbar appears (main page scrollbar and the iframe scrollbar). How can I adjust the height of the iframe depending on the search results to use the main scrollbar? The code is here:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Probando la altura fija</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
html {
height: 100%;
}
body {
height: 100%;
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<iframe src='http://www.dohop.com/widget/2/?forms=flights&target=&tabs=top&orientation=horizontal&border_color=808080&text_color=202020&background_color=D0D0D0&form_border_color=808080&form_text_color=000&form_background_color=FAFAFA&width=1000&flang=es&whitelabel=http://vuelos.gangatravel.es/' scrolling='yes' width='1000' height='250' frameborder='0' style='border:none; overflow: hidden;' allowtransparency='true'>
</iframe>
<div style='text-align: right; width: 1000px; display:block; margin-top:5px;'>
<a href='http://www.dohop.com' style='font-size:10px;text-decoration:none;color:#007BA4;'></a>
</div>
</body>
</html>
Thanks!!

<div id='iframe_holder' style="overflow:hidden" >
<iframe style="width:100%;height:100%"></iframe>
</div>
you control the div dimension and position from js and the iframe will adapt its scroll bars.
or
var ifr_document = document.getElementById("iframe_id").contentWindow.document;
var target = ifr_document.getElementById("element_to_control");

Related

Use an iframe with editable website

I want to create a website where I can write and preview a website. The problem is that I want to preview it in an iframe, because then the website isn't influenced by the HTML code around the iframe.
Is there a way to show a webpage in an iframe tag with a string as source instead of an URL?
This is how it should look (just an iframe).
<textarea onkeyup="document.getElementById("body").innerHTML=this.value;"></textarea>
<div id="body"></div>
In fact, JSFiddle does the same, so there must be a way. Ideas?
You can modify the content of the document specified by the src attribute, using contentWindow.document. So, assuming you had a <textarea> with the markup you want to preview, you could do something like this:
Editor document:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Edit iframe example</title>
<style>
.editors, .preview { float: left; display: block; }
.editors { width: 500px; margin-right: 25px; }
.editors textarea { width: 100%; height: 300px; }
.preview { width: 800px; }
.preview iframe { width: 100%; height: 800px; }
</style>
</head>
<body>
<div class="editors">
<p>
<label>CSS</label>
</p>
<p>
<textarea id="preview-editor-CSS" onkeyup="updatePreviewCSS(this)"></textarea>
</p>
<p>
<label>HTML</label>
</p>
<p>
<textarea id="preview-editor-HTML" onkeyup="updatePreviewHTML(this)"></textarea>
</p>
</div>
<div class="preview">
<iframe id="preview" src="preview.html"></iframe>
</div>
<script>
function updatePreviewHTML(elem) {
var frame = document.getElementById('preview');
var content = elem.value;
frame.contentWindow.document.body.innerHTML = content;
}
function updatePreviewCSS(elem) {
var frame = document.getElementById('preview');
var content = elem.value;
frame.contentWindow.document.getElementsByTagName('style')[0].innerHTML = content;
}
</script>
</body>
</html>
The "preview" document:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Preview iframe example</title>
<style></style>
</head>
<body>
</body>
</html>
I've only tried this locally, on Firefox 31, so caveat emptor.

Javascript changing background color

I tried to change a background color with javascript and it didn't work out, and after lots of trying I didn't find any problem.
var x=1;
switch(x) {
case 1: {
document.getElementsByClassName("gallery").style.backgroundColor="blue";
}
}
I don't see any need to copy html or css to here. If this code is fine though I'll edit and add the other codes.
Edit: Html added, as you requested.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>פרדס מרים ומרדכי</title>
<link href="../../CSS.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" src="Album1.js" type="text/javascript"></script>
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="menu">
<pre class="menu1"><a class="menu1" href="../../index.html">דף הבית</a> <a class="menu1" href="../../HowToArrive.html">כיצד מגיעים</a> <a class="menu1" href="../../HowItAllBegan.html">איך הכל התחיל</a> <a class="menu1" href="../../Albums.html">אלבומי תמונות</a> <a class="menu1" href="../../Contact.html">צור קשר</a></pre>
</div>
<div id="main">
<div class="gallery_bg">
<div class="gallery"></div>
</div>
</div>
</div>
</body>
</html>
Edit: CSS added. I believe you only need the part referring to the gallery class. The whole code is really long, if you need it I'll add it too, just say.
.gallery {
width:550px;
height:550px;
-webkit-background-size: 550px 550px;
-moz-background-size: 550px 550px;
background-size: 550px 550px;
border:#fff 3px solid;
margin:0 auto;
}
Try this:
document.getElementsByClassName("gallery") returns NodeList , and it is like Array , so you can do:
document.getElementsByClassName("gallery")[0].style.backgroundColor="blue";
Or do it in loop:
var galleries = document.getElementsByClassName("gallery");
var len = galleries.length;
for(var i=0 ; i<len; i++){
galleries[i].style.backgroundColor="blue";
}
"document.getElementsByClassName" work like an array if you want to change the backgrouond color you have to use loop to change the color.
Solution:
const ulList = document.getElementsByClassName("list-item");
for(var i = 0; i < liList.length; i++){
ulList[i].style.backgroundColor = 'red';
}

Trying to make animated nav bar in Jquery

Im attempting to make a navigation bar with Jquery. the idea is that you click on the navigation button and several links(in the form of divs) will slide out. However, i am unable to get the initial click action to work. Currently im just trying to move the #Home button to the left 100px after you click the #clickme button.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src = "jquery-2.0.1.js"></script>
<script>
$("#clickme").click(function(){
$("#Home").animate({left: 100} , "fast");
});
</script>
<style type="text/css">
#Nav {
position:absolute;
width:200px;
height:115px;
z-index:1;
top: 268px;
left: 530px;
background-color: blue;
}
.Button{
position:absolute;
width:200px;
height:115px;
z-index:0;
background-color:#693;
}
</style>
</head>
<body>
<div id="Nav">
<div id="Home" Class = "Button">Home</div>
<div id="About" Class = "Button">About The Internship</div>
<div id="Meet" Class = "Button">Meet the Interns</div>
<div id="Request" Class = "Button">Request an Intern</div>
<div id="clickme" Class = "Button">Navigation</div>
</div>
</body>
</html>
You have to wait 'till your dom is ready + you've the wrong selector.
.ID is for Classes (css)
#ID is for actual ID's
$(function(){
$("#clickme").click(function(){
$("#Home").animate({left: 100} ,"fast");
});
})
This should work..
In addition to stackErr's answer:
'fast' should be passed as a string.
fiddle: http://jsfiddle.net/jonigiuro/xt57a/
$("#clickme").click(function(){
$("#Home").animate({left: 100} ,'fast');
}
the problem seems to be with the selector. id must be used with # not with .
try
$("#clickme").click(function(){
$("#Home").animate({left: 100} ,fast);
});
you can place this code at the bottom before </body> using scripts at the bottom of the page makes page faster & executes when dom is ready. otherwise wrap the codde with $(function())
Your id selector is incorrect.
Your code should be:
$("#clickme").click(function(){
$("#Home").animate({left: 100} ,'fast');
});
this shouldnt matter but script tag should have the type attribute since you are not using HTML5:
<script type="text/javascript" src="jquery-2.0.1.js"></script>

How to generalize this script for multiple popups on mouseover

I have a script that works to switch between two popups that are triggered by an onmouseover event. One feature of this is that the popup persists until the next onmouseover event. I want to have many of these and so the popup to be hidden can not be 'hard coded' as in my script. Is there a way to store in a variable the id of the popup that needs to be undisplayed the next time the popup function is called?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript">
function popup(show,hide){
show.style.display="block"
hide.style.display="none"
}
</script>
<style type="text/css">
.pop {
position: absolute;
display: none;
top: 50px;
left: 200px;
width: 300px;
}
</style>
</head>
<body>
<table><tr>
<td onmouseover="popup(pop1,pop2)">Show popup 1</td>
<td onmouseover="popup(pop2,pop1)">Show popup 2</td>
</tr></table>
<div class="pop" id="pop1">This is popup 1</div>
<div class="pop" id="pop2">Popup 2 is here</div>
</body>
</html>
or go to http://www.salemharvest.org/Utilities/TestingPHP/testingpopupdivs5.php
One way to generalize it is to use element index to show the associated popup. This will require that the popup elements (pop class elements) is contained by an element, in order to make both the popper and the popup element indexes mapped equally like two arrays of same length.
When showing a popup, the popup element is saved in a variable which will be used later when the mouse is on a different popper element.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript">
addEventListener("DOMContentLoaded", function() {
var lastPopup = null;
function showit(ev) {
var popups = document.getElementById("popups").children;
eleToShow = popups[ev.target.cellIndex];
if (lastPopup && (lastPopup !== eleToShow)) lastPopup.style.display = "none";
eleToShow.style.display = "block";
lastPopup = eleToShow;
}
var poppers = document.getElementById("poppers").cells, i;
for (i = 0; i < poppers.length; i++) {
poppers[i].addEventListener("mouseover", showit, false);
}
}, false);
</script>
<style type="text/css">
.pop {
position: absolute;
display: none;
top: 50px;
left: 200px;
width: 300px;
}
</style>
</head>
<body>
<table><tr id="poppers">
<td>Show popup 1</td>
<td>Show popup 2</td>
</tr></table>
<div id="popups">
<div class="pop">This is popup 1</div>
<div class="pop">Popup 2 is here</div>
</div>
</body>
</html>
I probably should have started with this, but my poppers will actually be rows, not cells. I tried what seemed like simple modifications of Jay's code to do it with rows. I changed it to index rows and then used rowIndex to find the popups, but I am missing something.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript">
// function by Jay at stackoverflow
addEventListener("DOMContentLoaded", function() {
var lastPopup = null;
function showit(ev) {
var popups = document.getElementById("popups").children;
eleToShow = popups[ev.target.rowIndex];
if (lastPopup && (lastPopup !== eleToShow)) lastPopup.style.display = "none";
eleToShow.style.display = "block";
lastPopup = eleToShow;
}
var poppers = document.getElementById("poppers").rows, i;
for (i = 0; i < poppers.length; i++) {
poppers[i].addEventListener("mouseover", showit, false);
}
}, false);
</script>
<style type="text/css">
.pop {
position: absolute;
display: none;
top: 100px;
left: 200px;
width: 300px;
}
</style>
</head>
<body>
<table id="poppers">
<tr><td>Show popup 1</td></tr>
<tr><td>Show popup 2</td></tr>
<tr><td>Show popup 3</td></tr>
</table>
<div id="popups">
<div class="pop">This is popup 1</div>
<div class="pop">Popup 2 is here</div>
<div class="pop">And then popup 3</div>
</div>
</body>
</html>

Javascript Resize

I have very little javascript knowledge, so it seems a very basic question, but could not find a way to do that.
I have a 1024*768 fixed area like this:
alt text http://img260.imageshack.us/img260/4618/myimage.png
There will be a javascript button on the right side of the "Section A". When I click that button, Section A will be automatically resized and it will be something like this:
alt text http://img705.imageshack.us/img705/92/myimage1.png
So, Section A will overlap with Section B, and it will be same size with Section C (And i know the size of Section C). How can I automatically resize that area with overlap function? I am looking a plugin for Jquery, but could not find that. There is a resizable function in Jquery, but it does not help me. Could you help me out? (If you just give me a link that is related with this feature, that would be enough too)
edit: For extra note, Section A is a flash object, so it will enlarge and overlap with Section B when I click to that button.
Thanks,
The jQuery hide() effect would be useful here. If both Section A & Section B have a float: left Section A should expand to fill the area when Section B is hidden.
http://docs.jquery.com/Effects/hide
Have you tried the animate function?
http://docs.jquery.com/Effects/animate
Could have Section B hide with a slide or have Section A overlap it like you mentioned just need to set the positioning, z-index, etc. properly.
something like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Terminal</title>
<script src="/js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#but').click(function (e) {
$('#a').removeClass('big').addClass('normal');
$('#b').hide();
e.preventDefault();
});
});
</script>
<style type="text/css">
.height {
height: 100px;
border: 1px solid black;
}
.big {
width: 198px;
float: left;
}
.small {
width: 100px;
float: left;
}
.normal {
width: 300px;
clear: both;
}
</style>
</head>
<body>
<div>button</div>
<div id="a" class="height big">a</div>
<div id="b" class="height small">b</div>
<div class="height normal">c</div>
</body>
</html>

Categories

Resources