The draggable effect do not show the second time - javascript

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

Related

.scrollTop(0) not working for getting a div to scroll to the top

I have a feeling what ever gave me problems that I tried to find a solution in this question - Can't trigger a jquery function with scroll on a particular div - might be responsible for scroll related issues here.
Short version: Can't get this, or anything similar, to work
$("#Container3").scrollTop(0);
Nothing happens really, no error in the console, no wierd behaviour, just seems to ignore the scrollTop(0) request.
Long version: I'm sorry but posting a code snippet isn't feasible as it's a complex app-like interface but I'll try to explain the issue to the best of my abilities:
Mobile responsive website that loads different interfaces depending on screen real-estate.
Smallest interface composed of 3 parts - navigation at the top, search at the bottom and content in the middle.
Content is mostly loaded during use and not at page load.
At the push of a button that re-loads the contents of a particular div I also need to scroll that div to the top for usability purposes.
While it doesn't seem to influence my problem (removing it doesn't solve the issue) I should disclose that I'm using hammer.js to simulate touch events as it might influence the solution.
The load is done outside the viewport so animations aren't needed but I'll take them as long as they get this to work.
This is what my jquery request looks like
$(document).on("click",".NavRowButton",function(event){
$("#Container3").scrollTop(0);
var $targetButtonId=$(event.target).attr("id");
$("#Content").load("/load/login/"+$targetButtonId+".php");
$("#DisplayContentName").html("<span class='NavColSpan'>"+$targetButtonId+"</span>");
$("#Container3").find(".WindowBorder").css("top","0");
});
#Container3 has the scroll bar and is the immediate parent of #Content.
This is a function I'm still building and is the solution for the problem I had before and also what I'm using now to help debugging this one:
document.addEventListener('scroll',function(event){
if(event.target.className==='Container'){
var $currentScroll=$(event.target).scrollTop();
console.log($currentScroll);
var $targetId=$(event.target).attr("id");
console.log($targetId);
}
},true);
Thanks in advance.
Edit: I just noticed that if I put a $(event.target).scrollTop(0); at the end of the scroll distance debugging function it actually resets the scroll so it seems that as long as the div is the event.target it works while from the outside as during the click function I might not selecting it appropriately.
Edit2: I just learned I can cache event.targets into variables and with a .get() inside the click function I'm sure I'm selecting the right element so it just leaves how the scrollTop(0) method works.
They now look like this(also had to add a condition to limit load events):
global variable:
$DivTestVar="";
click:
$(document).on("click",".NavRowButton",function(event){
var $targetButtonId=event.target.id;
if($targetButtonId != $("#DisplayContentName").html()){
$($DivTestVar).scrollTop(0);
console.log($($DivTestVar).get());
$("#Content").load("/load/login/"+$targetButtonId+".php");
$("#DisplayContentName").html($targetButtonId);
$("#Container3").find(".WindowBorder").css("top","0");
};
});
scroll debugging:
document.addEventListener('scroll',function(event){
if(event.target.className==='Container'){
$DivTestVar=event.target;
var $currentScroll=$($DivTestVar).scrollTop();
console.log($currentScroll);
var $targetId=event.target.id;
console.log($targetId);
}
},true);
If I click before scrolling the console.log($($DivTestVar).get()); returns empty but if at the first scroll it starts returning the correct DOM element. The scrollTop(0) is ignored anyway.
Edit3: I just want to leave a small update. I have since given up on the method I was trying to use here for something with a similar effect but not as user friendly as what I was trying to achieve. As such I no longer care about this personally but if you're reading this and have a similar problem I have come across this issue a couple more times to a smaller effect and I now think it's related to position:fixed; elements and how scrollTop() deals with that but I don't have the time to delve into it more so good luck and godspeed.
Did you try the pure JS version ?
document.getElementById('Container').scrollTop = 0
You have two possibilities, as far as I know.
1-Scroll the whole page until it reached the top of your #Content div position with jQuery.
2-Your #Content is inside a div with scroll, which scrollTop(0) will work for that (example: http://jsfiddle.net/zkp07abu/).

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

console.trace or stack trace to pinpiont the source of a bug in javascript?

