Skip to main content

Posts

Showing posts with the label jquery-ui

Jquery UI slider how to make a box follow the handler?

I am trying to create a div that should follow the handler as it is seen here: http://m1.dk/Priser/#tab:#calc,#abb

jQuery Plugins vs UI vs some alternative

I've been building a web app using jQuery as much as possible. Every time I need to add some new feature, I usually search for a jQuery plugin that does what I need, then I integrated it into my web app. Of course after a while this application becomes very cluttered with all these "random" plugins from different authors, each one having different coding style, naming convention, etc. I would really prefer to use one uniform UI library or framework. I am looking at jQuery UI, but frankly I am not impressed. Although jQuery Tools ( http://flowplayer.org/tools/download.html ) looks kind of nice. Does anyone have any experience with any of these? Do you have any other suggestions? Not just regarding what UI frameworks to use, but your thoughts regarding dealing with cluttering web applications with different UI plugins in general. Thanks Source: Tips4all

div not scrolling properly with slimScroll plugin

I am using the slimScroll plugin for jQuery by Piotr Rochala Which is a great plugin for nice scrollbars on most browsers but I am stuck because I am using it for a chat box and whenever the user appends new text to the boxit does scroll using the .scrollTop() method however the plugin's scrollbar doesnt scroll with it and when the user wants to look though the chat history it will start scrolling from near the top. I have made a quick demo of my situation http://jsfiddle.net/DY9CT/2/ Does anyone know how to solve this problem?

How to get even on tab selection, and get the currently instead of previously selected tab?

I'm using this snippet to bind on select event: $("#myTabControl").tabs({ select: function(event, ui){ var selectedTabName = $("#myTabControl").find(".ui-tabs-selected").find("span").text(); // Do stuff with the selected tab name. } ... }); The problem is ... I'm getting the name of the tab that was previously selected, not the one that is currently being selected. Any advice on how to get the latter? Note - this question is either very similar or a dup ... but I'm not sure it is phrased well enough (I'm not even sure if it's a complete dup or not).

Functions in Jquery [closed]

I have got many dropdowns in my site and i want to make a reusable function with jquery so i can save a lot of code just by a single function. Can any one help me out in this regard... For an example <div id="clickMe"> <div id="showMe"> <div>I am dropdown item</div> </div> </div> right now i am using it like this way... $(document).ready(function() { $("#clickMe").click(function(e) { e.preventDefault(); $("#showMe").toggle(); $("#clickMe").toggleClass("menu-open"); }); $("#showMe").mouseup(function() { return false }); $(document).mouseup(function(e) { if($(e.target).parent("#clickMe").length==0) { $("#clickMe").removeClass("menu-open"); $("#showMe").hide(); } }); }); but now i want to make it more reusable... Thanks in advance..

jQuery Sortable UI Syntax Issue

Im not quite sure what to search for to sort out this problem. I am getting syntax error with the following code because i have 2 (no idea what to call them) in the .sortable options. Would you be able to tell me what i have done wrong with this code? Im using a placeholder and also a connectWith from this page http://jqueryui.com/demos/sortable/#portlets and there doesnt seem to be any examples showing how to write both of them at the same time. The syntax error is not there when i comment out placeholder: "placeholder-highlighting" or connectWith: ".sortable-content" My code is below: $(function() { $( ".sortable-content" ).sortable({ placeholder: "placeholder-highlighting" connectWith: ".sortable-content" }); $( ".sortable" ).disableSelection(); }); Bonus points for telling me what they are called!

How to execute Jquery-code in a dialog which received its content via $.get

Let's say the following code exists in template_A popping up a dialog which displays content from template_B. The html is presented fine in the dialog but unfortunately any javascript included in template_B does not run. Jquery & Jquery-ui are included in template_A. template_B has no javascript-includes as it is represented by a div belonging to template_A. JS in template_A : var win = $(document.createElement('div')); $.get(url, function (html) { win.html(html); win.dialog("open"); }); template_B : <div id="content"> <script type="text/javascript"> $(function () { // this never executes, // js-debugging won't enter this part... }); </script> </div>

jQueryUi tabs loaded dynamically in jQueryUi dialog don&#39;t work

I am having a Ruby and Rails application. I am loading a form using Ajax. The form is an existing rails view. The form in turn contains jQueryUi tabs. Unfortunately the tabs are not shown when the form is loaded in the jQuery dialog box. Here is the code for the dialogbox $('#create_candidate').click( function(e) { var url = $(this).attr('href').replace('?','.js?'); var new_candidate_dlg = $('<div id="new_candidate_dlg">Loading form ...</div>'); new_candidate_dlg.load(url); new_candidate_dlg.dialog({ autoOpen:false, width: 'auto', height: 'auto', modal: true, close: function() { $('new_candidate_dlg').remove(); }, open: function() { $('#tabs').tabs(); } }); new_candidate_dlg.dialog('open'); e.preventDefault(); }); Strangely, If I change the code like following, the tabs do appear bu

How to activate setInterval() incase a text control has the focus

Actually I have an update enquery into this point . I have smth like that : $(document).ready(function() { setInterval(doSmth, 10000); function doSmth() { var result = document.getElementById("fooText").value; if (result != "") { doSmthElse(result); } }); } } }); I need to activate the interval ,that is fired each 10 seconds, in case only a text control has the focus else do nothing !!

Mysterious &#39;function&#39; being attached to array

I have the following code: // button sets var sets = ['.diamond-colour','.diamond-cut','.diamond-clarity','.diamond-certificate']; // for each set for (set in sets){ console.log('Set: '+set); console.log(sets[set]); } The console log shows: Set: 0 .diamond-colour Set: 1 .diamond-cut Set: 2 .diamond-clarity Set: 3 .diamond-certificate Set: findIndex function (value){ var ctr = ""; for (var i=0; i < this.length; i++) { if (this[i] == value) { return i; } } return ctr; } It appears to be a new array element with the key of findIndex and a value being that function. Would anyone have any idea what this is and why it's appearing?