I have a dropdown-menu, Class View is my default option.
When I clicked on the arrow, I have this
I tried to hide Class View option, and set Geary, Mia as my default option. I couldn't get it to hide.
HTML
<div class="row cb-btns-row " style="background-color:white;">
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<div id="dd" class="wrapper-dropdown-1" tabindex="1"> <span>Class View </span>
<ul class="dropdown">
<li><a id="class-view" href="#">Class View</a>
</li>
<li><a id="student#1" class="student" href="#">Geary, Mia</a>
</li>
</ul>
</div>
</div>
</div>
JS
// dropDown Menu
function dropDown(el) {
this.dd = el;
this.placeholder = this.dd.children('span');
this.opts = this.dd.find('ul.dropdown > li');
this.val = '';
this.index = -1;
this.initEvents();
}
dropDown.prototype = {
initEvents: function () {
var obj = this;
obj.dd.on('click', function (event) {
$(this).toggleClass('active');
return false;
});
obj.opts.on('click', function () {
var opt = $(this);
obj.val = opt.text();
obj.index = opt.index();
obj.placeholder.text(obj.val);
});
},
getValue: function () {
return this.val;
},
getIndex: function () {
return this.index;
}
}
$(function () {
var dd = new dropDown($('#dd'));
$(document).click(function () {
$('.wrapper-dropdown-1').removeClass('active');
});
var $student = $('.student');
var $classView = $('.classView');
$classView.hide(); // I tried
});
What I have
Live Result = http://jsfiddle.net/bheng/8cnz2r67/1/show
Live Code = http://jsfiddle.net/bheng/8cnz2r67/1/
You have mistaken the jquery selector for class-view which is id and not class. So put # instead of . and then hide it's parent li using closest(). Also to set the default value, set student's text in first span under .wrapper-dropdown-1
var $student = $('.student');
var $classView = $('#class-view');//its id and not class
$classView.closest('li').hide(); //hide parent li
//set default as student
$('.wrapper-dropdown-1').find('span:first').text($student.text());
JSFiddle Demo
Here a working demo: http://jsfiddle.net/8cnz2r67/9/
Javascript
dropDown.prototype = {
//...
setDefault: function(def) {
this.placeholder.text(def)
}
}
In the document.ready:
var dd = new dropDown($('#dd'));
dd.setDefault($(".default").text())
And just add a default class to the element that you wanna set to default.
Hope it helps you! ;)
You can try following by replacing
$classView.hide(); // I tried
with
$('.wrapper-dropdown-1').addClass('active');
$student.click();
JSFiddle Demo
Related
I have two values in href and I want to use both values one by one. Can
anyone help me how I do this? Below I put my code which I tried. It's working in first step. That means the value is set when I click first time but the value is not set when I clicked on same element the second time.
$(document).ready(function() {
$('.parent a').click(function() {
var link = $(this).attr('href');
var sliptLink = link.split(',');
var firstLink = sliptLink[0];
var secondLink = sliptLink[1];
/* this code execute when parent has class first */
if ($(this).parent().hasClass('first')) {
$(this).attr('href', sliptLink[0]);
$(this).parent().removeClass('first');
} else {
$(this).attr('href', sliptLink[1]);
console.log(sliptLink[1]);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent first">
Link 1
Link 3
Link 2
</div>
What you're doing is replacing the href with first click, so removing the second entry - consider using a different attribute, like data-href
$(document).ready(function() {
$('.parent a').click(function() {
var link = $(this).attr('data-href');
var sliptLink = link.split(',');
var firstLink = sliptLink[0];
var secondLink = sliptLink[1];
/* this code execute when parent has class first */
if ($(this).parent().hasClass('first')) {
$(this).attr('href', sliptLink[0]);
$(this).parent().removeClass('first');
} else {
$(this).attr('href', sliptLink[1]);
console.log(sliptLink[1]);
}
});
});
/* added for display */
a {
cursor: pointer;
text-decoration: underline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent first">
<a data-href="#123,#321">Link 1</a>
<a data-href="#456,#654">Link 3</a>
<a data-href="#789,#987">Link 2</a>
</div>
Change your links to Link 2 and then use $(this).attr('data-href').
Problem was that when you updated .attr('href', sliptLink[0]) it would remove the second #123 from the original href
demo
$(document).ready(function() {
$('.parent a').click(function(e) {
e.preventDefault()
var link = $(this).attr('data-href');
var sliptLink = link.split(',');
var firstLink = sliptLink[0];
var secondLink = sliptLink[1];
/* this code execute when parent has class first */
if ($(this).parent().hasClass('first')) {
$(this).attr('href', sliptLink[0]);
$(this).parent().removeClass('first');
} else {
$(this).attr('href', sliptLink[1]);
console.log(sliptLink[1]);
}
});
});
<div class="parent first">
Link 1
Link 3
Link 2
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
check this, because the second time, your href has only one value, that too without comma
$(document).ready(function() {
$('.parent a').click(function() {
var link = $(this).attr('href');
/* this code execute when parent has class first */
if ($(this).parent().hasClass('first')) {
var sliptLink = link.split(',');
var firstLink = sliptLink[0];
$(this).attr('href', sliptLink[0]);
$(this).parent().removeClass('first');
} else {
$(this).attr('href', link);
console.log(link);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent first">
Link 1
Link 3
Link 2
</div>
Your first click just set href to sliptLink[0].
So that the 2nd click won't know what sliptLink[1] is.
This could be done with a separated data-attribute (E.g: data-link).
$(document).ready(function() {
$('.parent a').click(function() {
var link = $(this).attr('data-link');
var sliptLink = link.split(',');
var firstLink = sliptLink[0];
var secondLink = sliptLink[1];
/* this code execute when parent has class first */
if ($(this).parent().hasClass('first')) {
$(this).attr('href', sliptLink[0]);
$(this).parent().removeClass('first');
} else {
$(this).attr('href', sliptLink[1]);
console.log(sliptLink[1]);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent first">
Link 1
Link 3
Link 2
</div>
just Declare Global Variable;
var glink=null;
$(document).ready(function () {
$('.parent a').click(function () {
if(glink==null)
glink = $(this).attr('href');
var sliptLink = glink.split(',');
var firstLink = sliptLink[0];
var secondLink = sliptLink[1];
/* this code execute when parent has class first */
if ($(this).parent().hasClass('first')) {
$(this).attr('href', sliptLink[0]);
$(this).parent().removeClass('first');
} else {
$(this).attr('href', sliptLink[1]);
$(this).parent().addClass('first');
console.log(sliptLink[1]);
}
});
});
With Vanilla JS
Array.from(document.querySelectorAll('.parent a')).forEach((e) => {
e.addEventListener('click', () => {
var links = e.hash.split(',');
console.log(links);
})
});
I've the below html and the div containing class tabHeader is not expanding/collapsing at all.
<div class="tabHeader">
<li>1JL(Mobile)</li>
<div class="insideTabHeader">
<li>Network</li>
<li>Application</li>
<li>Integration</li>
<li>Infrastructure</li>
</div>
</div>
Have written the below jquery to collapse/expand the div tabHeader
$("#tabHeader").click(function () {
$tabHeader = $(this);
$insideTabHeader = $tabHeader.next();
$insideTabHeader.slideToggle(500, function () {
});
});
I'm not sure why the above jquery isn't working. Any help/solution would be of great help.
Thanks in advance.
1- Use the anchor id or class instead of the div
2- use $tabHeader.closest('li').next(); instead of $tabHeader.next();
$("#onejltab").click(function () {
$tabHeader = $(this);
$insideTabHeader = $tabHeader.closest('li').next();
$insideTabHeader.slideToggle(500, function () {
});
});
Demo
$("#onejltab").click(function () {
$tabHeader = $(this);
$insideTabHeader = $tabHeader.closest('li').next();
$insideTabHeader.slideToggle(500, function () {
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabHeader">
<li>1JL(Mobile)</li>
<div class="insideTabHeader">
<li>Network</li>
<li>Application</li>
<li>Integration</li>
<li>Infrastructure</li>
</div>
</div>
I have a listbox
<div id="listboxid1" class="listboxFilters">
<div class="listboxFilterItem"> <div style="padding-top:2px; float: left;">test2</div> <div class="listboxChosenFilter">3</div> </div>
<div class="listboxFilterItem"> <div style="padding-top:2px; float: left;">test</div> <div class="listboxChosenFilter">*</div> </div>
<div class="listboxFilterItem"> <div style="padding-top:2px; float: left;">gro</div> <div class="listboxChosenFilter">2</div> </div>
</div>
its a normal listbox, the question is now , how can I only set one element to active , and the others then to inactive
my first guess was an onlick on an item, I add a classname named active and before I would do a foreach for the listboxid1 element and set all to inactive, but is this really the common and best way?? :
<script>
function clearAll(element) {
element.each(function () {
var checkboxes = $(this).children("div");
checkboxes.each(function () {
var checkbox = $(this);
checkbox.removeClass("active");
});
});
}
jQuery.fn.multiselecter = function () {
$(this).each(function () {
var checkboxes = $(this).children("div");
checkboxes.each(function () {
var checkbox = $(this);
checkbox.click(function () {
clearAll(checkbox.parent());
checkbox.addClass("active");
});
});
});
};
$("#listbox1").multiselecter();
</script>
I guess you are using jQuery, so try this functions:
On click on anyitem with class .listboxFilterItem call setActive function
$('.listboxFilterItem').click(setActive($(this)));
function setActive(var elem){
$('.listboxFilterItem').each(function(){
$(this).removeClass('active');
});
elem.addClass('active');
}
Try this:
$(".listboxFilterItem").click(function (e) {
$(".listboxFilterItem").removeClass("active");
// or $(".active").removeClass("active");
$(this).addClass("active");
});
Check this on jsfiddle
$(this) - element, which was clicked
$(this).siblings() - all his neighbours, except himself.
$(".listboxFilterItem").click(function () {
$(this).addClass("active").siblings().removeClass("active");
});
I have a simple drop down list that I want to use as language selector,
the html code works fine but when I add the script below, the href don't work anymore.
When mouse over, I can see the link but click doesn't work !!!!
here is my code :
<body>
<div class="container">
<section class="main">
<div class="wrapper-demo">
<div id="dd" class="wrapper-dropdown-2">
<span>Deutsch</span>
<ul class="dropdown">
<li><img src="./images/flags/flags_iso/32/de.png" >Deutsch</li>
<li><img src="./images/flags/flags_iso/32/en.png" >English</li>
</ul>
</div>
</div>
</section>
</div>
<!-- jQuery if needed -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
function DropDown(el) {
this.dd = el;
this.placeholder = this.dd.children('span');
this.opts = this.dd.find('ul.dropdown > li');
this.val = '';
this.index = -1;
this.initEvents();
}
DropDown.prototype = {
initEvents : function() {
var obj = this;
obj.dd.on('click', function(event){
$(this).toggleClass('active');
return false;
});
obj.opts.on('click',function(){
var opt = $(this);
obj.val = opt.text();
obj.index = opt.index();
obj.placeholder.text(obj.val);
});
},
getValue : function() {
return this.val;
},
getIndex : function() {
return this.index;
}
}
$(function() {
var dd = new DropDown( $('#dd') );
$(document).click(function() {
// all dropdowns
$('.wrapper-dropdown-3').removeClass('active');
});
});
</script>
</body>
JSFiddle
This is caused by the return false; statement in the first click handler. It prevents the event from doing what it is supposed to do (much like event.preventDefault(); when using jQuery).
Try to remove it, like this:
obj.dd.on('click', function(event) {
$(this).toggleClass('active');
//return false;
});
I have a sample code
On Html:
<div id="item-1-desc">ABC</div>
<div id="item-2-desc">DEF</div>
<div id="item-3-desc">XYZ</div>
And jquery:
$('div[id^=item-][id$=-desc]').hide().before('More');
$('a#toggle-desc').click(function (e) {
e.preventDefault();
var $this = $(this);
$this.toggleClass('see-more');
if($this.hasClass('see-more')){
$this.text('More');
} else {
$this.text('Close');
}
$('div[id^=item-][id$=-desc]').slideToggle(200);
});
When I click on more, it open all div(http://jsfiddle.net/3v25guz6). How to click only show a item desc ?
You have to target only the div which is next sibling of the clicked a so
$(this).next('div').slideToggle(200);
Also, id of an element must be unique, so for the dynamically added elements use the class to register the click handler
$('div[id^=item-][id$=-desc]').hide().before('More');
$('.see-more').click(function(e) {
e.preventDefault();
var $this = $(this);
$this.toggleClass('see-more');
$this.text($this.hasClass('see-more') ? 'More' : 'Close');
$(this).next('div[id^=item-][id$=-desc]').slideToggle(200);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="item-1-desc">ABC</div>
<div id="item-2-desc">DEF</div>
<div id="item-3-desc">XYZ</div>
http://jsfiddle.net/3v25guz6/2/
$('div[id^=item-][id$=-desc]').hide().before('More');
$('a#toggle-desc').click(function (e) {
e.preventDefault();
var $this = $(this);
$this.toggleClass('see-more');
if ($this.hasClass('see-more')) {
$this.text('More');
} else {
$this.text('Close');
}
$this.next().slideToggle(200);
});