Simples função JS não funciona
Olá! Eu já havia criado uma lista de favoritos como a do zap imóveis, porém não sei porque ela parou de funcionar, ao clicar na setinha, esta lista não exibe os itens em favoritos. Olhe o site do zapimóveis no modo desktop e entenderão melhor.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box
}
.box-mae {
position: relative
}
.box-mae:before, .box-mae:after {
content: "";
display: table;
clear: both
}
.esconde {
overflow-y: auto;
margin-top: 100px;
width: 205px;
height: 450px;
background-color: #f9f6f7;
display: block;
position: fixed;
right: -180px;
border: 1px solid #dcd8cd;
box-shadow: 0 0 12px rgba(0,0,0,0.25);
border-radius: 5px 0 0 5px;
top: 160px;
z-index: 1000;
transition: 0.5s ease-out;
-webkit-transition: 0.5s ease-out;
-moz-transition: 0.5s ease-out;
-o-transition: 0.5s ease-out;
}
.mostra {
overflow-y: auto;
margin-top: 100px;
width: 205px;
height: 475px;
background-color: #f9f6f7;
display: block;
position: fixed;
right: 0px;
border: 1px solid #dcd8cd;
box-shadow: 0 0 12px rgba(0,0,0,0.25);
border-radius: 5px 0 0 5px;
top: 160px;
z-index: 1000;
transition: 0.5s ease-out;
-webkit-transition: 0.5s ease-out;
-moz-transition: 0.5s ease-out;
-o-transition: 0.5s ease-out;
}
.btn_favorite{
position: absolute;
width: 28px;
top: 32px;
left: 0;
}
.try_indicator{
width: 28px;
height: 103px;
margin-top: 125px;
background-color: #007aa5;
position: fixed;
cursor: pointer;
}
.try_indicator:after{
content: '';
width: 0;
height: 0;
border-right: 9px solid #fff;
border-top: 11px solid transparent;
border-bottom: 11px solid transparent;
position: absolute;
top: 41px;
left: 8px;
}
.try_indicator_open:after{
content: '';
width: 0;
height: 0;
border-right: 9px solid #fff;
border-top: 11px solid transparent;
border-bottom: 11px solid transparent;
position: absolute;
top: 41px;
left: 8px;
transform: rotateY(180deg);
transition: 0.5s ease-out;
-webkit-transition: 0.5s ease-out;
-moz-transition: 0.5s ease-out;
-o-transition: 0.5s ease-out;
}
.title_content{
text-transform: uppercase;
font-size: 1em;
display: inline-block;
margin-left: 45px;
position: fixed;
}
.title_rot_90{
height: auto !important;
overflow: visible !important;
padding-top: 12px;
padding-bottom: 10px;
font-weight: 600;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
white-space: nowrap;
}
.content{
margin: 10px;
padding-top: 10px;
float: right;
}
.content img{
width: 130px;
height: 120px;
}
#ver_todos{
display: inline-block;
position: fixed;
top: 714px;
right: 18px;
width: 180px;
text-align: center;
background-color: #f9f6f7;
transition: linear 1.5s;
-webkit-transition: linear 1.5s;
-moz-transition: linear 1.5s;
-o-transition: linear 1.5s;
}
#fav_vazio{
background-color: #0794c9;
color: #fff;
border: 3px double #fff;
width: 130px;
height: 120px;
padding: 10px;
font-size: 0.85em;
text-align: center;
}
</style>
<script>
$(document).ready(function(){
$(".try_indicator").click(function(event){
$("#caixa").addClass("mostra");
$("#heart_cheio").css("display", "block");
$("#heart_vazio").css("display", "none");
$("#fav_vert").css("color", "transparent");
$("#fav_hor").css("display", "block");
$("#ver_todos").css("display", "block");
$(".try_indicator").addClass("try_indicator_open");
});
$("#caixa").mouseleave(function(event){
$("#caixa").removeClass("mostra");
$("#heart_cheio").css("display", "none");
$("#heart_vazio").css("display", "block");
$("#fav_vert").css("color", "black");
$("#fav_hor").css("display", "none");
$("#ver_todos").css("display", "none");
$(".try_indicator").removeClass("try_indicator_open");
});
});
</script>
</head>
<body>
<div id="caixa" class="esconde">
<i id="heart_vazio" class="fa fa-heart-o 1g" aria-hidden="true" style="color: #f26122; display: block; position: fixed; margin-top: 3px; margin-left: 3px; font-size: 18px;"></i>
<i id="heart_cheio" class="fa fa-heart" aria-hidden="true" style="color: #f26122; display: none; position: fixed; margin-top: 3px; margin-left: 3px; font-size: 18px;"></i>
<div id="fav_hor" class="title_content" style="display: inline-block; width: 132px; background-color: #f9f6f7; transition: 0.5s ease-out;-webkit-transition: 0s ease-out;-moz-transition: 0s ease-out;-o-transition: 0s ease-out;">FAVORITOS (N)</div>
<div class="btn_favorite">
<div id="fav_vert" class="title_rot_90" style="display: block; transition: 0s ease-out;-webkit-transition: 0s ease-out;-moz-transition: 0s ease-out;-o-transition: 0s ease-out;">FAVORITOS</div>
<div class="try_indicator">
</div>
</div>
<div class="content">
<div id="fav_vazio">
<?php echo "Clique no ";?><i id="heart_vazio" class="fa fa-heart-o 1g" aria-hidden="true" style="color: black; display: initial;"></i><?php echo utf8_decode(" correspondente ao imóvel do seu interesse para adicioná-lo à favoritos.");?>
</div>
</div>
<div class="content">
<img src="<?php echo $ROOTPATH;?>/media/team/2017/0901/15042944807003.jpg"/>
</div>
<div class="content">
<img src="<?php echo $ROOTPATH;?>/media/team/2017/0901/15042944807003.jpg"/>
</div>
<div class="content">
<img src="<?php echo $ROOTPATH;?>/media/team/2017/0901/15042944807003.jpg"/>
</div>
<div class="content">
<img src="<?php echo $ROOTPATH;?>/media/team/2017/0901/15042944807003.jpg"/>
</div>
<div class="content">
<img src="<?php echo $ROOTPATH;?>/media/team/2017/0901/15042944807003.jpg"/>
</div>
<div id="ver_todos" class="title_content"><a href="#" style="color: #f26122 !important;">VER TODOS</a></div>
</div>Discussão (1)
Carregando comentários...