how to fit an image height to content height in jqueryMoblie

Question

I have 4 images.I did swipe on 4 images but it's not fit all mobile screen height .Please give me any idea. my code:-

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1">
    <title>Simple Swiper App</title>

    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
    <script src="js/jquery.min.js"></script>
    <!-- Don't forget to get the latest Swiper and scrollbar version here-->
    <script src="js/idangerous.swiper-2.0.min.js"></script>
    <script src="js/idangerous.swiper.scrollbar-2.0.js"></script>
    <script src="js/simple-app.js"></script>

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
    <link rel="stylesheet" href="css/idangerous.swiper.css">
    <link rel="stylesheet" href="css/idangerous.swiper.scrollbar.css">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/simple-app.css">
</head>
    <script type='text/javascript'>//<![CDATA[ 
var screen = $.mobile.getScreenHeight();
alert(screen);

var header = $(".ui-header").hasClass("ui-header-fixed") ? $(".ui-header").outerHeight() - 1 : $(".ui-header").outerHeight();
alert(header);
var footer = $(".ui-footer").hasClass("ui-footer-fixed") ? $(".ui-footer").outerHeight() - 1 : $(".ui-footer").outerHeight();
alert(footer);
var contentCurrent = $(".ui-content").outerHeight() - $(".ui-content").height();

var content = screen - header - footer - contentCurrent;

$(".ui-content").height(content);
</script>
<body>
<div data-role="page" data-theme="b">
<div data-role="header" data-position="fixed" id="header" role="banner" class="ui-header ui-bar-inherit" style="background-color: #666666;" data-theme="b">
            <a href="#" data-rel="back" class="ui-btn  ui-corner-all ui-icon-carat-l ui-btn-icon-notext"></a>
             <h6 >Home</h6>
            <a rel="external" href="../html/responsive2305.html" class="ui-btn  ui-corner-all ui-icon-home ui-btn-icon-notext"> <!-- class="ui-btn-right ui-btn ui-icon-home ui-btn-icon-right" --> data-role="button" style="margin-top:10px;"></a>
     </div> 
<div data-role="content">
    <div class="swiper-pages swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="img/gallery-1.jpg" alt="" height="100%" width="100%"/></div>
            <div class="swiper-slide"><img src="img/gallery-2.jpg" alt="" height="100%" width="100%"/></div>
            <div class="swiper-slide"><img src="img/gallery-4.jpg" alt="" height="100%" width="100%"/></div>
            <div class="swiper-slide"><img src="img/gallery-5.jpg" alt="" height="100%" width="100%"/></div>
        </div>
    </div>
</div>
      <div data-role="footer" data-theme="a" data-position="fixed" id="footer" style="background:blue;">
            <ul data-role="listview">
                                <li><a class="th" rel="external" href="../html/Calculation.html" style="font-family:Segoe UI; color:black; text-shadow:0px 0px; font-size:15px; font-weight:normal; height:25px;text-decoration:none;">Save with lighting</a><a class="th" href="#" data-rel="popup">List Item</a></li>
                                <li><a class="th" rel="external" href="../html/one.html" data-rel="popup" style="color:black; text-shadow:0px 0px; font-size:15px;font-family:Segoe UI;font-weight:normal;height:25px;text-decoration:none;">Explore light options</a><a class="th" href="#" data-rel="popup">List Item</a></li>
            </ul>
       </div> 
</div>
</body>
</html>

but i tried to fit image on any screen like:-

<script type='text/javascript'> 
var screen = $.mobile.getScreenHeight();
alert(screen);

var header = $(".ui-header").hasClass("ui-header-fixed") ? $(".ui-header").outerHeight() - 1 : $(".ui-header").outerHeight();
alert(header);
var footer = $(".ui-footer").hasClass("ui-footer-fixed") ? $(".ui-footer").outerHeight() - 1 : $(".ui-footer").outerHeight();
alert(footer);
var contentCurrent = $(".ui-content").outerHeight() - $(".ui-content").height();

var content = screen - header - footer - contentCurrent;

$(".ui-content").height(content);
</script>

but it's not working So Please tell me what wrong in my code and then Please give me any idea about my problem Thanks in Advanced

A [fiddle](http://jsfiddle.net) will be nice for explaining. — Vedant Terkar, Jun 03 '14 at 09:30
You aren't calling the code properly, you should wrap code in an _event_: http://stackoverflow.com/q/23764153/1771795 for swiper initialization: http://stackoverflow.com/q/22550239/1771795 — Omar, Jun 03 '14 at 09:31
use the code in demo here http://jsfiddle.net/Palestinian/FyTYs/ for swiper plugin: http://jsfiddle.net/Palestinian/JT9Qc/ — Omar, Jun 03 '14 at 09:41
@Omar thanks but when place image on
scroll will be come now image not fit to mobile screen Please give me any idea — Pavan Alapati, Jun 03 '14 at 10:52
check this demo (http://jsfiddle.net/Palestinian/mwNsx/) replace images in it with your ones. You may need to play with CSS to make images fit available height. — Omar, Jun 03 '14 at 11:21

how to fit an image height to content height in jqueryMoblie

0 Answers0