CODEWITHSUNDEEP
jqueryhtmlcssjquery-mobile
user3488098
user3488098

Reputation:

how to fix image on Devices

gap app getting output image sliding but it's come like with scrolling but i want fit to Screen on any Mobile like(4,5 inches)
here's bit of code:-

<!DOCTYPE html>
<html>
<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<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="responsiveslides.js"></script>

<style>
.caption {
  display: block;
  position: absolute;
  z-index: 2;
  font-size: 20px;
  text-shadow: none
  color: #fff;
  background: #000;
  background: rgba(0,0,0, .8);
  left: 0;
  right: 0;
  bottom: 15;
  padding: 10px 20px;
  margin: -2;
  margin-top:-70px;
  max-width: none;
  }
img {
  max-width: 100%;  
  height: auto
     }
.one{ float:right}
 html, body {
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
            }
            #container {
                width: inherit;
                height: inherit;
                margin: 0;
                padding: 0;
                        }

</style>
<body>
<div class="slideshow">
<div id="container">
     <img src="images/1 copy.jpg" alt=""></br>
     <div  class="caption"> <font color="white">Second dfasdfasasdasdasdna asdasdasdasd asdasdasd asdasd</br> asdasdasd asdadasd asdasdad</font><a href="http://www.google.com" style="text-decoration: none">&nbsp;&nbsp;<font color="white" ><span class="one">skip</span></font></a></div>

</div>

<div id="container">
    <img src="images/2 copy.jpg" alt=""></br>
    <div class="caption"><font color="white" >First Second dfasdfasasdasdasdna asdasdasdasd asdasdasd asdasd</br> asdasdasd asdadasd asdasdad</font><a href="G:\html practise phonegap\responsive\validationform.html" style="text-decoration: none">&nbsp;&nbsp;<font color="white"><span class="one">skip</span></font></a>
    </div>
</div>

<div id="container">
    <img src="images/3 copy.jpg" alt=""></br>
    <div class="caption"><font color="white" >three Second dfasdfasasdasdasdna asdasdasdasd asdasdasd asdasd</br> asdasdasd asdadasd asdasdad</font><a href="G:\html practise phonegap\responsive\validationform.html" style="text-decoration: none">&nbsp;&nbsp;<font color="white"><span class="one">skip</span></font></a>
    </div>
</div>

<div id="container">
    <img src="images/4 copy.jpg" alt=""></br>
    <div class="caption"><font color="white" >fourth Second dfasdfasasdasdasdna asdasdasdasd asdasdasd asdasd</br> asdasdasd asdadasd asdasdad</font><a href="G:\html practise phonegap\responsive\validationform.html" style="text-decoration: none">&nbsp;&nbsp;<font color="white"><span class="one">skip</span></font></a>
    </div>
</div>

</div>
</body>
<script>


$(function() {
    $(".slideshow > div:gt(0)").hide();

    setInterval(function() { 
        var currentSlide = $('.slideshow > div:visible:first'),
            nextSlide = currentSlide.next();

        currentSlide.fadeOut(2000)
        nextSlide.fadeIn(2000);

        if ((currentSlide.index() + 1) == 4) {


       Redirect();

        }
    },  2000);
    function Redirect() {
    window.location="https://www.google.co.in";
}
});

</script>
</html>

This code output is image automatically sliding but my problem is image come with scroll i want image fit to Screen any devices So Please give me any idea

Upvotes: 0

Views: 120

Answers (1)

Gajotres
Gajotres

Reputation: 57309

I have completely redesigned your code, mainly because you've included jQuery Mobile without using correct jQuery Mobile syntax inside your HTML.

HTML:

<!DOCTYPE html>
<html>
<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<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="http://responsiveslides.com/responsiveslides.min.js"></script>

<style>
    .caption {
        display: block;
        position: fixed;
        z-index: 2000;
        font-size: 20px;
        text-shadow: none
        color: #fff;
        background: #000;
        background: rgba(0,0,0, .8);
        left: 0;
        right: 0;
        bottom: 0;
        padding: 10px 20px;
        /*margin: -2;
        margin-top:-70px;*/
        max-width: none;
    }
    img {
        padding: 0;
        margin: 0;
    }
    .one{ 
        float:right
    }
    html, body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }
    .ui-content {
        padding: 0;
        margin: 0;
    }
    #container {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }
