- January 28, 2016 at 12:49 pm #7458
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
EnoJanuary 28, 2016 at 3:05 pm #7459
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.
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.
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:
These are essentially the same, but without that cloning, which I think should be avoided for so many reasons.Best,
If you like my products, don't forget to rate them on codecanyon :)
January 28, 2016 at 3:12 pm #7460
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
You must be logged in to reply to this topic.