1

Here I am pasting my code.

<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="../js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="../js/jquery.mobile-1.4.2.min.js"></script>
<link rel="stylesheet" href="../css/idangerous.swiper.css">
<link rel="stylesheet" href="../css/jquery.mobile-1.4.2.min.css" />

 <title>Demo</title>
 <style>
/* Demo Styles */
 html {
  height: 100%;
} 
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  position: relative;
  height: 100%;
}
.swiper-container {
  width: 100%;
  height: auto;
  color: #fff;
  text-align: center;
}
.red-slide {
  background: #666666;
}
.blue-slide {
  background: #666666;
}
.orange-slide {
  background: #666666;
}
.green-slide {
  background: #666666;
}
.pink-slide {
  background: #666666;
}
.swiper-slide .title {
  font-style: italic;
  font-size: 42px;

  margin-bottom: 0;
  line-height: 45px;
}
.pagination {
  position: absolute;
  z-index: 20;
  left: 10px;
  bottom: 20%;
  margin-left: 35%;
  margin-right: 35%;
}
.swiper-pagination-switch {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 8px;
  background: #222;
  margin-right: 5px;
  opacity: 0.8;
  border: 1px solid #fff;
  cursor: pointer;
}
.swiper-visible-switch {
  background: #aaa;
}
.swiper-active-switch {
  background: #fff;
}
 .wood
 {
  height: 10%;
  width: 10%;
  margin-left:50%;
  margin-bottom: 0;
  padding-top:50%;

 }
  </style>
</head>
<body>

  <div class="swiper-container">
    <div class="swiper-wrapper">

      <div class="swiper-slide red-slide">
       <img id="trigger" class="wood" src="../images/wood.jpg" alt="US Flag "/>
       <p>slide1</p>
      </div>

      <div class="swiper-slide blue-slide">
        <img id="trigger" class="wood" src="../images/wood.jpg" alt="US Flag "/>
        <div class="title">Slide 2</div>
      </div>
      <div class="swiper-slide orange-slide">
        <img id="trigger" class="wood" src="../images/wood.jpg" alt="US Flag "/>
        <div class="title">Slide 3</div>
      </div>
      <div class="swiper-slide green-slide">
        <img id="trigger" class="wood" src="../images/wood.jpg" alt="US Flag "/>
        <div class="title">Slide 4</div>
      </div>
      <div class="swiper-slide pink-slide">
        <img id="trigger" class="wood" src="../images/wood.jpg" alt="US Flag "/>
        <div class="title">Slide 5</div>
      </div>

    </div>
    <div class="pagination" style="align:center;"></div>

     <div data-theme="b" data-position="fixed" style="height:20%;">
            <ul data-role="listview">
                                <li><a rel="external" href="../html/index.html" style="background: #666;color:white;font-family:sans-serif">Save with lighting</a><a href="#" data-rel="popup" onclick="alert('hello');"style="background: #666;">List Item</a></li>
                                <li><a rel="external" href="../html/one.html" data-rel="popup" style="background: #666;color:white;font-family:sans-serif">Explore light options</a><a href="#" data-rel="popup" onclick="alert('hello');"style="background: #666;">List Item</a></li>
            </ul>
     </div> 
   </div>
   <script src="../js/jquery-1.10.1.min.js"></script>
  <script src="../js/idangerous.swiper-2.1.min.js"></script>
  <script>
  var mySwiper = new Swiper('.swiper-container',{
    pagination: '.pagination',
    paginationClickable: true
  })
  </script>
</body>
</html>

here in the above code,I am unable to fit to the screen though I have done many changes in my code.Can you please give me any suggestions to resolve this issue.for this I put height:auto for the main div.thanks in advance for your suggestions

5
  • In same screen you want 5 slide to be shown? or you want any animation to view these slide?
    – Shashank
    May 19, 2014 at 5:49
  • @ShashankSharma only 5 slides to be shown.
    – user3488098
    May 19, 2014 at 6:16
  • Why are you using jQuery Mobile here? Even more you are using it improperly.
    – Gajotres
    May 19, 2014 at 7:10
  • @Gajotres for phonegap application I gone through jQuery mobile.
    – user3488098
    May 19, 2014 at 9:56
  • Then you are not using it properly. When working with jQuery Mobile you should use proper jQuery syntax. Everything should be inside data-role="page" not to mention that you are initializing 2 different versions of jQuery. Use jQuery Mobile only if you really really need it, it will take over your whole HTML.
    – Gajotres
    May 19, 2014 at 9:59

1 Answer 1

2

You can give the body and html the following css property:

html, body {
   overflow-y: hidden;
}

With this you can disable user scrolling.


If you want the first element of your html document to fill your screen, you simply give the html, bodyelement a height of 100%by doing so:

html, body {
   height: 100%;
}

The element wich you want to make fullscreen, you also just give a height of 100%. Like this:

.fitScreen {
   height: 100%;
   background-color: yellow;
}

And you also have to give a universal CSS reset, something like this:

* {
   margin: 0;
   padding: 0;
   border: 0;
}

Demo here


New demo

Now you can only scroll on the .fitScreen element.

1
  • when I am using overflow-y: hidden; its stopping the vertical scrolling,but the remaining content is disappearing.Here the issue is the whole content should be fit to screen and shouldn't be scrollable vertically.
    – user3488098
    May 19, 2014 at 9:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.