Here is my code
$(document).ready(function(){
$(".feat").click(function () {
$('#ftline1').show("blind", { direction: "left" }, 2000, call);
});
function call() {
$('#ftline2').show("blind", { direction: "up" }, 2500, call2);
};
function call2() {
$('#node').show("blind", { direction: "left" }, 1500);
};
});
As explain in the title when I run the effect, the div is partially cut and the visual aspect of my work is a mess. The ftline1,2 and node are located thanks to negative margin and an absolute position.
How can I solve the problem I already tried to add overflow:visible property to my selector both in css and javascript using jquery at the time of the function call, but none of these solutions worked.
Subsidiary issue : By the way, the blind effects direction are not working (which was an issue supposed to be fixed) how can I fix it without loading the entire jqueryUI library (I mean keep using jqueryUI.MIN.js) ?
Edit :
Here is my HTML code :
<div id="header">
<div id="logo"><img src="image/erus.png" />
</div>
<div id="menuu">
<ul class="lavaLampBottomStyle" id="menu">
<li><a href="#">Erus</a></li>
<li class="current feat"><a href="#">Features</a></li>
<li><a href="#">Forums</a></li>
<li><a href="#">Download</a></li>
<li><a href="#">Shop</a></li>
</ul>
</div>
<div id="ftline1"></div>
<div id="ftline2"></div>
<div id="node"></div>
</div><!-- End header-->
I deleted the menu part which is a bit redundant. Here is my CSS code for the interesting part :
#header{
margin-top:7px;
width:800px;
height:140px;
margin-left:auto;
margin-right:auto;
margin-bottom:10px;
}
#ftline1{
position:absolute;
height:60px;
width:400px;
background-image:url(../image/line1.png);
background-repeat:no-repeat;
margin-top:110px;
margin-left:-140px;
z-index:-10;
display:none;
}
#ftline2{
position:absolute;
height:900px;
width:400px;
background-image:url(../image/line2.png);
background-repeat:no-repeat;
margin-top:195px;
margin-left:-153px;
z-index:-10;
display:none;
}
#node{
position:absolute;
height:175px;
width:100px;
background-image:url(../image/node.png);
background-repeat:no-repeat;
margin-top:395px;
margin-left:-87px;
z-index:-10;
display:none;
}
Thanks a lot for reading :-) Have agood day :-)