jQuery Forum

I have a litte tricky mouseenter/leave and click action that I solved in this way:

It is in fact a tiny detail so it has to work in that size also. Excuse me the eye hurting ;-)

First of all: the code that I did so far works in a way but not quite sober.

It means that it depends sometimes from which side the mouse arrives over the divs etc. to make it react a little „nervous“. 

Here is briefly what I wanted to achieve.

The „plus“ symbol is at first only clickable.

Once clicked the second time the mouse moves over it, also reveals a „minus“ symbol offering the possibilities:

1) to return to the beginning (in fact if you click the plus a text is zoomed in via font-size and when you click minus it returns at once to the original font-size value) via click on it

2) go on clicking on the „plus“ (if you want the text to see even one step bigger)

I also wanted an identical mouseleave event for two actions:

1) click the „minus“ -> „minus“ symbol turns in again

2) leave the whole +- area with the mouse -> „minus“ symbol turns in again also

As I said it works as it is right now but not very constantly.

Sometimes when the mouse moves over the plus f.e. the „-“ comes out very briefly and at once returns in (which avoids it being clickable)

I believe it has to do with the (for me) very consistent problem that a mouseenter in a child element is interpretated as a mouseleave of its parent (which it shouldn’t!!)

My question is:

How has this to be done in a professional way?

For I am relative beginner and I don’t know better how to do it.

Thanks to you for hints and ideas!

Garavani

