Swipe
Swipe copied to clipboard
Published
20 hours ago •
thebird
thebird
When i append div on document ready, My style is not applying.
@thebird @alicelieutier @gerrit @mbrubeck @jeroencoumans @bdougherty @benschwarz @x-cray im using thebird swipe example, just removing static div in thebird swipe example and append dynamic div on document ready but my default style like data-index, transition-duration, transform is not applying
<!DOCTYPE HTML>
<html>
<head>
<title>Swipe 2</title>
<meta http-equiv="X-UA-Compatible" content="IE=8">
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0'/>
<link href='style.css' rel='stylesheet'/>
<style>
/* Swipe 2 required styles */
.swipe {
overflow: hidden;
visibility: hidden;
position: relative;
}
.swipe-wrap {
overflow: hidden;
position: relative;
}
.swipe-wrap > div {
float:left;
width:100%;
position: relative;
}
/* END required styles */
</style>
</head>
<body>
<h1>Swipe 2</h1>
<div id='mySwipe' style='max-width:500px;margin:0 auto' class='swipe'>
<div class='swipe-wrap'>
</div>
</div>
<div style='text-align:center;padding-top:20px;'>
<button onclick='mySwipe.prev()'>prev</button>
<button onclick='mySwipe.next()'>next</button>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src='swipe.js'></script>
<script>
// pure JS
var elem = document.getElementById('mySwipe');
window.mySwipe = Swipe(elem, {
});
$(document).ready(function (e) {
$('.swipe-wrap').append('<div><b>Google products.</b></div>');
$('.swipe-wrap').append('<div><b>Google.</b></div>');
});
</script>
Thanks in Advance.
I think you have to put 'append' in front. Because when mySwipe is created, there needs to get elem's children in swipe.js
$(function() {
$('.swipe-wrap').append('<div><b>Google products.</b></div>');
$('.swipe-wrap').append('<div><b>Google.</b></div>');
window.mySwipe = $('.swipe-tabs').Swipe().data('Swipe');
});
