I got a small problem in JQuery .selectable function
what I wanna do is bind some events to each tabs.
I can handle a click event of each tabs
but the problem is when I select two or more tabs,
I can't figure out how I handle it.
for example, if I click(and also just select by dragging) one tab,
some sorting function must be works and
also each different defined function must be works in dragging multiple selections.
Ofcourse, I can use some flag cheat to solve this
but that is not what I really want.
does anyone have some effective solutions?
$("#selectable2").selectable(
{
selected: function()
{
$(".arcplan").on("selectableselected", function()
{
$(".big-tile").hide(200);
})
}
});
<div class="menu">
<div class="inner">
<ol id="selectable2">
<li class="alltype2">all</li>
<li class="arcplan">Arcplan</li>
<li class="msbi">MSBI</li></li>
<li class="excel">Excel</li>
<li class="etc">etc</li>
</ol>
</div>
</div>
Try
$("#selectable2").selectable({
selected : function(event, ui) {
if($(ui.selected).hasClass('arcplan')){
$(".big-tile").hide(200);
}
}
});
Demo: Fiddle - when you click on Arcplan the big-tile element is hidden and if you select anything else it is displayed back.
From the docs (http://api.jqueryui.com/selectable/#event-selected):
$('#selectable2').selectable();
$('#selectable2').on('selectableselected', function(event, ui){
doSomethingWithTheSelected(event.target);
});
Related
I'm having trouble understanding the ng-show angular directive, it is not working correctly for me. I can't get the boolean value to change in the controller like some examples I've seen online. Rather than use the tabs javascript I decided to try and implement a simple angular show and hide for the tabs. However I have checked many examples on the web and I can't find out what is going wrong. Nothing is showing up at all from the divs.
<div class="row" ng-controller="ExtractionTabsCtrl">
<ul class="nav nav-tabs nav-justified" role="tablist">
<li id="titles"class="active">Titles</li>
<li id="contacts">Contacts</li>
<li id="writers">Writers</li>
<li id="files">Files</li>
<li id="companies">Companies</li>
</ul>
</div>
<div ng-show="titlesdiv">Titles</div>
<div ng-show="contactsdiv">Contacts</div>
<div ng-show="writersdiv">Writers</div>
<div ng-show="filesdiv">Files</div>
<div ng-show="companiesdiv">Companies</div>
and my JS side
MPWAdminControllers.controller("ExtractionTabsCtrl",["$scope", function($scope){
$scope.writersdiv=false;
$scope.contactsdiv=false;
$scope.filesdiv=false;
$scope.titlesdiv=true;
$scope.companiesdiv=false;
$('#contacts a').click(function (e) {
e.preventDefault()
$(this).tab('show')
$scope.writersdiv=false;
$scope.contactsdiv=true;
$scope.filesdiv=false;
$scope.titlesdiv=false;
$scope.companiesdiv=false;
})
$('#writers a').click(function (e) {
e.preventDefault()
$(this).tab('show')
$scope.writersdiv=true;
$scope.contactsdiv=false;
$scope.filesdiv=false;
$scope.titlesdiv=false;
$scope.companiesdiv=false;
})
$('#files a').click(function (e) {
e.preventDefault()
$(this).tab('show')
$scope.writersdiv=false;
$scope.contactsdiv=false;
$scope.filesdiv=true;
$scope.titlesdiv=false;
$scope.companiesdiv=false;
})
$('#companies a').click(function (e) {
e.preventDefault()
$(this).tab('show')
$scope.writersdiv=false;
$scope.contactsdiv=false;
$scope.filesdiv=false;
$scope.titlesdiv=false;
$scope.companiesdiv=true;
})
$('#titles a').click(function (e) {
e.preventDefault()
$(this).tab('show')
$scope.writersdiv=false;
$scope.contactsdiv=false;
$scope.filesdiv=false;
$scope.titlesdiv=true;
$scope.companiesdiv=false;
})
}]);
Simply Trying to flip the show value on each div whenever a tab is selected. I have a feeling it might have to do with mixing jquery and angular but Im not sure.
Thanks
James
You are trying to mix JQuery and AngularJS where you would probably be fine with just AngularJS, this should definitely work.
HTML
<li id="contacts"><a ng-click="ShowContacts()">Contacts</a></li>
..
Javascript
$scope.ShowContacts = function()
{
$scope.contactsdiv = true;
.....
Just fill in with the rest of your code.
ng-click is an easier way then defining JQuery on click events. It will execute whatever Javascript you put inside of it and is overall cleaner.
You can also move the ng-click to the li tag which would eliminate your need for the a tag to begin with.
Edit:
Like the previous answer said, you need to extend the controller div to include what your changing. I missed that, what you have with JQuery should work then, but ng-click will be much cleaner regardless.
Based on where you defined your controller, the ng-show directive is not in the same scope as the links you've defined. You need to change your where the definition of the controller is like so:
<div class="container" ng-controller="ExtractionTabsCtrl">
<div class="row">
<ul class="nav nav-tabs nav-justified" role="tablist">
<li id="titles"class="active"><a href ng-click="test()">Titles</a></li>
<li id="contacts">Contacts</li>
<li id="writers">Writers</li>
<li id="files">Files</li>
<li id="companies">Companies</li>
</ul>
</div>
<div ng-show="titlesdiv">Titles</div>
<div ng-show="contactsdiv">Contacts</div>
<div ng-show="writersdiv">Writers</div>
<div ng-show="filesdiv">Files</div>
<div ng-show="companiesdiv">Companies</div>
</div>
You'll notice I added a wrapper around your row and subsequent divs. The wrapping div is now the total scope of your controller, instead of just the ul.
I have a JavaScript menu that I want to unfold/fold when I click on the #dropdown button. First, it took three clicks for it to unfold and after those three clicks, it worked perfectly fine.
I edited my code, I have to click it three times again for it to work, but after that, each click makes the menu fold/unfold three times in a row.
buttonClickHandler
function buttonClickHandler(e) {
e.preventDefault();
$(document).ready(function(){
$('#main').hide();
$('a#dropdown-button').click(function(){
$('#main').toggle(function(){
$('#main').addClass('active').fadeIn();
}, function(){
$('#main').removeClass('active').fadeOut();
return false;
});
});
});
}
Init
function init(){
var button = document.getElementById('dropdown-button');
button.addEventListener("click", buttonClickHandler, false);
}
window.addEventListener("load", init, false);
HTML
<section id="nav-bar">
<figure>
<span class="helper"></span><img src="img/Logo.png" alt="Zien Woningmarketing"/>
</figure>
<img src="img/Menu.png" alt="Menuknop: open het menu"/>
</section>
<nav id="main">
<ul id="firstLevel">
<li>Home</li>
<li>Producten</li>
<li>Woningmarketing</li>
<li>Over Zien!</li>
<li>Werkwijze</li>
</ul>
<ul>
<li class="login">Inloggen</li>
<li>Registreren</li>
</ul>
</nav>
Link to JSFiddle
The thing is that this menu should easily drop down, thus showing its contents.
Hope this help :
http://jsfiddle.net/x7xu4/2/
$(function(){
$("a#dropdown-button").on("click",function(event ){
$("#main").toggleClass('active').fadeToggle();
event.preventDefault();
});});
Since you are using jquery 2.1, instead of "click" use "on" for it saves a bit of memory, and I edited your code for a simpler solution.
I make simpler your code
$(function(){
$('a#dropdown-button').click(function(){
if(!$('#main').hasClass('active')){
$('#main').addClass('active');
$('#main').show();
}else {
$('#main').removeClass('active');
$('#main').hide();
}
return false;
});
});
Here is jsFiddle sample
I have tried a lot of examples done and I cannot get my code to work to get the ID of a selected tab
http://pastebin.com/A5cqQS61
js code:
$(function() {
$('#tabs').tabs({
select: function(event, ui) {
console.log($(ui.tab)); // the tab selected
console.log(ui.index);
},
show: function(event, ui) {
console.log($(ui.tab)); // the tab shown
console.log(ui.index);
}
});
});
HTML:
<div id="tabs">
<ul>
<li>Nunc tincidunt</li>
<li>Proin dolor</li>
<li>Aenean lacinia</li>
</ul>
<div id="tabs-1">
<p>text1</p>
</div>
<div id="tabs-2">
<p>text2</p>
</div>
<div id="tabs-3">
<p>text3</p>
</div>
</div>
I put in pastebin, because I don't understand ow the code block works in stack! I've pressed space four times, never seems to work well.
I have looked at these solutions so far:
jquery tab selected
jQuery tabs - Get the index of previously selected tab
jQuery tabs - Get the index of previously selected tab
Get tab selected Id in jQuery UI 1.9
You should use ui.panel , returning div tab element: {if it's what you are looking for?}
SEE DEMO
$(function () {
$('#tabs').tabs({
select: function (event, ui) {
console.log(ui.panel.id);
console.log(ui.index);
},
show: function (event, ui) {
console.log($(ui.panel));//jq object
console.log(ui.panel.id);
console.log(ui.index);
}
});
});
Please, try this one — note the different event name('activate') and usage of different property of ui object:
$(function() {
$('#tabs').tabs({
activate: function(event, ui) {
console.log(ui.newPanel[0].id);
}});
});
I usually do the bootleg way... $('#tabs li.active'). This will give you the active li under the element with id='tabs'. If you can get the element, also... jQuery allows you do something like this... $(element).
From there you can do var ID=$(element.attr('id');
i need help creating and actice state on tabs here is my javascriptand part of my html i cant seem to enter css on here please request it if you require it
i need it so which ever tab you are on it shows the same color as the active container background with no borders on the join i need this for the top and side tabs any help on how to do this would be much appreciated as ive looked for days for a solution and only ones i can find are plugins which i dont want to use
also i tried to post an image but im not allowed
java script
$(document).ready(function () {
$("a").click(function () {
$(".side").show(".fastest");
});
$(".overveiw").click(function () {
$(".hide").hide();
$(".div1").show();
$(".overveiw").addClass("active");
});
$(".tour").click(function () {
$(".hide").hide();
$(".div2").show();
});
$(".websites").click(function () {
$(".hide").hide();
$(".div3").show();
});
$(".faq").click(function () {
$(".hide").hide();
$(".div4").show();
});
$(".support").click(function () {
$(".hide").hide();
$(".div5").show();
});
});
top navigation tabs
<ul>
<li class="dealer"><a class="dealer">Manufacturer Dealer</a></li>
<li class="lender"><a>Lender<br /> </a></li>
<li class="developer"><a>Developer<br /> </a></li>
</ul>
side navigation
<ul class="side">
<li class="overveiw data-panel"><a>Overveiw</a></li>
<li class="tour data-panel"><a>Take the tour</a></li>
<li class="websites data-panel"><a>Example websites</a></li>
<li class="faq data-panel"><a>FAQ</a></li>
<li class="support data-panel"><a>Support</a></li>
</ul>
and 5 containing divs wrapped in a main container
fixed now managed to create the effect i was after. after much trial and error here is the code i used for each tab maybe there is a simpler way to do it but this works for now
$(".tour").click(function () {
$(".hide").hide();
$(".div2").show();
$(".tab").addClass("inactive");
$(".tour").removeClass("inactive");
$(".tour").addClass("active");
});
When #my-text-link is clicked, i need to select tab 5 and when tab 5 is selected i need to hide #my-text-link. hope this makes sense, heres the code, and also what I have done so far, please feel free to show me a better way. Thanks in advance
var $tabs = $('.tabbed').tabs(); // first tab selected
$('#my-text-link').click(function() { // bind click event to link
$tabs.tabs('select', 4); // switch to third tab
$('#my-text-link').hide();
return false;
});
<ul>
<li class="one"></li>
<li class="two"></li>
<li class="three"></li>
<li class="four"></li>
<li class="five"></li>
</ul>
<div id="tabs-1"></div>
<div id="tabs-2"></div>
<div id="tabs-3"></div>
<div id="tabs-4"></div>
<div id="tabs-5"></div>
As far as I can see from your code, you've already managed to open a tab when the link is clicked. Here's how you hide the link when user opens the tab:
$(".tabbed").tabs({
select: function(event, ui) {
var tabId = ui.panel.id.substring(5);
if (tabId == 5) {
$('#my-text-link').hide();
}
};
})
Hope this helps