I prepared fragment of my page to show you my problem:
a link
On the bottom is show small red window named div "pomocnik"
In Chrome browser click on the "close" icon do it works, but IE does the work prepared for clicking in the text inside DIV
onclick="document.location.href('http://www.google.com')
so it open new page.
IE has detected onclick for DIV but Chrome detected more in detail for image.
My idea is to close window after clicking on close button.
$('#close').click(function() {
//var g = document.getElementById("pomocnik");
//g.style.display = 'none';
$('#pomocnik').hide(2000);
$('#konsul').click = null;
});
I think that the problem is that the event (click onto close image) first calls the event handler which hides your div, but then bubbles up to the containing div and starts the default action for it (open the link). Try the following:
$('#close').click(function(e) {
//var g= document.getElementById("pomocnik");
//g.style.display= 'none';
e.stopPropagation(); //this will prevent the event from bubbling up to the containing div
$('#pomocnik').hide(2000);
//$('#konsul').click=null;
});
Related
I have these buttons on frontend and only one is visible at a time. .btn-active hides the button.
Buy Now
Buy Now
on button click, I wanted to open the package link by concatenating package id in href in jquery.
jQuery('#starter-monthly').on('click', function(e) {
var href = jQuery(this).attr('href');
window.open(href + '?package='+24);
});
jQuery('#starter-yearly').on('click', function(e) {
var href = jQuery(this).attr('href');
window.open(href + '?package='+27);
});
but when I click the button, it opens 2 links in 2 separate tabs which are https://example.com/shop?packag=24 and https://example.com/shop/
I wanted to open only one link which is https://example.com/shop?packag=24
What I am doing wrong? Any solution?
Clicking on an anchor element (a tag) instructs the browser to open the link. Having target attribute further tells the browser to open it in a new window/tab. Now your code captures the click event and explicitly opens a new window (with proper url). However, that doesn't prevent the browser from carrying out the original action intended for all 'anchor' tags.
Basically you see two tabs opening, because one is opened by your code, and the other one by browser because of the click on anchor tag. You can suppress the default browser behaviour by calling preventDefault on the event object passed to your handler. Your code should be something like this:
jQuery('#starter-monthly').on('click', function(e) {
e.preventDefault();
var href = jQuery(this).attr('href');
window.open(href + '?package='+24);
});
jQuery('#starter-yearly').on('click', function(e) {
e.preventDefault();
var href = jQuery(this).attr('href');
window.open(href + '?package='+27);
});
I click on the button in red rectangle to show the windows. Now, if want want to close the windows, i just click on other part of the grey bar. What I want to do is to modify the code to click the button in red rectangle 2nd time to close the windows, but it does not work.
I have put the html and related files here.
The main html is chat.html, where the main javascript lies in
assets\plugins\emojiarea\jquery.emojiarea.js
Following is portion of the code:
EmojiMenu.prototype.hide = function(callback) {
if (this.emojiarea) {
this.emojiarea.menu = null;
this.emojiarea.$button.removeClass('on');
this.emojiarea = null;
}
this.visible = false;
this.$menu.hide();
};
EmojiMenu.prototype.show = function(emojiarea) {
if (this.emojiarea && this.emojiarea === emojiarea) return;
this.emojiarea = emojiarea;
this.emojiarea.menu = this;
this.reposition();
this.$menu.show();
this.visible = true;
};
I try to use this.visible to detect the whether the windows has been opened, if yes, then close it, but it does not work out. Is there a possibility to make the windows closed when I click the button in red rectangle 2nd time?
So I went through the plugin. This piece of code:
$body.on('mouseup', function() {
self.hide();
});
is why you couldn't use this.visible to check if it was already open or not,because every time you click on the button too this mouseup is triggered effectively hiding and then showing the popup.
Right after this:$button.on('click', function(e) {
EmojiMenu.show(self);
e.stopPropagation();
});Add this:$button.on('mouseup', function(e) {
e.stopPropagation();
});This will prevent the bubbling of the mouseup event from the button itself.Now you can use "this.visible to detect the whether the windows has been opened, if yes, then close it."
$(".clickPlan").click(function(){
$(".panel1").animate({left:'0px'});
});
$(".sendBtn").click(function(){
$(".panel1").animate({left:'300px'});
});
$(document).click(function() {
$('.panelBox').fadeOut('fast');
});
$(".clickPlan").click(function(e) {
e.stopPropagation();
});
Fiddle here:
http://jsfiddle.net/stupaul22/qV246/5/
I am close. This is the functionality I want.
Click "SHOW PANEL" animates the panel onto the screen.
You can enter name and email without making the panel disappear.
Clicking "SEND" animates the panel off to the right.
Clicking anywhere outside the panel and outside "SHOW PANEL" makes the panel fade.
After a fade --> Click "SHOW PANEL" animates the panel onto the screen FROM LEFT.
You could try adding a click handler to the .panel1 class and stop the event from propagating to the click handler that's on your document.
// will stop the event from reaching the $(document).click handler
$(".panel1").click(function(e){
e.stopPropagation();
})
http://jsfiddle.net/qV246/6/
I'm struggling with this javascript at the moment.
$(document).ready(function () {
var visible = false;
var body = false;
$("body").mouseup(function () {
if (visible) {
$(this).parent().find("ul.subnav").slideUp('slow');
visible = false;
$(this).removeClass("clicked-background");
body = true;
}
});
$("ul.topnav li a").click(function () { //When trigger is clicked...
var menu = $(this).parent().find('ul.subnav');
if (!visible && !body) {
$(this).parent().find("ul.subnav").slideDown('fast').show();
visible = true;
$(this).addClass("clicked-background");
}
// else if (visible)
//{
// $(this).parent().find("ul.subnav").slideUp('slow');
// visible = false;
// $(this).removeClass("clicked-background");
// }
body = false;
});
});
I wanted to add the feature, so if you clicked outside the menu/navigation the dropdown would hide.
The current problem with this code is, that if you click the menu and then click outside the menu - you have to double click the menu again to get it showen. This is caused by the body variable is set too 'True' ofc.
I made the body variable trying to fix the problem if you clicked the menu - and then clicked the same link again. The menu would first open correctly, and then close and open again.
Soo main problem is. My navigation open -> closes -> open
Don't use global variables. Check if the actual element is visible by checking
.is(':visible');
You can use that on the various selectors you have now.
I would be tempted to use onmouseout of the 'now visible' menu as the event of choice..
I dont think that running events off of the body tag is the good way to go.
the flow should be..
click (menu button or link)
show menu
set onmouseout for button and menu on click
onmouseout, remove onmouseout events
I have a ModalPopupExtender that needs to be hidden whenever the user clicks anywhere else on the page, window, or scrollbar. I have a function and it works if i set it to a div tag but what about when the user clicks the windows scrollbar?
function HideList() {
$find("<%=ModalPopupExtender1.BehaviorID%>").hide();
}
<div id="maindiv" onclick="HideList()">
Elements...
</div>
AFAIK, it's not possible to target the scroll bar using JavaScript.
However, you can target the scroll event and any click event on the window:
$(window).bind('scroll click', function() {
alert('Boo');
});