Hi Carlo!
Sorry that I am answering so late but I was used to get E-mails when someone responded here. So I checked my mails but didn’t check the post itself. Now I know better!
First of all, thanks for your response, works great! And I learn from it.
Unfortunately, yet, after a bit of time passed (without getting response - at least I thought so as I explained above) I followed a different way to solve my problem.
And I nearly did it, but sadly only nearly :-(
Here is a link of my result so far:
www.stefanseifert.com/Adobe_Edge_Tests/index.html
FIrst you have to pull down the black trailer with the arrow on the right side to come to the grey page.
(Thanks for your patience!!)
Here the problem concerns the four menu items on the page bottom.
I tried to achieve a rather complex (at least for me it is;-) place changing functionality (which should make sure that the clicked category always appears on the very left side and opens a submenu with also changing list of contents.
I did the following so far:
html:
<div id = "menu">
<div id="Collection"class="item firstleft first"> <img src="images/COLLECTION.png"></img></div>
<div id="Recherche"
class="item secondleft second"> <img src="images/RECHERCHE.png"> </img></div>
<div id="Corporate"
class="item secondright third"><img src="images/CORPORATE.png"> </img></div>
<div id="Contact"
class="item firstright"> <img src="images/CONTACT.png"> </img></div>
</div>
and JS:
$(document).ready(function(){
//Binding the change place functionality
$(".first") .on('click', function() { changePlace(); } );
$(".second").on('click', function() { changePlace(); } );
$(".third") .on('click', function() { changePlace_2(); } );
…
});
function changePlace() {
var ww = $(window).width();
var dur = ww/2.4;
var $first = $(".first");
var $second = $(".second");
var $third = $(".third");
$second .stop(true)
.animate({ left: '10.5%' }, dur, 'easeOutSine')
.prependTo("#menu")
.removeClass("second")
.addClass("first");
$first .stop(true)
.animate({ left: '36%' }, dur, 'easeOutSine')
.removeClass("first")
.addClass("second");
//Exchanges the list of titles in the fold out submenu of the very left menu item based on the work section choice
gtitles = ( gtitles == gtitlesCol ) ? gtitlesRech : gtitlesCol;
}
function changePlace_2() {
var ww = $(window).width();
var dur = ww/1.5;
var $first = $(".first");
var $second = $(".second");
var $third = $(".third");
$third .stop(true)
.animate({ left: '10.5%' }, dur, 'easeOutSine')
.prependTo("#menu")
.removeClass("third")
.addClass("first")
.off('click')
.on('click', function() { changePlace(); } );
$first .stop(true)
.animate({ left: '64%' }, dur, 'easeOutSine')
.insertAfter( $second )
.removeClass("first")
.addClass("third")
.off('click')
.on('click', function() { changePlace_2(); } );
//Exchanges the list of titles in the fold out submenu of the very left menu item based on the work section choice
gtitles = gtitlesCorp;
}
For the reason of another function (depending in fact on the index position of the divs inside #menu) it is also important that after the animated place exchange the order in the html is changed, too.
I achieved this with classes and prepend, insertAfter.
And the thing is: Everything works great but only two times, because I get the doubt that the off() and on() rebindings do not work as they should.
And I cannot imagine why.
I know this is a hell of complicated, but why the off() and on() seems to not work properly, do you have any idea?
Thanks however for your patience and kindness
Garavani