</style>
<script>
    $(window).resize(function() {
        setHeight();
    });

    $(document).on('pageshow', '#index', function(){       
        setHeight();
    });
    
    function setHeight() {
        $.mobile.activePage.find('.ui-content').height(getRealContentHeight());
        $.mobile.activePage.find('img').height(getRealContentHeight()-4);   
    }

    function getRealContentHeight() {
        var header = $.mobile.activePage.find("div[data-role='header']:visible");
        var footer = $.mobile.activePage.find("div[data-role='footer']:visible");
        var content = $.mobile.activePage.find("div[data-role='content']:visible:visible");
        var viewport_height = $(window).height();
        
        var content_height = viewport_height - header.outerHeight() - footer.outerHeight() -2;
        if((content.outerHeight() - header.outerHeight() - footer.outerHeight()) <= viewport_height) {
            content_height -= (content.outerHeight() - content.height());
        } 
        return content_height;
    }
</script>
<body>
<div data-role="page" id="index">            
    <div data-role="content" class="slideshow">
        <div id="container">
            <img src="1.jpg" alt="" height="100%" width="auto"/><br/>
            <div  class="caption"> <font color="white">Second dfasdfasasdasdasdna asdasdasdasd asdasdasd asdasd<br/> asdasdasd asdadasd asdasdad</font><a href="http://www.google.com" style="text-decoration: none">&nbsp;&nbsp;<font color="white"><span class="one">skip</span></font></a></div>
            
        </div>
        
        <div id="container">
            <img src="2.jpg" alt=""/><br/>
            <div class="caption"><font color="white" >First Second dfasdfasasdasdasdna asdasdasdasd asdasdasd asdasd<br/> asdasdasd asdadasd asdasdad</font><a href="G:\html practise phonegap\responsive\validationform.html" style="text-decoration: none">&nbsp;&nbsp;<font color="white"><span class="one">skip</span></font></a>
            </div>
        </div>
        
        <div id="container">
            <img src="3.jpg" alt=""/><br/>
            <div class="caption"><font color="white" >three Second dfasdfasasdasdasdna asdasdasdasd asdasdasd asdasd<br/> asdasdasd asdadasd asdasdad</font><a href="G:\html practise phonegap\responsive\validationform.html" style="text-decoration: none">&nbsp;&nbsp;<font color="white"><span class="one">skip</span></font></a>
            </div>
        </div>
        
        <div id="container">
            <img src="4.jpg" alt=""/><br/>
            <div class="caption"><font color="white" >fourth Second dfasdfasasdasdasdna asdasdasdasd asdasdasd asdasd<br/> asdasdasd asdadasd asdasdad</font><a href="G:\html practise phonegap\responsive\validationform.html" style="text-decoration: none">&nbsp;&nbsp;<font color="white"><span class="one">skip</span></font></a>
            </div>
        </div>
    </div>
</div>
</body>
<script>


$(document).on('pageshow', '#index', function(){ 
    $(".slideshow > div:gt(0)").hide();

    setInterval(function() { 
        var currentSlide = $('.slideshow > div:visible:first'),
            nextSlide = currentSlide.next();

        currentSlide.fadeOut(1)
        nextSlide.fadeIn(2000);

        if ((currentSlide.index() + 1) == 4) {


       Redirect();

        }
    },  2000);
    function Redirect() {
        window.location="https://www.google.co.in";
    }
});

</script>
</html>

  • I have used 4 dummy 1080*1920 images to test this example

  • Because you are usinh jQuery Mobile your code is now wrapped inside:

      <div data-role="page" id="index">

  • It is not enough to set 100% height to your image when working with jQuery Mobile, that's why I am using function getRealContentHeight to get correct content height

  • Content height is calculated during pageshow event because that is only time when jQuery Mobile can calculate correct content height

  • fadeOut is se to 1 because while old image is fadding out it is still showing thus pusshing next image below, which was a reason why second slider was showing in the first place.

Upvotes: 1

Related Questions