Multiple instances of same search form (sticky header)?

[enoversumParticipant]

Hey Ernest,

one little thing I came across and can imagine that it fails because of it being there double – I use headhesive to create a sticky header as shown on the Website URL above. It basically creates a clone of the desired element (here my header), looks for the offset to the top of the page and changes classes on the original and the clone element accordingly.

However, since I positioned your search inside that very cloned div I don’t get your search to behave like it should. It obviously detects the first instance of the search form (clone is put to the top of the DOM, so it recognises the sticky header’s form), but fails on the ‘normal’ one.

Is there a quick fix for it, any idea how to address it any other way than not cloning things :)?

All the best & have a great day

Eno

[Ernest MarcinkoKeymaster]

Hi Eno,

It’s nice to hear from you.

It fails mainly because of 3 reasons:

1. Cloning creates the exact copy of the search, however it only creates the HTML elements and not the event handlers. There is a fail-safe method implemented into the plugin to try to fix this if it recognizes changes, but it will most likely fail.

2. Because the duplication will create the exact same element, with the exact same ID – which is not only invalid HTML, but the javascript won’t be able to locate the search elements, as the jQuery function will fail because of the duplication.

3. All the 3rd party script event handlers will fail as well.

Duplicating itself is a really bad practice, but I guess it’s ok in cases where no element IDs or element names are involved – and the Node structure is relatively simple – like in menu items, links and such.
However the search plugin is a very complex structure of HTML elements and uses lots of javascript event handlers to do it’s things.

Whenever you change/move/duplicate a Node inside a structure which has event handlers attached to it, they will be automatically de-attached – because the DOM Node tree changes, and it’s no longer the same element. In case of duplication it’s even worse, as the same element will exist twice with the same ID.

All in all, I’m not saying it’s not possible to fix, but nearly impossible. And it’s going to break at the first update for sure.

If I may suggest, try using a different solution instead of the cloning. I’ve seen these “sticky” menus in lots of themeforest themes, and it’s terrible. They look nice, but you cannot put anything fancy in there. There are way better pure CSS3 solutions availble, for example:

1. http://designmodo.com/sticky-navigation-css-jquery/
2. http://demo.hongkiat.com/css-sticky-position/index2.html
3. http://codepen.io/senff/pen/ayGvD

These are essentially the same, but without that cloning, which I think should be avoided for so many reasons.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[enoversumParticipant]

Hi Ernest,

thank you for your real quick and eloquent reply. Then I already nailed it as why it doesn’t work.

The cloning, as done here, had two advantages when I opted for that solution on another project some time ago. My more basic version failed to meet expectations, since I wasn’t able to have it float in with an animation, and having the clone use different classes etc. made for complications with styling.

However, in this case I will be sure to use another solution, since we depend on your plugin :). I will also keep in mind to look for a better solution that does not involve cloning at all ;).

Thanks again for keeping it all up ;).

All the best

Eno

[Author]

Posts