I am trying to show the element using the "blind" animation:
<div onclick="$('#animatable').show('blind', null, 1000);">Click me</div>
<div style="display: none;" id="animatable">Animated</div>
But it works only once. Element appears with the blind effect, and then it disappears completely, I do not see it even in Firebug DOM! Why doesn't it stay visible?
Some other show() animations ("explode"), work fine, but also "slide" makes the element disappear.
UPDATE:
It works fine in jsFiddle, but does not work in Firefox.
I am using jQuery UI 1.8.16 full minified file and jQuery v1.7.
I guess, I'll try a bare page from scratch, but still waiting for suggestions if someone has already experienced such a behavior and knows why this is happening.
This should work, here is working example:
http://jsfiddle.net/rogal111/Rk2rA/
Check version of jquery & ui.
I just found the problem.
One of the many Javascript plugins was using the code from
http://www.bennadel.com/blog/1624-Ask-Ben-Overriding-Core-jQuery-Methods.htm
var originalRemoveMethod = jQuery.fn.remove;
// Define overriding method.
jQuery.fn.remove = function(){
// Log the fact that we are calling our override.
console.log( "Override method" );
// Execute the original method.
originalRemoveMethod.apply( this, arguments );
}
The problem was that it does not return any value, and somehow this breaks jquery UI.
I added
return originalRemoveMethod.apply( this, arguments );
and now it seems working fine. I just hope, this will not break something else...
So the lesson for all: do not mess the remove() function.
Related
first of all I try to use proper "language" but I am not a programmer. That said...
I don't seem to be able to get jquery mobile to work properly.
When I try to change document.ready(function() { ... })
to
document.on('pagecreate', function(){ ... })
I do not get the same result; in fact I cannot even alert a simple message.
Furthermore I would like to use mousedown and mousedown events. The documentation of jquery mobile tells me that I could use vmousedown and vmouseup. Does not work either. Can someone enlighten me please. the jquery mobile.js is added lastly in my script structure of the dom.
Maybe relevant for others with a similar problem.
Linking to the jquery CDN instead of hosting the files myself solved my problem.
I load jQuery Mobile on my site when I am only on a mobile touchscreen device. When I do though. It messes up everything. For example, select menus don't work quite right, as well, the words "loading, loading, undefined" appear at the bottom of the page. I know I am missing something but do not know what.
Any ideas on what I could be missing?
Thanks
EDIT: Okay, So I took out all scripts that I am running except for jQuery and jQuery Mobile. I call jQuery first, then jQuery Mobile. It still breaks aspects of the site.
What it breaks:
- I cannot navigate to any other page via the navbar, if I click on a nav item, and look in the url, the correct url appears (with a # in it) like: /#/about-us/ Then, it just redirects to the home page and the page goes white
Select menus have weird results. It prints out whatever is in the select right beside it. And if you in landscape mode on the ipad and you click on the select, it sends you to the bottom of the page (weird).
it prints out 'loading' twice and 'undefined' once at the bottom of the page
All I have for scripts are jQuery and jQuery Mobile. I should also mention that I am using wordpress so it might have enqueued some other scripts (I have deregistered Wordpress' version of jquery and enqueued my own)
Anyone else experiencing these problems?
jQueryMobile replace your normal links with Ajax one, so every page can be loaded by the ajax, text on docs page:
(..) Ajax is used to load the contents of each page into the DOM as you navigate, and the DOM ready handler only executes for the first page. To execute code whenever a new page is loaded and created, you can bind to the pageinit event. This event is explained in detail at the bottom of this page.
If you want to disable single link to be loaded by the ajax you should write something like this:
<a href="/some_page" data-ajax="false" >link</a>
or do it globally:
$(document).bind("mobileinit", function() {
$.mobile.ajaxEnabled = false;
});
jm also does replacement on other elements so you should try using data-role attribute, for example:
<select id="test" data-role="none">
to disable replacing this element.
For those like me where
$.mobile.ajaxEnabled = false;
did not work and the whole page layout seems still broken:
For me this one works (- set it inline before loading the jquery mobile file):
<script>
// Preload configuration
$( document ).on( "mobileinit", function() {
$.mobile.autoInitializePage = false; // This one does the job
});
</script>
Furthermore if you want to disable jQuery mobile automatic link and form handling via ajax, set (as dvk3 said) ajaxEnabled to false and pushStateEnabled to false as recommended:
$.mobile.ajaxEnabled = false;
$.mobile.pushStateEnabled = false; // Recommended is false, when ajax is disabled
For further information see: http://api.jquerymobile.com/global-config/
I'm using v1.4.5
Same happened to me by mixing mobile with other frameworks. Fixed issue but getting custom build of jQuery.mobile. My case was that I needed swipe for touch devices only so used custom min file and nothing was broken after that.
It really depends if you need jQuery.mobile or you need just a certain functionality, Widgets, events? Use custom version that you can build yourself.
You can make and download yours here : http://jquerymobile.com/download-builder/
I hope it worked for you too guys!
I need to run some code on focus and blur events on elements that were injected into the DOM after page load. So I am using Zepto's on (Zepto's on link) to run the code but it doesn't work for me.
Here is my jsfiddle in which I am trying to make it work - http://jsfiddle.net/ashfame/zR2xL/
Your on declaration was a little off in the original JSFiddle. When you use the .live() "version" of .on() you select the document with Zepto (because, I believe, that's what the .live() function does behind the scenes) then apply the .on() method and pass it the parameters event, selector, and function. It looks something like this:
$(document).on(event, selector, function);
Check out this JSFiddle that I modified a bit from the one you posted in the comments.
The changes I made were:
rearrange the on function
commented out the jQuery test via console.log() to stop errors from being thrown
prevent the default of the click event on the anchor element
switched the document.write to a $('body').append()
Hope that helps!
The problem in your fiddle was that somehow fiddle screwed up the whole document write thing.
You were close though. You can't attach an event listener to a node that's not there which you tried with $(node).on().
However, from the linked documentation you are supposed to use it like so:
$(document).on("click", "selector", fn);
I've updated your fiddle to use Zepto instead of jQuery and also set it to run on domReady which makes the ready event in your code unnecessary.
http://jsfiddle.net/zR2xL/3/
I am using jquery ui sortable to sort TD's in a TR. In chrome this seems to be indenting the TDs to the right. From a similar question found on SO, I reckon this is because of chrome adding an extra TD which is not even visible under console, and is only being rendered.
How do make this work?
I have found this snippet that tries to force chrome to render again, but this does not seem to work.
var n = document.createTextNode(' ');
$('TD:eq(0)').parent().get(0).appendChild(n);
n.parentNode.removeChild(n);
The similar question found on SO says that he was able to solve the issue by calling a function .render() on his view item, I presume this is a custom function for a library the asker was using.
Any ideas on how to force refresh the DOM?
To those who are facing a similar issue, I found that hiding the parent element and showing it after a small delay(10ms works), keeps things working.
I added the following code to change the hash to the tab name:
$("#tabs > ul").tabs({
select: function(event, ui){
window.location.hash = ui.tab.hash;
}
} );
This works fine in FF3 but in IE7 it moves down the page (depending on the tab selected anywhere from somewhere near the top of the page all the way down to the very end of the page).
I tried changing it to:
$("#tabs > ul").tabs();
$("#tabs > ul").bind("tabsshow", function(event, ui) {
window.location = ui.tab.hash;
})
This leads to identical behavior in both IE7 and FF3, which moves the page down to the top of the selected tab.
I would like the tab to be changed, the hash to be updated, but the page not moved at all, which is how it works in FF3 in my first example, but not in IE7.
Thanks.
Notes: JQuery 1.3.1 / JQuery-UI 1.6rc6
If there's an element on the page that has the same id as what you're setting the hash to, for instance you're trying to set the browser hash to #cars and there's already a div#cars on the page, the browser will scroll you down to where that div is.
To my knowledge, there are 3 possible workarounds
1) Change the browser hash to something else such as #thecars.
2) Change your existing markup in some similar manner.
3) On some event, changing the id of your similarly named markup, then changing the browser hash, then rechanging the name of markup back to it's original value should also theoretically work. This is obviously a bad and slow workaround, just thought I'd mention it.
You could try having a "return false;" after you set the window location but I can't be sure.
Unfortunately, your problems won't end there. There are other issues with navigating back and forth across multiple browsers--nothing may change, page may reload, page state might be mangled, javascript may get reinitialized etc.
You may want to have a look at Tabs v2 which uses the History/Remote plugin though it has not been updated for jQuery 1.3+.
This demo is easier to understand. If you look at the javascript source, you'll notice the use of iframes to handle states.
There is also the History Event plugin and the jHistory plugin to achieve what you want.
Would like to hear back how things turns out and what solution you went with.
What Chris suggested worked for me, had no clue even a div could link via the #. So my solution is quite simple, in the show: event handler, I do the following, it's not perfect in that back button won't be in history, but that's another job for BBQ history plugin. All my divs simply have id="tab-cars", id="tab-trucks"... strip out the 'tab-' part and put it into the url hash.
var name = ui.panel.id.substr(4);
location.hash = '#'+name;