I have a page where I am displaying a iframe from another page. I want that iframe to be display:none at load and become visible onClick. The issue is, I can get it to work if the div is visible at load. If it is hidden at load, the onclick doesnt work properly.
<script>
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
<div style="margin-top:30px;">
<h2>Menu</h2>
<p>Dayton, Ohio Menu Coming Soon. It can be viewed currently at here</p>
<p><a onClick="myFunction()">Springfield, Ohio Menu</a></p>
<div>
<div id="myDIV" style="display: none">
<div id="leafly-menu">
</div>
<div style="text-align:center;">
</div>
<script src="https://www.leafly.com/public/global/js/dispensarymanager/embed.js"></script>
<script>var pymParent = pym.Parent('leafly-menu', 'https://www.leafly.com/embed/menu2/pure-ohio-wellness---springfield', {});</script>
</div>
<div style="overflow: hidden; margin: 15px auto; max-width: 975px;display: none;">
<iframe scrolling="no" src="https://www.leafly.com/dispensary-info/pure-ohio-wellness---springfield" style="border: 0px none; margin-left: -36px; height: 1012px; margin-top: -486px; width: 1050px;">
</iframe>
</div>
</div>
</div>
I think the functionality you're looking for here can be solved with the visibility:hidden tag, as I've had similar experienced with the "display:none" css property.
Definitely worth another google for differences between the two, but the w3schools snippet here seems to summarize things pretty well.
Hope this helps!
You can easily display the elements inside the Div using the click() function of jQuery. You need to include the jQuery CDN or jQuery file to run the jQuery scripts.
$(document).ready(function() {
$("#showMe").click(function () {
$("#myDIV").show();
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div style="margin-top:30px;">
<h2>Menu</h2>
<p>Dayton, Ohio Menu Coming Soon. It can be viewed currently at here</p>
<p><a id = "showMe" href="#">Springfield, Ohio Menu</a></p>
<div id="myDIV" style="display: none">
<div >
<div id="leafly-menu">
</div>
<div style="text-align:center;">
</div>
<script src="https://www.leafly.com/public/global/js/dispensarymanager/embed.js"></script>
<script>var pymParent = pym.Parent('leafly-menu', 'https://www.leafly.com/embed/menu2/pure-ohio-wellness---springfield', {});</script>
</div>
<div style="overflow: hidden; margin: 15px auto; max-width: 975px;">
<iframe scrolling="no" src="https://www.leafly.com/dispensary-info/pure-ohio-wellness---springfield" style="border: 0px none; margin-left: -36px; height: 1012px; margin-top: -486px; width: 1050px;">
</iframe>
</div>
</div>
</div>
I have updated the Fiddle with the two menus.
https://jsfiddle.net/9b15gw0f/
All,
New programmer here, so thanks for any help.
I'm working with a number of files and i'd like to link the selection from the drop down box to what is contained in 4 Iframes on the page.
I can code the options so that each Iframe has a drop down for selection, but I cant figure out how to control all four iframes with just one drop down at the top.
<title></title>
<script type="text/javascript">
function newSrc() {
var e = document.getElementById("MySelectMenu");
var newSrc = e.options[e.selectedIndex].value;
document.getElementById("MyFrame").src=newSrc;
}
</script>
<style type="text/css">select {clear:both;}
</style>
<p dir="ltr"><iframe id="MyFrame" src="MainIntropage1.html" style="width:
700px; height: 750px;"></iframe><select id="MySelectMenu"><option
value="Option1page1.html">Option1</option><option
value="Opion2page1.html">Option2</option><option
value="Option3page1.html">Option3</option> </select></p>
<p dir="ltr"><iframe id="MyFrame" src="MainIntropage2.html" style="width:
700px; height: 750px;"></iframe><select id="MySelectMenu"><option
value="Option1page2.html">Option1</option><option
value="Opion2page2.html">Option2</option><option
value="Option3page2.html">Option3</option> </select></p>
<p dir="ltr"><iframe id="MyFrame" src="MainIntropage3.html" style="width:
700px; height: 750px;"></iframe><select id="MySelectMenu"><option
value="Option1page3.html">Option1</option><option
value="Opion2page3.html">Option2</option><option
value="Option3page3.html">Option3</option> </select></p>
<p dir="ltr"><iframe id="MyFrame" src="MainIntropage2.html" style="width:
700px; height: 750px;"></iframe><select id="MySelectMenu"><option
value="Option1page4.html">Option1</option><option
value="Opion2page4.html">Option2</option><option
value="Option3page4.html">Option3</option> </select></p>
<p dir="ltr"><button onclick="newSrc();">Get Chart</button></p>
I’m trying to avoid building individual pages and using a simple drop down to navigate to those pages. It seems I could make it dynamic this way.
Any help would be greatly appreciated.
I am new to HTML and wish to do something that should be fairly simple. I have searched for similar questions and tried the solutions, but none are working.
I want to display two documents in a web page side-by-side when a link is clicked. The documents are stored remotely and are not static. One is a PDF, the other is an image, so I feel the PDF may need to be embedded so there is a scroll bar?
Both documents are displaying, but the second document (image) partially lays over the first in the centre of the screen.
The code I have is as follows:
<b>Click me to view files</b>
<div id= "light"><a href= "#" onclick= "lightbox_close();"><embed src= "?php
echo $address ?>" style= "float: left;"/><img src = "<?php echo $address2
?>" style= "float: left; " /></a></div>
<div id= "fade" onclick="lightbox_close();"></div>
<div>
**Note that the lightbox_open() and lighbox_close() functions are simply there to dim the screen when the screen when the documents are displayed.
Any help with this would be greatly appreciated.
Source code is exactly same just replaced iframe with embed.
<style> html,
body {
width: 100%;
height: 100%;
}
#doc1,
#doc2 {
display: inline-block;
width: 49%;
height: 100%
}
iframe {
width: 100%;
height: 100%;
border: none;
}
#doc1 {
background-color: red;
}
#doc2 {
background-color: blue;
}
<html>
<head>
</head>
<body translate="no">
<div id="doc1">
<iframe src="http://www.pdf995.com/samples/pdf.pdf"></iframe>
</div>
<div id="doc2">
<iframe src="http://www.pdf995.com/samples/pdf.pdf"></iframe>
</div>
</body>
</html>
You Wont Be able to see the iframe here as the snippet in stackoverflow is inside a iframe already and iframe cannot be loaded inside another iframe.
I have two html pages, "page1.html" and "page2.html".
page1.html contains a css menu list which will link to page2.html. Part of sample code is below:
<div class="menu">
<ul>
<li>page1</li>
<li>page2
<ul>
<li><a href="page2.html" onclick="displaypdf1();" >pdf1</a></li>
<li>pdf2</li>
when click on one of the link , the tag in "page2.html". However i cannot achieve this. it does not load the pdf correctly.
displaypdf1() javascript function as below:
function display_cover(){
var myPDF = new PDFObject({
url: 'Cover.pdf',
pdfOpenParams: {
view: 'FitB',
viewrect:
'0,0,1000,900',
pagemode: 'none',
scrollbars: '1',
toolbar: '1',
statusbar: '1',
messages: '1',
navpanes: '1' }
}).embed('pdf_display');
}
i'm using pdfObject for opening pdf.
In short i wish to open a pdf file through page1.html css menu.PDF will then be displayed on page2.html in a tag How can i achieve that? Thank you!
You can do this with ajax as follows:
Page 1 HTML
<style>
.wrapper {background-color: #cdcdcd; width: 100%; height: 700px }
object {margin: 0; padding: 0; height: 100%; width: 100%; }
#target { width: 600px; height: 650px; }
input { position:relative; left:20px; }
</style>
<body>
<div class="wrapper">
<input type="button" value="Go">
<div id="target"></div>
</div>
</body>
The button is the trigger,. It can be triggered with an a ref or even a list item from a nav menu.
The id target can be placed in any page as well. I made it so that it displays in this same page but you can change it as you please.
Page 1 JS/JQUERY
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
$('input').click(function(){
$('#target').load('page2.html');
});
});
</script>
Hopefully this works for you
Page 2 HTML
This is the PDF in an object element that will be loaded as an external page inside your page without refreshing the page or in another page if you choose that.
<object data="https://bitcoin.org/bitcoin.pdf" type="application/pdf" width="50%" height="700px">
alt : page2.pdf
</object>
I tried with your suggestions and it works wonderfully on internet explorer but not chrome. Something wrong with .load. The page has displayed blank. Based on the concept that you had given, i managed to solve my problem!
JS/JQUERY
//script for display Cover.pdf
$(document).ready(function(){
$('#input').click(function(){
document.getElementById('project_details').innerHTML =
'<object type="application/pdf" data="pdf1.pdf" width=1000px height="810px" >
</object>'
});
});
I created a sample based on your idea with the JS above and it works. Hopefully this will be useful for someone else. Thanks lotusms.
Please see the picture attached with this question. I have four tables with me. When I click certain table name (eg Table 1), I want that table to get displayed in the right hand side. When I click on some other table name, previous one should disappear and present one should be displayed.
I know only html. So, please tell me if this can be done alone with html. If not, I am allowed to use only CSS and JavaScript (I am new to both of these and will learn if they will be helpful, depending on your answer). If this can be achieved using only these 3 languages (viz HTML, CSS and JavaScript), please tell.
Here is the simplest way for you to start. It gives you an easy way to follow what's going on and how things works.
Also with this solution it's easy to add a server side code (asp/php) to deal with users who has javascript disabled.
Demo: http://jsfiddle.net/DEv8z/2/
Javascript
function show(nr) {
document.getElementById("table1").style.display="none";
document.getElementById("table2").style.display="none";
document.getElementById("table3").style.display="none";
document.getElementById("table4").style.display="none";
document.getElementById("table"+nr).style.display="block";
}
CSS
td {
vertical-align: top;
}
#table1, #table2, #table3, #table4 {
display: none;
}
HTML
Other things goes here ... <br /><br />
<table>
<tr>
<td>
<a href="#" onclick='show(1);'>Table 1</a>
<br />
<a href="#" onclick='show(2);'>Table 2</a>
<br />
<a href="#" onclick='show(3);'>Table 3</a>
<br />
<a href="#" onclick='show(4);'>Table 4</a>
</td>
<td>
</td>
<td>
<div id="table1"> Content of 1 </div>
<div id="table2"> Content of 2 </div>
<div id="table3"> Content of 3 </div>
<div id="table4"> Content of 4 </div>
</td>
</tr>
</table>
UPDATE
Using a file for each table would look like this:
table1.html
Other things goes here ... <br /><br />
<table>
<tr>
<td>
Table 2
<br />
Table 3
<br />
Table 4
<br />
.....
</td>
<td>
</td>
<td>
Content of 1
</td>
</tr>
</table>
-----------------------------------------------------
table2.html
Other things goes here ... <br /><br />
<table>
<tr>
<td>
Table 1
<br />
Table 3
<br />
Table 4
<br />
.....
</td>
<td>
</td>
<td>
Content of 2
</td>
</tr>
</table>
And if you can use server side includes and your "Other things...." will be the same for all tables, you can put that part in a separete file which gets injected with the each table content.
Try this FIDDLE
HTML :
<span id="sp1">Table 1</span>
<span id="sp2">Table 2</span>
<span id="sp3">Table 3</span>
<span id="sp4">Table 4</span>
<table border="1" id="t2">
<tr><td>22</td></tr>
<tr><td>22</td></tr>
</table>
<table border="1" id="t3">
<tr><td>33</td></tr>
<tr><td>33</td></tr>
</table>
JS :
document.getElementById('sp1').addEventListener("click",function(){
showTable('t1');
});
document.getElementById('sp2').addEventListener("click",function(){
showTable('t2');
});
function showTable(table){
var tables =['t1','t2','t3','t4'];
for(var i=0;i<4;i++){
document.getElementById(tables[i]).style.display = "none";
}
document.getElementById(table).style.display = "block";
}
P.S : Since I see no effort, the styling part i'm leaving it to you.
You will need JavaScript to do this. I have a JSFiddle with the code below. JSFiddle is interactive and lets you play with the solution. I'm relying on a popular JavaScript framework named jQuery to make this a bit easier. You will need to load the jQuery framework into your site to get this to work. Here is the JSFiddle link: http://jsfiddle.net/sU9Pf/
Here is the code that you can run interactively in the above JSFiddle link. First some example HTML:
<table id="one" border="1"><caption>Table One</caption></table>
<table id="two" border="1"><caption>Table Two</caption></table>
<table id="three" border="1"><caption>Table Three</caption></table>
<table id="four" border="1"><caption>Table Four</caption></table>
<div id="showTableHereWhenTableIsClicked">
<p>Click A Table To Show It Here</p>
</div>
Next is the JavaScript that makes it do what you want:
$(function() {
$('table').on('click', function() {
var tableClone = $.clone(this);
var stage = $('#showTableHereWhenTableIsClicked');
stage.prop('innerHTML', '');
$(tableClone).appendTo(stage);
});
});
The easiest way it can be done with just HTML would require you to build 4 different pages and just link between them. If you want it to 'seem' like it is all on one page, you can use HTML iframes to make it look like your many pages are one page by loading them into the current page.
It is possible to do this in one page with just HTML and CSS, but would require really tricky CSS and the :selected selector.
The easiest way to do it in 'one page' is to use Javascript. jQuery (a javascript library) would make it even easier.
You need to know javascript or jquery to do this.
Here is an example with jquery considering your tables have ids
table_1
table_2
table_3
table_4
And your right side container has an id right-container
So on click event you can do like
$("[id^=table_]").click(function(){
$("#right-container").html($(this).parent().html());
});
Please try it...
<style type="text/css">
#tablist{
padding: 3px 0;
margin-left: 0;
margin-bottom: 0;
margin-top: 0.1em;
font: bold 12px Verdana;
}
#tablist li{
list-style: none;
display: inline;
margin: 0;
}
#tablist li a{
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background: white;
}
#tablist li a:link, #tablist li a:visited{
color: navy;
}
#tablist li a.current{
background: lightyellow;
}
#tabcontentcontainer{
width: 400px;
/* Insert Optional Height definition here to give all the content a unified height */
padding: 5px;
border: 1px solid black;
}
.tabcontent{
display:none;
}
</style>
<script type="text/javascript">
/***********************************************
* Tab Content script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
//Set tab to intially be selected when page loads:
//[which tab (1=first tab), ID of tab content to display]:
var initialtab=[1, "sc1"]
////////Stop editting////////////////
function cascadedstyle(el, cssproperty, csspropertyNS){
if (el.currentStyle)
return el.currentStyle[cssproperty]
else if (window.getComputedStyle){
var elstyle=window.getComputedStyle(el, "")
return elstyle.getPropertyValue(csspropertyNS)
}
}
var previoustab=""
function expandcontent(cid, aobject){
if (document.getElementById){
highlighttab(aobject)
detectSourceindex(aobject)
if (previoustab!="")
document.getElementById(previoustab).style.display="none"
document.getElementById(cid).style.display="block"
previoustab=cid
if (aobject.blur)
aobject.blur()
return false
}
else
return true
}
function highlighttab(aobject){
if (typeof tabobjlinks=="undefined")
collecttablinks()
for (i=0; i<tabobjlinks.length; i++)
tabobjlinks[i].style.backgroundColor=initTabcolor
var themecolor=aobject.getAttribute("theme")? aobject.getAttribute("theme") : initTabpostcolor
aobject.style.backgroundColor=document.getElementById("tabcontentcontainer").style.backgroundColor=themecolor
}
function collecttablinks(){
var tabobj=document.getElementById("tablist")
tabobjlinks=tabobj.getElementsByTagName("A")
}
function detectSourceindex(aobject){
for (i=0; i<tabobjlinks.length; i++){
if (aobject==tabobjlinks[i]){
tabsourceindex=i //source index of tab bar relative to other tabs
break
}
}
}
function do_onload(){
var cookiename=(typeof persisttype!="undefined" && persisttype=="sitewide")? "tabcontent" : window.location.pathname
var cookiecheck=window.get_cookie && get_cookie(cookiename).indexOf("|")!=-1
collecttablinks()
initTabcolor=cascadedstyle(tabobjlinks[1], "backgroundColor", "background-color")
initTabpostcolor=cascadedstyle(tabobjlinks[0], "backgroundColor", "background-color")
if (typeof enablepersistence!="undefined" && enablepersistence && cookiecheck){
var cookieparse=get_cookie(cookiename).split("|")
var whichtab=cookieparse[0]
var tabcontentid=cookieparse[1]
expandcontent(tabcontentid, tabobjlinks[whichtab])
}
else
expandcontent(initialtab[1], tabobjlinks[initialtab[0]-1])
}
if (window.addEventListener)
window.addEventListener("load", do_onload, false)
else if (window.attachEvent)
window.attachEvent("onload", do_onload)
else if (document.getElementById)
window.onload=do_onload
</script>
<ul id="tablist">
<li>Dynamic Drive</li>
<li>What's New</li>
<li>What's Hot</li>
<li>Search</li>
</ul>
<DIV id="tabcontentcontainer">
<div id="sc1" class="tabcontent">
Visit Dynamic Drive for free, award winning DHTML scripts for your site:<br />
</div>
<div id="sc2" class="tabcontent">
Visit our What's New section to see recently added scripts to our archive.
</div>
<div id="sc3" class="tabcontent">
Visit our Hot section for a list of DD scripts that are popular to the visitors.
</div>
<div id="sc4" class="tabcontent">
<form action="http://www.google.com/search" method="get" onSubmit="this.q.value='site:www.dynamicdrive.com '+this.qfront.value">
<p>Search Dynamic Drive:<br />
<input name="q" type="hidden" />
<input name="qfront" type="text" style="width: 180px" /> <input type="submit" value="Search" /></p>
</form>
</div>
</DIV>
Another working answer.
Using HTML, CSS, JQUERY.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#tab1").hide();
$("#tab2").hide();
$("#tab3").hide();
$("#t1").click(function()
{
$("#tab1").show();
$("#tab2").hide();
$("#tab3").hide();
});
$("#t2").click(function()
{
$("#tab1").hide();
$("#tab2").show();
$("#tab3").hide();
});
$("#t3").click(function()
{
$("#tab1").hide();
$("#tab2").hide();
$("#tab3").show();
});
});
</script>
<style>
table
{
width:100px;
}
#tab1
{
background:red;
margin: 12px;
}
#tab2
{
background:green;
margin: 12px;
}
#tab3
{
background:blue;
margin: 12px;
}
#panel
{
width:125px;
height:80px;
border:1px solid black;
float:right;
}
#t1, #t2, #t3
{
cursor: pointer;
width:50px;
height:30px;
border:1px solid black;
}
</style>
</head>
<div>
<div id="t1">TAB1</div>
<div id="t2">TAB2</div>
<div id="t3">TAB3</div>
<div id="panel">
<table border="1" id="tab1">
<tr><td>TAB1</td></tr>
<tr><td>RED</td></tr>
</table>
<table border="1" id="tab2">
<tr><td>TAB2</td></tr>
<tr><td>GREEN</td></tr>
</table>
<table border="1" id="tab3">
<tr><td>TAB3</td></tr>
<tr><td>BLUE</td></tr>
</table>
</div>
</div>
This is easy to do, but will require the use of JavaScript.
It can not be done using html alone.
html without script is static.
When you add script to html you get dhtml (dynamic HTML) and you can make the rendered document change base on client interaction with the document.
Are you familiar with jsfiddle? It is a perfect tool to demonstrate this.
You will create 4 divs (or tables). You will give each an id and you will style each to be "display: none". You will create your table of contents as a list and using one of many methods, register a click event handler to the list.
The click event handler will set the display attribute of the visible div/table to none, then it will set the display attribute of the desired div/table to something other than none such as "block" or "table" and will finally store a reference to the visible div/table where it can be retrieved the next time the event handler is invoked.