jQuery event when clicked AND link - javascript

The title is a bit confusing but here's what I want to do -> There's a picture. When you click on it, a lightbox pops up (I already have that event). However, if you right click it and open in a new tab, I want a page to appear. Instagram has something similar to what I'm looking for. <a href=""> doesn't work - it executes both (launches the lightbox and redirects). How do I do that? Is there a way to cancel the href? Thanks.
EDIT: Here's a visual: http://jsfiddle.net/9VFGS/. In that case, I only want the alert() to be invoked when I click on it, but when I open it in a new tab, I want it to navigate to google.com.

Using event.preventDefault() (doc) in the event handler for triggering your lightbox will prevent the link from executing and changing your window location. Right-click context actions should still work, though, because they don't trigger click events.
$( '#my-link' ).on( 'click', function( event ) {
event.preventDefault();
// do my lightbox stuff here
}

Yes, set href="..." to href="#".

Related

How to trigger an event in jQuery?

I'm working on a page that opens a modal window when the user clicks a certain radio button. I want to trigger whatever that event handler is via my own jQuery code. Right now, I'm attempting to mimic a user clicking on the radio button by:
$("#myRadioButton").trigger("click");
The code works somewhat. The state of the radio button does become selected. However, the modal window does not open.
What must I do to trigger the events and event handlers that make the modal window open?
(Also, is there a way in Chrome DevTools to see what events are attached to an element?)
This will make the click function work, with a id on the element. You will need to make some logic for the modal itself, inside the function.
Not sure there is a way to see the events in the developer console.
$( "#myRadioButton" ).click(function() {
//Whatever you wants to happen, when you click the button
alert( "You clicked on #myRadioButton" );
});
Try and check out -> https://jquerymodal.com/

How to trigger my javascript pop up form with WordPress navigation link?

I've created a javascript pop up contact form, how do I trigger this after clicking a WordPress navigation item?
I have already tried the following code which works fine. However, after 1 second it loads the page which I've set the nav item to in WordPress.
document.getElementById('menu-item-177').addEventListener("click", function() {
document.querySelector('.bg-modal').style.display = "flex";
$('body').css('overflow','hidden')
});
I tried deleting the page, but obviously the nav link disappears. I also tried removing the menu item in the Menu settings of WordPress, same outcome.
I somehow need to block the page loading when the nav link is clicked. Is there a way round this?
Make sure that you are selecting the <a href=".. anchor element and listen for the click on that. I see that you have jQuery loaded in, so it might be good to just use that, or don't use it at all.
In your click event listener you listen for a click to happen. Whenever this click happens the function in the listener will be called. This function exposes some information about the event in the Event object. You'll see this in other pieces of code named e, evt, event or something else to refer to this Event object.
The Event object has a method called Event.preventDefault() which stops the browser from executing any kind of behavior that is linked to that element. Like navigating with an <a> tag. See why it is important to know what element you are clicking on? By adding that you can add your own behavior. See the example below.
$('#menu-item-177 > a').on('click', function(event) {
event.preventDefault(); // Prevents default navigation behavior.
$('.bg-modal').css('display', 'flex');
$('body').css('overflow', 'hidden');
});

Assign event to button from external library

Every time I press a button, there is a random chance that a alertify alert window popups. The alertify alert popup is something I use instead of javascript Alert, just to get a nicer design.
Alertify library
And here is a screenshot of the current situation:
I want to assign a event to the OK button. When I use the "inspect element" function in google chrome, I see that this green OK button has an id called "alertify-ok", so I want to assign an event when this button is pressed.
I've tried to add this part to my HTML document in the script part:
$( "#alertify-ok" ).on( "click",function() {alert("finally");});
But nothing happens. The reason why I need this to work, is that the youtube popupmodal should come up right after I've pressed the OK button. I belive the error comes because the alertify window with HTML is from an external library, so how can i do this?
Alerts and the others take callback functions on creation, https://github.com/alertifyjs/alertify.js/blob/0.3.12/src/js/alertify.js#L608. You don't need to attach another event listener, just give it the function you want it to execute. example below:
alertify.alert("alerttext", function(e) {
functionIWantToCall();
});
You can put the event on an element you know is already existent (like "body") and specify it to trigger only when the wanted element is clicked:
$(" body").on({
click: function () {...
}
}, "#trigger");

Ctrl+click on links with click handlers

I have a link (anchor) that has an href attached to it to navigate to a specific URL say 'www.bla.com'.
<a href='http://www.bla.com' />
I also have an click handler attached to the link that performs some actions and then opens an html view in the same window. Everything works perfectly well.
However, when the user uses 'ctrl+click' to open the link in a new tab/window, the click handler seems to be taking precedence and opens the html view in the same window. But I want to retain the 'ctrl+click' behavior and allow the user open the link in a new tab/window (just as a normal link). How could I do that?
Thanks in advance!
function process(e){
var evt = e ? e:window.event;
if(evt.ctrlKey)
alert("ctrlClicked");
}​
evt.ctrlKey will return true if control key is pressed, you can write your conditions within "if" block, I tested this for chrome and ff only.
Perhaps something like this?
function onclick(e){
var event = e ? e:window.event;
this.target = event.ctrlKey?"_blank":"_self";
}​
The associated click event object will have its ctrlKey property set to true if the control key (or equivalent) was pressed when the click occurred. Check the event object and if the control key was pressed, don't do the "HTML view" thing.
Click me!
However, if the user activates the link some other way, you may or may not get a click event.
e.g.
right button -> "open in new tab/window" - no click event (Firefox, IE)
Tab to focus on link, press enter - dispatches click event (Firefox, IE)
<a target="_blank" href='http://www.bla.com' />
Add target="_blank" within to anchor tag.

Link to anchor (ajax url) doesn't call onBeforeUnload

I have an onbeforeunload event :
$().ready(function() {
window.onbeforeunload=function() { return "haha" };
});
And my links are like this (ajax web site) :
<a href="#pageX" />
But the onbeforeunload is never called. What can i do ?
Thanks
I'm guessing since you're trying to bind to the onbeforeunload and return a string, that you're looking to provide the user with an "Are you sure you want to leave this page" dialog on an AJAX site.
In which case you probably need to go about this a little differently by binding a click handler onto the links. So you can prevent the hash change until the confirmation is made.
Something like:
$('a[href^="#"]').live('click',function(e){
if( //should we be confirming first? ) {
//put your confirmation code here either using default JS windows or your own CSS/jQueryUI dialog boxes
// this code should either cache the url of the link that was clicked and manually update the location with it when the user confirms the dialog box (if you're using JQUI windows) or simply use JS confirmation boxes and based on the response, all you need to do is return; and the link click will handle normally
e.preventDefault(); //prevent the link from changing the hash tag just yet
e.stopImmediatePropagation(); //prevent any parent elements from firing any events for this click
}
} );
Don't get me wrong, but are you serious ?
That link just refers a hash-tag, hence, it will not leave the current site and there will be no call to onbeforeunload nor unload.
If there is any *click event handlerbound to that anchor aswell, there must be something in the event handler code which really forces the current site to get unloaded (location.href` for instance).
If you just switch HTML via Ajax, there is no onbeforeunload aswell.
You could bind a handler to the onhashchange event (check browser compatibilty) but that would fire for any change that happens in your url/hash.
You're probably looking for the onhashchange event:
https://developer.mozilla.org/en/DOM/window.onhashchange

Categories

Resources