jQuery .show() .hide() animation problems - javascript

On a call to show() or hide() the animation always plays twice for me. It is much easier to understand here.
A second related problem is that the animation for hide will play even if the object is already hidden (choose the first option from the drop-down and then choose the second option).

I think the problem is that you've got that setup script inside the dialog <div>. Move that code down to the script at the bottom of the page and it should work better.
There's still the problem that it calls "hide" unnecessarily when the target box is already hidden, but that should be pretty easy to fix.

Well, I don't know if I save it correctly on JS Bin but here it goes:
http://jsbin.com/umira4/19/edit
I hope this is what you were looking for :)

Take a look at .toggle( showOrHide ), http://api.jquery.com/toggle/
This will handle it for you automatically.

As Aaron said, there are some functions in jQuery that will take care of toggling the display of the inputs for you automatically. I think the one you are looking for is slideToggle().
Not exactly sure what the issue is, but when you clean up your JS into a separate file and use the slideToggle method it seems to work fine.
Here is what worked for me: http://jsbin.com/umira4/20/edit

Related

How to trigger RaphaelJS Element.click() with jquery?

I am having problems with triggering RaphaelJS's Element.click() with jquery. What I am trying to do is simulating with jquery that the Element.node was clicked and what I am expecting is that Raphael will delegate the click treatment to the previously defined Element.click() method.
In some circumstances I will need to trigger Raphael's Elements event handlers with code somehow using my Element instance.
In order to simplify my problem, I created a plnkr with just the code that does not work for me. So here is the example:
http://plnkr.co/edit/AuSuq1RG6cWpqH2GEzcN?p=preview
What I expect of the code is that after $(r.getById("square").node).trigger("click"); (I have also tried using $(r.getById("square").node).click()) is executed, myRectangle.click(function() {...} will be called and the heading on the result page will be changed to "The rectangle was clicked!". As you can see this does not happen. However clicking on the shape is working fine.
Does anyone know what do I miss in this small piece of code? How to make such manipulation work?
Thanks!
After I worked around my initial problem so I can finish what I did start, now I found a helpful kinda-solution to the problem that might help others that come across my topic. What is written in the topic works and worth considering to be adopted as solution. It do look a bit hacky, but to be honest many things in JS do so. So here is the link, hope it can be helpful to someone someday :) - Triggering Raphael events externally

The draggable effect do not show the second time

I am using the jQuery UI to get a UI effect something like drag element to another a element and replace 'width','height','position' width each other.
See this fiddle.
I think things just became really weird to me:
When first drag an element,it works just fine, but when the second time I am dragging the same element, the things just happened wired: draggable effect seems no long work,but when drop all the code in the callback function will still run.
Try it yourself,and you will find out what I am talking about.
I have debugged this all this night, help me please please! I really really do not what's wrong with the code!
run though all the jquery ui APi doc, now simply use "helper : 'clone'" in the draggable method will solve all the problem.see the fiddle

Roll over link == change class. Roll out of div == change class back. Not working. Help

That's my issue in its simplest terms. Let me try to clear it up.
I have a div, in this case called "testdiv", which has a class name of "menulink" attached to it. There is a link inside of the div. When I roll over the link, I want the div class to change to "menulinkHover". When I roll out of the div, however, I want the class to revert back to "menulink". To do this, I am using getElementByID. Rolling over the link works perfectly, but as soon as I roll out of the link, not the div, the class reverts back.
Here is a fiddle with what I have so far: http://jsfiddle.net/nathanbunn/KJMsf/
I'm working on this with jQuery, using .removeClass and .addClass in the same manner, but I fear I will get the same issue. I've missed something, I know I've missed something, but what is it? For an idea of what I'm looking for, have a look on the Harvey Nichols homepage. I know they use Prototype for their framework of choice.
Can this be done with the script I have? Am I right and I have indeed missed something? Can it work better in jQuery? Can it be done in pure CSS, even? Please help. I'm at a complete loss.
Combine CSS with jquery mouse event and fadein/out, and you should get what you want. An example is : here
I set it up to use JQuery as I always find it better than pure javascript. I got it to work by setting the link to have a mouseenter that adds a class to the div and then the div itself has a mouseleave that removes the class. It now works fine for me. Here's the link:
http://jsfiddle.net/KJMsf/6/

