Problems with effects :(
Problems with effects :(
Hi, I have a problem with two effects of jquery, I explain you the structure...
I have a div (I call it div_1) that has an effect (see it in
http://www.folter.es/acr/artist.html
the bottom is moving). And within div_1 there is another div (I call it div_2) but is not working well within the div_1 (see the work of div_2 in
http://www.folter.es/acr/index.html
, is it of images. In
http://www.folter.es/acr/artist.html
can see that doesn't work). Does turning off the div_1, the div_2 working properly.
I find the problem for two days. Exactly I don't be where the problem, but I think it has to do with the javascript.
--------
Div_1
HTML
<div id="content">content, in this case is div_2</div>
CSS
#content {
height: 280px;
background-color: #222222;
text-decoration: none;
color: #969696;
font-size: 9px;
font-family: tahoma;
margin: 0px;
padding: 5px;
}
Javascript
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/js.js"></script>
http://www.folter.es/acr/js/js.js
<script type="text/javascript">
$(document).ready(function(){
$(".btn-slide").mouseover(function(){
$("#panel").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
</script>
--------
Div_2
HTML
<div class=sc_menu_wrapper>
<ul class=sc_menu>
<li><a title="Menú" href="artists/artist_1.html"><img src="img/1.jpg" alt="Artist_1" /></a> </li>
<li><a title="Navegación" href="demo_vertical.html"><img src="img/9.jpg" alt="Navegación" /></a> </li>
<li><a title="jQuery" href="demo_vertical.html"><img src="img/3.jpg" alt="jQuery" /></a> </li>
<li><a title="CSS" href="demo_vertical.html"><img src="img/4.jpg" alt="CSS" /></a> </li>
<li><a title="Vertical" href="demo_vertical.html"><img src="img/5.jpg" alt="Vertical" /></a> </li>
<li><a title="Menú" href="demo_vertical.html"><img src="img/1.jpg" alt="Menú" /></a> </li>
...
</ul>
</div>
CSS
div.sc_menu_wrapper {
position: relative;
height: 113px;
/* Make bigger than a photo, because we need a place for a scrollbar. */
width: 700px;
overflow: auto;
}
/* interior */
ul.sc_menu {
display: block;
height: 113px;
/* max width here, for users without javascript */
width: 3500px;
padding: 20px 0px 0px 0px;
/* removing default styling */
margin: 0;
list-style: none;
}
/* selección borde */
.sc_menu a {
display: block;
width: 94px;
height: 71px;
color: #ffffff;
background: #ffffff;
border: 0px;
}
*/* posicion de las imagenes */
.sc_menu li {
display: block;
float: left;
padding: 0 11px; /* espacio entre las imagenes */
}
/* seleccion interior */
.sc_menu a:hover {
border-color: #ffhhhh;
border-style: dotted;
filter: alpha(opacity=40); /* for IE 4-7 and firefox*/
filter: "alpha(opacity=40)"; /* for IE8 and firefox*/
opacity: 0.4;
}
/* imagenes */
.sc_menu img {
display: block;
border: 1px solid #404040;
height: 69px;
width: 92px;
}
/* cargandor */
.sc_menu_wrapper .loading {
position: absolute;
top: 40px;
left: 290px;
font-family: tahoma;
color: #969696;
font-size: 10px;
text-align: center;
margin: 0 auto;
padding: 9px;
width: 100px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border: 1px solid #404040;
background: #1F1D1D;
}
/* texto_nombre */
.sc_menu_tooltip {
display: block;
position: absolute;
font-family: tahoma;
padding: 6px;
font-size: 10px;
color: #969696;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border: 1px solid #404040;
background: #252525;
/* Make background a bit transparent for browsers that support rgba */
background: rgba(37, 37, 37, 0.5);
}
Javascript
<script type="text/javascript" src="js/scroll_images.js"></script>
http://www.folter.es/acr/js/scroll_images.js
------------
greets and thanks in advance!