how to reload a page in another in an iframe - javascript

I have made 3 websites
http://ice-os.com
http://hannahmontana.sf.net
http://demilovato.sf.net
they use an iframe on the main page index.html and load all the pages in this iframe
what i want to do is if some goes to say http://en.ice-os.com/home.html instead of index.html I want to
reload this home.html in my index.html in the iframe
how can this be done?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
body{padding:0;margin:0;}
.myFloatBar{
top:0;
left:0;
width:50px;
position:fixed;
}
<style>
<style type="text/css">
html {overflow: auto;}
html, body, div, iframe {margin: 0px; padding: 0px; height: 100%; border: none;}
iframe {display: block; width: 100%; border: none; overflow-y: auto; overflow-x: hidden;}
</style></head><body style="background-color: rgb(35, 35, 35); color: rgb(0, 0, 0);" alink="#ee0000" link="#0000ee" vlink="#551a8b">
<div style="margin-left: 50px; font-family: monospace;"><iframe id="tree" name="tree" src="home.html" marginheight="0" marginwidth="0" frameborder="0" height="100%" scrolling="auto" width="100%"></iframe></div>
<div class="myFloatBar"><span style="font-family: monospace;"> </span><span style="color: rgb(233, 233, 233); font-family: monospace;">ć°·Bar</span><img src="http://ice-os.com/images/home.png" alt="Home" title="Home" onclick="document.getElementById('tree').src='home.html';document.title='Home'" style="width: 48px; height: 48px;"><img onclick="document.getElementById('tree').src='downloads.html';document.title='Downloads'" style="width: 48px; height: 48px;" alt="Downloads" title="Downloads" src="http://ice-os.com/images/downloads.png"><img onclick="document.getElementById('tree').src='links.html';document.title='Links'" style="width: 48px; height: 48px;" alt="Links" title="Links" src="http://ice-os.com/images/links.png"><img style="width: 48px; height: 48px;" onclick="document.getElementById('tree').src='projects.html';document.title='Projects'" alt="Projects" title="Projects" src="http://ice-os.com/images/projects.png"><img style="width: 48px; height: 48px;" alt="Revision Control" title="Revision Control" src="http://ice-os.com/images/revisioncontrol.png"><img style="width: 48px; height: 48px;" onclick="document.getElementById('tree').src='contact.html';document.title='Contact'" alt="Contact" title="Contact" src="http://ice-os.com/images/contact.png"><img onclick="document.getElementById('tree').src='about.html';document.title='About'" style="width: 48px; height: 48px;" alt="About" title="About" src="http://ice-os.com/images/about.png"></div>
</body></html>

Wow, it's been a while, but I've seen this done with Javascripts that force users into framesets. I remember it from back in the late 90s, but I think it's kind of fallen out of favor since users have generally hated frames. (Usually this was for navigation on sites that, for whatever reason at the time, either didn't support server-side includes or perhaps the developer didn't understand includes...)
You can probably Google "javascript open page in frameset" and find a sample.

Related

RESPONSIVE WEB LOOKS DIFERENT ON DEV-TOOLS THAN ON ACTUAL PHONE

