I made an html page for my photos.
When clicking on some area, a lightbox sort of feature appears. So basically a part of the page which is not visible up to then comes in the middle of the screen.
I have a close button to get rid of it if someone wants, as well as the esc button.
However, and especially on phones, everyone clicks the phone back button. So I a trying to assign to the back button an event, that instead of "go back to the previous page" just "get rid of the lightbox".
Is that possible?
Many thanks,
Elias
A bit clumsy but...
window.onbeforeunload = function() {
if (LiteBoxOpen) {
var r = confirm("Do you wish to leave the page? Press no to just close image");
if (r == true) {
return true;
}
closeLiteBox(); // what ever is the function to close your litebox
return false;
}
} };
Since you don't want to delete the users history, most users hate that. But you could.
Related
I am having alot of trouble trying to fix this issue with this HTML template Click Here . Please scroll to the 1st template Demo under Shop Pages as shown in the image below.
(Please resize your browser to a mobile screen size)
When the user opens the mobile dropdown menu on the left, he should be able to close it by clicking outside of the menu, like by clicking anywhere else on the body of the page. Currently this only closes when the user clicks on the hamburger icon.
Also, currently if the user has the menu open and then he clicks on the body of the page and then goes back to click the hamburger icon because clicking the page did not work, the page freezes up and you are unable to scroll unless you tap the screen a bunch of times because that vertical scroll bar comes in and it has the focus I guess (creating a bad experience for mobile users).
I have tried to fix this with the following code I wrote, but once the menu slides back up it never comes back down as if it was deleted from the page:
<script>
$(document).on("click", function (event) {
var $trigger = $(".mobile-menu.hamburger-icon");
if ($trigger !== event.target && !$trigger.has(event.target).length){
//THIS IS WHAT WORKS BUT YOU HAVE TO CLICK OUTSIDE LIKE TWICE FOR IT TO COME BACK
$(".mobile-navigation.dl-menuwrapper").slideUp("fast");
}
});
</script>
I have also tried to add this piece of code to the page as well so that the menu can reappear if the user clicks on the hamburger icon again but it makes the page buggy because the menu will only come down once and then disappear again if you click on the body again while trying to close it.
<script>
$(document).on("click", function (event) {
var $trigger = $(".mobile-menu.hamburger-icon");
if ($trigger !== event.target && !$trigger.has(event.target).length){
//THIS IS WHAT WORKS BUT YOU HAVE TO CLICK OUTSIDE LIKE TWICE FOR IT TO COME BACK
$(".mobile-navigation.dl-menuwrapper").slideUp("fast");
}
});
</script>
<script>
$(".mobile-menu.hamburger-icon").on("click", function (event) {
$(".mobile-navigation.dl-menuwrapper").slideDown("fast");
});
</script>
How can I get this to work the way I need it to ?
Thank you!
I was able to somewhat fix this by adding some custom classes to the div for the icon button and by writing this snippet of code which seemed to do the trick for me.
<script>
$(document).on("click", function (event) {
var $BMI = $(".mobile-menu.hamburger-icon");
var $VMM = $(".dl-menu.dl-menuopen");
if ($BMI !== event.target && !$BMI.has(event.target).length && ($VMM.is(":hidden"))) {
$(".mobile-navigation.dl-menuwrapper.open-mobile-menu").addClass('open-mobile-menu');
$(".dl-menu.dl-menuopen").addClass('dl-menuopen');
}
</script>
I know that this is not a good practice :-) but I have a request to open a new browser window which is "always on top". It is a small notification/statistics window and not an ad pop up.
I tried with open a new window from main page:
<a href="okence.html"
onclick="window.open('okence.html', 'newwindow', 'width=400,height=320'); return false;"
>Click</a>
The new html file has:
<html>
<body>
<script type="text/javascript" language="javascript">
onblur = function() {
setTimeout('self.focus()', 100);
}
</script>
Test
</body>
</html>
The new window opens, but doesn't have "always on top". Is there any other way? Or maybe browsers don't allow that?
I have tried some suggestions (also set the focus of a popup window every time) but none of them works. New (small) window is opened, but if I click somewhere outside, its gone behind. I want a classic "Always on top" feature, where window stays on screen.
You can't do this. It's a huge security issue if sites could do this! Scammy web sites could keep visitors from de-focusing the window.
Think about it:
What if your e-mail program stuck a pop-up in your face every time you received a new e-mail message? If you don't like it, you will want to minimize it or at least hide it behind some other window. Problem is, what if you can't hide it behind another window? This ruins user experience.
Instead, try:
flashing the title bar (like Gmail when a new Hangouts message is received: title bar flashes from "Gmail - Inbox" to "<name> says..."). Like this: The code is below. Make sure to stop running the snippet when you're done by clicking Hide Results to make sure the snippet stops draining your RAM by flashing a title.
setInterval(function() {
var title = document.getElementById('title');
if (title.innerHTML === "Original Title") {
title.innerHTML = "New Notification!";
} else {
title.innerHTML = "Original Title";
}
},1000)
<p id="title">Original Title</p>
<small>Because Stack Snippets don't have <title> support, I used a p element there. In real development, replace <p> with <title>.</small>
adding a red dot to the favicon, so the user can see there is a notification when they glance on the tab bar. Code:
setInterval(function() {
var flash = document.getElementById('flash');
if (flash.src == "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAgklEQVQ4Ed2RSw6AMAhEOYhLT+7p3HiGGjRTp0OxJrpyQeiH9yhqtqzlVaSwWTGOrFEQAOoBfqfnzUGvIAAiqYInMGRc+42AjegyymCOF2AzgvgezF8EPhtm4jllvU1zQVx/D0U3AkCaz+8HgedEoiDvrT4FIpeIiAFdR4GKSMgwGu91q05tY4o1SAAAAABJRU5ErkJggg==") {
document.getElementById('flash').src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAdklEQVQ4Ed2RQQ6AMAgE+f8zfJ2/qME4zbqV1MSePDQU2FlKGrHt7dMp4YgWeqpBgwHQE5A9r98KT4IBMJNu8AbGTLVrDNSRKbMIc76AZAZpH+YvBrkbO+me1V21a76RSepMzaNr+gsQpsBF2SvrgB4BiN6/8gPOhlAtW0V8NgAAAABJRU5ErkJggg==";
} else {
flash.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAgklEQVQ4Ed2RSw6AMAhEOYhLT+7p3HiGGjRTp0OxJrpyQeiH9yhqtqzlVaSwWTGOrFEQAOoBfqfnzUGvIAAiqYInMGRc+42AjegyymCOF2AzgvgezF8EPhtm4jllvU1zQVx/D0U3AkCaz+8HgedEoiDvrT4FIpeIiAFdR4GKSMgwGu91q05tY4o1SAAAAABJRU5ErkJggg==";
}
},1000);
<small>Once again, stack snippets does not support favicons. In real development, change img to link.</small>
<img rel="icon" type="image/png" id="flash" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAgklEQVQ4Ed2RSw6AMAhEOYhLT+7p3HiGGjRTp0OxJrpyQeiH9yhqtqzlVaSwWTGOrFEQAOoBfqfnzUGvIAAiqYInMGRc+42AjegyymCOF2AzgvgezF8EPhtm4jllvU1zQVx/D0U3AkCaz+8HgedEoiDvrT4FIpeIiAFdR4GKSMgwGu91q05tY4o1SAAAAABJRU5ErkJggg==" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAgklEQVQ4Ed2RSw6AMAhEOYhLT+7p3HiGGjRTp0OxJrpyQeiH9yhqtqzlVaSwWTGOrFEQAOoBfqfnzUGvIAAiqYInMGRc+42AjegyymCOF2AzgvgezF8EPhtm4jllvU1zQVx/D0U3AkCaz+8HgedEoiDvrT4FIpeIiAFdR4GKSMgwGu91q05tY4o1SAAAAABJRU5ErkJggg==" />
What to avoid:
playing a huge sound when a new notification arrives
trying to force user activation (fortunately, most browsers block this)
lastly, opening a popup window.
So popups are not such of a good idea.
I'm using the following code in order to check when the user clicks a (cross-domain) iframe:
var myConfObj = {
iframeMouseOver : false
}
window.addEventListener('blur',function(){
if(myConfObj.iframeMouseOver){
console.log('Wow! Iframe Click!');
}
});
document.getElementById('YOUR_CONTAINER_ID').addEventListener('mouseover',function(){
myConfObj.iframeMouseOver = true;
});
document.getElementById('YOUR_CONTAINER_ID').addEventListener('mouseout',function(){
myConfObj.iframeMouseOver = false;
});
I'm using this to check if a user clicked a Google Ad, and it works fine the first time you click it. However the second click on the banner doesn't get registered (unless you refresh the page again).
What I've noticed, though, is that if I click anywhere OUTSIDE the iframe after the first click, and then I click the banner again, the click gets registered.
What I tried to do was use 'window.focus();' on mouseover, but it doesn't fix it.
Can you help me?
Im trying to set my LWJGL Mouse to grabbed and not grabbed when i push the left mouse button.
However this has proven to become a tricky matter since the LWJGL mouse for some matter executes the command multiple times randomly. For an example:
if (Mouse.isButtonDown(0)){
Mouse.setGrabbed( !Mouse.isGrabbed() );
System.out.println("Pushed");
}
if(Mouse.isGrabbed()){
camera.processMouse(1, 80, -80);
If i run this code it will print "Pushed" several times randomly per push. As you can imagine that becomes a problem when i try to set my Mouse to grabbed true or false from each click. the times i have tried this code it has printed "Pushed" 4 - 7 times per click
is there any way to make the Mouse only carry out the command once per click?
many thanks in advance to everyone who will take time to help me solve this problem.
Thomas
An easy way is to check a boolean field which you flip on the first iteration of the block after the mouse is clicked or released to tell you if this is the first time since the click that the if block has been executed. Here's an example:
private boolean alreadyClicked;
void someMethod(){
if(Mouse.isButtonDown(0)){
if(!alreadyClicked){
alreadyClicked = true;
// do what you want to do when the mouse is clicked
}
}
else{
alreadyClicked = false;
}
}
Alternatively you could use the event buffer of the Mouse class to detect clicks like this:
while(Mouse.next()) {
if(Mouse.getEventButton() == 0) {
if(Mouse.getEventButtonState()) {
// clicked
}
else{
// released
}
}
}
I read several threads that talk about how the Address Bar in IE is basically the first one to get focus when using TAB (MSDN's own docs talk about this).
Yet, I have seen situations where this doesn't always have to be the case....
I have a master page and inside my content area is a formView.
It defaults to INSERT view and can never leave it (they can only insert not edit and reading is handled elsewhere)
So on my page load for the page I have:
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If fvwLogEntry.CurrentMode = FormViewMode.Insert = True Then
'Set the default field to position the cursor there...hopefully
Dim FCtxtHrEmployeeId As TextBox
FCtxtHrEmployeeId = CType(fvwLogEntry.FindControl("txtHrEmployeeId"), TextBox)
Page.SetFocus(FCtxtHrEmployeeId.ClientID.ToString)
End If
Now that works, when the page loads it sets the cursor to the employeeID text box inside the formview's INSERT template.
HOWEVER, when I hit TAB it takes me to the address bar and THEN if I hit tab again it takes me through the rest of the items on the page.
I set the tab index of the first item to 11 and then incrimented from there (I had read that IE's toolbars have tab indexes too so I thought perhaps using a higher number would bypass those, but again that doesn't REALLY make sense since it would still start at the lowest number, but I gave it a shot thinking it would move forward from where the focus was set.) If I click on the textbox and then hit TAB it DOES move through the page like I would expect.
It is just when the page loads and gets the focus set to the employeeID textbox that hitting tab moves it to the address bar.
I also tried setting the other controls to -1 (those I didn't want it to tab to), still no luck there.
So... what can I do to get around this?
There MUST be a simple way to set the focus to the employeeID textbox and ensure that pressing TAB after that moves to the next control in the formview's insert template and does NOT jump up to the address bar?
The following jquery code seems to be working fine for me..
$(window).load(function () {
$('.myClass :visible:input:enabled:first').focus();
});
$('body').on('keydown', '.myClass :visible:input:enabled:first', function (e) {
if ((e.which == 9) || (e.keyCode == 9)) {
$('.myClass :visible:input:enabled:first').focus();
}
});
I found another better option which is fastest as of what I tried.
Here's the code for that
function handleTabOrder() {
$('.myClass :visible:input:enabled').each(function (index) {
$(this).attr('tabindex', index + 10);
});
$('.myClass :visible:input:enabled:first').keydown(function (e) {
if (e.keyCode == 9 || e.which == 9) {
$("[tabindex=10]").focus();
}
});
}
What I have done here is to assign Tab order to all the visible controls on the page, then I have handled the key down event of only first control(that shifts the control to address bar) and now it shifts the control to next visible input item on the screen..
Its just a work around but works faster than any of the other things mentioned in the thread.
Just write the above function and all it in on-load event of page.
I was having this issue as well. For me, it was being caused by the use of the .select() method in order to bring focus automatically on a text field as soon as the page loaded. I changed my code to instead use JQuery's .focus() method and that resolved the issue.
I faced similar problem in IE. After some analysis I found that, this problem occurs if there is any HTML content outside form.
for example:
<html>
<div id="1">
</div>
<form>
//other code
</form>
</html>
It worked for me, after I moved all HTML inside form tag.
<html>
<form>
<div id="1">
</div>
//other code
</form>
</html>
Have a look at: http://www.w3schools.com/tags/att_global_tabindex.asp
Your txtHrEmployeeId element should have tabindex 1 and all other elements should have higher values.
-1 is not valid
Also verify that the tabindex are correct in the html that gets rendered (right-click in page and "view source").
I realize this is an old post, but an even simpler method is to add a "tab-stop" attribute to the form element with the last tabindex. Then bind a keydown listener and force focus to the first tabindex when the tab-stop is encountered.
Here's a simple example:
<input type="text" tab-stop />
$document.bind("keydown", function(event) {
var attrs = event.currentTarget.activeElement.attributes;
if (attrs['tab-stop']) {
angular.element.find('select')[0].focus();
event.preventDefault();
}
});
};
The answer mentioned in my other post works fine but it made the page take a huge performance hit because with every key press on the page the whole DOM was being searched for the elements.
So I found a new more optimized solution
var myNameSpace = function(){
this.selector = '.myClass :visible:input:enabled:first';
this.myElement = $(selector);
this._body = $('body');
var _self= this;
this._body.on('keydown',_self.selector,function(e){
if ((e.which == 9) || (e.keyCode == 9)) {
_self.myElement.focus();
}
});
};
The general idea being to 'cache' the node to be accessed. No need to traverse the DOM again and again for just selecting.
I had this same problem. It turns out mine was related to the ajax modal popup extenders. a modal popup was being shown, even though technically i could not see it because it was wrapped inside a parent div that was hidden. if you are using modal popup extenders, this could be causing an issue like this.
If you are using JSF or Primefaces, you can make use of:
<p:focus for"formname"></p:focus>