jQuery UI Slider with jLayout
99 views
Skip to first unread message
SquareTuts
Nov 9, 2011, 11:30:39 PM11/9/11
to jLayout
Hope you can help me. How can I make it so that the jLayout widths,
lets say, Grid layout, changes when someone is interacting with the UI
Slider? Sort of like the resize example, but I would like to use the
Slider instead.
lets say, Grid layout, changes when someone is interacting with the UI
Slider? Sort of like the resize example, but I would like to use the
Slider instead.
InsiteFX
Nov 10, 2011, 3:29:35 AM11/10/11
to jla...@googlegroups.com
jQuery
$(document).ready(function(){
$('#width_slider').slider({
range:"min",
min:900,
max:1260,
value:960,
slide:changeWidth,
change:changeWidth
});
function changeWidth(){
var sliderWidth = $('#width_slider').slider("value");
$("#wrapper").css("width", sliderWidth);
}
});
CSS
#wrapper {
width: 960px;
margin:0 auto;
}
HTML
<h3>Content Width</h3>
<div id="width_slider" style="width:100%;"> </div>
--
You received this message because you are subscribed to the Google Groups
"jLayout" group.
To post to this group, send email to jla...@googlegroups.com.
To unsubscribe from this group, send email to
jlayout+u...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/jlayout?hl=en.
SquareTuts
Nov 10, 2011, 11:41:44 AM11/10/11
to jLayout
This is what I have so far, and so far the grid widths change but they
are overlapping each other and not moving the left as the width grows
smaller.
<script>
$(document).ready(function() {
$('#my-container').layout({
type: 'grid',
columns: 2,
rows: 2,
resize: true,
items: [
$('#component-1'),
$('#component-2'),
$('#component-3'),
$('#component-4')
]
});
});
</script>
<script>
$(document).ready(function() {
$('#slider').slider({
value: 17,
slide: handleSliderChange
});
function handleSliderChange(event, slider){
$('#my-container, #component-1, #component-2,
#component-3, #component-4').css('width', slider.value + '%');
}
});
</script>
</head>
<style>
#my-container { width: 960px; overflow: auto; }
#component-1, #component-2, #component-3, #component-4 { background-
color: #ccc; padding: 20px; text-align: center;
margin-bottom: 5px;
width: 250px;
margin-right: 5px;
}
</style>
<body>
<div id="page">
<div id="slider"></div>
<div id="my-container">
<div id="component-1">One</div>
<div id="component-2">Two</div>
<div id="component-3">Three</div>
<div id="component-4">Four</div>
</div>
</div>
</body>
are overlapping each other and not moving the left as the width grows
smaller.
<script>
$(document).ready(function() {
$('#my-container').layout({
type: 'grid',
columns: 2,
rows: 2,
resize: true,
items: [
$('#component-1'),
$('#component-2'),
$('#component-3'),
$('#component-4')
]
});
});
</script>
<script>
$(document).ready(function() {
$('#slider').slider({
value: 17,
slide: handleSliderChange
});
function handleSliderChange(event, slider){
$('#my-container, #component-1, #component-2,
#component-3, #component-4').css('width', slider.value + '%');
}
});
</script>
</head>
<style>
#my-container { width: 960px; overflow: auto; }
#component-1, #component-2, #component-3, #component-4 { background-
color: #ccc; padding: 20px; text-align: center;
margin-bottom: 5px;
width: 250px;
margin-right: 5px;
}
</style>
<body>
<div id="page">
<div id="slider"></div>
<div id="my-container">
<div id="component-1">One</div>
<div id="component-2">Two</div>
<div id="component-3">Three</div>
<div id="component-4">Four</div>
</div>
</div>
</body>
Reply all
Reply to author
Forward
0 new messages