javascript - Custom swiper not working for body -


i wrote custom swiper alerts. code in link.
when swipe left right or right left, gives alerts successfully.
here, i've used div swiping action. code this: 

<div id="test" class="text-center"></div>    <script>         $(document).ready(function() {               $(".text-center").swiperight(function() {                   /*$("#mycarousel").carousel('prev');  */                 alert("swiped right");             });               $(".text-center").swipeleft(function() {                   /*$("#mycarousel").carousel('next');  */                 alert("swiped left");             });           });   </script>

if change id body this, 

<style type="text/css">     #test{         position: absolute;         background-color: #0067ac;         width:100%;         height:500px;     }     .text-center{         position: relative;         margin-right: 3%;         margin-top: 5%;     }     <body id="test" class="text-center"> <script type="text/javascript">         $(document).ready(function() {               $("#test").swiperight(function() {                   /*$("#mycarousel").carousel('prev');  */                 alert("swiped right");             });               $("#test").swipeleft(function() {                   /*$("#mycarousel").carousel('next');  */                 alert("swiped left");             });           });       </script>

then swiping works. link here.
if apply code, doesn't work body tag . code is: 

<div id = "maindiv" class = "container" style="padding:0px;width:100%;height:100%">             <div id = "header">                 <span id = "icons">                     <span id = "menu"></span>                     <span onclick="goback()" id = "back"></span>                 </span>                 <span id = "title">                     <span id="junos"> junos </span><span id = "genius">genius</span>                  </span>             </div>              <div id ="body" class="container-fluid" style="position:relative;">             <!-- <div id="swiper"> -->                   <div id="searchmenu" class="col-xs-4" style="height:400px; overflow-y:auto;padding:0px;display:none;min-width: 250px;background-color:transparent;">             </div>                 <p class="text-center" onclick="goback()"  style="padding-top:12px;">help</p>                  <!-- start  -->                      <ul class="list=unstyled text-justify" style="margin-right:20px;"> <li> junos genius fun way improve skills juniper networks junos operating system , prepare technical certification. application virtual flashcard reader includes decks of multiple choice questions several junos-based exams including jncia-junos, jncis-ent, jncis-sec, , jncis-sp. answer multiple-choice questions , immediate feedback on accuracy of answer. </li> <li> questions may answered in study mode, timed test mode, or challenge instructor mode. </li>  <ul>  <li> in study mode, choose question category interests , begin answering questions. system not track score , no achievements earned correct answers.  </li> <li> enter timed test mode, choose question category , tap timed test. simulate live exam , provide 60 minutes answer 60 questions selected @ random among categories in deck. see percentage correct score on completion of 60 questions or @ end of 60 minutes (whichever comes first). </li> <li> enter challenge instructor mode, choose question category tap challenge instructor challenge ranks of instructors. score higher on category instructor earn device achievement. device achievements specific question category. instructors should challenged, , beaten, repeatedly earn higher quantities of device achievements use in ‘my network’. beating instructors becomes progressively more difficult work through ranks. </li> </ul> <li>my network: device achievements (earned beating instructors in challenge instructor mode) used build network views in handy network drawing tool called network. juniper networks devices earned available addition network view. able add lan segments, wan segments, , end user devices including laptops, printers, , servers network view. , have ability share network diagram through email or social media.</li>  </ul>                  <!-- end   -->                 </div>             </div>   #maindiv {             background-image: url("../junosimages/mob/junos_genius_p_960x720_question_blank_phone.jpg");             background-repeat: no-repeat;             background-size: 100% 100%;             height: 100%;             width: 100%;         } /*custom js*/           $(document).ready(function() {               $("#maindiv").swiperight(function() {                 alert("swiped right");             });               $("#maindiv").swipeleft(function() {                 alert("swiped left");             });             });

this problem css.

i updated css , worked fine :

check out fiddle plunker code

css updations here:

<style type="text/css"> #test{     position: absolute;     background-color: #0067ac;     width:100%;     height:500px; } .text-center{     position: relative;     margin-right: 3%;     margin-top: 5%; } </style>

Comments

Post a Comment

Popular posts from this blog

javascript - Google App Script ContentService downloadAsFile not working -

i have web app developed using google app script htmlservice , html form, populating excel sheet in google drive using spreadsheetapp . , 1 section calling contentservice download data excel file. function doget(e) { // read excel sheet //getappfile(); // render application html template return htmlservice.createtemplatefromfile('index').evaluate() .settitle('go smart') .setsandboxmode(htmlservice.sandboxmode.iframe); } function downloaddoublequatecsvfile() { var sheetid = propertiesservice.getscriptproperties().getproperty('sheetid'); var ss = spreadsheetapp.openbyid(sheetid).getactivesheet(); //var ss = spreadsheetapp.getactivespreadsheet().getactivesheet(); var maxcolumn = ss.getlastcolumn(); var maxrow = ss.getlastrow(); var data = ss.getrange(1, 1, maxrow, maxcolumn).getvalues(); if (data.length > 1) { var csv = ""; (var row = 0; row < data.length; row++) { (var c...
Read more

javascript - Function overwritting -

is there way overwrite function or event handling in function? using addeventlistener, can have many event handlers on element want var test=document.getelementbyid("div"); test.addeventlistener("click",function(){alert("im first");},false); test.addeventlistener("click",function(){alert("im second");},false); // alerts "im first" , after "im second" but if want overwrite function/event example based on client width example this function one() { alert("first"); } function two() { alert("second"); } window.onresize = function() { var test = document.getelementbyid("div"); if (window.innerwidth > 500) { test.onclick = 1 } else { test.onclick = two; } } is possible in javascript? in case use effective little known approach. addeventlistener can accept object property handleevent event handler. in case it's easy overwr...
Read more

php - Find a regex to take part of Email -

i have following emails need extract part from: bestellnummer xxx: 1 von xxx, 1er pack ------------- anfang der nachricht ------------- foo bar baz foo bar baz // <<<<< need text here ------------- ende der nachricht ------------- ------------- anfang der nachricht ------------- foo bar baz foo bar baz ------------- ende der nachricht ------------- there 0 unlimited occurences of ------------- anfang der nachricht ------------- ------------- ende der nachricht ------------- and i'm able extract first part regex: $re = "/------------- .*? -------------.?(.*?).?------------- .*? -------------/s"; but, i'm quite new on learning regex, i'm pretty sure there must better regex extract part (foo bar baz foo bar baz) of text between ------------- anfang der nachricht ------------- ------------- ende der nachricht ------------- as can in different languages, i'm using .? to match between hyphens. i...
Read more