so almost all the answers on the web dealing with hiding title bar assume that you're loading a local HTML file onto your app. But what if you're using mainWindow.loadURL("https://google.com") instead of loading a local index.html file? I'm not sure where you'd add the -webkit-app-region: drag property in this case. Does anyone know how to hide title bar while keeping it draggable when loading an external url in the browser window instead of loading an html file?
Related
I am developing a chrome extension for fetching ads from a web page. What I am trying to do is that:
My extension should look for HTML5 banner ads from the opened web page.
It should detach the ad code and save it to my computer as an html file.
The html file created should not depend on an external JS or CSS file. It means when it gets detached, the CSS or JS code attached to it should be detached and saved as a part of the html page (not a hyper link).
I was wondering if there are any existing libraries or open source plugins that do that. If not, can anyone point me in the right direction where to begin?
This won't directly pick out banner ads for you, you'll need to do that yourself, but all the functionality you're hoping for is available using content scripts.
I'm using jsPDF to create a pdf that will be displayed on a web page but I can't seem to get it to embed correctly. The pdf does load if I put in doc.output('dataurl'); but it loads in a new window (I know that is what it's supposed to do). I made a div that uses object tags to hold the pdf and it does load a pdf file but it wont the load the jsPDF. What I'm trying to do is make an embedded pdf like the one on their main page, https://parall.ax/products/jspdf. What code would I need to add in order to get it to load in the object tags? It has to be possible since they have a working version.
p.s. I'm using JQuery if there is a quick shortcut in there.
Thank you for your help.
EDIT: Ok new problem. So I added this: $('#ID').attr("src", doc.output("dataurlstring")); It works but it makes a new problem. It doesn't always load. Sometimes it loads just fine, other times it will load the div but not the iframe or content. There aren't any errors and all my console.log() lines run. How can I fix this?
I have developed a mobile application which loads 3 css and 7 javascript files. Problem is if the wifi signal is very slow, HTML loads before all javascript and stylesheets are loaded. Since stylesheet is not loaded, HTML looks disturbed and after few seconds (i guess after css and js are loaded properly), HTML structure automatically take correct format but I dont want to show the disturbed format and to do that I need to make sure that all js files are loaded first then only HTML should display.
If you have any idea how can this be achieved ?
You can do using Cache manifests. Read these resources:
http://appcachefacts.info/
http://en.wikipedia.org/wiki/Cache_manifest_in_HTML5
https://developer.mozilla.org/en/docs/HTML/Using_the_application_cache
Alternatively - ensure your resources are loaded before the body by placing them in the right place (head tag).
You should link to your external css stylesheet at the top of your webpage in the header like this:
<link rel="stylesheet" type="text/css" href="http://whiterootmedia.com/css/example.css" />
or insert your <style> element in the header. Likewise this should be done for your JavaScript if it effects your initial layout. Keep in mind that if you are using an external JS file, the browser will stop rendering your page at the point in your code where your external JavaScript file is referenced, to load that external JavaScript file. If you're using a lot of JavaScript, place it at the bottom of your page (contrary to what most people do) or use an onload() function.
The webpage is loaded top-to-bottom, so the problems you're having should be related to the order of your css (most likely).
I am creating a web site and I was given a website template that has various html pages and javascript that my website will reference. I wanted to know if this is possible to add those files and reference them in my project or if I am going about this the wrong way.
First time building a website but I have experience building applications, just confused on the right way to go about this.
Add a master page to your website and replace it's html by the html of your template. add a content place holder in it so that controls can be placed in content pages. copy image, css , and jquery(if any) folders in website. if your css and images are not shown in design of master page then replace Image to ../Image in its html and source of css ../(your file name)
I am creating a web app using bootstrap by twitter. The app contains of a page which loads up another page of the same domain in an iframe. Now my problem is, if the page that I am loading in iframe also contains bootstrap.js file it starts conflicting with the app.
For example, my app has a accordion (collapse) http://twitter.github.com/bootstrap/javascript.html#collapse built using the data attributes.
Once a page with bootstrap.js is loaded the collapse event starts getting fired twice.So something like
<head>//Bootstrap css and js files included</head>
<body>
<div>
//Collapsible Menu #1
</div>
<iframe>
<head>
//BootStrap.js script from same location as parent
</head>
<body>
// Another Collapsible Menu #2
</body>
` </head>
</iframe>
</body>
Here when I try to click on Menu #1, the code of Bootstrap.js gets triggered twice which ends ups in showing and then hiding the menu.
But my problem is not just limited to the menu. I need to be able to use bootstrap.js in my app and also allow pages which already contain bootstrap.js to be loaded inside the iframe.
Is there a way around this or am I doing something wrong?
found the problem.. it was very specific for my app. The way it was working was - there was an included JS file to trigger the app inside the "target" webpage. The JS file would not remove everything from the page and build an iframe to put load the content of the "target" inside iframe. Now in this case, I had BootstrapJS running before the app.js file which in turn resulted in getting executed in the "parent" frame and then when the app loads it was getting reloaded causing the conflict (or multiple events due to multiple inclusion).
I had the same issue in IE9 only.
I was opening an instance of my website in an IFRAME dialog. Meaning that there was 2 instances of Bootstrap, like above.
When I moused out of the IFRAME it resized the underlying layout to match that of the width of the smaller one in the IFRAME.
To get round it I had to disable the opening pages bootstrap-responsive.js stylesheet using javascript. You can then turn it back on, when you close the IFRAME dialog.
if(navigator.userAgent.indexOf("Trident/5")>-1){
window.parent.document.getElementById("responsiveCSS").sheet.disabled = true;
}
Horrible hack, I know.