Click here to Skip to main content
15,848,319 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I am implementing a jQuery Fade Slider on a site that I am building, although having a defined height is giving me some issues.

I am using columns defined in percentages for their respective width, col-25 = 25% of the width. My images are placed within a class called .img-holder where the width is set to 100%. As of right now, when using the fade slider, the image height is fine at width and height on my screen but when scaling down into smaller screens the defined height obviously becomes problematic. I didn't want to use a different defined height for each screen variation through @media in my css because I am already doing so with my .col class. Is there a way to use the slider without having to define a height for it?

CSS
My CSS currently looks like this:

.img-holder { background: #EEE; overflow:auto; position:relative; width:100%}
.col { float:left }
.col .img-holder { width:100%; height:auto; margin-bottom:14px; margin-top:5px }

.fades-demo { position:relative; width:100%; height: 100% !important; margin-left:auto; margin-right:auto; -webkit-transition: 0.5s; -moz-transition: 0.5s; -ms-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; }


HTML
<div class="col col-50">
<div class="img-holder">
		<div class="mgtb fades-demo hide" id="fades1">
				  
			<div>
			<img src="/001.jpg" width="" height="" alt="" class="" />
			</div>
				  
			<div>
			<img src="/002.jpg" width="" height="" alt="" class="" />
			</div>
				  
			<div>
			<img src="/003.jpg" width="" height="" alt="" class="" />
			</div>
				  
		</div>
				
</div>
</div>



C#
<script>
//scripts
$(document).ready(function() {


    //initUI
    initUI()

    //init slider 1
    var defaults = {
        speed: 800
        ,timer: 4000
        ,autoSlider: false
        ,hasNav: true
        ,pauseOnHover: true
        ,navLeftTxt: ''
        ,navRightTxt: ''
        ,zIndex:20
    }
    ,as = $('#fades1').fadeSlider(defaults)
    ,count = 2

    //destroy
    $('#o-btn-des').click(function() {
        as.destroy()
    })

    //resize wrapper
    $('#o-btn-cs').click(function() {
        $('#fades1').css({
            position:'fixed'
            ,left:0
            ,top:0
            ,width:'100%'
            ,height:'100%'
            ,'z-index': 300
        })
        as.defs.speed = 1000
    })

    //resize wrapper
    $('#o-btn-ns').click(function() {
        var t = '<div class="fades-demo mgtb" id="fades' + ++count +'">' +
        ($('#fades1 .fade-slides').length?$('#fades1 .fade-slides').html():$('#fades1').html()) +
        '</div>'
        $('#wrapper').append(t)
        $('#fades' + count).fadeSlider(defaults)
    })
})

</script>



Any help would be appreciated.
Thanks in advance!
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900