Using plugin with asp.net

[HybridSolutions]

Cloning elements can cause duplicate id's and that happens when using asp.net. It would be great to have the option not to clone, but move instead allowing the plugin to work in every scenario.

[markgoodyear]

Can you provide an example? Headhesive clones your target element, so if you have an id on it, it will duplicate it, regardless of language. If there is no way of removing the ID from your markup, I'll take a look into a solution.

[HybridSolutions]

Actually, even if you changed IDs in runtime, that would still might break .net controls. The solution for avoiding that, would be not to clone an element but move it. To avoid the gap, you could insert an empty DIV with the same height as the moved element. When user scrolls up again, that DIV is replaced by the moved element.

Cloning is not the way to go since duplicating elements that can have IDs generates incorrect html. Do you think headhesive could work with a moved copy instead of a cloned one?

[markgoodyear]

I've no understanding of asp.net, so apologies if this is an obvious question; is it injecting ID's that you're unable to control? If you could put up an example somewhere, that'd be great.

I had looked at ways to not clone the element, unfortunately I couldn't find a neat solution at the time, but I think the option to do so would be great. When I looked at it before, the animation side was the issue, I'll have a re-think on this.

[HybridSolutions]

Forget about .net. That was just an example where the problem will come up sooner or later for those using this script. The important issue here is that cloning an existing element will always be incorrect for the reasons I already mentioned. Using jQuery it would be easy to develop something like this:

• We call our jquery plugin like $('#myheadercontainer').headerPlugin();
• We get #myheadercontainer InitPosition (top position + height)

Going down...

• In the Window.scroll event we check if the user scrolled past InitPosition.
• Hide #myheadercontainer (opacity:0), make it position:fixed and inject a div with the same height into #myheadercontainer position. You can add a class to the element instead of injectiing inline css for this.
• scrolling down a little more (100px), we unhide the header and even add a class to shrink inner elements causing a nice animation with fade in and shrinking header bar and it's elements :)

Going up...

• if below InitPosition+100px, hide shrinked header (opacity:0). Ops! going down again? Just unhide it again (opacity:1) :).
• if above InitPosition, remove Shrink class, remove fix class (position:fixed) and unhide shrinked header (opacity:1).

This solution will allow for the fixed header to appear only when the user scrolls past its initial position, or even a custom position passed as a parameter.
Also, it still allows css classes to be applied to each event, making it very customizable for animations.

What do you think?

[markgoodyear]

I'm not sure I follow 100%. Are you saying we should only show the header after the target scroll position? The purpose of the plugin is to allow a header that isn't fixed and visible as soon as you hit the page, and then kind of "lazy load" in after so far down.

This is still possible without cloning the element, I just need to figure the nicest solution ;).

[HybridSolutions]

The behavior I described is exactly like the one in your demo (http://markgoodyear.com/labs/headhesive/), but without cloning.You only show the fixed menu after some scrolling right (offset)? It's not visible as soon as the page loads. My InitPosition is your offset i guess :)

[markgoodyear]

Yeah, I definitely agree this should be in the plugin. Sometimes the cloning has caused issues for me on other projects. What would the purpose be of the injected div? I reckon there will be a neater way of doing it without injecting divs (maybe!). I'll hopefully get chance to have a look at this over the weekend.

[HybridSolutions]

Making an element fixed, will have the same effect as if you removed it from the DOM. You will see everything below that element jump to fill the gap. By injecting a div with the same height, you will be avoiding that annoying jump. This doesn't happen with your plugin because you duplicate the element so the original one stays in place. If you have a chance to test anything, It would be my pleasure to take a peak into it so that I can give you my opinion :)

[markgoodyear]

Ah yes, that could work. I was thinking to add a margin-top to the body element to push it down — will test out both ways to see, but the div idea I think may be the better. Thanks, I'll give you a shout when theres something to have a look at :)

[HybridSolutions]

Today I found a website with a header bar behaving just like we discussed.
http://www.ausdom.com/

The script is inside jquery.theme.home.js.

[markgoodyear]

I've pushed some updates to the develop branch: https://github.com/markgoodyear/headhesive.js/tree/develop

The demo is set up to not clone the element, you'll be able to see the small issue I have with the animation. As soon as you go back up, because we essentially remove position: fixed, we don't have a nice animation — this is the same with the site you posted above.

Any feedback is appreciated!

[HybridSolutions]

Hi Mark,

sorry for the delay. busy week :) Checked your demo, uncommented the no clone version, and even changed the data attribute of the header tag to clone: false but it's not working. I only get two visible header bars. Can you make sure the demo is working?

[markgoodyear]

It was working for me before pushing, let me just double check. I think I'll remove the whole data-attribute configure thing, and look at it another time.

[markgoodyear]

It's all working for me — could you remove the header with the data configuration? Basically at the moment, one config will overwrite the other. You can leave the data config in and just use var banner = new Headhesive('.banner'); and it'll check for any config on the element :)

Let me know if that doesn't work.

[HybridSolutions]

Hi Mark,

tested again and only get two visible header bars upon load.

The only init code I have now is

/**
* Example options without cloning
*/
var options = {
offset: '#showHere',
clone: false,
classes: {
stick: 'banner--stick',
unstick: 'banner--unstick'
}
};

    // Initialise with options
    var banner = new Headhesive('.banner', options);

and in the HTML I removed the header with data config as you said:

<body id="top"> <header class="banner"> <nav class="container"> <h1 class="logo">Headhesive.js</h1> <ul class="nav"> <li class="nav__item"><a href="https://twitter.com/markgdyr">@markgdyr</a></li> <!-- <li class="nav__item"><a class="nav__item--btn btn" href="http://markgoodyear.com/blog">View Article &rarr;</a></li> --> </ul> </nav> </header> <section class="hero"> ...

I tested on Firefox and IE 9. Debugged using Firebug and noticed that _getDataOptions(this.elem.dataset.headhesive); is returning nothing and overwriting the options specified in html code, so on the next line you merge default options with nothing. After commenting that line, it works. I suppose that _getDataOptions is for options defined by data attributes right? If so, you should check for null values.

Now that this is solved i'm going to see how it's working.