[SOLVED] Custom Javascript/jQuery Popup not working in Atahualpa.

Factorfiction · #1 Jan 29, 2011, 06:18 PM

Hello.

I have played around in Dreamweaver for a while now and came up with a nice design for a custom menu bar.

I also have used this example to make a popup for one of the menu items.

The following code works like a charm in chrome, firefox and internet explorer.
But after trying importing the code to Atahualpa, the popup DIV-tag dosen't show up.

HTML Code:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">

a.underbar-tag0 {
	display: block;
	width: 90px;
	height: 32px;
	float: left;
	color:#000;
	background-image: url(../../Root/buy_blue.png);
        background-repeat: no-repeat;
	background-position: 0px 0px;
	margin-right: 0px;
	padding-top: 9px;
	padding-left: 40px;
	font-size: 16px;
	font-family: Arial, Helvetica, sans-serif;
	margin-left: 80px;
	font-weight: bold;
}
a.underbar-tag0:hover {
	color:#9C0;
	background-image: url(../../Root/buy_blue.png);
	background-repeat: no-repeat;
	background-position: 0px -45px;
}
a.underbar-tag1 {
	display: block;
	width: 114px;
	height: 32px;
	float: left;
	color:#000;
	background-image: url(../../Root/benefits_blue.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	margin-right: 40px;
	padding-top: 9px;
	padding-left: 78px;
	font-size: 16px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	margin-left: 60px;
}
a.underbar-tag1:hover {
	color:#FFF;
	background-image: url(../../Root/benefits_blue.png);
	background-repeat: no-repeat;
	background-position: 0px -45px;
}	
a.underbar-tag2 {
	display: block;
	width: 122px;
	height: 32px;
	float: left;
	color:#000;
	background-image: url(../../Root/help_blue.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	margin-right: 40px;
	padding-top: 9px;
	padding-left: 70px;
	font-size: 16px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	margin-left: 40px;
}
a.underbar-tag2:hover {
	color:#FFF;
	background-image: url(../../Root/help_blue.png);
	background-repeat: no-repeat;
	background-position: 0px -45px;
}	
a.underbar-tag3 {
	display: block;
	width: 120px;
	height: 32px;
	float: left;
	color:#000;
	background-image: url(../../Root/kostnad_blue.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	margin-right: 40px;
	padding-top: 9px;
	padding-left: 72px;
	font-size: 16px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	margin-left: 40px;
}
a.underbar-tag3:hover {
	color:#FFF;
	background-image: url(../../Root/kostnad_blue.png);
	background-repeat: no-repeat;
	background-position: 0px -45px;
}	
.popup {
	position: absolute;
	display: none;
	z-index: 50;
	border-collapse: collapse;
	background-image: url(../../Root/recommended.png);
        height: 191px;
	width: 150px;
	background-repeat: no-repeat;
	background-position: 0px 0px;
	float: left;
}
	
</style>

<script src="jquery.js" type="text/javascript"></script>

<script type="text/javascript">
    <!--

    $(function () {
        $('.underbar').each(function () {
            var distance = 10;
            var time = 250;
            var hideDelay = 500;

            var hideDelayTimer = null;

            var beingShown = false;
            var shown = false;
            var trigger = $('.underbar-tag0', this);
            var info = $('.popup', this).css('opacity', 0);


            $([trigger.get(0), info.get(0)]).mouseover(function () {
                if (hideDelayTimer) clearTimeout(hideDelayTimer);
                if (beingShown || shown) {
                    // don't trigger the animation again
                    return;
                } else {
                    // reset position of info box
                    beingShown = true;

                    info.css({
                        top: 20,
                        left: 0,
                        display: 'block'
                    }).animate({
                        top: '-=' + distance + 'px',
                        opacity: 1
                    }, time, 'swing', function() {
                        beingShown = false;
                        shown = true;
                    });
                }

                return false;
            }).mouseout(function () {
                if (hideDelayTimer) clearTimeout(hideDelayTimer);
                hideDelayTimer = setTimeout(function () {
                    hideDelayTimer = null;
                    info.animate({
                        top: '-=' + distance + 'px',
                        opacity: 0
                    }, time, 'swing', function () {
                        shown = false;
                        info.css('display', 'none');
                    });

                }, hideDelay);

                return false;
            });
        });
    });
    
    //-->
</script>

</head>

<body>

<div class="bg"></div>

<div class="underbar">

  <div>
  <a href="" class="underbar-tag0">Köp nu</a>
  </div>
    
  <table id="dpop" class="popup"></table>
    
  <a href="" class="underbar-tag1">Fördelar</a>
  
  <a href="" class="underbar-tag2">Nybörjare?</a>
  
  <a href="" class="underbar-tag3">Kostnad</a>
  
</div>

</body>

</html>

I imported CSS via ATO --> Add HTML/CSS Inserts --> CSS Inserts which worked.
I imported the HTML code via Editor --> bfa_header_config.php and dumped the code after "$horizontal_bar1 =", which also worked.
But then I tried to add the javascript under ATO --> Add HTML/CSS --> HTML Inserts: Header but it did not seem to work.

Everything is set and look exactly as it should, but when I hover underbar-tag0, there is no animation.

Am I doing something wrong?

Link to my website: http://e-cigaretter.nu/