There is a need to have a takeover page when users visits the website e.g. www.domain.com and instead of displaying the contents immediately a splash page is displayed. They then have the option to visit the home page by clicking on a link.
Is there a way to do this without changing the code on the home page with the exception of including a javascript file that accommodates the requirements i.e. takeover the page with another HTML page?
Is there an example I can find that does the above?
You could do a DNS "rewrite" to an other IP and on the other Webserver you capture or simple copy/paste the original HTML contents and show it but also add this HTML splash notice.
But there is no way of adding a splash page without changing the content of the page or having access to the code.
If you have access to the HTML code, you can include a JavaScript file on which you have access, maybe also on an other server. Also add one noscript tag for visitors without JavaScript disabled.
Example:
<script src="http://www.asdf.com/you/have/access/to/this/file.js" type="text/javascript" />
<noscript>SPLASH NOTICE</noscript>
How the file.js should look like you can ask an additional question. Or check on G.
The good thing with this "remote" JavaScript file is, you can remove the splash notice later from the file without touching the original code again.
Related
I have a HTML page which I want to display on browser. This is a login page(https://localhost:9000/login). Before loading this over browser page I want to hit another url which gives me another html page . This url is basically to kill the existing sessions.(https:xyz)But this also redirects me to another page which I don't want to display . I want to remain on login page.
I think this is possible using iframes. I am newbie to iframes. Any pointers on how to achieve this?
That's a local link only viewable on your computer.
So you want to load another page, before the login page? If you want to kill existing sessions you can use sessionStorage for that.
There are a few things that don't make sense with this, but it's your project. like you want to redirect to another page, but don't want that page to display. That makes no sense to me.
You want to remain on login page, but when you login, you want to get another html page in the login page?
iframes are probably the worst thing in the world imo... you got so much going on here, but can simplify this so much. A login page to an inner page and then you go from there.
There are a number of ways to achieve the end means here, sessionStorage being one. Just search around here for answers, you can find a ton of them.
Good luck!
iframes have been removed from HTML specifications, you cannot use them in HTML5.
Use attribute target="_blank" in the <a> of this url. It will open in a new tab
I'm working on a simple Javascript-based windows "app" (not a website, just some HTML & JS files all in a single folder that will be used on a local PC).
The startup page is Page1.html. This page contains 2 buttons ("back" and "forward"), and an iframe which displays the content of Page2.html. And Page2.html also contains an iframe, which displays various other pages in the same folder (we'll call these the "color" pages --> Red.html, Green.html, Blue.html, etc).
So in other words, when Page1.html is started up, you're looking at the contents of an iframe inside of an iframe (which would be Red.html, etc.).
So here's what I need to accomplish...
I need to use the back/forward buttons on Page1.html to navigate between the various "color" pages (which are framed inside of Page2.html).
I've found that it's easy to navigate backwards/forwards an iframe that's on the same page as the JS that's controlling the iframe, by using something like...
$(document).ready(function(){
$("#back_button_on_page1").mousedown(function(){
document.getElementById("iframe_on_page1").contentWindow.history.back();
});
$("#forward_button_on_page1").mousedown(function(){
document.getElementById("iframe_on_page1").contentWindow.history.forward();
});
});
etc etc.
But that's not what I need. What I need (and can't figure out how to do) is to control an iframe that's on another page, like so...
$(document).ready(function(){
$("#back_button_on_page1").mousedown(function(){
document.getElementById("iframe_on_page2").contentWindow.history.back();
});
$("#forward_button_on_page1").mousedown(function(){
document.getElementById("iframe_on_page2").contentWindow.history.forward();
});
});
I've put the above JS in a single file (Main.js), and then called that file from both Page1.html and Page2.html (after I included the jQuery libary on each page, of course). But it doesn't work.
So... does anyone know how to accomplish this?
BTW- if it makes any difference, the solution only needs to work in Chrome.
Thanks!
This is an issue I ran into before and I am still unsure as to why it happens.
The page in question is - http://nexrem.com/dragontimer/testdir/mobile/index.html
When you hit the Select server button, the page flashes the content that should be there, then its blank! One way I know this can be fixed is by adding data-ajax="false" to the link; however if I do that, then I run into another problem: on iPhone if I add the page to my home screen and then run it - click the 'Select Server' - opens up a browser instead of staying within the web app.
My goal is for users to be able to add the page to their home screen, with no url bar and just run all pages from within. It seems that having <meta name="apple-mobile-web-app-capable" content="yes" /> and the data-ajax="false" together isn't working out.
So basically 2 things:
How can I fix the screen flashing and displaying blank (unless refreshed)
or how can I have the web app with no toolbar and not open the browser every time user clicks buttons?
Thank You
Edit: Here is the code for index.html and servers.html
index.html - http://pastebin.com/Qh5s7QRp
servers.html - http://pastebin.com/Exv2MJrS
In your file index.html, include rel="external" instead of data-ajax="false" inside the definition of your link Select server.
So, you should have this instead:
Select server
You may also need to replace every data-ajax="false", that you included in the <a> links of both your HTML files index.html and servers.html, with rel="external".
Check the online doc for more information about rel="external" at http://jquerymobile.com/test/docs/pages/page-links.html :
Links that point to other domains or that have rel="external",
data-ajax="false" or target attributes will not be loaded with Ajax.
Instead, these links will cause a full page refresh with no animated
transition. Both attributes (rel="external" and data-ajax="false")
have the same effect, but a different semantic meaning: rel="external"
should be used when linking to another site or domain, while
data-ajax="false" is useful for simply opting a page within your
domain from being loaded via Ajax. Because of security restrictions,
the framework always opts links to external domains out of the Ajax
behavior.
Hope this helps.
I wish to disable loading the plone site if JS is disabled in the browser. Where exactly do I change the code? Which template/skin do I choose? I want to ensure that JS is always enabled while browsing any part of the plone site.
While browsing, if JS is disabled, I can redirect to another page with tag to enable the JS in the browser and give a hlink to the site back if it is enabled. I am using Plone 4.1
There is no way to enable JS without the user doing it himself from the browser settings. You can add instructions on how to enable JavaScript or redirect to a page which has the instructions by using the noscript tags like this:
<noscript>
<meta http-equiv="Refresh" content="5;url=http://example.com/foo/bar.php?js=false" />
</noscript>
The meta tag redirects to your no JS page in 5 seconds to allow browsers to come to the current page by clicking the back button. If the time of the redirect is too little, the page may not be saved in the history according to this article
Are you willing to also require cookies? If so, one way to solve this is:
Modify Plone's main template to include a test for a particular cookie.
If that cookie is not found (test with template logic), show the "oops, you need js" content.
In that no-cookie content section, include inline javascript to set a cookie and reload the page. If you don't want to allow js to set cookies, you can still set a query parameter on the redirect.
If the cookie or query parameter is found, return the real content. If the query parameter, set the http-only cookie.
If you want to avoid cookies or other sessioning mechanisms, an alternative approach would be:
Modify Plone's main template to
Set a display:none style on the visual portal or similar wrapper;
Add a JavaScript-needed to view this page message with display style on;
Put in inline JavaScript to set display:none on the JS-needed message and display:block on visual portal wrapper.
The gotcha on this is that the pages will actually be loaded w/o js — just not displayed. It's also certainly possible that the js-needed message might flash up while other resources load. Make sure the JS display fiddling is inline (not keyed to page ready or any other event) to minimize the effect.
Your pages must be loaded by JavaScript, which replaces static page Please enable JavaScript in your browser. This is only way to solve the problem.
I have no experience in Plone and don't know what template do that.
I am building a web application which I intend it to work like a traditional 'software': as few page reload, and page redirect as possible.
My solution to page reload and redirect is to have them as 'tabs' within the app, so when you click on another tab, the div of your current content will shrink to 0 width.
My question is: how do I prevent the content (writtent in JS, w/ PHP backend) in a tab to load unless when it's clicked on?
(Assuming this is what I should do to reduce unnecessary load)
Just don't load it until the link/button/etc. to the tab is clicked.
See also the jQuery tab implementations.
If your back-end is in PHP, you should control what you send to the client from there.
By the time the js gets the code, it is too late to control what not to load. You can hide it, or remove it, but it has already been loaded.
So, to reduce unnecessary load, and as a good practice, you should only send to the client the active 'tab'. That has to be done in PHP in your case.