| Factorfiction |
Jan 29, 2011 06:18 PM |
[SOLVED] Custom Javascript/jQuery Popup not working in Atahualpa.
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? :confused:
Link to my website: http://e-cigaretter.nu/ |
