i use jquery + jquerui in modx and the accordion. I wan't to have a horizontal menu on the top where I can jump (scroll) to the section (which opens). How would I achieve this.
Right now my js looks like this:
/ Accordion
$("#accordion").children("div").each( function() {
var a = $(this).find("a");
var ref = $(a).attr("href");
$(a).attr("href", "#");
$(this).find("div").load(ref);
});
$("#accordion").ajaxStop(function() {
$(this).accordion({
header: "h2",
active: true,
collapsible: true,
clearStyle: true,
navigation: true
});
});
EDIT: my accordion gets build with wayfinder:
[[Wayfinder? &startId=`6` &outerTpl=`outerTpl` &rowTpl=`rowTpl`]]
rowTpl:
<div>
<h2>[[+wf.title]]</h2>
<div>
<!-- placeholder for content -->
</div>
</div>
outerTpl:
<div id="accordion">[[+wf.wrapper]]</div>
The topmenu (horizontal) gets called like this:
[[Wayfinder? &startId=`6` &outerTpl=`QouterTpl` &rowTpl=`QrowTpl`]]
QrowTpl:
<li[[+wf.id]][[+wf.classes]]><a href="[[+wf.link]]" title="[[+wf.title]]" [[+wf.attributes]]>[[+wf.linktext]]</a>[[+wf.wrapper]]</li>
QouterTpl
<ul class="arrowunderline">[[+wf.wrapper]]</ul>
Thanks for help
You can use the activate method to programmatically open an accordion panel.
See this fiddle for an example.
NB. activate method is deprecated since jquery ui 1.9 and removed since 1.10. More info and alternative can be found here.
use this on .ready function
$("#accordion").accordion('option', 'active' , 3);
3 = the number of specific section in menu you want it active
Related
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.
I'm using the jQuery accordion, but the first accordion tab is, by default, already expanded on page load. I tried adding the aria-selected="false" to the inline html, and I tried changing/removing this from line 6345 in jquery-ui.js, but the first tab is still expanded:
// make sure at least one header is in the tab order
if ( !this.active.length ) {
this.headers.eq( 0 ).attr( "tabIndex", 0 );
} else {
this.active.attr({
"aria-selected": "true",
tabIndex: 0
})
.next()
.attr({
"aria-expanded": "true",
"aria-hidden": "false"
});
}
Any pointers?
EDIT: new fiddle using the answer below: http://jsfiddle.net/pfeff/WNdRe/1/
Accordion jQuery-ui is working with the tabs visibility by changing CSS, but not class of content . Place this in code just after accordion initialization:
$("#accordion div.ui-accordion-content").css({"display": "none"});// hide content block
UPD:
$(...).accordion({ collapsible: true, active: false });
UPD 2:
The best way to change original behavior of the original ui element -- create your own plugin or widget :)
http://jsfiddle.net/R8J5p/1/
Now you can use it like $(...).myAccordion();
I am using twitter bootstrap with tabs. I have multiple tabs and charts inside each tab. Upon browser resize, charts that are not on the current active tab do not get resized. Infact, it looks kind of funny with a thin bar. The current active tab works fine. Has anyone seen this issue and are there any workarounds ?
Here is a working example:
http://codepen.io/colinsteinmann/pen/BlGfE
Basically the .reflow() function is called on each chart when a tab is clicked. That way the chart gets redrawn based on the new dimensions which are applied to the container when it becomes visible.
This is the most important snippet of code:
// fix dimensions of chart that was in a hidden element
jQuery(document).on( 'shown.bs.tab', 'a[data-toggle="tab"]', function (e) { // on tab selection event
jQuery( ".contains-chart" ).each(function() { // target each element with the .contains-chart class
var chart = jQuery(this).highcharts(); // target the chart itself
chart.reflow() // reflow that chart
});
})
This is my fix for this (using jQuery):
$("[data-highcharts-chart]").each(function () {
var highChart = Highcharts.charts[$(this).data('highchartsChart')];
var highChartCont = $(highChart.container).parent();
highChart.setSize(highChartCont.width(), highChartCont.height());
highChart.hasUserSize = undefined;
});
Call this function whenever the chart gains focus to make sure it is resized properly.
I had a similar issue and I found that the best thing was not to load the chart until the tab was shown. So in the tab shown event I was quickly loading the chart (but only once)
I just solved this issue with the following. Using bootstrap version 3.3.5
I am leaving this here because this link showed up when I googled the issue at the beginning. I hope it helps.
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
$(e.target.hash).highcharts().reflow();
});
HTML
<!-- Nav tabs -->
<ul class="nav nav-pills nav-justified" role="tablist" id="taks-tabs">
<li role="presentation" class="active">Met Standard</li>
<li role="presentation">Commended Performance</li>
<li role="presentation">TAKS-M Met Standard</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="taks_met_std"></div>
<div role="tabpanel" class="tab-pane" id="taks_comm_perf"></div>
<div role="tabpanel" class="tab-pane" id="taks_m_met_std"></div>
</div>
add class="chart" to all highcharts containers inside tabs.
add this jQuery code:
jQuery(document).on( 'shown.bs.tab', 'a[data-toggle="tab"]', function () {
$( '.chart' ).each(function() {
$(this).highcharts().reflow();
});
})
I found the answer after looking for sometime. This was driving me crazy so I want to share it with you all since nothing here worked for me.
Add this to your CSS
.tab-content > .tab-pane,
.pill-content > .pill-pane {
display: block;
height: 0;
overflow-y: hidden;
}
.tab-content > .active,
.pill-content > .active {
height: auto;
}
For more details visit the page I found the solution at
https://jonpolygon.com/bootstrap-tabs-100-percent-width-charts/
i fix this problem with the next code.
$('#yourDivChart').highcharts({
chart: {
type: data.EjeX.Tipo,
//width: width,
//height: height,
options3d: {
enabled: true,
alpha: 15,
beta: 15,
viewDistance: 25,
depth: 40
},
width: $('#DivContainerWithYourTabs').width() - 150
},
in my case is a partial "_partialDetalleProyecto"
I hope works you.
So this is a bit old, but for anyone stumbling across this, I was having a similar issue with the highchart sizes being incorrect in a bootstrap tabbed display. The solution I came up with was to just delay creating the chart by 100ms using setTimeout().
setTimeout(function() {
drawBarChart();
}, 100);
Note: drawBarChart is a custom function I created to generate the charts I needed. The issue (at least in my case) seemed to be that the chart was being created before (or at the same time) as the container and was therefore choosing some default width instead of the width of the container.
I have 2 tabs , met same problem.
I changed only 2 rows codes of Druska, and it worked.
function anyname() {
$("[data-highcharts-chart]").each(function () {
var highChart = Highcharts.charts[$(this).data('highchartsChart')];
var highChartCont = $(highChart.container).parent();
highChart.reflow();
});
}
and add one onclick event to you HTML tab codes like below:
<input type="radio" id="tab1_1" checked onclick="anyname();" >
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 have implemented a WebApp using SplitView - http://asyraf9.github.com/jquery-mobile/ - (and that seems to use the ScrollView component) together with jQuery Mobile. Everything works fine ...
Within the panel I have got a list of elements that should dynamically add elements when scrolling reaches the end of the list. On the iPhone I do not use SplitView but iScroll - http://cubiq.org/iscroll - and the following code to achieve this (and it is working).
HTML:
<div data-role="panel" data-id="menu" data-hash="crumbs" style="z-index: 10000;" id="Panel">
<div data-role="page" id="Root" class="Login" onscroll="console.log('onscroll');">
<div data-role="content" data-theme="d" onscroll="console.log('onscroll');">
<div class="sub">
<ul data-role="listview" data-theme="d" data-dividertheme="a" class="picListview" id="PortfolioList">
<!-- Content added dynamically -->
</ul>
</div>
</div>
</div>
</div>
Javascript:
var defaultIScrollOptions = {
useTransition: true,
onScrollStart: function() {
this.refresh();
},
onScrollEnd: function() {
if (this.elem && this.id) {
possiblyDisplayNextDocuments(this.y, this.elem, this.id);
}
}
};
iScrolls.push(new iScroll(document.getElementById("searchResults").parentNode, defaultIScrollOptions));
But when using SplitView I do not really know which event and which element to bind the listener on or how to get the scroll position. I already tried several combinations, but did not achieve good results. The best one was the following:
$("#PortfolioList").scrollstop(function(event) {
console.log("scrollstop: "+$("#PortfolioList").scrollTop());
});
My question is: Am I using the right event listener (since it already fires althgough the scrolling animation is still in use) and how do I get the scroll position?
dont use the scrollview plugin. its buggy. Use iscroll for both iOS phonegap apps as well as android. It works fine on both.
For detecting the scroll and loading new elements into the list, listen to the the 'onScrollMove' event of iscroll.
In the iscroll-wrapper.js add this-
options.onScrollMove = function(){
that.triggerHandler('onScrollMove', [this]);
};
then in your code attach a event handler to the onScrollMove event and handle adding new rows in that. onScrollMove will fire whenever you scroll.
In the handler you can find how many rows are there in your list and that which row is on the top of your view port using something like
iscrollScrollEventHandler:function(event){
var contentDiv= $('div:jqmData(id="main") .ui-page-active div[data-role*="content"] ul li' );
var totalItemsonList = contentDiv.length;
var cont =$('div:jqmData(id="main") .ui-page-active div:jqmData(role="content")');
var itemToScrollOn = totalItemsonList - x; // x is the item no. from the top u want to scroll on. u need to keep updating i guess
var docViewBottom = $(cont).scrollTop() + $(cont).height();
var itemOffset = $(contentDiv[itemToScrollOn]).offset();
if(itemOffset){
var elemTop = itemOffset.top;
if (elemTop <= docViewBottom){
event.data.callback();
}
}
}
and in the callback add the code to add new rows. hope that helps.