<div id="tabs">
<ul>
<li>Tab One</li>
<li>Tab Two</li>
<li>Tab Three</li>
</ul>
</div>
I have a tab widget, displaying content from different urls.
I need an expression, to get the contents (HTML string) of the currently displayed content, in the tab panel. Something like
alert($('tabs').tabs('option', 'selectedpanel').innerHTML);
The only reference I have is the JQuery documentation http://api.jqueryui.com/tabs/ , but I could not get an suitable answer from the API documentation there.
Just use the load event of the tabs as below :
<script>
$(function() {
$( "#tabs" ).tabs({
load: function( event, ui ) {
alert(ui.panel.html());
}
});
});
</script>
Related
I would like to change the active pill/tab on document load. I know you can set the active pill like I have below but for other reasons I want to change it after document load. I have tried various bits of JS but nothing seems to work. Here's the HTML and JS (I have also tried replacing data-toggle="pill" with data-toggle="tab" below and still doesn't work).
<div>
<ul class="nav nav-pills pillstyle">
<li class="active tabstyle"><a data-toggle="pill" href="#apple">Apple</a></li>
<li class="tabstyle"><a data-toggle="pill" href="#banana">Banana</a></li>
<li class="tabstyle"><a data-toggle="pill" href="#pear">Pear</a></li>
<li class="tabstyle"><a data-toggle="pill" href="#orange" >Orange</a></li>
</ul>
</div> <!-- nav pills close -->
<div class="tab-content">
<div id="apple" class="tab-pane fade in active"> `
.... content of tabs.
JS
$(document).ready(function(){
$('#banana').tab('show');
});
or
$(document).ready(function(){
$('#banana').pill('show');
});
You just need to change your jQuery selector to address the a element instead of the tab-pane div.
$(document).ready(function(){
$('a[href="#banana"]').tab('show');
});
If you need, you can find more detailed description about bootstrap tabs in the official documentation.
#Stu Here you go.
HTML:
Assign an ID myTab to UL element.
<ul class="nav nav-pills pillstyle" id="myTab">
JS:
$(function () {
$('#myTab a[href="#banana"]').tab('show');
});
Also refer to Bootstrap documentation on selecting different elements on load here. It will give you better understanding.
http://getbootstrap.com/2.3.2/javascript.html#tabs
Working demo: https://jsfiddle.net/tf9k9j27/
Note: Just to answer your trial and error.
You can activate a tab or pill navigation without writing any JavaScript by simply specifying data-toggle="tab" or data-toggle="pill" on an element. Adding the nav and nav-tabs classes to the tab ul will apply the Bootstrap tab styling. (From bootstrap docs. read more to get better clarity)
I am using magnific popup on a new website that i am building but i am running into a problem getting it to work when multiple galleries on the same page.
I'm using wordpress, Slick Slider to display a slider full of thumbnails and when one of the thumbnails is clicked it should open the larger version of the image in the Magnific Popup.
My HTML looks like this:
<div class="media-carousel slick-initialized slick-slider" id="carousel-links">
<div class="slick-list draggable" tabindex="0">
<div class="slick-track" style="opacity: 1; width: 1152px; transform: translate3d(0px, 0px, 0px);">
<div class="slick-slide slick-active" data-slick-index="0" style="width: 288px;">
<div class="standard_media_element media_title">
<a href="image1-large.jpg" title="" class="gallery-item" data-effect="mfp-move-horizontal">
<img src="image1.jpg" alt="" class="standard-image"></a>
</div>
</div>
<div class="slick-slide slick-active" data-slick-index="1" style="width: 288px;">
<div class="standard_media_element media_title">
<a href="image2-large.jpg" title="" class="gallery-item" data-effect="mfp-move-horizontal">
<img src="image2.jpg" alt="" class="standard-image"></a>
</div>
</div>
<div class="slick-slide slick-active" data-slick-index="2" style="width: 288px;">
<div class="standard_media_element media_title">
<a href="image3-large.jpg" title="" class="gallery-item" data-effect="mfp-move-horizontal">
<img src="image3.jpg" alt="" class="standard-image"></a>
</div>
</div>
<div class="slick-slide slick-active" data-slick-index="3" style="width: 288px;">
<div class="standard_media_element media_title">
<a href="image4-large.jpg" title="" class="gallery-item" data-effect="mfp-move-horizontal">
<img src="image4.jpg" alt="" class="standard-image"></a>
</div>
</div>
</div>
</div>
I have a site.js file that contains all of the javascript for my site in it. I'm calling magnific popup using the following function. I've added some extra stuff in it to add effects.
jQuery('#carousel-links').each(function() {
jQuery(this).magnificPopup({
delegate: 'a',
type: 'image',
tClose: 'Close (Esc)',
tLoading: '',
preload: [1,4],
gallery:{
enabled:true,
tPrev: 'previous',
tNext: 'next',
tCounter: '%curr% of %total%'
},
image: {
verticalFit: true,
titleSrc: function(item) {
return item.el.attr('title') + ' ยท <a class="image-source-link" href="'+item.src+'" target="_blank"><i class="fa fa-file-image-o"></i> open original</a>';
}
},
closeBtnInside: false,
closeOnContentClick: false,
mainClass: 'mfp-zoom-in',
removalDelay: 300, //delay removal by X to allow out-animation
callbacks: {
lazyLoad: function (item) {
console.log(item); // Magnific Popup data object that should be loaded
},
beforeOpen: function() {
jQuery('#carousel-links a').each(function(){
jQuery(this).attr('title', $(this).find('img').attr('alt'));
});
},
open: function() {
//overwrite default prev + next function. Add timeout for css3 crossfade animation
jQuery.magnificPopup.instance.next = function() {
var self = this;
self.wrap.removeClass('mfp-image-loaded');
setTimeout(function() { jQuery.magnificPopup.proto.next.call(self); }, 120);
}
jQuery.magnificPopup.instance.prev = function() {
var self = this;
self.wrap.removeClass('mfp-image-loaded');
setTimeout(function() { jQuery.magnificPopup.proto.prev.call(self); }, 120);
}
},
imageLoadComplete: function() {
var self = this;
setTimeout(function() { self.wrap.addClass('mfp-image-loaded'); }, 16);
}
}
});
});
I have the same exact HTML code building different galleries outputting on the same page and for some reason the first carousel with lightbox works great. But for whatever reason, the second gallery does not work. The carousel works fine, but Magnific Popup does not fire. When i click on one of the thumbnails, it opens the larger image in the browser window.
I tested my js function by adding a "console.log("clicked");" after the .each. I see the console that the thumbnail is being clicked and that part is working.
Any idea how i can get the multiple sliders to work on my page?
I've tried the example from the documentation for the multiple galleries by removing everything from the function and making it as barebone as possible. I get the same result, the first lightwindow works but the second one does not.
I'm not seeing any js errors on the console either.
UPDATE #1
This isn't an ideal solution, but i did find a way to make this work. I had to use unique IDs on each slider in order to get the lightbox to work if multiple sliders were on the same page using the same ID value. In this case, I was using #carousel-links for all of the sliders. I guess you can't share the same ID for sliders across the board and get this lightbox to work?
I also moved the javascript code to be right after the carousel in the module template page. I removed it for now from my site.js file.
I'm not looking for a way to optimize the code so i can put it in my site.js. I'll try to grab that ID value by using the class on each carousel. I'll report back if i can get that to work.
UPDATE #2 - OMG
Could the problem i was having when the lightbox only worked with the first instance of the lightbox be because i was an ID instead of a CLASS as my selector for the lightbox? I changed to the CLASS and now they are all working.
What fixed my problem is I changed the selector from the ID to a class on the same element. This allowed for multiple galleries on the same page to work together with no problem.
I've created a very simple HTML templated widget.
<div class="tool">
<a href="" id="freehand">
<i class="flaticon-writing9"></i>
</a>
</div>
<div class="tool">
<a href="" id="polygon">
<i class="flaticon-constellation"></i>
</a>
</div>
My widget declaration looks like this:
define([
"dojo/_base/declare",
"dijit/_WidgetBase",
"dijit/_TemplatedMixin",
"dojo/text!./templates/DrawingToolsWidget.html",
"dojo/parser",
"dojo/ready"
],
function(declare, _WidgetBase, _TemplatedMixin, template, parser, ready) {
return declare("DrawingToolsWidget",[_WidgetBase, _TemplatedMixin], {
templateString: template,
constructor: function() {
console.log(this);
}
});
ready(function(){
parser.parse();
});
}
);
I try to attach it to a point in my main DOM with a data-dojo-type attribute:
<div id="drawing-tools-container" data-dojo-type="DrawingToolsWidget"></div>
But I keep getting a generic dojo/parser::parse() error Error {} which is completely useless for debugging.
My directory structure is: /index.html(main DOM) /app/DrawingToolWidget/templates/DrawingToolsWidget.html(template) /app/DrawingToolWidget/DrawingToolWidget.js(declaration)
I've also tried to attach "app/DrawingToolWidget/DrawingToolWidget" just in case it wanted the path to the widget declaration. Nope.
What am I doing wrong? Why is it so hard just to attach a fragment of markup to the DOM?
Your template is invalid because you can only have 1 root element. I'm not sure if that's the main problem, but this might solve certain things. A quote from the documentation:
Note that when you define a template, it can only have one root
node definition ( just like with XML documents). Multiple nodes at the
top level is not allowed.
The article: http://dojotoolkit.org/documentation/tutorials/1.9/templated/
A working template would be:
<div>
<div class="tool">
<a href="" id="freehand">
<i class="flaticon-writing9"></i>
</a>
</div>
<div class="tool">
<a href="" id="polygon">
<i class="flaticon-constellation"></i>
</a>
</div>
</div>
The working example can be found here.
About your debugging problem, do you use Google Chrome? When encountering an error, you should try to close and open the developer tools/console, if you do that, there should be a small arrow next to the Error, for example:
As you can see here, there are 2 arrows, the left one gives you the stacktrace, while the right one (almost at the end of the error line), will give you detailed information about the error (if you click/expand it).
I use jqueryUI tabs and want to implement a smooth scroll bar inside each tab. I tried several scrollable plugins like jQuery custom content scroller, TinyScrollbar and now areaaperta NiceScroll, but each time I stack with the same problem - scrollbar works only inside one tab..
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
<div id="tabs" style="width:900px; font-size:100%;">
<ul>
<li><a href="#tabs-1" >FIRST</a></li>
<li>SECOND</li>
<li>THIRD</li>
</ul>
<div id="tabs-1">
<div id="thisdiv">
<p><b>FIRST SCROLLABLE PARAGRAPH</b>...</p></div></div>
<div id="tabs-2"><div id="thisdiv2">
<p><b>SECOND SCROLLABLE PARAGRAPH</b>...</p>
</div></div>
<div id="tabs-3">
<p>THIRD TAB </p>
</div>
</div>
<script>
$(document).ready(
function() {
$("#thisdiv").niceScroll({cursorcolor:"#00F"});
$("#thisdiv2").niceScroll({cursorcolor:"#00F"}); }
);
</script>
Here is jsfiddle that shows that there is no conflicts between UItabs and two scrollbars of niceScroll plugin: http://jsfiddle.net/Fluc/EhcqX/4/
And here I tried to use same divs with scroll bars inside each tab:
http://jsfiddle.net/Fluc/cJPT3/2/
As you can see, scrollable works only inside the first tab.. Same with other scrollable plugs..
I'm not jquery programmer but It feels like the problem is related to display property somewhere.
Any help would be very appreciated!
I am developing a web page using Dojo mobile v1.5.1.
Below is the sample code.
<div dojotype="dojox.mobile.View" selected="true" id="view1">
<div dojotype="dojox.mobile.Heading" label="dojox.mobile.Heading"></div>
<div dojotype="dojox.mobile.EdgeToEdgeCategory" label=
"dojox.mobile.EdgeToEdgeCategory"></div>
<div dojotype="dojox.mobile.EdgeToEdgeList">
<!-- PROBLEM IS IN THIS DIV TAG -->
<div dojotype="dojox.mobile.ListItem" moveto="view2" transition="slide"
label="dojox.mobile.ListItem" onclick=
"document.getElementById("cfText").innerText = "Value set";"
id="listItem1"></div>
</div>
</div>
<div dojotype="dojox.mobile.View" id="view2">
<div dojotype="dojox.mobile.Heading" label="dojox.mobile.Heading" back="Back" moveto=
"view1"></div>
<div dojotype="dojox.mobile.EdgeToEdgeList">
<div dojotype="dojox.mobile.ListItem">
<span id="cfText" class="xspTextComputedField">Value NOT set</span>
</div>
</div>
</div>
What it does is, when the div tag with with id "listItem1" is clicked it shows div tag with id "view2". But when I add the onClick event in it, it does NOT work. Without the onClick event it works fine.
GOT IT!
Add the following script:
<script type="text/javascript">
function setValue() {
var cfText = dojo.byId("cfText");
cfText.innerHTML = "Value Set";
}
dojo.addOnLoad(
function() {
dojo.connect(dijit.byId("listItem1"), "onClick", dojo.hitch(dijit.byId("listItem1"), setValue));
}
);
</script>
Also remove the "onClick" attribute value from div tag with id "listItem1".
Thanks to this discussion for helping me out.
What are you trying to do with the onclick event?
Couldn't you rewrite that line like the following:
<div dojotype="dojox.mobile.ListItem" transition="slide"
label="dojox.mobile.ListItem" onclick="someNewFunction(this)" id="listItem1">
Then create a new function to do what you want:
function someNewFunction(obj) {
var cfText = dojo.byId("cfText");
cfText.innerHTML = "Value";
obj.transitionTo("move2");
}
Hope that helps and I understood you correctly.
EDIT:
Also I when I tried to use moveTo with an onClick on a listItem the onClick would work and the moveTo would not. You can remove the moveTo attribute and add this line in the last line of your new function:
this.transitionTo("move2");
EDIT AGAIN:
Also you could remove the transition as well and add it to the transitionTo call.