codingdir logo sitemap sitemap |
Home
PHP
C#
C++
ANDROID
JAVA
JAVASCRIPT
PYTHON

Overflow Hidden Not working - tried to put overflow hidden in container but it cuts the picture


By : , Category : html
  1. In order to hide scroll, apply the "overflow: hidden;" to body not to <div> containers.

  2. For the cut image please delete "bottom: 100px;" from ".info".

body {overflow: hidden;}        

#mainSlider{
        width: 960px;
        height:500px;
        display: block;
        position:relative;
        margin:auto;

    }
    #Islider{
        width:960px;
        height:500px;
        display:block;
        position:absolute;
         overflow:hidden;
    }
    .info{
        width:960px;
        height:80px;
        display:block;
        position:relative;
        background: rgb(120, 217, 132);
        z-index:99;


    }

    .info h2{
        font-family: sans-serif;
        font-size: 20px;
        font-weight: bold;
        color:#FFF;
        padding: 15px 0 0 20px;


    }
    .info p{
        font-family:sans-serif;
        font-size:15px;
        font-weight: lighter;
        color:#FFF;
        padding:0 0 0 20px;
        line-height: 1px;

    }
    #play{
        width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        display: block;
        position: absolute;
        background: rgb(0, 255, 144);
        color: #FFF;
        cursor:pointer;
        z-index: 999;
        top: 0;
        right: 44px;
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg);

    }
     #pause{
        width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        display: block;
        position: absolute;
        background: rgb(0, 255, 144);
        color: #FFF;
        cursor:pointer;
        z-index: 999;
        top: 0;
        right: 88px;
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
    }
      #next{
        width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        display: block;
        position: absolute;
        background: rgb(0, 255, 144);
        color: #FFF;
        cursor:pointer;
        z-index: 999;
        top: 0;
        right: 0;
    }
       #previous{
        width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        display: block;
        position: absolute;
        background: rgb(0, 255, 144);
        color: #FFF;
        cursor:pointer;
        z-index: 999;
        top: 0;
        right: 133px;
    }

       #pager{
           width:100px;
           text-align:center;
           display:block;
           position:absolute;
           cursor:pointer;
           z-index:999;

       }
       #pager a{
           width: 10px;
           height: 10px;
           display:inline-block;
           position:relative;
           border: 1px solid #FFF;
           border-radius:20px;
           background: #FFF;

       }

here is my demo fiddle

ReLated :

Something like this:

 <div id="back" class="" style="background: transparent url('http://a.espncdn.com/photo/2013/0209/nba_jordan_00.jpg');height: 257px;
    width: 800px;">

</div>
</div>
<script>
    var w = 0;
    $('#back').html('<div id="dawrap" class="wrap">'+
    '<a class="open" href="#">OPEN</a>'+
    '<div class="outer">'+
       ' <div class="mainSlide">'+
        '<a>'+
         '<img class="content-text" src="" style="margin-left:77px; margin-top:31px; display:none;" />'+
         '<br> <br>'+
         'CONTENT at Default'+
            '</a>'+
        '</div>'+
   ' </div>');
$('.mainSlide').children().each(function() {
    w += $(this).outerWidth();
});

$('.outer').width(w);
$('.wrap').width(w);
$('.mainSlide').css('left', '480px');

$('.open').toggle(function() {
    $('.mainSlide').stop().animate({left: 0});
    $(this).html('');
    $('.content-text').css('display', 'block');

}, function() {

    $('.mainSlide').stop().animate({left: 480});
    $('.content-text').css('display', 'none');

    $(this).html('OPEN');
});


</script>

?

Or, better (but don't know why today on my browsers $('#id').css('display','block') doesn't want to work) you can set the div as invisible and, when the page is loaded, make it visible. If you want to keep your structure.

For example, using z-index let you avoid position:absolute and with a 4 js raws you can do the trick:

<script type="text/javascript">
function domeafavour(){
    if( $('#slider').width()==100) {
        $('#slider').animate({
        width: '600px'},1000);
    }else{
        $('#slider').animate({
        width: '100px'},1000);
    }
}
</script>


 <div id="back" class="" style="background: transparent url('http://a.espncdn.com/photo/2013/0209/nba_jordan_00.jpg');height:257px;width: 800px;">
  <div id="slider" style='cursor:pointer;float:right;height:252;width:100px; z-index:1;background-color:#CF3;'  onClick="domeafavour()">clickme</div>
</div>

http://jsfiddle.net/tSggb/9/

Try to swap them.

$('.hide_list').click(function() {
    $('.list-container').css("overflow","hidden");
    $('.list-container').animate({width: "2px"});
});

Applying overflow: hidden to the body will cause any content that falls out of the window to be unaccessible. There's many reasons not to do this! The only way to be sure all of your content will be visible would be to ensure that all of the content fits within the window - which means you'll need to know the window's dimensions, and dynamically modify the content to fit within those dimensions.

In your example, the iframe height is 644px, but you set div.sidebar to 800px of height. So, the last 156px of content is unreachable, as it exits the window, and the body is set to hide overflow. Setting div.sidebar to 550px allows your content to look the way you are expecting. If you insist on keeping the body overflow hidden, you'll need to discover the window size, and set the div.sidebar height to something less than the window's height.

you can try this code

var hiddenElements = $( "body" ).find( ":hidden" );

in some browser scripts are hidden elements for that

var hiddenElements = $( "body" ).find( ":hidden" ).not( "script" );

oki now I understood.

I think the top of overflow:hidden element is compare with body height then its possible to group all the hidden elements. try this. change as per your needs

var bodyHeight = $("body").height();
var hiddenElments = new Array();

$("body").find("*").each(function(){
    if ($(this).position().top > h)
        hiddenEls.push($(this));
});
Comments


Message :
Login to Add Your Comments .
How to disable registered OpenCL platforms on Windows?
Is Observable broken in Angular 2 Beta 3?
Cross-thread operation not valid when using Invoke
How to pass an IEnumerable or queryable list of properties from Controller to View
Finding numbers after a certain keyword using Python
Pocketsphinx recognizes random phrases in a silence
Passing non-thread-safe objects through thread-safe containers
React scroll nav
BizTalk WCF-BasicHttp Adapter does not allow Empty string for Service Certificate Props
Why property ''cause" of Exception is repeating forever?
Privacy Policy 2017 © codingdir.com All Rights Reserved .