I couldn't find what I'm doing wrong here...
I'm trying to apply some effect on the selected <li> of the navigation, I'm getting the index of it but I can't apply anything on it :
$("#tabs").bind('tabsselect', function(event, ui) {
var choosen = ui.index;
console.log(choosen);
$('#tabs ul').find('li:eq(choosen)').toggleClass('selectedone');
});
at a guess it looks like you are sending the string choosen to the find function rather than the value of choosen - so I would say you need to try instead
$('#tabs ul').find('li:eq(' + choosen + ')').toggleClass('selectedone');
Related
I find it a bit weird that the jQuery UI tabs don't have a built-in convenience method for making the tabs bookmarkable (change the URL hash). The following snippet kinda works for me
$("#tabs").tabs({
"activate": function(event, ui) {
window.location.hash = ui.newTab.context.hash;
}
});
The problem is, when the hash is appended to the URL, the page jumps to the corresponding anchor on the page. How can I prevent that from happening? All I want is for the URL address to change showing the currently selected tab, but not move the page vertically.
Update: Just to be clear, I am not wedded to my code above. I am just interested in being able to change the URL address bar with the selected tab's id so the user can bookmark or link the tab.
Replacing window.location.hash (which refreshes the page) with HTML5 history (which manipulates the URL address bar and the browser history stack without refreshing the page) did the trick for me. The following code worked for me
$("#tabs").tabs({
"activate": function(event, ui) {
var url = window.location;
window.history.pushState({
"html": "",
"pageTitle": title,
}, "", url.href.replace(url.hash, "") + ui.newTab.context.hash);
}
});
You could just store your current vertical scrolling distance to the page's top and reapply it afterwards, like this:
$("#tabs").tabs({
"activate": function(event, ui) {'use strict';
var scrollTop;
scrollTop = $(document).scrollTop();
window.location.hash = ui.newTab.context.hash;
$(document).scrollTop(scrollTop);
}
});
Currently I am using a Jquery ui autocomplete, and after someone selects an option from a Jquery ui autocomplete, I am removing the focus from the textbox.
I would like to add the following functionality -
When someone clicks into the textbox again, I would like to leave the option that was previously selected in the text box, but highlight it (as if the text was double clicked), and redisplay all the choices.
How can this be done?
CURRENT CODE -
$(function () {
var availableItems = ['item1', 'item2', 'item3'];
$("#myTextBox").autocomplete({
source: availableItems,
minLength: 0,
select: function(event, ui) {
$('#myTextBox').blur();
}
}).focus(function () {
$(this).autocomplete("search");
}); ;
});
Did you try to put
$(this).select();
in the focus function()?
Also try
$(this).autocomplete("search", "");
to enhance an empty search
I need some help in integrating a loading progress bar of JqueryUI to loading of data from a Observable array of KO. I have created some JsFiddles
fiddle for KnockOut : http://jsfiddle.net/neodescorpio/HksCA/
fiddle for JqueryUI Progress bar : http://jsfiddle.net/neodescorpio/NAs3V/
I need to combine both of these so that on loading of knock out a progress bar with percentage is shown and disappears after data is loaded 100%. If any other progressbar is used im okay with it. i just want a progress to be shown.
You should make a custom binding to manipulate the jQuery progress bar from knockout bindings. For example something like that (very contrived example):
ko.bindingHandlers.progress = {
init: function(element, valueAccessor) {
$(element).progressbar({
value: 0
});
},
update: function(element, valueAccessor) {
var val = ko.utils.unwrapObservable(valueAccessor());
$(element).progressbar("value", parseFloat(val));
}
};
Now you can create a progress bar from a div and command it through an observable value (which should return a number, or a string representing a number, ranging from 1 to 100), by using the progress binding - e.g.:
<div data-bind="progress: percentComplete"></div>
I update your fiddle to show an example: http://jsfiddle.net/HksCA/2/
I have created a dynamic listview with a link with id="a".
<ul id="accpmenu" data-role="listview" >
</ul>
$("#accpmenu").append('<li>'+ this.textContent +' </li>');
Now i want to identify the index of the element that I have clicked from this listview.
$("#a").live("click",function(e)
{
//What should i write here to get the selected index?.
}
I want the index number based on this I need to load the dynamic XML.
Please help me in resolving this.
Thanks
Shyam
$('#accpmenu').on('click', ' > li', function () {
var selected_index = $(this).index();
});
Here is a demo: http://jsfiddle.net/w2JZU/
This will bind an event handler to the list-items in the #accpmenu list for the click event that finds the index of the clicked list-item (compared to other list-item elements).
On a side-note you have what appears to be some invalid HTML in your code:
$("#accpmenu").append('<li>'+ this.textContent +' </li>');
Should change to (notice the removed double-quote after the id attribute):
$("#accpmenu").append('<li>'+ this.textContent +' </li>');
My example above added the click event handler to the li elements since it is easy to ascertain the index of the clicked element but you can also bind to links in the list:
$('#accpmenu').on('click', 'a', function () {
//this gets the index by finding the first parent list-item element and getting it's index compared do its siblings
var selected_index = $(this).parents('li').eq(0).index();
});
Note that .on() is new in jQuery 1.7 and in the cases above replaces .delegate() (from earlier versions).
Here are some docs for ya to help explain the above examples:
.on(): http://api.jquery.com/on
.index(): http://api.jquery.com/index
.parents(): http://api.jquery.com/parents
I'm using jqueryui combobox example at http://jqueryui.com/demos/autocomplete/combobox.html
I added the script seen below to catch the selected value of combobox:
<div id="selectedOpt">
</div>
<script>
$(document).ready(function() {
$("#combobox").change(function() {
var retval = $(this).val();
$("#selectedOpt").html("retval=" + retval);
});
});
</script>
However, it does not work as expected:
the div selectedOpt does not show selected value of combobox each time
the change event occurs
If "show underlying effect" is selected (pls try at url above), a standard dropdown list
appear. When trying to change value of
that dropdown list, then the div
selectedOpt is able to show value
correctly.
The goal is to have div selectedOpt display the selected option of the combobox.
Please advise and please explain why (1) does not work while (2) works.
PS: all neccessary js, css are correctly included.
Thanks for your kind attention.
SOLUTION FOUND:
http://robertmarkbramprogrammer.blogspot.com/2010/09/event-handling-with-jquery-autocomplete.html
Please change your script to match the code below:
<script>
function test()
{
var retval = $("[id *=dropdown] :selected").val();
$("#selectedOpt").html("retval=" + retval);
}
</script>
And call this script from the server side like this:
dropdown.Attributes.Add("onchange","javascript: return test();")
To show label or value of combobox in your div you have to include your function as an option. Something like this:
$( ".selector" ).autocomplete({
change: function(event, ui) {
$("#selectedOpt").html("retval=" + ui.item.value);
}
});
Use ui.item.label if you want a label instead.