I am pretty desperate :-( since for days I am working on this problem, no way to fix this :-(((

This is my markUp:

Then I try to install two functions (one would be even better) to make either the first and the second div change their places or the first and the third (depending which div is clicked.

(The fourth element in the menu remains static)

I tried so much but this is all what I could achieve so far:

$(document).ready(function(){

});

I know that this is crap but it is the nearest I came and most of all it works only (badly yet) 2 or 3 times then the functions make each other crash. I tried so hard and have the doubt that the point is that the off() in the function do not work at all, so that there remain several functions attached after a while to the divs.

I urgently need help!! I am getting nuts :-(

Thanks for any hints about this!

Garavani

PS the additional class exchanges are needed for another hover effect so that this is additional

I have the following container of elements:

The elements in the menu are bound with the following events (among others, here: "…"):

In the "changePlace" function I try to do something with them (change their places/z-index inside #menu container) like:

The thing to do depends on which position (z-index) the clicked element relative to the others is,

so the function would have to check which element is clicked and return the index of it.

Unfortunately the position (index) changes after every click so the function has to check for it dynamically every time.

Jesus, so difficult to explain…:-((

Is it possible to understand what I mean?

What can be a solution?

I tried also with event.target.id but couldn’t get it work.

Someone help me?

Thanks a lot

Garavani

I have a tricky problem here and need your help!

I have done something like this:

       ...

which works as a switch for CSS stylesheets mobile device/regular monitor.

This works very satisfying and it inspires me to extend this function to also introduce different external script files. So that certain functions in the mobile device variant disappear or change compared to the bigger sized page.

I tried:

        ...

I know this is very naive ;-)

because perhaps once the scripts are loaded (parsed) they cannot be changed, can they?

Also something like this:

didn’t work well. Strange things happened in this variant :-) …

Did I explain myself?

Is there any solution to follow my idea in this point?

Or how else would this have to be done?

Thanks for help!

Garavani

is there a way to make something like this:

more simple, reasonable and better looking?

Thanks for ideas!

Garavani

I posted this question in another place but didn’t get any answers, so I will try again in a little more abstract way.

I am having trouble in understanding a principle thing.

Is it possible to animate (=move) a div that is relative - but so that the attached divs that lay in the flow of the page behind it change their position, too? 

I am having big troubles to make this come true properly.

To explain: no problem to put other divs INSIDE the animated div and make them so move parallel to the parent.

But I need them OUTSIDE the div but still want that it moves in the same way without extra selecting it and animating it, too.

Do I explain what I mean?

Thanks for help, ideas, demonstrations!!

Garavani

I am (as a beginner) stuck in a problem with a custom event I created (for the first time).

The situation is that I have a template dynamically loaded in my main page that in it contained a div #character.

At the time the template is inserted in the containing div (on the main page) #character (as part of the new inserted html) has to be invisible.

Then I wanted to create a custom event called "fullPageReady" that is triggered in a seperate function to tell the div #character to fade in (and other things, too). In one word to start a range of functionality previously „sleeping“.

In the template code I did:

<script type="text/javascript" language="JavaScript">

</script>

The function to start it (as I said after it is already inserted in the main html) is:

I am working with some mustache templates on my site and so have to do this document ready introduction:

…

Is there a way to write this shorter and more professional or would it make the mode less readable in the end?

Thanks for help

Garavani

I have this piece of code:

it is needed to fadeOut/In arrows if the user reaches (by several ways) the beginning or the end of a slider, so that reaching the first picture the backward arrow appears and other way around if he reaches the last one the forward arrow disappears. Naturally they have to reappear if the user moves from there on again.

I am sure there is a shorter more elegant way to do those kind of things.

Some ideas out there?

Thanks for any help

Garavani

is there someone how can help me? I am definitely stuck within this problem

I am quite used now (as beginner yet) to use e.data with my functions but now I want to go a step further as I have dynamic data to pass to a function.

I am working with Jquerys cookbook and there is the chapter „Passing Dynamic Data to Event Handlers“.

Yet, it seems I am too stupid to understand this :-(

I have in my case the following code (part of a simple (not for me;-) slider):

}

I helped myself here with a global variable changing on click either +1 or -1,

but it looks very unprofessional, I believe.

Instead I read that it would be done with trigger() and extra arguments, but as I said, too stupid…

Someone here how could help me?

Thanks a lot

Garavani

I have a little general question about to handle two animated pages which I’d like to combine.

For I am a relative beginner this time I’d like to hear some advice and ideas BEFORE I start programming what I have in mind.

If you’d have the patience to take a look at the 2 html in action (yet very unfinished, but as I said I would want to become clear on which basic way to succeed):

If you click on the first one the arrow in the right corner on the bottom I did a blind effect with Jquery UI (maybe this is not the final word also, maybe it could be done with a simpler overflow invisible div that contains all content).

After this „blind” fade effect I would like to let the second page appear moved also fromm down to up simultaneously.

I hope it’s clear what I attempt to do.

Click on the arrow bottom and the second pages content appears from below.

Yet could be that after a while the contents of each page will get more complicated and so I would avoid to be unflexible (and to put things in tiny divs each animated etc.).

First thing that came in mind to me was Iframes, but I read in many places that it is not particularly wise to do so.

Another vague (beginner) idea would be to insert the new html content after the effect via Jquery dynamically, i.e. if the effect is done (or while better) the first content has to cancelled the second appended via a .html operation.

Am I totally wrong here or which way would you go?

Would be a great help to know your opinions before starting a (for me) difficult scripting.

Thanks!!

Garavani

lately I discovered that some animation of mine ( that workes fine on most today browsers) does not so with the older 3.0.4 Safari I have on my old MacBook. (Yet it works fine with an even older Camino on it)

Here is the CSS:

I think I need some help with a little question.

In my code I use e.data for a window resize function that changes CSS of elements.

So I have:

it’s always me with those e.data syntax problems :-)

I am trying and searching in the web for weeks now, but I cannot find a solution which in my eyes got to be very very simple.

I currently use e.data in situations where I bind it like:

}

So far, so good. Always works fine.

But what if I wished to pass e.data in a situation as:

function example(){

...

   size_element(e);

...

}

or:

$(document).ready({zoom:2.4},size_element);

I mean generally situations where I do not have something like 'click' or 'resize' or whatever as part of the syntax.

This must be possible!

But how???

I mean in the second case (to explain myself better) I could always do something stupid as:

and it works! But come on…I know this isn’t the right way.

Please help me in this simple question that is crucial for many of my codes.

I cannot find anything about it!

Thank you in advance

Garavani

this refers to a recent post of mine which nobody wants to help me about:-(

So I reduce this a little.

Can someone tell me why this:

and in the html:

$('#arrowField').bind('mouseenter',{percent: 94, imageExtend: 6, duration: 950, ease: 'out', charLeft: 4, lettersLeft: 2, nameLeft: 3}, animateImage);

does not work?

I inserted an „alert“ into the function which worked so it means there could be only a problem inside the animateImage function.

Did I introduce a syntax error somewhere?

I tried to cancel different parts without any success at all 

I am desperated a little here

Thank you!

Garavani

can someone help me in simplifying the following piece of code.

I suggest there is some e.data stuff to do, but I don’t know if it is possible if there is changing variables, too, in it.

I am quite a beginner so I definitely need help with this :-(

Thank you very much!!!

Garavani

code:

this time I have a simple question to which, yet, I couldn’t find the right solution.

in my JS doc I found myself with a thing like this:

How is this to be done more clean and reasonable instead of repeating a thousand times .animate?

I tried to do something with e.data, yet I couldn’t get it to work because in my main page there is a place with a multiple binding like:

});

in which I didn’t succeed in doing like so:

$("#example").bind('click',{examplevar:1},exampleFunction);

which is necessary to do it with e.data

How can I combine them or is there another even more clean and short solution?

Thanks for help

Garavani

I have some problem integrating a mouse enter/leave (alter. hover) event in this function:

Neither works it this way:

I admit it is quite complex, yet, I do not quite understand why it is able to bind and keeo the click function on each title but not the hover events. (they seem to be fired only once and not properly)

Maybe it helps to see the current result to understand what I want under:

Here it should be the fold out menu on the bottom left of the page.

When the mouse goes over the appearing titles (after they completely folded out) the should hint at the click event by enlarging a little the titles („Gucci“, „Bulgari“ etc.)

Thank you for any ideas!

I am stuck here completely :-(

Garavani

I am aware that this maybe is not a jquery specific problem, yet, my code integrates jquey so I might as well ask it here.

I have the following code:

Basically I put  2 sub folders in my "images" folder named "reg" and "ita". In there are pictures which I wanted to change their resource in the divs by introducing a variable so that the paths would look like:

<div id="1"><img id="the_pic"   class="center fit" src="images/Memoir_"+style+"/Memoir_1.gif"></div>

and then I wanted to change this variable "style“ to tell him which sub folder to use instead of doing all this:

and then back.

I think the fault is in the syntax of the path or where to define the variable.

I tried 1000 things but didn’t get this work. :-(

How is this to be done properly.

And (if you like to help me again) how would this be made with toggle,

so that the subfolder changes back and on again on each click?

Thank you so much out there!

Garavani

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:

<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:

…

[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

does anyone has an idea how this obtrusive set of scripts:

could be bettered and made faster?

Thank you very much

Garavani

I (relative beginner query) have a quite complex situation I have to resolve and couldn’t come through it:

Thats the function:

What I tried here was:

1) in the first part (which works fine and is the code in regular character)

to create divs with a variable based id (to be animated elsewhere)

but :

2) I need to bind on each on this titles different click behaviors depending each on the id that it has.

For that (and for other reasons) I made the e.data function „workChoice“.

Yet, instead of giving to it a fixed data like „3“ for example (which will show work_3 besides other things always staying the same) I have to pass the data from the „title_x“ variable instead of a fixed value.

Now what I tried to code here (in bold character) always passes the value 4 to „selwork“ (selected work) giving it to all title divs behaviours.

How is this to be done correctly? Any ideas?

I need help with this

Thank you very much!

Garavani

is there anyone who might help me with making this statement:

simpler?

Thanks a lot!

Garavani

I have a simple (beginner) question.

I use this:

on my page and somewhere else I’d like to turn off the behavior (for all divs in #menu).

I tried:

$("#menu div").unbind()

$("#menu div").unbind('hoverIntent')

$("#menu div").off()

$("#menu div").off('hoverIntent')

By the way I definitely would like to preserve the hover instead of splitting up in mouseenter and mouseleave

and I read that with off() its possible to do so.

But neither I succeeded in doing the right syntax for on('hoverIntent').

Nothing works.

How is it to be done?

Thanks for your patience and kind help

Garavani

I am stuck here in a problem, that at first I thought would be easy to solve, but then it didn’t.

I have to add that I am a relative beginner.

In my page I created a fold out menu with the following items (titles of things shown on the page)

on document ready I have:

 $('#foldout .titles').first().delay(500).animate({opacity: 1,top: '25px'}, 950, 'easeOutBack');

and then

inside a special function:

animating the first of this titles, i.e. it moves down, getting visible and presenting the first (current) work title,

while the other three are suggested by a mouseover (hover) on a parent element.

Then by going on (presenting the next work) the visible title changes.

My problem now that on documentReady its easy to achieve that NOT the first title is part of the fold out suggestions with:

(its like an accordian moving out above the parent menu title)

but when the visible title changes attribute the new title presented would have to be excluded from the fold out so that everytime only the remaining titles would show on the hover.

I recognize that it was a little complicated to explain :-(

Hope though that someone understands what I mean and could lend me a hand.

I thought about using an array in a variable that could exlcude everytime another of its elements, or something like this, but I am not firm enough to write a proper code.

Thanks for help!!

Garavani