Add a fixed header or tab on a webpage

[silence]

Hi everyone!

I needed to make a fixed header on my Xara-designed website. After intensive googling around I've arrived to a nice solution, and would like to share it with the community. It does not have some limitations of a Fixedtab tweak, as it's not linked to any layer.

Here are the steps that you need to make:

1. First, we need to add a javascript function that is able to wrap objects into a div. Than we can position this div as we want it.

Go to the Web properties panel, and to the Website tab. There, press the HTML code (head) button and add this code:

<SCRIPT type="text/javascript">
// Wrap an HTMLElement around another HTMLElement or an array of them.
HTMLElement.prototype.wrapAll = function(elms) {
    var el = elms.length ? elms[0] : elms;
    
    // Cache the current parent and sibling of the first element.
    var parent  = el.parentNode;
    var sibling = el.nextSibling;
    
    // Wrap the first element (is automatically removed from its
    // current parent).
    this.appendChild(el);
    
    // Wrap all other elements (if applicable). Each element is
    // automatically removed from its current parent and from the elms
    // array.
    while (elms.length) {
        this.appendChild(elms[0]);
    }
    
    // If the first element had a sibling, insert the wrapper before the
    // sibling to maintain the HTML structure; otherwise, just append it
    // to the parent.
    if (sibling) {
        parent.insertBefore(this, sibling);
    } else {
        parent.appendChild(this);
    }
};
</SCRIPT>

Don't close the window yet

2. Next, let's add a CSS class that will position our wrapper div as we need it.

It is added in the same window, to the website header.

Here's a code for a fixed header. It will center the div and keep it at the top of the website.

<STYLE type="text/css">
.fixed_wrapper {position:fixed; left:auto; right:auto; top:0px}
 </STYLE>

Here's a code for a side button. It will keed the button at the left border of the site, 500px from the top.

<STYLE type="text/css">
.fixed_wrapper {position:fixed; left:0px; top:500px}
 </STYLE>

You can easily change this CSS to match your task.

3. Now, let's add a javascript code that will launch the wrapping procedure.
In the same Website tab of the Web properties window, press the HTML (body) button. This is the code we need:

<SCRIPT type="text/javascript">
var fixed_array = document.getElementsByClassName('fixed');
var div = document.createElement('div');
div.wrapAll(fixed_array);
div.className = "fixed_wrapper";
</SCRIPT>

The code gets all the elements which have the class named 'fixed', creates a new div with the 'fixed_wrapper' class, and wraps all the elements inside it.

4. Now there's the last thing: we need to ask Xara to assign the HTML style named "fixed" to all objects we want to stay fixed. To do this:

* select all these objects and soft-group them.
* go to Name gallery and assign a new name to the soft group: "htmlclass=fixed". This trick will make Xara assign the class named 'fixed' to all objects in a soft group.

All done! Now you can publish your site and enjoy a fixed element.

Hope this tutorial will help you in creating great websites

[steve.ledger]

Do you have a demo online showing the results of this?

How do you see !FixedTab tweak linked to a layer being a limitation?

[gwpriester]

Steve - If Silence's layer allows mouse overs then it has overcome a limitation of the iFixedTab limitation. Not sure if this is the case though.

[steve.ledger]

Steve - If Silence's layer allows mouse overs then it has overcome a limitation of the iFixedTab limitation. Not sure if this is the case though.

Not linked to a layer. Mouseovers not possible. You can't add a navbar to a softgroup.

I needed to make a fixed header on my Xara-designed website. After intensive googling around I've arrived to a nice solution, and would like to share it with the community. It does not have some limitations of a Fixedtab tweak, as it's not linked to any layer