I came across a problem today when I trying to render content from an external source into a
dijit.layout.ContentPane.
HTML
<div id="someId"></div>
JS
var cp = new dijit.layout.ContentPane({}, "someId");
htmlFromExtSrc = "<frameset> <frame src="http://www.google.com"></frameset>
Other Data ";
cp.set("content", htmlFromExtSrc);
What gets set in the html is only OtherData. Frameset and frame do not showup in the html.
I aim need to show the content from an external site rendered into the Pane correctly. Using Iframe solves the problem but I am looking for a better solution.
Is there a way to work around this problem?
Related
I have a js report pdf with header and footer with dynamic content.But content are overlap on next page.Page break not working on it.
i know this might be old but you can add
<div style="page-break-before: always;"></div>
before any div you want to break the page after
I am trying to show a pdf content in a Ext.Container of Sencha Touch 2. Tried several ways answered on SO but they all didn't work.
Few things tried, include:
Tried converting file content into html and extract the HTML inside the BODY tag and put it into Ext.XTemplate of the Container. This way I can only play cool with it, if HTML is being converted from a .doc file but if it was a .pdf file it messes up design because when I convert a pdf file into HTML then it adds position: absolute inside every DIV and with absolute position the parent element will not have any height and I am stuck with the scrolling issues.
for example:
<div style="position:relative;display:inline-block;;top:994px;left:712px;font-family:'Times New Roman';font-size:10pt;white-space:nowrap;">description</div>
Second try,
2. Tried putting PDF into IFRAME and EMBED tags as a link and put them into the Ext.XTemplate but these tags are also not working in mobile.
for example:
<embed type="application/pdf" width="800px" height="800px" src="example.pdf" />
<iframe style="position:absolute; z-index: 1; left: 0; top: 0;" width="100%" height="2000" src="example.pdf"></iframe>
Please give some idea how to display/open PDF(or its content, with atleast few formatting). Or do we have any plugin to display it. One final solution is showing using google docs but my initial requirement is showing PDF content in sencha touch 2 app not using any third party service(like google docs).
you can use inapp browser plugin for opening file in the iOS:
install inappbrowser cordoav plugin and open file like this:
function openPDF(){
ref = window.open('http://static.googleusercontent.com/media/www.google.com/en/us/webmasters/docs/search-engine-optimization-starter-guide.pdf', '_blank', 'location=no');
ref.addEventListener('exit', function() {
ref.removeEventListener('exit', function(){});
ref.close();
} );
}
It is very useful the PDFObject library, I have added this third-parties library to my project based on Sencha Touch 2 and its working in the browser, my current issue is show the pdf in Ipad.. :-(
I have a container layout of a webpage that works like this:
<html>
#header#
<div class="content_container"> #content inserted here# </div>
#footer#
</html>
If the content has a div that is not closed or closes a div without it being opened, the content_container's div and so the layout gets messed up.
How is this situation normally avoided or solved?
Hy,
From what i found on the net, you could parse the fragment as a HTML document using the DOM loadHTML function, then spit it back out again as HTML. That will fix any HTML well-formedness errors.
Or you could use the Tidy extension for php5
http://www.php.net/tidy
First off I am completely new to Javascript but I have some HTML/CSS experience. I've been trying to create an html/javascript image gallery for a website; (It would probably be a lot easier to do in PHP but the web coordinator disabled PHP on our server for security reasons).
Anyway What I have is a page showing an Album-list, Album-browser and Photo-viewer in different a div and 2 iframes respectively. I have it set up so that when someone clicks on an album from the album list, a page is opened up in the album browser section (iframe:"browser-frame" showing thumbnails of all the images in the particular album). I've been trying to set it up so that when someone clicks on an image in the album browser the image will appear in the Photo-viewer section (iframe:"viewer-frame" showing the photo itself).
I didn't want the photo's in the viewer-frame to be larger than the set dimensions for the viewer-frame so I created a page for the viewer-frame that puts the image in a div with a class of set dimensions (defined in a stylesheet) as follows:
...<body>
<div class="photoview">
<img id="viewed_image" class="large" src="images/album1/1.jpg" />
</div>
</body>...
I then created a script that updates the image src to a variable:image_to_be_viewed and called it image-changer.js
// JavaScript Document
{
var image_to_be_viewed="images/album1/1.jpg";
document.getElementById("viewed_image").src=image_to_be_viewed;
}
And added a script to the viewer-frame page so it looks like:
...<body>
<div class="photoview">
<img id="viewed_image" class="large" src="images/album1/1.jpg" />
<script src="image-changer.js"></script>
</div>
</body>...
Now I wanted the gallery to work so that in the page loaded in the browser-frame, whenever one clicked on one of the pictures, the value of the global variable 'image_to_be_viewed' would be changed to the source of the clicked image as follows:
<body>
<div class="photobrowse">
<img class="medium" src="images/album1/1.jpg" onClick="image_to_be_viewed='images/album1/1.jpg'"/>
<img class="medium" src="images/album1/2.jpg" onClick="image_to_be_viewed='images/album1/2.jpg'"/>
<img class="medium" src="images/album1/3.jpg" onClick="image_to_be_viewed='images/album1/3.jpg'"/>
</div>
</body>
It doesn't work....
the gallery i'm working on is on http://ptc.tamu.edu/test/gallery_directory/test_gallery.html
everything up to the loading of the selected picture in the viewer frame works (I'm running the onlick event on the default loaded pictures 1,2,3 in the browser-frame page)(default pic's 4 and 5 simply load the image in the iframe but with no way to adjust the size it is too big and gets cut off and i don't want that)
I've been working on for an entire day and I'm sure I'm doing something wrong here but I can't figure out what exactly it is. I have a feeling it has to do with changing the global variable: image_to_be_viewed from the browser-frame page but I wanted to confirm with experts instead of flopping about like a headless fish. I'm going to continue trying to figure this out but i thought maybe having some expert assistance would speed up the process.
What the onclick triggers should be a javascript function call.
e.g. onclick="changeImg('images/album1/1.jpg')"
And the function itself should looks like this
function changeImg (image_to_be_viewed) {
document.getElementById("viewed_image").src = image_to_be_viewed;
}
btw, you probably should learn javascript a little bit more before work on something real. I recommend this book
thank you I got it to work! I figured that the changeImg function was targeting the wrong document/wrong frame and I fixed it by changing the js script to:
function changeImg (image_to_be_viewed) {
window.parent.viewer_frame.document.getElementById("viewed_image").src = image_to_be_viewed;
}
hopefully someone has done this before...
Im trying to load an external page using Colorbox and its Ajax function.
using a ajax link from the example at colorbox you use a link like so:
<p><a class='ajax' href="../content/ajax.html" title="Homer Defined">Outside HTML (Ajax)</a></p>
This will load that page ajax.html into your page with the colorbox overlay, What I would like to do is load a specific div in the ajax.html. so something like:
<p><a class='ajax' href="../content/ajax.html#ThisDivOnly" title="Homer Defined">Outside HTML (Ajax)</a></p>
so only loading the DIV: #ThisDivOnly
have tried the above but no love.
Help appreciated. First time post. :)
I'd check out this question: Colorbox Load Specific div from iFrame
Looks like it's answered pretty well in there.