Sql server, .net and c# video tutorial: 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

<divid="sliderHeight"></div>

<br/>

<divid="sliderWidth"></div>

<br/>

<divid="divOpacity"></div>

<br/>

<divid="divDimensions"></div>

<br/>

<imgid="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);

}

});

Sql server, .net and c# video tutorial