Click here to Skip to main content
14,383,633 members
Rate this:
Please Sign up or sign in to vote.
See more:
I have been having troubles with my code. I have searched and found several solutions, but none of them did the trick. The problem is that mozilla firefox gives me an error: event is nod defined. Other browsers work fine. My code to call the function:

var demoMap = '<table class="popup"><tr><td>';
   demoMap += '<span class="close-popup">&#215;</span>';
   demoMap += '<canvas id="map" width="853" height="480"></canvas>';
   demoMap += '</td></tr></table>';



var wayfinder;   
	$(".home-video").click(function () {
		$(".home-attention").append(demoMap);
        
        $(function(){ //Make sure that the page is loaded.
            wayfinder = new Wayfinder3D();
            wayfinder.cbOnDataLoaded = function(){
            
            //Laetud, peida progressbar
            };

            wayfinder.cbOnProgress = function(percentage){
            //Laeb, liiguta progressbari
            };
            wayfinder.options.assetsLocation = '//static.3dwayfinder.com/shared/';
            wayfinder.open("1a07bdc53edb3828f390bc9af7281585");
            
        });
	});
         
	
  $( ".popup" ).click(function() {
    $( this ).fadeOut(500, function () {
      $(this).remove();
    });
  });
Posted
Updated 7-Jan-15 3:16am
v6
Rate this:
Please Sign up or sign in to vote.

Solution 1

1. event and window.event is the same! So your second attempt is just do nothing...
2. Inside closePopup you are using e and event in a mix. Do not!
3. You are passing this to closePopup so e will never be empty...Try this code for all browsers...

As you already using jQuery the best solution to you is to use it all the way - it supports different browsers almost perfectly...
<table class="popup">...</table>

$( document ).ready(function() {
  $( ".popup" ).click(function() {
    $( this ).fadeOut(500, function () {
      $( this ).remove();
    });
  });
});
   
v2
Comments
Member 11358065 7-Jan-15 7:04am
   
I tried this code, but now it doesn't work at all. Even not for Chrome. I tried to change $(".popup") to $("#map"), but it didn't help either.
Kornfeld Eliyahu Peter 7-Jan-15 7:06am
   
I missed one this with e...
Member 11358065 7-Jan-15 7:25am
   
Still no luck. It doesn't do anything. But this code should work only when I click on this popup?
Eventually, I want it to work like this, that when I click outside of it, it should fade away.
Kornfeld Eliyahu Peter 7-Jan-15 7:29am
   
http://jsfiddle.net/kfvv9xtq/2/
Click on the blue block...
Member 11358065 7-Jan-15 7:33am
   
I edited my initial code from question
Kornfeld Eliyahu Peter 7-Jan-15 7:37am
   
Nice. And what the question now?
Member 11358065 7-Jan-15 7:39am
   
The question is same, that it won't work with Mozilla. And when I try it with the code You gave me, it won't work at all. I edited question for better understanding, how I call my popup.
Kornfeld Eliyahu Peter 7-Jan-15 7:43am
   
The jsFiddle I gave you works perfectly in Ie, Chrome and FF too!!!
Member 11358065 7-Jan-15 8:35am
   
But how to make Your fiddle work to fade the blue box when clicked outside of it?
Kornfeld Eliyahu Peter 7-Jan-15 9:00am
   
Now we are talking...
See this: http://jsfiddle.net/kfvv9xtq/3/
Click on blue does nothing, click outside removes the blue...
Member 11358065 7-Jan-15 9:36am
   
where should I put this in my code?

Right now, when I click on the picture, it hides it immediately.
Member 11358065 7-Jan-15 8:17am
   
When You look at my code given in the question, have I done something wrong there?
Rate this:
Please Sign up or sign in to vote.

Solution 2

Got it working with this:

<table class="popup" onclick="closePopup(this)">

<pre lang="cs">function closePopup(e) {

    $(document).click(function(event){
        if(event.target.id != "map")
        {
            $( e ).fadeOut(500, function () {
      $( e ).remove();
    });
        }
        })
}</pre>
   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100