I've used some complex javascript (jQuery) to create an editor of sorts where users can drag, drop and resize different divs. The problem is that sometimes, for seemingly no reason, divs that contain text suddenly get "frozen" or "stuck" on the containing div and cannot be dragged around, despite still maintaining a class list that includes ui-draggable, right after I mention:
$this.draggable( "option", "disabled", false );
So technically there's no reason why the dragging should stop. I used Ctrl+Shift+K to use the web console of firebug but when I drag things around that doesn't trigger anything on the console, and the fact that I can't drag one particular around also doesn't show anything up. I've tried profiling but these things just tell how much time is spent in a certain script. How can I possibly figure out why an element's drag just gets turned off and cannot be turned on again? I can't put breakpoints because I don't know where in the code something's going wrong. It almost seems arbitrary. Is there any way to to simply see what's happening on the stack in realtime?
Edit
In Firebug we can see an entire list of properties for an object, much more than what fits in this little screenshot below. Does anyone have any idea which object properties I should concerned with, that pertain to an issue like mine? I'm really lost on how to diagnose the problem.
#Allendar - too many bindings was indeed the issue. I followed up with this question: Am I binding events over and over again in this jQuery code? and with the help of Visual Event, I got rid of bindings that I was doing over and over again, and then it worked fine.

jQuery .show() .hide() animation problems

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

jQuery event handlers not firing in IE

I have a list of items on a page with a set of controls to MoveUp, MoveDown and Delete.
The controls sit at the top of list hidden by default. As you mouseover an item row, I select the controls with jquery
//doc ready function:
..
var tools = $('#tools');
$('#moveup').click(MoveUp);
$('#movedn').click(MoveDn);
$('#delete').click(Delete);
..
$('li.item').mouseover(function(){
$(this).prepend(tools);
});
This works great in Firefox .. the tools move into the current row, and the click events call the ajax functions. However, in IE6 and IE7 .. no click occurs. I tried unbinding on mouseout and rebinding on each mouseover .. to no avail.
I also looked into various reasons outside of javascript (e.g. transparent png conflicts, z-index, position:absolute) .. also no solution found.
I eventually needed to add a tools row to each item and show/hide on mouse over/out. Works just as well -- the only downer is that I have much more 'tools' markup on my page.
Does anyone know why IE ignores/drops/kills the mouse events once the objects are moved (using prepend)? And why rebinding the event afterwards also has no effect? Kept me annoyed for almost 2 hours before I gave up.
IE will lose events depending on how you are adding things to the DOM.
var ele = $("#itemtocopy");
$("#someotheritem").append( ele ); // Will not work and will lose events
$("#someotheritem").append( ele.clone(true) );
I would also recommend using .live() on the click events to simplify your code a little. Mouseover/out is not supported by live yet. http://docs.jquery.com/Events/live
I just spent the whole day troubleshooting events not triggering on items appended to the DOM, (IE7, jQuery 1.4.1) and it wasn't because I needed to use live() (though, good to know, Chad), nor was it because I needed to clone the items.
It was because I was selecting anchor tags that had a "#" in them like so:
var myitem = $('a[href=#top]');
My solution was to use the "Attribute Contains Selector" like so:
var myitem = $('a[href*=top]');
Fortunately I have enough control over everything that it won't likely break in the future. This isn't technically related to appended objects, but hopefully it saves someone some time.
i had a similar problem. trying to use .ready to load a div on the initial page load.
works well in FF , but not ie7.
i have found a hack that seems to get around this.
I have load call a callback, divLoaded().
In divLoaded i check the $('#targetdiv').innerText.length < 50 or whatever you think will indicate that it didnt load. If I detect that case, i simply call the function taht loads that div again.
Oddly enough, i also add a '.' to the innerText before i recall the ajax function. It seems taht sometimes we go through 3 or 4 loops before the ajax load finally takes.
This leads me to think that document.ready works pretty flawlessly in IE7, which seems to dispel a bit of a myth that it is unreliable. What really 'seems' to be happening is that .load is a little bit flakey and doesnt work well when the page is just loaded.
I am still a bit green w/ all the jQuery stuff, so take this w/ a grain of salt. Interested to hear anyone's take on my little hypothesis.
cheers
greg

Categories