I have been trying without success to add a toggle button to a user generated input. this is a font awesome toggle button.
here is my pen: http://codepen.io/lucky500/pen/bdpzbd and the code.
<div id="list" class="greatList clearfix" >
<ul class="greatList" style='display: none;'>
<li class="items">
<div class="box">
<i class="fa fa-toggle-on fa-2x active" id="on"></i>
<i class="fa fa-toggle-on fa-2x fa-rotate-180 inactive" id="off" style='display: none;'></i>
</div>
</li>
</ul>
</div>
Jquery
$(document).ready(function(){
//toggler
$('.box').click(function() {
$('.inactive, .active').toggle();
});
var trash = '<span class="delete">X</span>';
var toggleButton = '<div class="box"></div>';
//To allow the user to use enter
$('#addButton').click(function(e){
e.preventDefault();
var item = $('#addItems').val();
var placeIt = $('<li style="display: block;">' + toggleButton + item + trash + '</li>');
if(!$.trim($('#addItems').val())) {
alert('Please enter text to add to the list');
} else {
$('.greatList').append(placeIt);
};
})
//To remove li when .trash is clicked
$(document).on('click', '.delete', function() {
$(this).closest('li').fadeOut(350);
});
});
all the help is appreciated!
I actually just had to add the i tag with my toggle inside my toggleButton var... now onto trying to get my toggle to work!
var toggleButton = '<div class="box" style="display: block;"><i class="fa fa-toggle-on fa-2x active" id="on"></i></div>';
Related
I've made this dropdown menu using bootstrap. The problem is that it hides itself when I click inside it or check a checkbox inside it as well. How do I get it not to close unless clicked somewhere outside the dropdown.
Thanks in advance!
<div class="ibox-tools">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="true">
<i class="fa fa-line-chart"></i>
</a>
<ul class="dropdown-menu dropdown-user" style="width:200px">
#foreach(PKG_VLTROUTINE_GET_EXCHAGEINFO_Result cur in Model)
{
<li style="padding:5px">
<strong>#cur.VLTNAME</strong>
#cur.RATE
<br />
<small>#cur.VLTFULLNAME</small>
<small>
(
#cur.RATEDIF
#if (cur.DIRECTION == 1)
{
<i style="color:#1ab394" class="fa fa-level-up text-navy"></i>
}
else
{
<i style="color:#ed5565" class="fa fa-level-down text-navy"></i>
}
)
</small>
<div class="MsSwitch MsSwitch-update">
<input data-evoldvall="-1" value="-1" type="checkbox" checked="" data-valtrue="-1" data-valfalse="" name="#cur.VLTNAME" class="evCheckBox">
<label for="#cur.VLTNAME"></label>
</div>
<li class="divider" style="margin:0px"></li>
</li>
}
</ul>
Remove the data attribute data-toggle="dropdown" and implement the open/close of the dropdown can do the job.
First handle the click on the link to open/close the dropdown like this :
$('a.dropdown').on('click', function () {
$(this).parent().toggleClass('open');
});
Then wait for the clicks outside of the dropdown to close it like this :
$('body').on('click', function (e) {
if (!$('a.dropdown').is(e.target) && $('a.dropdown').has(e.target).length === 0 && $('.open').has(e.target).length === 0 ) {
$('a.dropdown').parent().removeClass('open'); } });
In jQuery I need to hide/show inner text of anchor tag.
Here is html :
<div id="side_bar">
<ul>
<li><i class="fa fa-fw fa-cog"></i>General Settings</li>
<li><i class="fa fa-fw fa-cog"></i>Other Settings</li>
<li><i class="fa fa-fw fa-user"></i>User</li>
</ul>
</div>
on a button click I need to hide/show only inner text General Settings,Settings,User.
I tried this :
$.each($('#side_bar').find('ul').find('li'), function (key, value) {
$(this).find('a').contents().get(0).nodeValue.hide();
});
but it's not working.
got this error in console ::
TypeError: $(...).find(...).contents(...).get(...).nodeValue is null
$(this).find('a').contents().get(0).nodeValue.hide();
I need result to only hide show <a> tag's inner text, not the icon. I try to make collapse sidebar menu.
NOTE :: I must not need to add <span> in to menu.
You could wrap you text by span's and use simple selector like :
$('#side_bar li a span')
Hope this helps.
$('#toggle-display').on('click', function(){
$('#side_bar li a span').toggle();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<button id='toggle-display'>Toggle display</button>
<div id="side_bar">
<ul>
<li><i class="fa fa-fw fa-cog"></i><span>General Settings</span></li>
<li><i class="fa fa-fw fa-cog"></i><span>Other Settings</span></li>
<li><i class="fa fa-fw fa-user"></i><span>User</span></li>
</ul>
</div>
Here's a solution strictly based on your existing description.
First there is a button, with a click event handler, since you say you want this to happen on a button click. Second, you only want to hide the "inner text". I take this to mean you don't want to hide the <i> tag. The easiest way is to put the text into a span with a class, then it's straightforward to locate - all the find stuff is completely unnecessary, you can use a simple selector:
<div id="side_bar">
<ul>
<li><i class="fa fa-fw fa-cog"></i><span class="menuText">General Settings</span></li>
<li><i class="fa fa-fw fa-cog"></i><span class="menuText">Other Settings</span></li>
<li><i class="fa fa-fw fa-user"></i><span class="menuText">User</span></li>
</ul>
</div>
<button id="myButton" type="button">Click to hide</button>
$(function() {
$("#myButton").click(function() {
$("#side_bar li a .menuText").hide();
});
});
OR, as per your last update, you're certain you can't/won't add a <span> into the markup, you can just hide the text. I've also included a feature to save and restore the text later when the button is clicked, by keeping the text in a data- attribute of the anchor:
<div id="side_bar">
<ul>
<li><i class="fa fa-fw fa-cog"></i>General Settings</li>
<li><i class="fa fa-fw fa-cog"></i>Other Settings</li>
<li><i class="fa fa-fw fa-user"></i>User</li>
</ul>
</div>
<button id="myButton" type="button">Click to hide</button>
$(function() {
$("#myButton").click(function() {
$("#side_bar li a").each(function() {
var el = $(this);
if (el.text() != '') {
el.data('originalText', el.text());
el.text('');
}
else {
el.text(el.data('originalText'));
}
});
});
});
Working fiddle here: http://jsfiddle.net/xcxv682h/1/
when I click on "press me" span text , I need to get "fold2" text() value. I tried to add lot of jquery traverse methods in my script, but I can't find the perfect one.
Because of my <li> including lot of <span> tag available.
HTMl Code:
<li class="favdelParentFold">
<a href="#parentLevel1" data-toggle="collapse" class="" aria-expanded="true">
<span class="caret-right"></span>
</a>
<span class="folder"></span>
<span style="color:red;">fold2</span>
<span data-toggle="modal" data-target="#AddFavorites_ModalDel" class="trashcan">press me</span>
<ul class="collapse in" id="parentLevel1" aria-expanded="true">
</ul>
</li>
JS Code
// when click on "press me" text I need to get span value of fold2
$(document).ready(function() {
$(".favdelParentFold span").click(function(){
var tr=$(this).closet().find('a').text();
alert(tr);//Expecting output is "fold2"
});
});
Working Code
https://jsfiddle.net/atg5m6ym/383/
Via jQuery, simplest way would be (if for some reason there's really no way to put class on your target):
$('.trashcan').on('click', function(e) {
var prev = $(this).prev();
if (prev.length)
{
alert( prev.text() );
}
});
In this case, the code only works if the target is just before the source element.
Another is, assuming your target has a class of .target:
$('.trashcan').on('click', function(e) {
var parent = $(this).closest('.favdelParentFold');
if (parent.length)
{
alert( parent.find('.target').text() );
}
});
Better to have the class so you can move around your target and the code would still work.
Please use it like this: ( Tested )
$(document).ready(function() {
$(".favdelParentFold span").click(function(){
var tr = $(this).prev().text();
alert(tr);//Expecting output is "fold2"
});
});
I have added a class for text - press me text as pressMe. Please find the working jsfiddle. The code is as below:
HTML
<li class="favdelParentFold">
<a href="#parentLevel1" data-toggle="collapse" class="" aria-expanded="true">
<span class="caret-right"></span>
</a>
<span class="folder"></span>
<span style="color:red;">fold2</span>
<span data-toggle="modal" data-target="#AddFavorites_ModalDel" class="trashcan pressMe">press me</span>
<ul class="collapse in" id="parentLevel1" aria-expanded="true"></ul>
</li>
JS
$(document).ready(function () {
$(".pressMe").click(function () {
alert($(this).prev().text());//Expecting output is "fold2"
});
});
Try this.
If you want to get the "fold2" text, you can set click event for span.trashcan alone. On this click event you can get that value by using prev("span").
// when click on "press me" class i need to get span value of fold2
$(document).ready(function() {
$(".favdelParentFold > .trashcan").click(function() {
var tr = $(this).prev('span').text();
alert(tr);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<li class="favdelParentFold">
<a href="#parentLevel1" data-toggle="collapse" class="" aria-expanded="true">
<span class="caret-right"></span>
</a>
<span class="folder"></span>
<span style="color:red;">fold2</span>
<span data-toggle="modal" data-target="#AddFavorites_ModalDel" class="trashcan">press me</span>
<ul class="collapse in" id="parentLevel1" aria-expanded="true">
</ul>
</li>
Hope you are expecting this...
Here is my code for Dropdown Menu Appear and Disappear..
If the class name is "dropdown pull-right" then the menu will be closed
If the class name is "dropdown pull-right open" then the menu will be opened
<li class="dropdown pull-right" id="tobechanged">
<a data-toggle="dropdown" class="dropdown-toggle" aria-expanded="false">
<i class="fa fa-user"></i> Admin <b class="caret"></b>
</a>
</li>
So, i wrote this query
$(".dropdown-toggle" ).click(function() {
console.log(document.getElementById("tobechanged").className);
if (document.getElementById("tobechanged").className == "dropdown pull-right" ) {
console.log('opening menu');
document.getElementsByClassName("dropdown-toggle").className = "dropdown pull-right open";
}
else
{
console.log('closing menu');
document.getElementsByClassName("dropdown-toggle").className = "dropdown pull-right";
}
});
It works only in the first time. If i change to another page only the console console.log('opening menu'); works and the class name is changing..
What is the mistake i am doing and how can i make the class name change ?
Note : I am using angularjs, so the page won't be reloaded entirely
I think you should change the Class of the Parent li Element not the a Element inside it.
The issue I see is that once you execute the line:
document.getElementsByClassName("dropdown-toggle").className = "dropdown pull-right open";
This basically will change your html from :
<li class="dropdown pull-right" id="tobechanged">
<a data-toggle="dropdown" class="**dropdown-toggle**" aria-expanded="false">
<i class="fa fa-user"></i> Admin <b class="caret"></b>
</a>
</li>
into
<li class="dropdown pull-right" id="tobechanged">
<a data-toggle="dropdown" class="**dropdown pull-right open**" aria-expanded="false">
<i class="fa fa-user"></i> Admin <b class="caret"></b>
</a>
</li>
Making basically your element no longer available for click event, because the click is subscribed to an element by class name which you change.
$(".dropdown-toggle" )
Hope this is not too confusing.
A fix plus some additional improvements; no need to search for the elements a couple of times
$(".dropdown-toggle" ).click(function() {
var el = document.getElementById("tobechanged");
if (el.className == "dropdown pull-right" ) {
console.log('opening menu');
el.className = "dropdown pull-right open";
}
else {
console.log('closing menu');
el.className = "dropdown pull-right";
}
});
To do it in in JQuery :
$(".dropdown-toggle" ).click(function() {
$(this).closest('#tobechanged').toggleClass('open');
});
Update:
Demo https://jsfiddle.net/n13svnLL/
<pre>you are assigning class name only for dropdown-toggle so it will work only one time for that you have to assign same class name to id (tobechanged) as well</pre>
if (document.getElementById("tobechanged").className == "dropdown pull-right" ) {
console.log('opening menu');
document.getElementsByClassName("dropdown-toggle").className = "dropdown pull-right open";
document.getElementById("tobechanged").className == "dropdown pull-right open";
}
else
{
console.log('closing menu');
document.getElementsByClassName("dropdown-toggle").className = "dropdown pull-right";
document.getElementById("tobechanged").className == "dropdown pull-right"
}
I have some html that looks like this:
<div class="list-group">
<a id="427" href="#" class="list-group-item"><i class="fa indent0 fa-caret-down"></i>Home</a>
<a id="428" href="#" class="list-group-item"><i class="fa fa-caret-right indent1"></i>Images</a>
<a id="429" href="#" class="list-group-item"><i class="fa fa-caret-right indent1"></i>Videos</a>
<a id="430" href="#" class="list-group-item"><i class="fa indent1 fa-caret-right"></i>Documents</a>
<a id="431" href="#" class="list-group-item" style="display: none;"><i class="fa fa-caret-right indent2"></i>Sub category</a>
<a id="432" href="#" class="list-group-item" style="display: none;"><i class="fa indent2 fa-caret-down"></i>Another sub</a>
<a id="433" href="#" class="list-group-item" style="display: none;"><i class="fa fa-caret-right indent3"></i>Super sub</a>
<a id="434" href="#" class="list-group-item" style="display: none;"><i class="fa fa-caret-right indent2"></i>asdfasdf</a>
<a id="435" href="#" class="list-group-item" style="display: none;"><i class="fa fa-caret-right indent2"></i>asdf</a>
<a id="436" href="#" class="list-group-item"><i class="fa fa-caret-right indent1"></i>Audio</a>
</div>
when I click the .fa I want it to get the indent plus 1 between itself and the next item with the same indent class to unhide.
So in this case,
if we press on id 430, it will show 431, 432, 434 and 435.
Now, that is the easy part. What I need it to also do, is check of any element between 430 and 436 (in this case) and if any of the elements have the class fa-caret-down then it shows the children of that too.
Currently I have made this into a plugin and my code actually works, but I think it could be a lot neater.
I am hoping that some of your gurus will see a simpler solution.
Here is my solution currently:
events: function () {
var self = this;
$(self.element).on("click", ".fa", function (e) {
e.stopPropagation();
var $target = $(this);
var indent = $target.prop('className').match(/\b(indent\d+)\b/)[1];
if ($target.hasClass("fa-caret-right")) {
$target.removeClass("fa-caret-right").addClass("fa-caret-down");
self.showChildren($target.parent(), indent);
if (typeof self.options.onItemExpand === "function") {
self.options.onItemExpand.apply(this, arguments);
}
} else {
var $children = $target.parent().nextUntil("a:has(." + indent + ")");
$target.removeClass("fa-caret-down").addClass("fa-caret-right");
$children.hide();
if (typeof self.options.onItemContract === "function") {
self.options.onItemContract.apply(this, arguments);
}
}
})
},
showChildren: function ($target, className) {
var self = this;
var num = parseInt(className.match(/(\d+)$/)[1], 10);
var $children = $target.nextUntil("a:not(:has(.indent" + (num + 1) + "))");
$.each($children, function (i, item) {
var $item = $(this).find(".fa");
if ($item.hasClass("fa-caret-down")) {
var indent = $item.prop('className').match(/\b(indent\d+)\b/)[1];
self.showChildren($(this), indent);
}
});
$children.show();
}
My solution nearly works (although I hope someone can make it neater) but there is an issue.
If you click Home it will hide all (as expected) but if you click to show again, it will show all but Audio. The same thing happens if you expand down to Documents > Another sub > Super sub and expand that. When you contract it, Audio will vanish.
http://jsfiddle.net/sn92W/
I assume this is to do with nextUntil.
Please help :)