Hi all,
for days I am now thinking about how to solve my problem here with a (relative) simple fold out menu.
I think that it is somehow a „classic“ but despite of much google and reading I can not fix it.
I need some professional help.
I will attach also a screenshot that showes dreamweaver layout to show elements.
I will explain what I want to achieve:
When then mouse hovers over the word „Collection lettre“ out of it will appear above (these are animated switching from absolute to relative position while moving upwards and fading in done with:
function folderOut(index) {
var times = [1500,600,240];
if (times[index]) {
$(this) .stop(true)
.css('position', 'relative')
.animate({'opacity': 1,'top': '-132px','margin-top': '17px'},times[index],'easeOutSine');
}
}
$("#folder")
.mouseenter(function(){
var currTitle = $("#gwork").val();
$('#folder img')
.not('#title_'+currTitle)
.each(folderOut)
.css('cursor', 'pointer')
});
<div id = "folder"
class="item firstleft">
</div>
This part works fine and very satisfying.
Now my problem is that each of this out coming items have to have a mouseenter and leave behaviour themselves, which I also resolved and also I managed to make the foldout menu fold in when those are clicked, BUT
what is wanted and needed that the menu will fold in when the mouse leaves it, NOT the word itself (because obviously the user has to be able to click the distanced item with the menu collapsing first)
I can’t work with a class making the div which contains „Collection lettre“ itself because this will destroy the animation (besides it doesn’t work good). I tried to install a second field below attaching the mouseleave behaviour to it like:
<div id = "foldout" class="item firstleft foldout"> </div>
<div id = "folder" class="item firstleft">
</div>
…
$("#folder")
.mouseenter(function(){
var currTitle = $("#gwork").val();
$('#folder img')
.not('#title_'+currTitle)
.each(folderOut)
.css('cursor', 'pointer')
});
$("#foldout")
.mouseleave(function(){folderIn();});
});
[see also screenshot layout]
I tried doing a lot of things either hover or mouse enter/leave combinations nothing works perfect only partially. With the second field for example the mouseleave works only leaving the folder div in the upwards direction and so on…
Unfortunately I can also not use mouse position coordinates for a script because the elements are positioned with % changing position relating to window size :-(
Come on guys you know what I mean, do you?
Can someone help me to unknot the colliding mouse enters, leaves and hovers?
Hell, this makes me crazy
Thanks a lot for helping me
Garavani