Dropdown to control content of multiple Iframes on webpage - javascript

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.

Related

Display Two Documents Side-By-Side with HTML

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.

JS how can in replace a string data for a given one Ex: id:"32" and id:"12" for id:"44" in the same function

in my project the user can inter a google maps iframe in a textbox and the the iframe will be displayed in a div, the problem is that usually the iframe come with its own width and height values and is bigger than the container.
Im trying to solve this replacing the width and height value, by default the width of a google maps iframe is 600 so i used replace ('"width="600"', '"width=300"') but what if the inserted text has a different value than 600? how could i replace it?.
also how can i do the same for the height in the same function.
this is my code
function Process(){
var map1 = document.getElementById("iframe1").value;
var obj = document.getElementById("map1");
var res = map1.replace('width="600"', 'width="300"');
{
obj.innerHTML = res;
alert(res)
}
}
/*
You can use this iframe
<iframe src="https://www.google.com/maps/embed?pb=!1m17!1m8!1m3!1d14376.793148942863!2d-100.2753853!3d25.7309555!3m2!1i1024!2i768!4f13.1!4m6!3e6!4m0!4m3!3m2!1d25.7312454!2d-100.2732824!5e0!3m2!1ses-419!2smx!4v1445727202935" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>*/
.div {
width:300px;
height: 200px;
border: 2px solid red;
}
.map1 iframe {
width:300px;
height: 200px;
}
<head>
<title> test</title>
</head>
<body>
<input type="text" id="iframe1" value="enter iframe here">
<div class="container">
<div id="map1"> </div>
</div>
<input type="button" value="go!" onclick="Process()" />
</body>
im doing this because the container is 300x200 but if a iframe with it´s own values is inserted the map will be bigger than the container.
do you have any ideas?
is there a easier ways to do this?
UPDATE:
Found the answer
http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_iframe_width2

Open pdf in <DIV> found in another page

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.

PDF viewer in Asp.Net

I have a list of documents at server. and want to develop a page where the list of documents will be displayed as hyperlinks in left panel/div and
while click on a link. the right panel displays the corresponding PDF document from server.
can anybody help me out to develop the same using jquery or javascript?
thanks in advance
i tried below code based on some articles i read
Script :
<script language="javascript" type="text/javascript">
function previewPdf(url, target)
{
var div = document.getElementById(target);
var obj = document.createElement("<embed style='width:939px; height:736px;' frameborder='0' src='" + url +"')></embed>");
div.appendChild(obj);
}
</script>
Body :
<body style="height: 741px">
<form id="form1" runat="server">
<div id="div1" style="float:left; width: 20%; text-align: left; height: 100%; border-width:2px;">
<button onclick="previewPdf('Documents/Accomodation.pdf','div2')">Accomodation</button>
<br />
<button onclick="previewPdf('Documents/Insurance.pdf','div2')">Insurance</button>
<br />
<button onclick="previewPdf('Documents/Air Ticket.pdf','div2')">Air Ticket.pdf</button>
<br />
</div>
<div id="div2" style="float:right;width: 80%; text-align: left; height: 100%; border-color:Maroon">
</div>
</form>
</body>
but it doesnt replace the 'div2' with the content[pdf].
Here is the javascript for displaying pdf in html5 format.
You will need edit it as per your requirements.
https://github.com/mozilla/pdf.js
If you can use a ASP.NET PDF viewer component, then here is how it is done with Gnostice PDFOne .NET.
PDFViewer1.ActiveLicense("your-license-key");
PDFViewer1.LoadDocument(Server.MapPath(".") + "\\App_Data\\sample.pdf");
DISCLAIMER: I work for Gnostice.

jQuery UI (RAD/GUI) form designer

Well, I'm working on a visual form designer and decided to use jQuery UI as both the end form widgetset as well as the widgetset for the designer itself.
My main concern is to make jQuery wigets "read-only". I've had the following idea:
<style type="text/css">
.widget-wrap { position: relative; }
.widget-overlay { position: absolute; left:0; right:0; top:0; bottom:0; /*maybe z-index as well*/ }
</style>
<div class="widget-wrap" id="wdt1">
<button class="jquery-widget">Hello World!</button>
<div class="widget-overlay"><!----></div>
</div>
<script type="text/javascript">
$(function() {
$("button.jquery-widget").button();
});
function widgetLock(){
$("#wdt1 .widget-overlay").show();
}
function widgetRelease(){
$("#wdt1 .widget-overlay").hide();
}
</script>
Hope my example makes sense :)
My questions are;
does this sound good to you?
do you know of a better or another way?
do you see any possible issues with it?
I would say this is a very bad idea in that 1) you may find the overlay in a weird place in certain browser resolutions etc and 2) you can still tab to the item.
Much better to either;
Hide the element
Disable the element
Replace text boxes with labels, buttons with graphics etc.
Disable the click on the button
edit
You can use jQuery to unbind events on elements and then you can re-bind them later on.
If I was to build a form designer I'd make all elements divs with an image of the actual widget as a css background image, that way you can drag the widget representation around the form without activating it or having any of the overlay problems.
If you really wanted to make it look like the finished product you can have the actual widget nested inside the div but invisible when the users mouse is within the div, when the user moves the mouse out of the div then set the widget visible again.
DC
Yes I was aware that the background image would look wrong when stretched. So I thought about it on the way home. A better technique would be to create a widget sandwich
place the widget between 2 divs the bottom div controls the size and position the top prevents the widget from activating
<html>
<head>
<script language="JavaScript" type="text/JavaScript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script language="JavaScript" type="text/JavaScript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script>
<style type="text/css">
<!--
.widget {
height: 100%;
width: 100%;
}
.widget_overlay {
border: thin solid #FF0000;
position: absolute;
top: 1px;
left: 1px;
right: 1px;
bottom: 1px;
right: 1px;
visibility:visible
}
.sz_controller {
position:absolute;
width:365px;
height:61px;
left: 142px;
top: 75px;
}
-->
</style>
<script language="JavaScript" type="text/JavaScript">
function ShowHide(button,id){
elem = document.getElementById(id)
if (elem.style.visibility=='hidden') {
elem.style.visibility='visible';
button.value="Hide Overlay";
} else {
elem.style.visibility = 'hidden';
button.value="Show Overlay";
}
}
</script>
</head>
<body>
<input type="button" name="Button" value="Hide Overlay" onClick="ShowHide(this,'widget_overlay')">
<div id="draggable" class="sz_controller" style=""><select class="widget" name="test">
<option>test 1</option>
<option>test 2</option>
<option>test 3</option>
</select><div id="widget_overlay" class="widget_overlay"></div></div>
<script>
$(function() {
$( "#draggable" ).draggable();
});
</script>
</body>
</html>
The above will work in firefox
Clicking the button hides the overlay div allowing testing of the widget, You can drag the object around the screen, no resizing logic has been implemented.
DC

Categories