I wanted to know if there is anything related to media queries i'm not aware of that is making my web projects look different on the dev tools and on a mobile device.
To be clear, I made a webpage and started adding media queries to make it responsive. I used chrome dev-tools to choose the iphone se as target and started re arranging each element till it looked as I expected. something like this :
enter image description here
but when I open the webpage on the actual phone it looks something like this :
enter image description here
here is the css:
#media screen and (max-width: 330px ){ /*for iphone 5/se */
#burter{
top: 19vh;
left: 24vw;
font-size: 9vw;}
#logo{
width: 23vw;
top: 17vh;
left: 0vw;}
#navtabs{
top: 30vh;
left: 2vw;
flex-direction: row;
height: 14vw;
width: 88vw;}
.divisor{
width: 8%;}
.tab{
font-size: 4vw;}
#imgside{
display: none;}
#sponsors{
width: 88vw;
height: 15vw;
top: 40vh;
left: 2vw;
flex-direction: row;
}
.sponsimg{
width: 14%;}
#welcome{
left: 28vw;}
#welcome h2{
font-size: 13vw;}
#welcome p{
width: 67vw;}
.homecontainer{
width: 64vw;
left: 9vw;
height: 43vh;
top: 57vh;}
.homeheader{
font-size: 6vw;}
.hometext{
font-size: 3vw;
line-height: 1.5;}
#map{
width: 70vw;
left: 12vw;
top: 53vh;
height: 30vh;}
#contactus{
left: 26vw;
top: 82vh;}
#divmedia{
width: 80vw;
left: 7.7vw;
bottom: 3vh;}
.media{
font-size: 9vw;}
#menucontainer{
top: 48vh;
height: 75vh;
width: 121vw;
left: -14vw;
justify-content: space-evenly;
}
}
and the html but most of the tings are created via vanilla js:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script defer src="./main.js"></script>
<title>Burter Burguer Inc.</title>
<link rel = "icon" href =
"../images/burguerlogo/logo.png"
type = "image/x-icon">
<link rel="stylesheet" href="stylesheet.css">
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA89atXDJHDp5fVs2YF-DB1fQXVbn3GgZM&callback=initMap">
</script>
</head>
<body id="body">
<div id="header">
<img id="logo" src="../images/burguerlogo/logo.png">
<h1 id="burter">BURTER INC.</h1>
<div id="navtabs">
<button id="homebutton" class="tab">HOME</button>
<div class="divisor"></div>
<button id="menubutton" class="tab">MENU</button>
<div class="divisor"></div>
<button id="contactbutton" class="tab">CONTACT</button>
</div>
<div class="removable" id="welcome">
<h2>WELCOME</h2>
<p>To your new favourite food...</p>
</div>
<img id="imgside" src="../images/Clever Photo Mashups by Stephen McMennamy.jpeg">
<div id="sponsors">
<img class="sponsimg" src="../images/mc_cain-removebg-preview.png">
<img class="sponsimg" src="../images/cocacola-removebg-preview.png">
<img class="sponsimg" src="../images/corona-removebg-preview.png">
<img class="sponsimg" src="../images/heinz.png">
</div>
</div>
<div style="display: none;" id="map"></div>
</body>
</html>
I looked for answers but couldn't find anything that could help me so I would really apreciate your help in order to fix these because I'm trying to build a portfolio but non responsive webs don't look good at all. Thank you !
It might be because your positioning of the elements are based on viewport size, but the actual size of the elements aren't shrinking/expanding based on viewport. I personally wouldn't use vh units, but if you must, try shrinking the elements slightly as viewport dimensions get smaller.

my second div where I put my unordered list not displaying ?

I'm trying to create a To-Do list app and when I'm getting to the second div where I want to create the unordered list, it is not displaying and I don't seem to know why it is not displaying. I've tried erasing that div and creating a enw one and writing a simple hello message but not even that displays. I'm guessing it has something to do with the first div for not allowing it.
<!doctype html>
<html>
<head>
<title>To Do list</title>
<style type="text/css">
#topBar-div{
background-color: #F44336;
position:absolute;
top: 0px;
width:100%;
height: 150px;
}
body{
margin: 0px;
padding: 0px;
}
h1{
color:white;
margin-left: 300px;
}
#textInput{
height: 30px;
margin-left: 100px;
width: 600px;
font-size: 20px;
color: #8E8E8E;
}
#addButton{
height:37px;
position:relative;
top:-4px;
right: 5px;
width: 70px;
color: grey;
}
#secondBar-div{
color: grey;
height: 350px;
width: 1000px;
}
</style>
</head>
<body>
<div id="topBar-div">
<h1>My To Do List</h1>
<input type="text" value="Title..." id="textInput">
<button id="addButton">Add</button>
</div>
<div id="secondBar-div">
<ul>
<li>Hit the gym</li>
<li>Pay bills</li>
<li>Meet George</li>
<li>Buy eggs</li>
<li>Study</li>
<li>Cook Dinner</li>
</ul>
</div>
<script type="text/javascript">
</script>
</body>
</html>
You are using position absolute in the style of the first div (topBar-div) so your second div (secondBar-div) moves up and is actually behind that first div.
Try adding this to #secondBar-div
margin-top: 150px;

facebook photo/ image vertical align?

