Hi there,
Here's a question for javascript experts ;). Actually, I wanna have a sticky header that remains on top of the window when I scroll past it. I've found many exemples online about it but so far I haven't been able to implement any of these, using zkoss.
http: // jsfiddle.net/johnantoc/G45QM/
The link above gives you a simple example of what I want for my program. Seems simple, nevertheless it's not.
Tags
People
Badges
Help
<div id="header-wrap" apply="org.zkoss.bind.BindComposer" viewModel="@id('vm') @init('com.monitoring.ui.SessionSheetVM')" hflex="4" >
<div id="line">
<listbox style="box" checkmark="true" multiple="true" >
<listhead>
<listheader class="headerbutton" hflex="1" label="Ajouter une tâche" onClick="@command('insertTask')"/>
<listheader class="headerbutton" hflex="1" label="Modifier une tâche" onClick="@command('updateTask')"/>
<listheader class="headerbutton" hflex="1" label="Supprimer une tâche" onClick="@command('deleteTask')"/>
</listhead>
</listbox>
</div>
I want the listbox to remain on top of the page. If any of you has an idea about how to get it working, i'll be glad to read it.
Thanks in advance.
You can take a borderlayout.
North is all times on top.
Center is scrolling down
@terrytornado Thx but it doesn't work. The north block doesn't remain on top of the page when I scroll past it.
<div apply="org.zkoss.bind.BindComposer"
viewModel="@id('vm') @init('com.monitoring.ui.TaskEditorVM')"
hflex="4">
<borderlayout height="1200px">
<north >
<listbox checkmark="true" multiple="true">
<listhead>
<listheader sclass="headerbutton" hflex="1" label="Ajouter une tâche" onClick="@command('insertTask')" />
<listheader sclass="headerbutton" hflex="1" label="Modifier une tâche" onClick="@command('updateTask')" />
<listheader sclass="headerbutton" hflex="1" label="Supprimer une tâche" onClick="@command('deleteTask')" />
</listhead>
</listbox>
</north>
<center>
<listbox model="@load(vm.groupModel)" checkmark="true"
onSelect="@command('selectGroup', data=event.reference.value)"
multiple="true"
itemRenderer="com.pmc.starweb.epilote.monitoring.ui.TaskListGroupRenderer">
<custom-attributes org.zkoss.zul.listbox.groupSelect="true" />
<listhead>
<listheader hflex="1" sort="auto(id)" label="ID" />
<listheader hflex="1" sort="auto(description)" label="Description Fr" />
<listheader hflex="1" sort="auto(descriptionEn)" label="Description En" />
<listheader hflex="1" sort="auto(descriptionDe)" label="Description De" />
</listhead>
</listbox>
</center>
</borderlayout>
</div>
Than my recommendation is to setup the layout with ZK native components.
Look at my website at http://www.oxitec.de . Here is exact the CONTRARY to what you want. In my case the header menu should scroll up away. This is done with native components and javascript.
valnay, you don't need to be a javascript expert to do such things.
Here is a sample zul using just divs:
<zk>
<window border="none" height="100%" width="100%" xmlns:n="native">
<hlayout valign="middle">
<n:div align="center"><n:h1>Page Header</n:h1></n:div>
</hlayout>
<div vflex="true" style="overflow: auto;">
<panel height="300px" title="Content goes here">
</panel>
<panel height="300px" title="And some more here...">
</panel>
<panel height="300px" title="And here...">
</panel>
</div>
</window>
</zk>
And here is another sample using the borderlayout as Stephan says:
<zk>
<window border="none" height="100%" width="100%" xmlns:n="native">
<borderlayout>
<north>
<hlayout valign="middle">
<n:div align="center"><n:h1>Page Header</n:h1></n:div>
</hlayout>
</north>
<center>
<div vflex="true" style="overflow: auto;">
<panel height="300px" title="Content goes here">
</panel>
<panel height="300px" title="And some more here...">
</panel>
<panel height="300px" title="And here...">
</panel>
</div>
</center>
</borderlayout>
</window>
</zk>
As you see the styling attribute "overflow: auto;" does the trick.
And here is a bonus example using a little javascript to do what this fiddle does:
<zk>
<window border="none" height="100%" width="100%" xmlns:n="native">
<style>
body {
height:1000px;
width:100%;
background-color:#F0F0F0;
}
.header_area {
width:100%;
height:200px;
background-color:#666;
position:fixed;
top:0;
left:0;
}
</style>
<div id="header_nav" class="header_area">
<hlayout valign="middle">
<n:div align="center"><n:h1>Page Header</n:h1></n:div>
</hlayout>
</div>
<div height="200px" />
<panel height="300px" title="Content goes here" >
</panel>
<panel height="300px" title="And some more here...">
</panel>
<panel height="300px" title="And here...">
</panel>
<script type="text/javascript">
zk.afterMount(function() {
$('$header_nav').data('size','big');
$(window).scroll(function(){
if($(document).scrollTop() > 0)
{
if($('$header_nav').data('size') == 'big')
{
$('$header_nav').data('size','small');
$('$header_nav').stop().animate({
height:'80px'
},600);
}
}
else
{
if($('$header_nav').data('size') == 'small')
{
$('$header_nav').data('size','big');
$('$header_nav').stop().animate({
height:'200px'
},600);
}
}
});
});
</script>
</window>
</zk>
Hope that helps
Costas
Doesn't work for, I tried to apply each case to my application. No successful result.
I dont understand what is that doesn't work. Just post a complete zul or give a public dropbox link and you 'll see how easy it is. Cheers
cyiannoulis ( 2015-02-03 16:45:18 +0800 )editAsked: 2015-01-12 15:28:03 +0800
Seen: 42 times
Last updated: Feb 03 '15