Hola, llevo un rato dandole vueltas a este script pero no encuentro el fallo, a ver si alguien me ofrece otro punto de vista por que no hay manera!
Tengo una capa
#middle en una pagina que quiero mostrar solamente cuando estoy en el
index, aqui esta el codigo HTML:
Código PHP:
<div id="search_form">
<div id="search_form_content">
<p>search products: <input type="text"><input type="button" value="search!"></p><span class="title">How it works?</span><span class="close">X</span>
</div>
</div>
<div id="middle">
<div id="content_middle">
<span class="banner"><img src="img/banner_middle.jpg" width="700px" /></span>
</div>
</div>
El CSS:
Código PHP:
#middle{
background-color: #f0f0f0;
}
#search_form_content > .title{
color: #eb8964;
font-size: 44px;
font-stretch: expanded;
text-shadow: 3px 3px 4px #bbb;
cursor: pointer;
}
#search_form_content > .close{
color: #eb8964;
font-size: 14px;
font-stretch: expanded;
text-shadow: 3px 3px 4px #bbb;
float: right;
cursor: pointer;
}
y el JS:
Código PHP:
<script type="text/javascript">
(function(){
// Si no encontramos en el home, escondemos la capa
var pageName = window.location.pathname;
var pageName_arr = pageName.split('/');
var count = pageName_arr.length;
pageName = pageName_arr[count-1];
console.log(pageName);
if(pageName != "index.html" || pageName != "index.php"){
$('#middle').hide();
}
else{
$('#middle').show();
}
console.log($('#middle'));
$('.close').on('click', function(){
$('#middle').slideUp();
});
$('.title').on('click', function(){
$('#middle').slideDown();
});
})();
</script>
Las funciones de mostrar y ocultar funcionan a la perfeccion pero por algun motivo la capa me aparece siempre oculta. Si miro la variable
pageName me muestra que efectivamente me encuentro en
index.html pero no me muestra la capa y si miro el objeto $('#middle') me muestra que tiene la propiedad visibility: hidden aun cuando yo no se la he definido !!
Alguien me sabria decir donde me estoy equivocando?
Muchas gracias!