Support us .Net Basics C# SQL ASP.NET ADO.NET MVC Slides C# Programs Subscribe Buy DVD

jquery multiple sliders on page

Suggested Videos
Part 76 - jQuery tabs in asp.net
Part 77 - jQuery datepicker in asp.net
Part 78 - jQuery slider in asp.net



In this video, we will discuss how to control the height, width and opacity of an image using multiple sliders on the page.



jquery multiple sliders on page

HTML
<div id="sliderHeight"></div>
<br />
<div id="sliderWidth"></div>
<br />
<div id="divOpacity"></div>
<br />
<div id="divDimensions"></div>
<br />
<img id="myImg" src="Tulips.jpg"
        style="width: 100px; height: 100px" />

jQuery 
$(document).ready(function () {
    $('#sliderHeight, #sliderWidth').slider({
        min: 100, max: 500, slide: refreshImage
    });

    $('#divOpacity').slider({
        min: 0, max: 100, value: 100,
        slide: refreshImage
    });

    function refreshImage() {
        var height = $('#sliderHeight').slider('value');
        var width = $('#sliderWidth').slider('value');
        var opacity = $('#divOpacity').slider('value')
        $('#myImg').css({
            height: height, width: width, opacity: opacity / 100
        });
        $('#divDimensions').html('Height : ' + height + ' Pixels<br/>' +
                                    'Width : ' + width + ' Pixels<br/>' +
                                    'Opacity : ' + opacity / 100);
    }
});

jQuery tutorial for beginners

No comments:

Post a Comment

If you like this website, please share with your friends on facebook and Google+ and recommend us on google using the g+1 button on the top right hand corner.