This is a single page website with navigation consisting of anchor links to different sections of the page. When the navigation is clicked URL updates to ex.(.com/#photos) and makes the browser add as a new page for each anchor link clicked. This makes the user have to click back multiple times if they wanted to get back to a previous website. I would like to have at max 2 back button presses, 1 to go to top of the page, 2 to go to previous website. I am really at a loss on where to implement this code, or if it is even ideal to mess with how the browser acts to the user. My google-fu turned up very little information on this issue.
You can attach a function to window.onpopstate event and then check if window.history.length has changed. If it has not changed, probably it is the back button press.
Like this..
var prevHistoryLength = -1;
window.onpopstate = function(e){
if (prevHistoryLength == window.history.length)
document.location = document.referrer;
prevHistoryLength = window.history.length;
}
Related
I am making a project in school where we need to make a small website on a specific topic, now I want that when the browser's back button is clicked. I come to my home page which I have included in the code provided above, Please help me!
i dont know if it is true or not , but i tried a simple code now , so when user opened our first page , current page URL will save in your session or cookie . after that in second page when user clicked back button you should save that page URL in session again . when user clicked back you have 2 URL and you can check : if these 2 URL matches it means user is in same page , but else user clicked back button . and you must check this in all your pages or in pages you want .
if ($_SESSION['link1'] === $_SESSION['link2']) {
$backClicked = false;
}else {
$backClicked = true;
header("location: Your Home Page");
}
There is no way to control the back button in a browser only using HTML and CSS. You will have to use JavaScript.
With JavaScript you could look to use history.pushState() or history.replaceState() to modify the history of the browser. Adding the homepage to the history, so that when the user clicks the back button that is where they will go.
You can read more about the History API here:
https://developer.mozilla.org/en-US/docs/Web/API/History_API#Interfaces
I have a SideMenu page fragment in my app. On each and every page, I have a copy of this page fragment.
My intention was to create a SideMenu with openable SubMenus (only one sub menu could be open at a time), but I could not get it done to make the app "remember" the state of the SideMenu( like which SubMenu should be open, and which ones shouldn't), because on each site there is a different widget, so when in my code ( in my onClick events) I refer to the widget, I am not handling "a global SideMenu" but rather a specific copy of it, unique to that page.
Sadly, this took several hours of debugging to realize, I am defeated.
Is there anyway to place a page fragment on a page, so I can handle that widget on its own, not just it's copies?
Thanks in advance, I can try to specify more the question if it's needed.
I agree with #MarkusMalessa. You need to invoke the widget on every page and then apply whatever change on it. I am doing the samething on a project in which I intend to shrink and expand the sideMenu. To give you an idea, evertime I click a button on the side menu responsible for the logic, this is the code that's invoked:
var pages = app.pages._values;
pages.forEach(function(page){
var sideMenu = page.descendants.sideMenu1;
if(sideMenu){
if(widget.text === "chevron_right"){
sideMenu.getElement().style.width = "300px";
} else {
sideMenu.getElement().style.width = "60px";
}
}
});
That way every sideMenu widget inside each page that has it receive the same changes.
Ok,
I have a script on my website that counts the amount of clicks and downloads each of the images on the site gets, but I have noticed that people have been right clicking and downloading the images, or dragging them to the top bar to get them without clicking on them.
Is there any way I can stop them from being able to get the image without clicking on it first? I have disabled right click already, but there is still a way to get the images (by dragging the image to the url bar).
Thanks
As far as I know, you can't. Because there is always a url in the source code.
You can prevent right-click with the below code if it helps. Also take a long at a previously asked question Disabling right click on images using jquery. You can use flash or overlay it with another transparent/blank image to make it difficult to copy.
$(function () {
$(this).bind("contextmenu", function (e) {
e.preventDefault();
});
});
I have a website that has a music player in one of the corners. Because I didn't want the music to stop everytime the user changes part of the website, I used an iFrame for the content. So when someone clicks the menu buttons, all that changes is the source of the iFrame.
Now the only problem is if someone tries to open one of the sub-pages in a new tab/window. All they get is black text on a white background, with the content that was supposed to be in the iFrame.
Is there any way to prevent this?
Oh, and the page this is about is www.sinjabe.com if that helps.
Thanks
The most logical solution (to me...) would be to detach the music player from the page; have the music player open in a different window / tab. You can have the music player in a pop-up window when the visitor of your site requests it / clicks on it.
Other solutions like detecting if the content has a parent frame, will lead to multiple music players if someone opens a page in a new tab / window.
You can alter your sub-pages to detect if they are loaded in an iframe like this:
(window.location != window.parent.location) ? true : false;
and then load or redirect to the full template as needed.
Put this on your sub pages:
<script type="text/javascript">
if (window.location == window.parent.location)
this.window.location = 'main_site.html';
</script>
-- Give credit for this one #George Cummins for writting such a short conditional statment :)
This will redirect any direct incomming trafic on your subpages to your main page. I must warn you though, that iframes for displaying such content are highly SEO unefficient, and URL useless in terms of history mapping (back button will not work) and link sharing, because the main URL doesn't change while you click on menu buttons.
I'm trying to focus an existing tab when the content reloads. The usual window methods don't seem to work.
Here's whats happening: On page_1 I have a link like...
Go to my other page
If the tab doesn't exist, when the link is clicked it opens a new tab and takes focus. (Perfect)
If you then go back to page_1 and click the link again, it reloads the content in the existing tab (perfect) but doesn't focus (crap). I've tried the usual window.focus, $(window).focus methods on load with page_2 without luck.
Any recommendations?
It is impossible.
The following appears to work in IE8 and FF13:
<script type="text/javascript">
// Stupid script to force focus to an existing tab when the link is clicked.
// And yes, we do need to open it twice.
function openHelp(a) {
var tab = window.open(a.href, a.target);
tab.close();
tab = window.open(a.href, a.target);
return false;
}
</script>
Help
There is a workaround to this. Use javascript to open a window in a new tab, store a reference to that tab, and when you want to focus it; close it first and then re-open it.
if (window.existingWindow != null)
try { window.existingWindow.close(); } catch (e) { };
window.existingWindow = window.open("/your/url", "yourTabName");
We use a similar approach to opening the preview pane of the current page you're working on in our service called Handcraft where the above works as expected (we wanted the new window to always focus).
Without using a framework you can put a script block at the bottom of your page that will run once the page loads. Because it is after your HTML you can be assured that the HTML is refers to is actually available.
The script can set the focus to the element you want.