I have an html page. The page content a frameset with 2 frame. 1 for menu and 1 for content.
<frameset border="4" cols="260, *">
<frame id="menu" name="menu" marginwidth="5" marginheight="5" src="Menu.html" onload="LoadPage();" >
<frame id="Main" name="Main" marginwidth="5" marginheight="5" src="" >
</frameset>
I want to force browser (mostly IE) to print the content of frame "Main" and not everything (menu and main)
tank you
You can have this below code in your menu.html page or any other page which you are going to display in your iframe.
Print Report
document.getElementById("ifrmeSummary").contentWindow.focus();
document.getElementById("ifrmeSummary").contentWindow.print();
this will print only the iframe content and not the entitre screen/ window
Related
Hi I'm working in Cordova/Phonegap and JqueryMobile. I have a div and a iframe here's the code. there is no cross domain issue in Cordova but in browser i cant show any one my working code but still here's the jsfiddle code
<div id="viewsites" class="viewsites">
<iframe class="clsIframe" src="http://www.google.com/" id="viewsite_iframe" width="0"></iframe>
</div>
i dont want to show scrollbars so i have set parent div overflow: hidden,
now problem in in iphone i cant drag the iframe site
I want to hide scrollbars without stopping scrollable
Use CSS:
iframe {
overflow:hidden;
}
In your iframe html tag:
<iframe src="" scrolling="no"></iframe>
I am new to it and trying to create a simple mobile phone web page which calls external web pages. I have a button at bottom of page it is fixed. what i does, i call another page from same folder which has external links, i call the page through Object element. I am facing height problem when device in landscape view, only half of the page is display and the scroll bar also not moving further down. same when i click on external link of the called page.
need suggestion and help.........
<content style="width:95%;">
<!--<iframe src="h2.htm" id="iframe_a"></iframe>-->
<object id="vp" type="text/html" data="h2.htm" style="width:100%; overflow:scroll;"></object>
</content>
<!--<div id="siteloader"></div>
<script>
$("#siteloader")
.html('<object data="h2.htm">');
</script>-->
<div id="downloadButton" style="position:fixed; bottom:0; z-index:2; background:#fff; width:100%;"><input TYPE=SUBMIT Value="DOWNLOAD AT&T REMOTE SUPPORT" />
</div>
Within our web application we are displaying a PDF document in an iframe using the following line of code:
<iframe id="iframeContainer" src="https://example.com/pdfdoc.pdf"
style="width:100%; height:500px;"></iframe>
This works fine in all the major desktop browsers with the width of the PDF scaling to fit inside the confines of the iFrame and a vertical scroll bar to view all the pages within the document.
At the moment however I can't get the PDF to display correctly in Mobile Safari. In this instance only the top left portion of the PDF is visible without any horizontal or vertical scrollbars to see the rest of the document.
Does anybody know of I workaround for this problem in Mobile Safari?
UPDATE - MARCH 2013
After hours of searching and experimentation I can conclude that this problem is a real mess!! There are a bunch of solutions but each far from perfect. Anybody else struggling with this one I advise to refer to 'Strategies for the iFrame on the iPad Problem'. For me I need to write this one off and look for another solution for our iPad users.
UPDATE - MAY 2015
Just a quick update on this question. Recently I have started using the Google Drive viewer, which has mostly solved the original problem. Just provide a full path to the PDF document and Google will return a HTML formatted interpretation of your PDF (don't forget to set embedded=true). e.g.
https://drive.google.com/viewerng/viewer?embedded=true&url=www.analysis.im%2Fuploads%2Fseminar%2Fpdf-sample.pdf
I'm using this as a fallback for smaller viewports and simply embedding the above link into my <iframe>.
I found a new solution. As of iOS 8, mobile Safari renders the PDF as an image within an HTML document inside the frame. You can then adjust the width after the PDF loads:
<iframe id="theFrame" src="some.pdf" style="height:1000px; width:100%;"></iframe>
<script>
document.getElementById("theFrame").contentWindow.onload = function() {
this.document.getElementsByTagName("img")[0].style.width="100%";
};
</script>
<iframe
id="ifamePdf"
type="application/pdf"
scrolling="auto"
src={"https://docs.google.com/viewerng/viewer?url="+"https://example.com/pdfdoc.pdf"+"&embedded=true"}
height="600"
></iframe>
My solution for this is to use google drive on mobile and a standard pdf embed in an iframe on larger screens.
.desktop-pdf {
display: none;
}
.mobile-pdf {
display: block;
}
#media only screen and (min-width : 1025px) {
.mobile-pdf {
display: none;
}
.desktop-pdf {
display: block;
}
}
<div class="outer-pdf" style="-webkit-overflow-scrolling: touch; overflow: auto;">
<div class="pdf">
<iframe class="desktop-pdf" scrolling="auto" src="URL HERE" width="100%" height="90%" type='application/pdf' title="Title">
<p style="font-size: 110%;"><em>There is content being displayed here that your browser doesn't support.</em> Please click here to attempt to view the information in a separate browser window. Thanks for your patience!</p>
</iframe>
<iframe class="mobile-pdf" scrolling="auto" src="https://drive.google.com/viewerng/viewer?embedded=true&url=URL HERE" width="100%" height="90%" type='application/pdf' title="Title">
<p style="font-size: 110%;"><em>There is content being displayed here that your browser doesn't support.</em> Please click here to attempt to view the information in a separate browser window. Thanks for your patience!</p>
</iframe>
</div>
</div>
For using the google preview in 2021, I had to do the following. Some small adjustments to how it was posted above.
"https://drive.google.com/viewerng/viewer?embedded=true&url=" + encodeURIComponent(pdfUrl)
try pdf.js should also work inside mobile safari: https://github.com/mozilla/pdf.js/
I got the same issue. I found that by setting the focus on an input (doesn't work with div tags) the pdf is displayed.
I fix it by adding an hidden input and set the focus on it. this work around doesn't slowdown the application.
<html><head>
<script>
$(document).ready(function () {
$("#myiframe").load(function () { setTimeout(function () { $(".inputforfocus").focus(); }, 100); });
});
</script></head>
<body>
<div class="main">
<div class="level1">Learning</div>
<input type="hidden" class="inputforfocus">
<div>
<iframe src="PDF/mypdf.pdf" frameborder="0" id="myiframe" allow="fullscreen"></iframe>
</div>
</div>
</body>
</html>
Currently I have a XUL notification box being displayed as I am developing a Firefox Addon. At the moment the notification box will only display at the bottom of the browser and cannot find any information about changing the position to the top of the browser.
I know you can use priority_high etc... but it only seems to add this again at the bottom of the browser.
Code:
<notificationbox flex="0.1">
<browser src="http://www.mozilla.org"/>
<notification type="warning" label="Test"/>
</notificationbox>
Any help will be grateful.
I have tested with XUL Explorer, I could change the positions successfully.
Here is the code:
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<!-- your code here -->
<stack>
<hbox flex="1" left="100" right="10" top="50" bottom="10">
<notificationbox flex="0.1" >
<browser src="http://www.mozilla.org"/>
<notification type="warning" label="Test" />
</notificationbox>
</hbox>
</stack>
</window>
I want to ask some questions:
What steps should I do to make the interface on mozilla firefox and handle all these interfaces.
interfaces that I want to make are:
status bar that consists of labels and pictures and if the status bar on the right click menu will display the active addons (addons menu inactive hidden) and preferences.
current web page on the right click, on the browser will display a context menu "terjemahkan" and there are pictures on the left-hand corner.
when I select the options button on the tools menu >> addons, users can adjust these addons settings with the radio buttons
when the context menu is selected then the browser window will show the desired results
the steps that I have done is:
i was made the status bar but why the picture I want not to appear when I've made as directed. as well as on the context menu, the image can not appear in the upper left corner of the menu like in general.
<?xml version="1.0"?>
<overlay id="inline_trans"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:html="http://www.w3.org/1999/xhtml">
<!--
<script type="application/x-javascript" src="chrome://translator/content/script.js" />
<script type="application/x-javascript" src="chrome://translator/content/interface.js" />
-->
<!-- menu klik kanan pada halaman web -->
<popup id="contentAreaContextMenu">
<menuseparator />
<menuitem id="intransContextMenuPage"
image="chrome://inlinetrans/skin/imagesOn_kecil.png"
label="terjemahkan dengan intrans"
oncommand="inline.script.getText()" />
</popup>
<!-- pilihan menu pada status bar -->
<popupset>
<menupopup id="intransContextMenu">
<menuitem label="intrans nonaktif"
image="chrome://inlinetrans/skin/imagesOff_kecil.png"
hidden="true"/>
<menuitem label="intrans aktif"
image="chrome://inlinetrans/skin/imagesOn_kecil.png"
hidden="false"/>
<menuseparator />
<menuitem label="preferensi"/>
</menupopup>
</popupset>
<!-- ========================================= -->
<!-- statusbar-->
<statusbar id="status-bar">
<statusbarpanel id="status-bar-intrans"
image="chrome://inlinetrans/skin/imagesOn_kecil.png"
label="intrans"
context="intransContextMenu"
tooltiptext="intrans versi 1.0"
/>
</statusbar>
</overlay>
UI options preferences
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<!DOCTYPE overlay SYSTEM "chrome://inlinetrans/locale/options.dtd">
<dialog xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
id="translate-preferences"
title="&options.title;"
buttons="accept, cancel"
style="padding:0px; margin:0px;"
ondialogaccept="options.save()"
onload="options.init();"
onunload="options.deconstruct();">
<!--
<stringbundleset id="stringbundleset">
<stringbundle id="locale-properties" src="chrome://translator/locale/translator.properties"/>
<stringbundle id="properties" src="chrome://translator/content/translator.properties"/>
</stringbundleset>
-->
<!--
<script src="chrome://inlinetrans/content/options.js" />
-->
<description value="&options.desc;"
style="
background: #fff url('chrome://inlinetrans/skin/options.png') no-repeat;
min-width:400px;
min-height:40px;
padding-left:55px;
padding-top:10px;
margin:0px;
border-bottom: 2px solid #757575;
font-size:1.5em;"/>
<vbox style="padding:10px;">
<groupbox>
<caption label="&options.ui;"/>
<label value="&options.results.desc;"/>
<radiogroup id="display.results" style="padding-left:20px;">
<radio id="results.cat" value="category" label="&options.results.cat;"/>
<radio id="results.noncat" value="noncategory" label="&options.results.noncat;"/>
</radiogroup>
</groupbox>
</vbox>
</dialog>
The most confusing thing for me is how I do all the handler interface.
for example:
change the status of addons, from active to inactive
take the value of the selected radio button
I cannot give you an answer to all of your questions, partly because I don't know exactly what you want, but here is a start:
To show an image next to the menu item, you have to give the element the class menuitem-iconic as described in the documentation:
<menuitem id="intransContextMenuPage"
class="menuitem-iconic"
image="chrome://inlinetrans/skin/imagesOn_kecil.png"
label="terjemahkan dengan intrans"
oncommand="inline.script.getText()" />
I'm not sure for the statusbar, by I would follow the description in the documentation:
The following classes may be used to style the element. These classes should be used instead of changing the style of the element directly since they will fit more naturally with the user's selected theme.
statusbarpanel-iconic
Use this class to have an image appear on the statusbarpanel. Specify the image using the src attribute. The image will appear instead of the label.
You can get the value of the selected radio button by getting a reference to the radiogroup,access its property selectedItem which gives you a radio element and read the value property:
var value = document.getElementById('display.results').selectedItem.value;