Currently, the frame is on top of each other and some showed even if I did not choose it.
<div>
<div>
<iframe src="index2.php" width="100%" height="100%" name="index2"></iframe>
</div>
<div>
<iframe src="profile.php" width="100%" height="100%" name="profile"></iframe>
</div>
</div>
<label>Sample choices</label>
<div>
Home
profile
</div>
nothing will display first then if I select one the other is hide till I select it. the display should be on the same spot/place. Sorry newbies here.
you should try more go and dive into JQUERY or DOM MANU. If you are new you have to start somewhere
Not tested so excuse any typos but perhaps the following might be of help
<style>
#container > div{display:none}
</style>
<div id='container'>
<div>
<iframe src="index2.php" width="100%" height="100%" name="index2"> </iframe>
</div>
<div>
<iframe src="profile.php" width="100%" height="100%" name="profile"></iframe>
</div>
</div>
<label>Sample choices</label>
<div>
Home
profile
</div>
<script>
document.querySelectorAll( 'a[target]' ).forEach( a=>{
a.addEventListener('click',function(e){
e.preventDefault();
document.getElementById('container').querySelector( '[name="'+this.getAttribute('target')+'"]').parentNode.style.display='block';
});
})
</script>
A simple demo to illustrate the showing of the iframe. If this is not as intended please clarify the question
/*ifsrc1.php*/
<?php
echo " I am the iFrame source for index2";
?>
/* ifsrc2.php */
<?php
echo " I am the iFrame source for profile";
?>
The main page with the hidden iframes
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title></title>
<style>
#container > div{ display:none; width: 80%;height:10rem;border:1px solid red; margin:1rem auto;padding:0 }
</style>
</head>
<body>
<div id='container'>
<div>
<iframe src="ifsrc1.php" width="100%" height="100%" name="index2"> </iframe>
</div>
<div>
<iframe src="ifsrc2.php" width="100%" height="100%" name="profile"></iframe>
</div>
</div>
<label>Sample choices</label>
<div>
Home
profile
</div>
<script>
document.querySelectorAll( 'a[target]' ).forEach( a=>{
a.addEventListener('click',function(e){
e.preventDefault();
/* hide all */
document.querySelectorAll('#container > div').forEach( div=>{
div.style.display='none';
});
document.getElementById('container').querySelector( '[ name="'+this.getAttribute('target')+'" ]').parentNode.style.display='block';
});
})
</script>
</body>
</html>
Related
I don't post here often at all but only when I am stumped and I fos sure am.
I have a div tag with inside an article tag and the div tag wont extend the background held by the article tag.
The code I have is split into many different files to use jsfiddle so I'll post it here and provide screen shots of what is happening. If you guys can figure it out an explanation would be greatly appreciated.
This is a screen shot of whats happening, I want the twitter to be above the twitter widget, but it overflows under the facebook rather then extending the article background down.
This is the CSS: https://pastebin.com/y1MPG6rV
It is to many characters to paste here.
Image of whats happening on my end: https://imgur.com/a/GuUs1m4
This is the HTML:
<!-- Wrapper -->
<div id="wrapper">
<!-- About -->
<article id="about">
<h2 class="major">About.</h2>
<span class="image main"><img src="images/fbcover.jpg" alt="" /></span>
<div class="medias"><center>
<div>
<span>Facebook</span>
<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FDelusionsEntertainment%2F&tabs&width=340&height=180&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="300" height="180"
style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>
</div>
<div class="cust">
<span>Twitter</span>
<a class="twitter-timeline" data-width="305" data-height="356" data-theme="light" href="https://twitter.com/DelusionsENT?ref_src=twsrc%5Etfw">Tweets by DelusionsENT</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
</center></div>
</article>
</div>
<!-- Footer -->
<footer id="footer">
<p class="copyright">Delusions Entertainment™</p>
</footer>
</div>
<!-- BG -->
<div id="bg"></div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script>
/* Demo purposes only */
$(".hover").mouseleave(
function() {
$(this).removeClass("hover");
}
);
</script>
</body>
</html>
Instead of fixed height you can use this:
.medias { height:auto }
I have a popup which contains the facebook iframe and its seems like the inline stylesheet method in not work
<div data-html="allow" >
<iframe style="border: 0px; display: block" height="400" class="spoooky-auth" src="https://api.spooo.ky/auth/facebook" border="0"></iframe>
</div>
I am trying to increase the width and height of the iframe but its not work.any clue?
Any help is appreciated.
thanks,
I'd use JS for this, like so:
<div data-html="allow" >
<iframe id="iframe1" style="border: 0px; display: block" height="400" class="spoooky-auth" src="https://api.spooo.ky/auth/facebook" border="0"></iframe>
</div>
<script type="application/javascript">
function resizeIframe {
iframe.width = iframe.contentWindow.document.body.scrollWidth;
iframe.height = iframe.contentWindow.document.body.scrollHeight;
}
window.addEventListener('DOMContentLoaded', function(e) {
var iframe = document.getElementById( 'iframe1' );
resizeIframe;
} );
</script>
I have a webpage which is the main index.html and another projects_imgs.html which will be the iframe src inside the index.html
Inside the projects_imgs.html there will be images. What I want to do is,
In index.html I want to add <a> tags that links to the images inside projects_imgs.html, so whenever the user clicks these links the iframe loads the clicked link that targets a specific image
get the idea?
So far here is the code of index.html:
<!-- Projects section -->
<div class="section projects-section" id="section4">
<div class="container-fluid">
<div class="row">
<div class="col-lg-9">
<iframe class="pull-right" width="85%" height="700px" src="projects_imgs.html" name="projects_gallery"></iframe>
</div>
</div>
<p>Images</p>
</div>
</div>
and projects_imgs.html:
<!DOCTYPE html>
<html>
<head>
<title>MH-Shukri Projects Gallery</title>
<!--- Bootstrap CSS --->
<link rel="stylesheet" href="bootstrap/css/bootstrap.css" />
<!--- Bootstrap Theme --->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous" />
</head>
<body>
<style>
body {
background-color: #34312C;
}
img {
position: fixed;
width: 100%;
height: 100%;
}
</style>
<div class="row">
<div class="col-lg-12">
<img class="img-responsive" src="imgs/projects/Faf/1.jpg"/>
<img class="img-responsive" src="imgs/projects/Faf/2.jpg"/>
<img class="img-responsive" src="imgs/projects/Faf/3.jpg"/>
<img class="img-responsive" src="imgs/projects/Faf/4.jpg"/>
<img class="img-responsive" src="imgs/projects/Faf/5.jpg"/>
<img class="img-responsive" src="imgs/projects/Faf/6.jpg"/>
</div>
</div>
</body>
</html>
To implement such a logic in html only is not possible i think.
I suggest you to use PHP to implement this logic. Here is a small example:
index.html
<html>
<body>
Images: <br>
Image 1 <br>
Image 2
</body>
</html>
These links call images.html with the parameter "image". As you can see, we set "image" to 1 or 2, depends on what the user is clicking on.
images.html
<html>
<body>
<?php
if($_GET["image"] == 1)
{
echo "<img src='Image1'/>";
}
if($_GET["image"] == 2)
{
echo "<img src='Image2'/>";
}
?>
</body>
</html>
In images.html you decide with an IF Statement. If it was 1, then you just call the with the Image 1. If 2....
You can use that to implement it with your iFrame. But keep in mind that you need a webserver who understands PHP to get this running!
Have a nice day!
I actually figured it out!
I do it like this:
function setURL(url){
document.getElementById('iframe').src = url;
}
<iframe id="iframe" src="index.html" width="50%" height="250px"></iframe> <br>
A01-FAF-1<br>
A01-FAF-2<br>
A01-FAF-3<br>
A01-FAF-4<br>
A01-FAF-5<br>
A01-FAF-6<br>
Just replace the images with some random google images link to test it.
I have an iframe links within an html page as shown below:
<TABLE border="0" width="900">
<tr valign="top">
<td width="300" ALIGN=center>
<div class="item_list">
link
</div>
</td>
<td width="300" ALIGN=center>
<div class="item_list">
<iframe src = 'http://www.flipkart.com/affiliate/displayWidget?affrid=WRID-137232779171598318' frameborder = 0, height=250, width = 300 > </iframe></a><br>
</div>
</td>
<td width="300" ALIGN=center>
<div class="item_list">
<iframe src = 'http://www.flipkart.com/affiliate/displayWidget?affrid=WRID-137232785207215857' frameborder = 0, height=250, width = 300 > </iframe>
Now when i click within an iframe link , it open the link, but when i click back, it automatically redirect me to that iframe link. Can anyone suggest me what's the problem i'am having?
In your case I would implement my own controls for each iframe. Delegate this work to some buttons on your page instead:
<div id="view_iframe">
<iframe id="viewer" name="viewer" width="100%" height="600" src="some.html">
<p>Your browser does not support iframes.</p>
</iframe>
<input type="button" id="back" class="button" onClick="viewer.history.back();" value="<<" />
<input type="button" id="frwrd" class="button" onClick="viewer.history.forward();" value=">>" />
</div>
note - viewer is iframe id
note that both buttons, are positioned absolutely to align with iframe on page resize.
anyway, here are what the iframe controls for this:
// For an iframe's window
iframe.contentWindow.history.back();
iframe.contentWindow.history.forward();
or
iframe.contentWindow.history.go(-1); // back
iframe.contentWindow.history.go(1); // forward
First of all, sorry for my english I'm still learning so I will try to explain myself as best as possible.
My question is, how can I fit the iframe height at 100%? I tried different solutions but anything works. This is my code:
HTML:
<div id="header_PA">
<div id="menu_PA">
<div id="logo_PA">
<img src="_images/1.png" title="Local PA" id="logo">
</div>
<div id="sections_PA">
...
</div>
<div id="user_box">
...
</div>
</div>
<div id="sub_menu_PA"> </div>
</div>
<iframe id="iframe_PA" src="_local_pa/dashboard.php" ></iframe>
<div class="smallFooter">
...
</div>
CSS:
#header_PA{
position: fixed;
width: 100%;
height: 70px;
z-index: 999;
}
#iframe_PA{
width: 100%;
height: 100%;
margin-top: 73px;
}
.smallFooter {
background: #121212;
}
I have skipped unnecessary parts of the HTML and CSS code.
The result of that, you can see it in this picture:
Screen Capture
Apparently the width property works but the height no. Anybody knows how can I solve it?
Thanks in advance!
Try this code to set the iframe width and height,
<iframe src="_local_pa/dashboard.php" width="100%" height="200"></iframe>
You need a little bit of javascript to adjust the height of the iframe element.
this works:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR...nsitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>auto iframe height adjust</title>
<style>
</style>
<script type="text/javascript">
<!--//
function sizeFrame() {
var F = document.getElementById("myFrame");
if(F.contentDocument) {
F.height = F.contentDocument.documentElement.scrollHeight+30; //FF 3.0.11, Opera 9.63, and Chrome
} else {
F.height = F.contentWindow.document.body.scrollHeight+30; //IE6, IE7 and Chrome
}
}
window.onload=sizeFrame;
//-->
</script>
</head>
<body>
<iframe width="100%" id="myFrame" src="thispage.htm" scrolling="no" frameborder="0">
An iframe capable browser is
required to view this web site.
</iframe>
</body>
</html>
Original source: http://w3schools.invisionzone.com/index.php?s=59fbfe0376deb43204ffff5aaf04736f&showtopic=26417#entry145317