I made a custom jQuery slider that only displays content and an image. On click = open/close.
I just realized that its not working on Android devices. The drop-down slider is working but the content is not scrolling.
Here is my code:
$(document).ready(function(){
$('#clickme').click(function() {
$('#me').slideToggle(function() {
$('.showhide').text(
$(this).is(':visible') ? "Stäng" : "Om Dik"
);
});
});
});
.omdik {
height: 58px;
margin: 0px 66px !important;
width: 97px;
float:right !important;
position: absolute;
top: 0;
right: -40px;
}
.dropimg h3 {
color: #FFFFFF !important;
font-size: 14px !important;
text-decoration:none !important;
text-align:center;
letter-spacing:0.02em;
margin-top:3px;
}
#me h3 {
color: #FFFFFF !important;
font-size: 14px !important;
text-decoration:none !important;
text-align:center;
letter-spacing:0.02em;
margin-top:3px;
}
.omdik .ui-icon {
display:none !important;
}
.omdik .ui-collapsible-content {
background: none repeat scroll 0 0 #FF0000;
width:auto !important;
max-height:400px !important;
position:relative;
}
#me {
background: none repeat scroll 0 0 #FFFFFF !important;
border: 1px solid #999;
display: none;
margin: -18px -200px;
max-height: 385px !important;
overflow: scroll;
width: 329px !important;
}
#me .omdik_img {
margin:0px auto !important;
padding:50px 6px 3px 6px !important;
line-height:1.4em !important;
letter-spacing:0.09em !important;
}
#me p {
margin:0px auto !important;
padding:0px 10px 5px 10px !important;
line-height:1.4em !important;
letter-spacing:0.09em !important;
}
.dropimg {
background:url(img/Om_-dik_knapp.png) no-repeat;
background-size:100% 44%;
height: 58px;
margin: 0px 10px !important;
width: 130px;
float:right !important;
top: 0;
right: -40px;
}
#me img {
height:100px;
width:280px;
text-align:center;
overflow:auto;
background-position:top !important;
}
<div id="clickme" class="omdik">
<div class="dropimg">
<h3 class="showhide">Om Dik</h3>
</div>
<div id="me" >
<?php $recent = new WP_Query("page_id=42"); while($recent->have_posts()) : $recent->the_post();?>
<?php //the_title(); ?>
<div class="omdik_img">
<?php the_post_thumbnail("large");?>
</div>
<p class="para">
<?php the_content(); ?>
</p>
<?php endwhile; ?>
</div>
Aucun commentaire:
Enregistrer un commentaire