How modify code - Pop up window, additional closing options - javascript

I have animated pop-up box that can be closed only when clicked on "X" button in left top corner. Do you know how to change it, so it can be closed by:
Clicking ESC button
Mouse clicking in background around pop-up
Any other suggestions?
Code
function openOffersDialog3() {
$('#overlay').fadeIn('fast', function() {
$('#boxpopup_3').css('display','block');
$('#boxpopup_3').animate({'left':'30%'},1000);
});
}
function closeOffersDialog(prospectElementID) {
$(function($) {
$(document).ready(function() {
$('#' + prospectElementID).css('position','absolute');
$('#' + prospectElementID).animate({'left':'30%'}, 0, function() {
$('#' + prospectElementID).css('position','fixed');
$('#' + prospectElementID).css('left','100%');
$('#overlay').fadeOut('fast');
});
});
});
}

pass ESC button id to closeOffersDialog() function, I think it will work

Related

Popup disappear on mouse over

I am trying to display address on map on popup's as shown below in the image.
Image of popup:
When I hover mouse on pin icon the popup appears but when I move to popup it disappear.
Javascript I am using:
<script>
jQuery(function($) {
var pop = $('.map-popup');
pop.click(function(e) {
e.stopPropagation();
});
$('a.marker').hover(function(e) {
e.preventDefault();
e.stopPropagation();
$(this).next('.map-popup').toggleClass('open');
$(this).parent().siblings().children('.map-popup').removeClass('open');
});
$(document).click(function() {
pop.removeClass('open');
});
pop.each(function() {
var w = $(window).outerWidth(),
edge = Math.round( ($(this).offset().left) + ($(this).outerWidth()) );
if( w < edge ) {
$(this).addClass('edge');
}
});
});
</script>
Code Pen link: codepen
Instead of
$('a.marker').hover(function(e) {
use
$('a.marker').mouseenter(function(e) {
hover handles both mouseenter and mouseleave events. If you don't pass a handler for mouseleave, it will execute the function for mouseenter, so in your case,
$(this).next('.map-popup').toggleClass('open');
is executed again for mouseleave so the popup gets hidden.
Read more here.

Click event prevents mouseout from triggering

FINAL EDIT: I found a better solution and more simpler on this codepen. A demo of the working functionality.
EDIT: I found where the bug is coming from you can see an example here. When you click on lets say the About tab and hover over and out on contact the content should be hidden. But you go back to hover over About and out the content stays visible, which is not. How do I ensure the mouseout event is being triggered after clicked?
EDIT 2: So I noticed the unbind() method prevents that. When I remove it I can't seem to get the content area to stay active when clicked as the mouseout method overrides it.
I did some research on this but could not find a solution as to why on hover the removeclass does not work. I have encountered a bug with addClass() and removeClass() functions. The thing is I have those function firing on hover or mouseover/mouseout and on click so it gets a bit confusing. Here is a demo of what I'm working with: JSFiddle.
Full screen for better view.
My JavaScript can be kind of messy but ultimately the way this is suppose to work:
1. If you hover over a dot on the map the content on the left red box should reveal what's relevant to the location as well as a 'tooltip' of the location name. (this part works)
2. You mouse out it's suppose to go back to the list of locations and the tooltip disappears. Almost like a reset.
3. Now if you click on the dot, both the tooltip and the content on the left should remain active. Until you either click on the "Back to the list" link on the red box or hover over the other dots. (this also works)
The bug I encountered is if you click around the list panel and hover over a couple of the location dots after a certain while the hover state stays active when you hover over a couple of the locations (which is not suppose to happen). Everything is suppose to go back the list panel when you hover out of the location dot on the map.
$('a.location').click(function (event) {
var loc = this.id;
if ($('div.panel').hasClass('list')) {
$('div.' + loc).removeClass('current');
$('.list').addClass('current');
}
$('.list').removeClass('current');
$('div.panel.' + loc).addClass('current');
event.preventDefault();
}); //click function
$('.back-list').click(function (e) {
$('.panel').removeClass('current');
$('.list').addClass('current');
$('div.location-title.show').removeClass('show').addClass('hide');
$('div.location-title.view').removeClass('view');
e.preventDefault();
}); //back button
$('ul.locations li > a').hover(function () {
//show location hover
var dot = this.id;
$('div.location-title.' + dot).removeClass('hide').addClass('show');
}, function () {
var dot = this.id;
//hide location hover
$('div.location-title.' + dot).removeClass('show').addClass('hide');
}).click(function (event) {
var dot = this.id;
if (!$('div.location-title.' + dot).hasClass('hide')) {
$('div.location-title.' + dot).addClass('view');
} else {
$('div.location-title.' + dot).removeClass('view');
}
event.preventDefault();
});
$('.map__container > span').on({
mouseover: function () { //mouseover
var loc = $(this).attr('class');
$('.panel').siblings().removeClass('current'); //resets all classes that have current
$('.list').removeClass('current');
$('div.panel.' + loc).addClass('current');
$('div.show').removeClass('show').addClass('hide');
$('div.location-title.' + loc).removeClass('hide').addClass('show');
var asb = $('.location-title').siblings();
$('div.location-title').siblings().removeClass('view');
},
mouseout: function () { //mouseout
var loc = $(this).attr('class');
$('div.' + loc).removeClass('current');
$('div.location-title.' + loc).removeClass('show').addClass('hide');
if (!$('div.' + loc).hasClass('current')) {
$('.list').addClass('current');
} else {
$('.list').addClass('current');
}
},
click: function () {
$(this).off('mouseout');
var loc = $(this).attr('class');
$('div.location-title.show').removeClass('show').addClass('hide');
$('div.location-title.' + loc).removeClass('hide').addClass('show');
}
});
Also if you have better suggestions to clean up my JavaScript I'm all ears. Thanks so much!
If i understand right, you might want to try with the event Mouseleave, and i would use to modularize the function toggleClass:
ToggleClass function Jquery
Mouseleave explanation:
mouseleave: function () { //mouseout
var loc = $(this).attr('class');
$('div.' + loc).removeClass('current');
$('div.location-title.' + loc).removeClass('show').addClass('hide');
if (!$('div.' + loc).hasClass('current')) {
$('.list').addClass('current');
} else {
$('.list').addClass('current');
}
},
I hope this helps you. Salutations!
FINAL EDIT: I found a better solution and more simpler on this codepen. A demo of the working functionality.
My problem was in the code example above the $(this).off('mouseout'); was removing the mouseout when clicked. So if you were to hover back to that dot on the map and mouseout the 'tooltip' would stay active, it won't disappear when you mouseout, which it should disappear. I couldn't find a way to bind it again so the toggleClass() was much better. I been pulling my hair on this!
$('.map__container span').click(function(mapIcon){
mapIcon.preventDefault();
var icon = $(this).attr('class');
var panel = $(this).attr('class');
$('.panel').removeClass('clicked');
$('.location-title').removeClass('clicked');
$('.panel.' + panel).addClass('clicked');
$('.location-title.' + icon).addClass('clicked');
});
//Show bubbles over dots on map
$('.map__container span').hover(function(){
var hoverdot = $(this).attr('class');
$('.location-title.' + hoverdot).toggleClass('selected');
});
//Show bubbles on hover over anchor links
$('a.location').hover(function(){
var hoverlink = this.id;
$('.location-title.' + hoverlink).toggleClass('selected');
});
//Anchor links show panels and bubbles
$('a.location').click(function(e){
e.preventDefault();
var panel = this.id;
var icon = this.id;
$('.panel').removeClass('clicked');
$('.location-title').removeClass('clicked');
$('.panel.' + panel).addClass('clicked');
$('.location-title.' + icon).addClass('clicked');
});
//back button
$('.back-list').click(function(backButton) {
backButton.preventDefault();
$('.panel').removeClass('clicked');
$('.location-title').removeClass('clicked');
$('.list').addClass('clicked');
});

Conflicts between jQuery and fancybox

My jQuery function gets info from a box and shows a external .html in a window fancybox. The html url is selected from the box value string. Here I have no problems with that.
I have a Legend shows the box value in categories. This legend I can show or hide it with on click (jQuery). This legend function works so good.
The problem is when I use my fancybox function then the legend function doesn´t work properly (I try to hide and it starts to hide and show in a cycle)
What can be the problem? Any idea?
Thank you.
The code:
$('#legend h3').click(function (e) {
e.preventDefault();
if ($(this).hasClass("contracted")) {
$(this).removeClass("contracted");
}
else {
$(this).addClass("contracted");
}
$(this).parent().find('.content, .slider').slideToggle();
});
$(document).on("click", "#ctrl_info", function (e) {
e.preventDefault();
var unlo= $("#sidebar nav ul li.expanded .first_select option:selected").val().replace(/ /g, "_").toLowerCase() + ".html";
var dolo= $("#sidebar nav ul li.expanded .second_select option:selected").val().replace(/ /g, "_").toLowerCase() + ".html";
$.get("my_url/" + $("#sidebar nav ul li.expanded .first_select option:selected").val().toLowerCase().replace(/ /g, "_") + ".html", function (html) {
$.fancybox(html);
});
});

jQuery not scrolling to anchor tag

I can't seem to get this functioning the way that I want. I want a user to click a link, in this case Learn More then open a tab and scroll down the page to where that tab is. I have the functionality of opening the tab working but it will not scroll. The only time I can get it to actually scroll is to copy:
jQuery(document).scrollTop( jQuery("#" + descriptionID).offset().top );
into chrome's console and activate it. Below is the code in its entirety:
jQuery(document).on("click", ".learnMore", function() {
description = jQuery("a.ui-tabs-anchor:contains('Description')").parent().index();
descriptionID = jQuery("a.ui-tabs-anchor:contains('Description')").attr('id');
jQuery(".ui-widget").tabs("option", "active", description);
jQuery(document).scrollTop( jQuery("#" + descriptionID).offset().top );
});
Here is a link to a fiddle
It's because when you click the link, it's triggering the hash change. Because there is no anchor to go to, it scrolls to top after you call scrollTop. Adding return false; to the end of your click event or adding e.preventDefault(); for more modern browsers should correct the issue.
http://jsfiddle.net/jmarikle/dL41forj/
jQuery(document).on("click", ".learnMore", function() {
...
return false;
});
or
jQuery(document).on("click", ".learnMore", function(e) {
e.preventDefault();
...
});
Setting a timeout and targeting the body also works: http://jsfiddle.net/o2whkLyu/1/
$(document).on("click", ".learnMore", function() {
description = jQuery("a.ui-tabs-anchor:contains('Description')").parent().index();
descriptionID = jQuery("a.ui-tabs-anchor:contains('Description')").attr('id');
jQuery(".ui-widget").tabs("option", "active", description);
setTimeout (function(){
$('body').scrollTop( $("#" + descriptionID).offset().top );}, 20);
});

Problems with Page slide

could you help me to figure this out?
I'm trying to use this page slide method from this
http://jsfiddle.net/XNnHC/942/
$(document).ready(function()
{
var slider_width = $('.pollSlider').width();//get width automaticly
$('#pollSlider-button').click(function() {
if($(this).css("margin-right") == slider_width+"px" && !$(this).is(':animated'))
{
$('.pollSlider,#pollSlider-button').animate({"margin-right": '-='+slider_width});
}
else
{
if(!$(this).is(':animated'))//perevent double click to double margin
{
$('.pollSlider,#pollSlider-button').animate({"margin-right": '+='+slider_width});
}
}
});
});
and this is what I've been trying
http://jsfiddle.net/ejkim2000/f7DVK/
but I'm having some problems.
First problem I have is trigger button place gets margin so the sentence after place is being pushed. I deleted #pollSlider-button in this code
$('.pollSlider,#pollSlider-button').animate({"margin-right": '-='+slider_width}); }
to disable the margin from button but ended up having the slide page keep sliding to the right. Is there any way that I can make the slide page work without having margin on a button?
Another problem is I input another button in slide page for closing action but It simply doesn't work and I can't even understand why. Hope somebody can help to make this closing button work.
Just your information, I'd like to use width and height with css because it'll be easier for me to make slide page responsive and I also would like to apply this method for other directions too.
Thanks a million!
Try this
Working DEMO1
This is with same button to close and open the slider
$(document).ready(function () {
var slider_width = $('.pollSlider').width(); //get width automaticly
$('#pollSlider-button').click(function () {
if ($('.pollSlider').css("margin-right") == 0 + "px") {
$('.pollSlider').animate({
"margin-right": '-=' + slider_width
});
} else {
$('.pollSlider').animate({
"margin-right": '+=' + slider_width
});
}
});
});
Try this
Working DEMO2
This is with separate button for open and close
$(document).ready(function () {
var slider_width = $('.pollSlider').width();
$('#pollSlider-button').click(function () { //open button
if ($('.pollSlider').css("margin-right") == "-" + slider_width + "px") {
$('.pollSlider').animate({
"margin-right": '+=' + slider_width
});
}
});
$('#pollSlider-button2').click(function () { //close button with different id
if ($('.pollSlider').css("margin-right") == 0 + "px") {
$('.pollSlider').animate({
"margin-right": '-=' + slider_width
});
}
});
});
Hope this helps,Thank you

Categories

Resources