Support us .Net Basics C# SQL ASP.NET Aarvi MVC Slides C# Programs Subscribe Download

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

It would be great if you can help share these free resources