CODEWITHSUNDEEP
jqueryhtmlwindow-resize
Thothadri Rajesh
Thothadri Rajesh

Reputation: 522

resize html page jquery without vertical bar

I am trying to resize html page(just vertically for now). I am using jquery for doing this. I am able to successfully resize. But depending on image I either see vertical or horizontal bar(even though image fits in). How can I avoid this vertical and horizontal bar? any one any idea why this is happening and how can I remove this?

my html code looks like this.

to test this add some image(rename image as image.png) in ur folder along with this html code.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src= "http://code.jquery.com/jquery-1.7.1.min.js">
</script>
<script>
var doc_height;
function initial_stage(){
$("#check").css({
"transform-origin":"0 0", "-ms-transform-origin":"0 0","-webkit-transform-origin":"0   0","-moz-transform-origin":"0 0","-o-transform-origin":"0 0"});

}
function scaleStage()
{
var parentHeight = $(window).height(); 
var rescale= (parentHeight/doc_height)*.9;
$("#check").css('transform', 'scale(' + rescale + ')'); 
$("#check").css( '-o-transform', 'scale(' + rescale + ')');
$("#check").css('-ms-transform', 'scale(' + rescale + ')');
$("#check").css('-webkit-transform', 'scale(' + rescale + ')');
$("#check").css('-moz-transform', 'scale(' + rescale + ')');
$("#check").css('-o-transform', 'scale(' + rescale + ')');

}

$(window).on('resize', function(){ 

scaleStage(); 
});

// Make it happen when the page first loads
$(window).load(function(){
 doc_height=$(document).height();
 initial_stage();
 scaleStage();
 });

</script>
</head>
<body id="check">

 <h2>Norwegian Mountain Trip</h2>
 <img border="0" src="image.png" alt="Pulpit rock" >

 </body>
 </html>

Upvotes: 0

Views: 279

Answers (1)

Madthew
Madthew

Reputation: 686

If you are referring to the overflow just force them to hidden:

.cssclass {
    overflow-y: hidden;
    overflow-x: hidden;
}

to the div which contains the image.

More tips here: http://www.w3schools.com/cssref/css3_pr_overflow-x.asp

<div class="cssclass">
  <img border="0" src="image.png" alt="Pulpit rock" >
</div>

Upvotes: 2

Related Questions