Tijden veranderen
Jquery en css
Dit is de code:
Javascript:
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
$(function() {
$("#header").resizable({minHeight: 100,handles: 's'});
$("#logo").draggable({
containment: '#header',
scroll: false
});
});
$("#header").resizable({minHeight: 100,handles: 's'});
$("#logo").draggable({
containment: '#header',
scroll: false
});
});
Css:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
#logo
{
top: <?=$sel['y'];?>px;
left: <?=$sel['x'];?>px;
position: absolute;
}
#header
{
position: relative;
height:<?=$sel['header_height'];?>px;
background:<?=$sel['header'];?>;
}
{
top: <?=$sel['y'];?>px;
left: <?=$sel['x'];?>px;
position: absolute;
}
#header
{
position: relative;
height:<?=$sel['header_height'];?>px;
background:<?=$sel['header'];?>;
}
Html:
Code (php)
1
2
3
4
5
2
3
4
5
<div id="header">
<div id="logo" class="move">
<span><img src="images/logo.png" /></span>
</div>
</div>
<div id="logo" class="move">
<span><img src="images/logo.png" /></span>
</div>
</div>
EDIT: Voorbeeld
Gewijzigd op 12/08/2011 23:17:47 door Nick Dijkstra
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$(function() {
$("#header").resizable({
minHeight: 100,
handles: 's',
resize: function(e, ui) {
var logo = $('#logo');
var current_left = parseInt(logo.css('left'));
var current_top = parseInt(logo.css('top'));
logo.css({
'left': Math.min(current_left, ui.size[0] - logo.width()),
'top': Math.min(current_top, ui.size[1] - logo.height())
});
}
});
$("#logo").draggable({
containment: '#header',
scroll: false
});
});
$("#header").resizable({
minHeight: 100,
handles: 's',
resize: function(e, ui) {
var logo = $('#logo');
var current_left = parseInt(logo.css('left'));
var current_top = parseInt(logo.css('top'));
logo.css({
'left': Math.min(current_left, ui.size[0] - logo.width()),
'top': Math.min(current_top, ui.size[1] - logo.height())
});
}
});
$("#logo").draggable({
containment: '#header',
scroll: false
});
});
Toevoeging op 13/08/2011 12:53:14:
Ik heb hem werkend!
Heb ui.size[0] en ui.size[1] veranderd in ui.size.width en ui.size.height
Bedankt Jelmer!