I'm doing a site for a kiosk, so the site goes like a photoslide in-between each div.
I put a layover/mask on the first page, and the layover/mask is removed on a mouse click function at the moment. (As a side note this is for the purpose of hiding the address bar on the first screen for the kiosk as the first page/div is an a tag)
$("#item1").append('<div id="pageLayover"></div>');
$(document).click(function(){
$("#pageLayover").remove();
});
Everytime you click your mouse to remove the layover then you need to click another time then the first a tag page will slide to the second page.
Is there any way I can have one click only not two to remove layover/mask and to let first page to slide to the second page at the same time?
Here is my code on jsFiddle Any code/links/examples would be great help.
Thanks in advance!
Your question is very confusing, but maybe this is the answer you're looking for:
To make the click on the layover in fact two clicks, you can simply trigger the click event of the first panel:
$('#pageLayover').live('click', function(e) { // <-- updated!
$("#pageLayover").remove(); // remove our layover from the DOM
$panels.eq(0).click(); // <-- trigger click event of 1st element of $panels
});
This does not check if the click occurred on the panel though.
You can solve the problem with the multiple layovers with this:
$('#wrapper').scrollTo($(this).attr('href'), 800,{
onAfter: function(id){
if ($('#pageLayover').length == 0) { // <--- new
$("#item1").append('<div id="pageLayover"></div>');
} // <--- new
Related
I ran into an issue in JavaScript, I tried searching for a solution but I guess I just don't know exactly what I'm searching for - therefor since I could not find an answer to my problem I'm asking for some help here:
I have 2 JavaScript functions which are supposed to simulate a loading page on ajax call just by adding an overlay div and changing the css state of the cursor to loading, then back to normal:
function LoadMouse(ths){
if($("#overlay").length==0){
$("body").css({"cursor":"wait"});
$(ths).css({"cursor":"wait"});
$("body").append(\'<div id="overlay"></div>\');
}
else{
return false;
}
}
function AutoMouse(ths,Cursor){
if (typeof Cursor === "undefined"){ Cursor = "auto"; }
$("body").css({"cursor":Cursor});
$(ths).css({"cursor":Cursor});
$("#overlay").remove();
}
In my code I'm calling this function from jQuery in various places, for example:
function doFirstThing(){
$(document).on("click",".element1",function(){
var This = $(this);
LoadMouse(This);
//do stuff
AutoMouse(This);
});
}
function doSecondThing(){
$(document).on("click",".element2",function(){
var This = $(this);
LoadMouse(This);
//do stuff
AutoMouse(This,"pointer");
});
}
The idea is if element2 had a pointer cursor in the css in the first place - I want it to become a pointer once again.
Now say I call the function on element2 - it works and the cursor changes to a pointer but when I click on element1 the cursor changes to auto for both element1 and element 2, if I click element 3 it will change for elements 1,2 and 3 and so on. How can I fix this problem?
(by the way I'm changing the css on both the body and the element because when I tried it only for the body it would not change on the element itself).
EDIT:
In response to the comment about the html: its just a simple tag:
click here
click here 2
when I click element 2, and run my LoadMouse button passing 2 parameter into it, the following happens when inspecting the element in chrome:
step 1:(when LoadMouse() runs):
click here 2
step 2:(when AutoMouse() runs):
click here 2
But afterwards when I click on element 1 the second elements inline css is affeced as well:
step 1:(when LoadMouse() runs):
click here
click here 2
step 2:(when AutoMouse() runs):
click here
click here 2
I have a class in D3 say: selectors and I need to remove the click event from the selection
d3.selectAll('.selectors').on('click',function(){
//Remove the currently clicked element from the selection.
});
Ive got two problems:
The removed element is supposed to be moved to a different part of the page and the I need the click event on it to be removed.
Also, would it be possible to reinsert the removed element into the selection on doing something else, like clicking on the removed element again?
Edit:
Found a solution for problem 1
d3.selectAll('.selectors').on('click',function(){
//Remove the currently clicked element from the selection.
d3.select(this).on('click',null);
});
Is this the right way? Or is there a more graceful method?
A Demo Fiddle
here is the updated jquery it will work for your case
$(document).ready(function(){
$(document).on('click','.selectors',function(e){
//$(document).off( 'click','.selectors');
if(e.target.onclick==null)
{
e.target.onclick=
function(){
void(0);
};
alert('test');
console.log('Hello');
}
});
});
For problem 1, the best method(as far as I know) is to redefine the click event in D3 itself:
d3.selectAll('.selectors').on('click',function(){
//Remove the currently clicked element from the selection.
d3.select(this).on('click',null);
});
For problem 2, however, once you turn a click event callback to null, the only way is to redefine the click event again, perhaps recursively:
function clickDefine() {
d3.selectAll('.selectors').on('click', function () {
//Remove the currently clicked element from the selection.
console.log('Hello')
d3.select(this).on('click', null);
setTimeout(function(){clickDefine();},1000)
});
}
This function makes the click event inactive for 1 second on click. And reactivates this again. I'm hoping this is an effective solution.
Currenlty when a page is posting back or something else is going on I display a big grey div over the top of the whole page so that the user can't click the same button multiple times. This works fine 99% of the time, the other 1% is on certain mobile devices where the user can scroll/zoom away from the div.
Instead of trying to perfect the CSS so that it works correctly (this will be an on going battle with new devices) I've decided to just stop the user from being able to click anything. Something like $('a').click(function(e){e.preventDefault();}); would stop people from clicking anchor tags and navigating to the link but it wouldn't stop an onclick event in the link from firing.
I want to try to avoid changing the page too radically (like removing every onclick attribute) since the page will eventually have to be changed back to its original state. What I would like to do is intercept clicks before the onclick event is executed but I don't think that this is possible. What I do instead is hide the clicked element on mouse down and show it on mouseup of the document, this stops the click event firing but doesn't look very nice. Can anyone think of a better solution? If not then will this work on every device/browser?
var catchClickHandler = function(){
var $this = $(this);
$this.attr('data-orig-display', $this.css('display'));
$this.css({display:'none'});
};
var resetClickedElems = function(){
$('[data-orig-display]').each(function(){
$(this).css({display:$(this).attr('data-orig-display')}).removeAttr('data-orig-display');
});
};
$('#btn').click(function(){
$('a,input').on('mousedown',catchClickHandler);
$(document).on('mouseup', resetClickedElems);
setTimeout(function(){
$('a,input').off('mousedown',catchClickHandler);
$(document).off('mouseup', resetClickedElems);
}, 5000);
});
JSFiddle: http://jsfiddle.net/d4wzK/2/
You could use the jQuery BlockUI Plugin
http://www.malsup.com/jquery/block/
You can do something like this to prevent all actions of the anchor tags:
jQuery('#btn').click(function(){
jQuery('a').each(function() {
jQuery(this).attr('stopClick', jQuery(this).attr('onclick'))
.removeAttr('onclick')
.click(function(e) {
e.preventDefault();
});
});
});
That renames the onclick to stopclick if you need to revert later and also stops the default behavior of following the href.
document.addListener('click',function(e){e.preventDefault()})
Modified-
Its your duty to remove the click event from the document after you are done accomplishing with your task.
Eg -
function prevent(e){
e.preventDefault()
}
//add
document.addListener('click',prevent)
//remove
document.removeListener('click',prevent)
I have a link which I am going to use as notification when a user has some new notification I am going to notify the user by showing a tooltip(twitter bootstrap tooltip). What I want to achieve is, that tooltip should remain visible till the user clicks the link. once the user clicks the link, the tooltip should destroy.
this is what I have till now, http://jsfiddle.net/testtracker/QsYPv/
HTML
<p>Notification.</p>
JavaScript
$('p a').tooltip({placement: 'bottom'}).tooltip('show');
What's happening there is, tooltip stays visible till you hover it, and takes its default behaviour (show on hover) once you hover it.
I hope I have given proper info and cleared what I want to do.
Here is the solution http://jsfiddle.net/testtracker/QsYPv/8/
Added the option "trigger"
$('p a').tooltip({placement: 'bottom',trigger: 'manual'}).tooltip('show');
then, with this line
$('p a').on('click',function(){$(this).tooltip('destroy');});
destroy tooltip on click.
You can add a variable to trigger off the mouseleave event to re-show the tooltip, and then as you said in your comment, just destroy the tooltip when clicked, so it doesn't show when you mouseover again:
var clickedNotify = false;
$('p a').tooltip({placement: 'bottom'}).tooltip('show');
$('p a').mouseleave(function() { if (!clickedNotify) { $('p a').tooltip({placement: 'bottom'}).tooltip('show'); } });
$('p a').click(function() { clickedNotify = true; $(this).tooltip('destroy'); });
This way, the tooltip is always shown, even after a mouseleave, until the link is clicked. After the link is clicked, the tooltip is destroyed, and still won't generate javascript errors on the page on mouseleave.
I am have an issue with the page reloading. I have written a simple jQuery script that will tab through content. You can see it in action here: http://www.jonathanmaloy.com/tabstack/
The problem is that the page reloads and starts back at the top. I want to be able to have it stay in the same position so when you click on the next tab you wont have to scroll down the page back to it.
preventDefault() and return false do not fix the problem.
If there is anything else you need let me know but with the above link you can see everything.
Here is my current jQuery code:
$(document).ready(function() {
$('#tabnav li').click(function() {
$(this).not('.active').each(function() {
$('.tab').hide();
$('#tabnav li.active').removeClass('active');
});
$(this).addClass('active');
$($(this).attr('title')).fadeIn(450);
});
$('#tabnav li:first').click();
});
Thanks in advance for any help!
Edit: Updated answer based on properly reading the question :-)
As discussed in the comments the problem arises when a new tab is shown and a previously shown tab is hidden. The DOM removal of the previous tab shrinks the page which causes the browser to jump to the top of the page which looks like a page reload, when actually it is not.
The following JavaScript stores the visible tab first and removes it once the new tab has begun to fade in. I also made a few changes to speed up the function by storing some jQuery objects so save re-querying the DOM each time. Also note that you did not need the each() as the same result can be achieved with a different selector, plus in your original code you were effectively hiding all .tab class elements multiple times.
$(function() {
var tabItems = $('#tabnav li'); // save looking this up multiple times
$('.tab').hide(); // hide all initially
$('#tabnav li').click(function() {
// remove active class from all and store the visible tab
tabItems.removeClass('active');
var visibleTab = $('.tab:visible');
// add class to selected list item
$(this).addClass('active');
$(this.title).fadeIn(450); // show new tab
visibleTab.hide(); // hide old one (DOM already has new tab in so page height will not shrink)
});
$('#tabnav li:first').click();
});
You want to either call event.preventDefault() or add a return false; (you don't need the event for this one) to the end of the function.
By default the browser would execute any click functions bound to the element being clicked on and then follow the link (which I assume is href="#" or similar) that causes the browser to reload the page. Since you are binding a function to the click event you are need to stop the click event from continuing and the browser will not continue execution and follow the href.
JavaScript
$('#tabnav li').click(function(event) { // <-- added the eventData map
$(this).not('.active').each(function() {
$('.tab').hide();
$('#tabnav li.active').removeClass('active');
});
$(this).addClass('active');
$($(this).attr('title')).fadeIn(450);
event.preventDefault(); // or return false;
});