How does facebook vertically align its photos? I inspected their img tag and its parent. The parent doesn't use padding and the img doesn't use margins. There is vertical-align, but I don't think it applies in this case(see Image not vertical-align:middle). I normally vertically align using margins (and sometimes with javascript) so I'm interested in how facebook does it without padding or margins. Does anyone know how they do it?
After doing some research in facebook's website i found the answer,here is the code
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.img_contain {
height: 700px;
text-align: center;
line-height: 700px;
border: #333333 1px solid;
}
.img_contain img {
display: inline-block;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="img_contain">
<img src="images/image.jpg" />
</div>
</body>
</html>
Only thing i was missing is adding <!DOCTYPE html> at the top of the document.Now its working.
And one more thing the height and line-height of the parent should be equal and it should be greater than height of the image it contains
TESTED CODE using display: table-cell
*refer to http://www.w3schools.com/cssref/pr_class_display.asp*
test page at http://anotherfeed.com/stack/css/valign.php
<!DOCTYPE html>
<html>
<head>
<title>StackOverflow on Another Feed</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
<div style="height: 500px; min-height: 500px; width: 500px; border: 1px solid; display: table-cell; vertical-align: middle; text-align: center">
<img src="http://anotherfeed.com/facebook_icon.png" style="display: inline-block; margin-left: auto; margin-right: auto;" />
</div>
</body>
</html>

Float over iframes html

Is it possible to float a nav bar over a iframe here is the code that i have so far?
the nav bar as you will be is in the html page and contains buttons that trigger the iframe to go to the next page etc.
Any ideas?
<!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>Fraud Protection - Course</title>
<style>
.backbutton[type="button"] {
border: 0;
background: url("back.png") no-repeat;
text-indent: -9999em;
line-height:3000;
width: 100px;
height: 35px;
cursor:pointer;
}
.nextbutton[type="button"] {
border: 0;
background: url("next.png") no-repeat;
text-indent: -9999em;
line-height:3000;
width: 100px;
height: 35px;
cursor:pointer;
}
.savebutton[type="button"] {
border: 0;
background: url("save.png") no-repeat;
text-indent: -9999em;
line-height:3000;
width: 100px;
height: 35px;
cursor:pointer;
}
</style>
</head>
<body>
<iframe src="" width="100%" class="naviframe" id="contentFrame" hieght="100%"></iframe>
<div id="navDiv">
<input type="button" class="backbutton" id="butPrevious" onclick="doPrevious();" value="<- Previous"/>
<input type="button" class="nextbutton" value="Next ->" img src="/images/Btn.PNG" id="butNext" onclick="doNext();"/>
<input type="button" class="savebutton" value="Save Progress" img src="/images/Btn.PNG" id="butExit" onclick="doExit();"/>
</div>
</body>
</html>
It is possible. You have to position the element to be floated, as absolute with negative margin.
Demo
It's possible with position: absolute;
Simple CCS for your nav bar:
.navDiv{
position: absolute;
top: 100px;
left: 100px;
}
Just change the values for top and left as you need. In this case, these values are relative to document.body.
You have a misstypo in height-attribute for iframe in your code. Also it seems that percentage is not allowed for iframe height, you have to use some other unit instead.

JSP / Javascript / CSS : auto resize div based on window size

I created a "master page" in jsp using frameset, and I included the master page in my other jsps where i have a in the where the contents will be. How can I change the size of the whenever the window size changes?
Below is my sample code :
masterPage.jsp
<html>
<frameset style="border: 0;" rows="135,*,38" style="z-index:1" >
<frame id="headerFrame" noresize="noresize" name="ffwHeader" frameborder="0" scrolling="no" src="header.jsp" style="z-index:1" />
<frame name="ffwMenu" frameborder="0" scrolling="no" src="menu.jsp" style="z-index:3" />
<frame name="ffwFooter" noresize="noresize" frameborder="0" scrolling="no" src="footer.jsp" style="z-index:1" />
</frameset>
index.jsp
<html>
<head>
<title>Upload A Disposition Rule</title>
<style type="text/css">
html, body, div, iframe { margin:0; padding:0; height:100%; }
iframe { display:block; width:100%; border:none; }
</style>
</head>
<body >
<div id="bodydiv" align="center" style="position:fixed; top:135px;left:182px; z-index:2; bottom: 38px; height: 510px; width: 1080px; overflow: auto; ">
<!--contents-->
</div>
<iframe src="masterPage.jsp" name="masterPage" />
</body>
Thanks in advance.
Currently your bodydiv is defined as
<div id="bodydiv" align="center" style="position:fixed; top:135px;left:182px; z-index:2; bottom: 38px; height: 510px; width: 1080px; overflow: auto; ">
Since you specified in the comment to the first answer by #user8900 that you want the bodydiv to be resizable when the window size changes, it sounds like you want to alter the width style attribute on your div.
<div id="bodydiv" align="center" style="position:fixed; top:135px;left:182px; z-index:2; bottom: 38px; height: 510px; width: '100%'; overflow: auto; ">
At that point, however, I think you could probably just remove the width style attribute from the div altogether. Further, as a general coding style note, you should think about moving all of your CSS style definitions to a .css file (or at least the existing <style> head section.)
<head>
<title>Upload A Disposition Rule</title>
<style type="text/css">
html, body, div, iframe { margin:0; padding:0; height:100%; }
iframe { display:block; width:100%; border:none; }
#bodydiv { position:fixed; top:135px;left:182px; z-index:2; bottom: 38px; height: 510px; width: '100%'; overflow: auto; }
</style>
</head>
<body>
<div id="bodydiv" align="center">
<!--contents-->
</div>
(etc...)
</body>
If you want to change the size of the iframe relative to the 'window' size, try using percentage values - with the body width at 100% E.g.
<iframe src="masterPage.jsp" name="masterPage" style="width: 80%; height: 80%;" />

Categories

Resources