lundi 27 juin 2016

Jquery slider scroll not working on Android devices


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