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

Factorfiction · #1 Jan 29, 2011, 07: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/

Factorfiction · #2 Jan 30, 2011, 03:20 PM

I changed the location of the javascript from HTML Inserts: Header to JS.php, under jQuery(document).ready(function(){ but it still dosen't work, seen here.

Code:

<script type="text/javascript">



//<![CDATA[







/* JQUERY */

jQuery(document).ready(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;



            });



        });



    });



    



    //-->













	/* jQuery('ul#rmenu').superfish(); */

	/* jQuery('ul#rmenu').superfish().find('ul').bgIframe({opacity:false}); */

 

	/* For IE6 */

	if (jQuery.browser.msie && /MSIE 6\.0/i.test(window.navigator.userAgent) && !/MSIE 7\.0/i.test(window.navigator.userAgent) && !/MSIE 8\.0/i.test(window.navigator.userAgent)) {



		/* Max-width for images in IE6 */		

		var centerwidth = jQuery("td#middle").width(); 

		

		/* Images without caption */

		jQuery(".post img").each(function() { 

			var maxwidth = centerwidth - 10 + 'px';

			var imgwidth = jQuery(this).width(); 

			var imgheight = jQuery(this).height(); 

			var newimgheight = (centerwidth / imgwidth * imgheight) + 'px';	

			if (imgwidth > centerwidth) { 

				jQuery(this).css({width: maxwidth}); 

				jQuery(this).css({height: newimgheight}); 

			}

		});

		

		/* Images with caption */

		jQuery("div.wp-caption").each(function() { 

			var captionwidth = jQuery(this).width(); 

			var maxcaptionwidth = centerwidth + 'px';

			var captionheight = jQuery(this).height();

			var captionimgwidth =  jQuery("div.wp-caption img").width();

			var captionimgheight =  jQuery("div.wp-caption img").height();

			if (captionwidth > centerwidth) { 

				jQuery(this).css({width: maxcaptionwidth}); 

				var newcaptionheight = (centerwidth / captionwidth * captionheight) + 'px';

				var newcaptionimgheight = (centerwidth / captionimgwidth * captionimgheight) + 'px';

				jQuery(this).css({height: newcaptionheight}); 

				jQuery("div.wp-caption img").css({height: newcaptionimgheight}); 

				}

		});

		

		/* sfhover for LI:HOVER support in IE6: */

		jQuery("ul li").

			hover( function() {

					jQuery(this).addClass("sfhover")

				}, 

				function() {

					jQuery(this).removeClass("sfhover")

				} 

			); 



	/* End IE6 */

	}

	

	jQuery(".post table tr").

		mouseover(function() {

			jQuery(this).addClass("over");

		}).

		mouseout(function() {

			jQuery(this).removeClass("over");

		});



	

	jQuery(".post table tr:even").

		addClass("alt");



	

	jQuery("input.text, input.TextField, input.file, input.password, textarea").

		focus(function () {  

			jQuery(this).addClass("highlight"); 

		}).

		blur(function () { 

			jQuery(this).removeClass("highlight"); 

		})

	

	jQuery("input.inputblur").

		focus(function () {  

			jQuery(this).addClass("inputfocus"); 

		}).

		blur(function () { 

			jQuery(this).removeClass("inputfocus"); 

		})



		



	

	jQuery("input.button, input.Button, input#submit").

		mouseover(function() {

			jQuery(this).addClass("buttonhover");

		}).

		mouseout(function() {

			jQuery(this).removeClass("buttonhover");

		});



	/* toggle "you can use these xhtml tags" */

	jQuery("a.xhtmltags").

		click(function(){ 

			jQuery("div.xhtml-tags").slideToggle(300); 

		});



	/* For the Tabbed Widgets plugin: */

	jQuery("ul.tw-nav-list").

		addClass("clearfix");



		

	

});



//]]>

</script>

Or seen at the page.

Can anyone spot any errors?

Edit: Used another jQuery insted.