jQuery hide/show method behaviour in IE7

I'm having a problem with the jQuery hide() and show() methods. Below is a snippet from a project I'm currently working on. This code comes from a multi-page form which is loaded in it's entirety, then jQuery is used to show and hide the various pages. I should metion that this technique works in every broswer except IE7.
//Hide all pages of the form
$("#client_form div[id*='client']").hide();
//Show just the first page
$("#client_form div#client1").show();
The issue is not that the hide() fails but that the subsequent show() doesn't bring the desired page back. I've tried using different methods like slideUp() and slideDown(), I've tried doing css("display","none"), various other ways to perform the hide/show.
I've also tried chaining methods, doing callbacks from hide to then show. Nothing seems to work properly in IE7.
Any thoughts oh mighty Stack Overflow hive mind?
Many thanks,
Neil
Have you tried just using the id(s) of the DIVs? Since they are unique to the page, you shouldn't need to make them relative to the form.
$("div[id*='client']").hide().filter('#client1').show();
Note the chaining so it doesn't need to retraverse the DOM, but simply filters the elements that it has already found.
What about just:
$("#client1").show();
Not sure that's it, but give it a shot? IDs should be unique so no need for the hierarchical selectors.
have you tried adding a class to all the divs you are trying to hide, and hiding that class.
Also change your show selector to use $("#client1") instead of that huge selector.
Have you done a simple test to make sure that your second jQuery is returning the correct object(s), if it's returning anything at all? eg:
alert($("#client_form div#client1").length);
or
alert($("#client_form div#client1").get(0).innerHTML);
or
alert($("#client_form div#client1").eq(0).text());
etc?
This would be the first place I would start - you'd then know whether you had a problem with the show() method, or the behaviour of the jQuery selector.
You might also try running your final HTML markup through a validator to see if there are any errors. IE7 is more strict than most other browsers.

Div not properly hiding in IE

I've got few divs on my website - on the load I want some of them to be hidden, some shown. I am hiding the ones I don't want like this:
$(".divToHide").hide();
It works well in Chrome, Firefox, IE8 an Opera... It doesn't in IE6 (I haven't tested on previous version yet...) - when I load the page all the divs are hidden properly. When I click a link that makes one of them visible it appears correctly. The problems shows when I click on a different link that's supposed to hide the first div and show another. The text of the first div is hidden, but the image stays and obstructs the newly shown div. I'm pretty sure it's a bug - when I zoom in or out of the page the divs that were supposed to be hidden disappear suddenly - they're only visible when I load the page.
Is there a way around it?
EDIT: I'm using jQuery v1.3.2
EDIT: Unfortunately the solution of using addClass to add css class that states display: none doesn't really work - it seemed like it did at first, but the problem is still there.
UPDATE: The js file I wrote can be found here, while the html here. The problem I have is that when you go from one portfolio to the other, the image of the first one stays there obstructing the next, even though it should be hidden (text underneath changes correctly). Wrong disappears when you try to zoom in/out of the page.
I used to hide all portfolios using $("#divId").hide(), but as was pointed out below, I now use $(".classToHide").hide().
UPDATE: The problem is solved on IE8 - I forgot to include the standards mode declaration... However, on IE6 it's still the problem.
You're hiding multiple div's by using an ID selector?
Try giving those div's a class "divToHide" and then use:
$(".divToHide").hide();
Maybe IE8 handles duplicate id's in another way than those other browsers..
Just a thought: you're not using an old (pre-IE8) version of jQuery, are you?
Edit: No, grycz is using the current version.
Edit: simplified to use toggleClass()
You could try doing it manually, like toggling a css class called "hidden." It might look something like this:
function myToggle(element_id)
{
mydiv = $('#' + element_id);
mydiv.toggleClass("hidden");;
}
And your css file would have:
.hidden
{
display:none;
}
I haven't tested this, but this is the kind of workaround I imagine you'd want to think about if this is, indeed, a bug in jQuery/IE8.
Are you sure that hide() function call is even getting called on the page load? Try putting an alert('hi') right before that function call, and see if that happens in IE8.
try
$("#divToHide").css('display:none');

Categories