0

Sticky Header that remains on top of the page when scroll past it

asked 2015-01-12 15:28:03 +0800

valnay gravatar image valnay
13 2

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.

<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.

delete flag offensive retag edit

6 Answers

Sort by » oldest newest most voted
0

answered 2015-01-12 15:43:45 +0800

terrytornado gravatar image terrytornado flag of Germany
9393 3 7 16
http://www.oxitec.de/

You can take a borderlayout.

North is all times on top.

Center is scrolling down

link publish delete flag offensive edit
0

answered 2015-01-15 15:23:13 +0800

valnay gravatar image valnay
13 2

@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>
link publish delete flag offensive edit
0

answered 2015-01-15 18:14:01 +0800

terrytornado gravatar image terrytornado flag of Germany
9393 3 7 16
http://www.oxitec.de/

updated 2015-01-15 18:14:38 +0800

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.

link publish delete flag offensive edit
0

answered 2015-01-26 13:31:32 +0800

valnay gravatar image valnay
13 2

I've tried, unsuccessfully so far

link publish delete flag offensive edit
0

answered 2015-01-27 15:21:38 +0800

cyiannoulis gravatar image cyiannoulis
1191 10

updated 2015-01-27 16:11:51 +0800

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

link publish delete flag offensive edit
0

answered 2015-02-03 15:46:38 +0800

valnay gravatar image valnay
13 2

Doesn't work for, I tried to apply each case to my application. No successful result.

link publish delete flag offensive edit

Comments

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 )edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow
1 follower

RSS

Stats

Asked: 2015-01-12 15:28:03 +0800

Seen: 33 times

Last updated: Feb 03 '15

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More