At the bottom of html page, there's a button with onClick function.
As the page has only internal css, when users save the page (Right click > Save As) as html file, the page is saved without additional folders (just html) but the button is visible at the bottom.
How to hide the button when people save html page. After saving, when they open it on their computer, the button should be hidden because it doesn't work without scripts so it has no purpose to stay there.
JavaScript has no event for this type of action. You cannot determine when a user saves a page. It is part of the browser itself, not part of the page.
Ok, based on the comment string in Diodeus's answer, you could use Javascript to generate the button. Provided the script file is linked and not hosted, it won't be accessible when the user saves the page, and therefore the button would never be generated. Something like this:
Header
<script type="text/javascript" src="/js/script.js"></script>
Where script.js is the Javascript to generate your button. that script should include something like:
window.onload = button;
function button() {
//generate button here
}
Since script.js doesn't exist on the user's local machine, it will never run and the button will not exist. It does however exist on your hosted server and so any user visiting your site will see the button.
Make the button hidden by default (using CSS: display:none;), and then unhide it with Javascript when the page loads. You can do this by adding (or removing) a CSS class, or by updating the button's style attribute directly.
Evaluate the current url with document.URL and if it is equal to C:\ or http://localhost than do $('button').remove();
Related
I have a form when on submit it will run two on-click events the first to redirect the window location to the new page and then the second to open the hidden div as below.
The issue is that it will load the new div in the source code and change it's status to display block but when it refreshes for the window location the function showDiv() is then hidden again. I'm sure there is a way to merge them both into one but I'm struggling.
function SetUpRedirect(destination)
{
setTimeout("window.location=\'/?page=4\'",1000);
return true;
}
function showDiv() {
document.getElementById('thanks').style.display = "block";
}
If I understand you right, the problem here is that you refresh the page. Once you refresh the browser loads a new DOM and forgets all about the old one and all the modifications you made to it. Changes you do to the DOM with JavaScript are not persistent over page loads.
So, how can you get around this? I can think of three options:
Alt 1. Use some kind of server side scripting, i.e. PHP, and pass the state of the div in the URL:
window.location = "/?page=4&display=block";
Then in the PHP (or whatever language you use), you need to read the value of display and handle it appropriately.
Alt 2. Set a cookie with JavaScript to signal that the div should be displayed, and when the page loads check if the cookie is present and adjust the display property of the div appropriately. You can read more about cookies in JavaScript here.
Alt 3. Design your page in such a way that a page load is not needed (for instance submitting the form with AJAX). This could require a major redesign, though.
This might help you with your problem. Since window.location will just reload the page and reset all the styles to the original form: How can I make a redirect page using jquery
I am working on this website http://techxpertschico.com which uses ajax and .htaccess to update a single index.php page, the problem is that I can't get the back button to work. For example if you click two separate top header links and then click back it will not change the content you are looking at even though the url will be updated. This is because my logic to direct the user to the proper web page happens using php but when a user clicks the back button they receive a cached copy of the page therefore no server request. In fact, you'll notice if you click refresh on my site after clicking the back button it will load the correct content because it will send out the server request. My first thought to fix this was to force a refresh when a user clicks the back button, but I couldn't get this to solve the problem. I tried using header files, I tried using javascript, and I failed, so I'm asking for help once more. I just need to be able to parse the URL and direct them to the appropriate page but normally I do this using php and since the back button uses caching I am not sure if I need a javascript solution or if I need to try harder to figure out the forced refresh approach.... What would you do, or what do other sites that use a single index.php file do?
P.S. I'll post any code if you need to see it. Looking at my question from yesterday might help. How to refresh page on back button click?
Your problem is not related to the cache mechanism.
I've just checked your website using firebug and I have noticed that after loading the home page (without ajax), you use ajax to load requested page asynchronously and change URL in the address, the URL altering is done by your code which is ignored by firefox.
The URLs altered with code are not kept in the browser's history, this is why the Back button doesn't work in your case
EDITED, added own working Code example
If you are still working on this:
I do suggest you take a look into this article
change-browser-url-without-page-reload
I think it explains a good method which is not too complicated to make use of the HTML5 history possibilities.
Here's the code I finally implemented on my site, and the only issues I have is with my expandable menu states when going back in history..
HTML just uses a DIV with #content-main on your index.html, for all the external html-file contents will be loading into it.
The links(anchor) which should direct to that DIV get a class assigned: ajaxLink
In your referenced html-files, just write the content, no head or body.
You may include scripts, though, if it makes sense to not put them on your index page.
$(function () {
//AJAX: load html-pages dynamically into this site's div (#content-main), and add browser history and URL support
/*unnecessary? I don't use the next 3 lines of code
//To override the default action for the link(anchor tag), use the following jQuery code snippet.
$("a.ajaxLink").on('click', function (e) {
//code for the link action
return false;
});
*/
//Now to get the ajax content and display it and change the browser URL to the specific location without refresh use the following code.
$("a.ajaxLink").on('click', function (e) {
e.preventDefault();
/*
- if uncomment the ABOVE line, html5 nonsupported browers won't change the url but will display the ajax content;
- if commented, html5 nonsupported browers will reload the page to the specified link.
*/
//get the link location that was clicked
pageurl = $(this).attr('href');
//to get the ajax content and display in div #content-main
$('#content-main').load(pageurl);
//to change the browser URL to the given link location
if(pageurl!=window.location){
window.history.pushState({path:pageurl},'',pageurl);
}
//stop refreshing to the page given in
return false;
});
//the below code is to override back button to get the ajax content without page reload
//added some details from http://rosspenman.com/pushstate-jquery/ - otherwise going back in history to initial page resulted in issues
$(window).on('popstate', function(e) {
if (e.originalEvent.state !== null) {
$('#content-main').load(location.pathname);
}
else {
$('body').load(location.pathname);
}
});
});
I have my webapplication structured like this:
Main page with n links and a tabbed structure
Every link opens a tab in the tabbed structure of the main page and with ajax loads the page in the tab
Because every page needs different javascript functions (mainly for the init part) in the complete function of the ajax load I load the .js script and execute it.
Now I have a problem: I need to have a text editor in one of these tabs, so I chose TinyMCE. It needs to be initialized, but only once, otherwise it will crash.
Now I need a way to check how many times the user opened the tab.
I was looking for variables scopes in jsps, and found "Session Scope". I know server side session variables cannot be accessed from clients, but these session scope variables in the jsp are client side, so I thought I would be using a session variable jsp side to count how many times the user clicks on the link.
In the main jsp I put:
<c:set var="timesEditorLoaded" value="0" scope="session" />
The link which opens the editor is:
<a tabindex="22" id="proposte_propostaTesto_a" class="colorbox" href="${pageContext.request.contextPath}/editorPopup?hiddenCallerFormElementId=proposte_propostaTesto&" onClick="incrementEditorVariable();">Apri editor</a>
The function incrementEditorVariable() is:
<script type="text/javascript">
function incrementEditorVariable()
{
alert("incrementEditorVariable: " + timesEditorLoaded);
timesEditorLoaded = timesEditorLoaded + 1;
}
</script>
but in Chrome I get:
Uncaught ReferenceError: incrementEditorVariable is not defined
If I put the function incrementEditorVariable in an external .js file, how can I access the session variable stored in the jsp?
Is there a way to accomplish this?
Thank you in advance!
You can modify the onclick event when the user clicks on the button. Seems a little crappy, but can solve everything if the onclick has only one thing to care about.
I ended up adding a session variable to the MVC architecture, and accomplished this task. I was doing this to try to repair a bug, I accomplished to count the number of times the user clicked on a link to prevent to init n-times a TinyMCE instance, but this didn't solve the problem of the menus staying open.
My webpage is accessible for users without sign in, but some action requires an authentication.
I would like to show the Janrain popup window only when the user clicked on the Sign in button. My webpages usually generated dynamically with Javascript.
As far as I know, the only way to show the popup is to include an a element to the page with class="rpxnow", add the link to the rpxnow.com/js/lib/rpx.js script, and this script will add an onclick handler to my a element.
But I didn't have any a element when the page was loaded, and I don't like to waste the anonymous user's bandwidth with the unnecessary <script> tags on every page.
So my question is: how to attach the Janrain popup event trigger to a dynamically created HTML element?
What's the language you are using? Just add the script tag when needed:
if ($require_authentication)
{
echo "<script src='http://static.rpxnow.com/js/lib/rpx.js' ...";
}
if ($require_authentication)
{
echo "<a class='rpxnow'>";
}
But you still need a element.
i have a page containing a form and directs to another page (page2) asusual. Page 2 have a edit button that must include the entire previous page into a div in page2(initially it has none).How to do this with javascript?
You can use the
load
function in jQuery. It loads HTML from a remote file and inject it into the DOM.
$("#yourdivid").load("page1.html");
With jQuery you can get the html of the page using the following...
var x = $("body").html();
You can then add that to your form.
If you don't require the entire page (the page will include the form again after all), you can change the selector in the code example to limit it to any part of the page.