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);
}
});
Related
enter code here I have setup navigation links to smooth scroll to an anchor point on my page.
Unfortunately I always have to click twice on every link for the anchor to move.
I think the smooth scroll javascript I'm using is causing the problem. but I don't know anything about java script and I have just copy/pasted this code from somewhere.
I'd be appreciative if you could help me understand, which part of this code is causing the problem.
//Smooth Scroll for Page Anchor
$(document).ready(function(){
// Add smooth scrolling to all links
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
I'm playing around with jQueryUI Accordion for the first time and I'm trying to make simple expanding div, which switches it's header text and sliding to the bottom of the content, when expanded.
I have the default h3 header saying 'More' and I want it to change to 'Less', when the div is expanded and revert to 'More', when it is closed. Also, the header should slide down and stay below the content, when expanded.
I've been searching for 2 days with no luck.
Change text by #Irvin Dominin aka Edward
$(function() {
$( "#accordion" ).accordion({
header: 'h3',
collapsible: true,
active: false,
activate: function (event, ui) {
ui.newHeader.find(".accordion-header").text("Less")
ui.oldHeader.find(".accordion-header").text("More")
}
});
Slide Header by #vitaliy zadorozhnyy
var headers = $('#accordion h3');
headers.click(function () {
var panel = $(this).prev();
var isOpen = panel.is(':visible');
$(this).text(!isOpen ? 'Less' : 'More');
panel[isOpen ? 'slideUp' : 'slideDown']();
return false;
});
Now the problem is these two can't be used together. Any idea how to mix them?
You can use activate event to switch your accordion header text:
Triggered after a panel has been activated (after animation
completes). If the accordion was previously collapsed, ui.oldHeader
and ui.oldPanel will be empty jQuery objects. If the accordion is
collapsing, ui.newHeader and ui.newPanel will be empty jQuery objects.
Code:
$('#accordion').accordion({
activate: function (event, ui) {
ui.newHeader.find(".accordion-header").text("Less")
ui.oldHeader.find(".accordion-header").text("More")
}
});
Demo: http://jsfiddle.net/IrvinDominin/r93wn/
if you use accordion with one item and want to slide it when it is active then use collapsible option
In your case $('#accordion').accordion({collapsible:true});
but if u want to slide header down you can use another approach. I have made some sample on JsFiddle for you.
Hope it helps.
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
is it possible to disable single headers in jquery ui 1.9? I had a quation runing about this, while i was using 1.8 and there it wasnt possible. I fond a way, but its really hard coded. It opens the tab and if the user doesnt have permitions to it , the tab closes. So is there any better way now?
best regrads.
I found a way and i thought ill share it hopefully it will help some one else a lot. :)
$(function() {
var icons = {
header: "h3",
activeHeader: "ui-icon-circle-arrow-s"
};
$( "#prod_accordion" ).accordion({
active:<?php echo $db_obj->getValue('status') ? 'acc_'.$tab_status : 'acc_0'; ?>,
icons: icons,
autoHeight: false,
beforeActivate: function(event, ui) {
var newIndex = $(ui.newHeader).index('h3');
if (jQuery.inArray(newIndex , accordion_array) == -1) {
event.preventDefault();
}
}
});
});
the accrodion_array is an array with indexes like (1,2,3,4) and i check if the index of the clicked accordion lets say 5 is in the array. If not then perventDefault() and the accordion header wont open.
if u add ui.addClass('ui-state-disabled'); to the accordion headers that are not in the array the user will now what accordion he cant open. :)
I am using jQuery and Joomla. Sinca I need to use jQuery.noConlict() due to the use of other javascript libraries, I use jQuery instead of $
I have a set of tabs. I am using jQuery UI. I am using the fadein fadeout through opacity toggle, and the rotation (all working fine)
I want to change the file name of the img tag which is a child of the anchor tag in the tabs
tabs has typical structure (i.e. ul > li > a > img....</ul><div><the tab's content></div>)
(please, do not ask or suggest I change the image to be background image. I must keep structure this way)
With the code below, I am trying to add to the file name of the img, but it is not working. When the alert is triggered I continue to read the old file name, and of course, I see the old image
jQuery( "#tabs" ).bind('tabsshow', function(event, ui){
var image = jQuery(ui.tab).children();
image.attr("src").replace(".png","-active.png");
var liContent = image.attr("src");
alert(liContent);
}
);
It should be like this:
jQuery( "#tabs" ).bind('tabsshow', function(event, ui){
var image = jQuery(ui.tab).children();
image.attr("src",image.attr("src").replace(".png","-active.png"));
var liContent = image.attr("src");
alert(liContent);
});
Or Like this:
jQuery( "#tabs" ).bind('tabsshow', function(event, ui){
var image = jQuery(ui.tab).children();
var liContent = image.attr("src").replace(".png","-active.png");
alert(liContent);
});