We Keep Coding

Jquery append and modify each of same class

I am trying to take content from a nav bar, and then modify and append it to a mobile menu. The nav bar html looks like
<div id="top_bar" class="nav">
<div class="container">
<div class="row">
<nav class="clearfix">
<span>My Account</span>
<span> Rewards</span>
<span>Customer Service</span>
</nav>
</div>
</div>
</div>
I need to append the anchors above to the following menu and have them work in the format below.
<ul id="stmobilemenu" class="visible-xs visible-sm show">
<li class="stmlevel0">first</li>
<li class="stmlevel0">second</li>
<li class="stmlevel0">third</li>
</ul>
I tried to do this like
var add_to_menu;
$('#top_bar nav a').each(function(){
var line = '<li class="stmlevel0">';
$(this).addClass('ma_level_0');
line += $(this).html();
line += '</li>';
add_to_menu += line;
})
$('#stmobilemenu').append(add_to_menu);
The result of this was it added undefined, then it added only the content
so appeneded was in this type of format.
<li class="stmlevel0"><span>My account</span></li>
what I want it to add is in this type
<li class="stmlevel0"><span>My account</span></li>
Another thing I tried was
$('#stmobilemenu').append(
$('#top_bar nav a').each(function(){
$(this).prepend('<li class="stmlevel0">');
$(this).addClass('ma_level_0');
$(this).append('</li>');
}));
I had a few problems with this though, first of all the append and prepend were not actually surrounding the html I want. It comes out like
<a href="http://127.0.1.1:8080/my-account" class="top-bar-link ma_level_0">
<li class="stmlevel0"></li>
<span>My account</span>
</a>
So I need that li to actually surround the a. Also it actually removed the content of #top_bar nav a from its original spot, which is not what I want it to do. I want it only to copy and add to the mobile menu. Can someone help?

Use clone() to make a copy of each <a>
var $mobMenu= $('#stmobilemenu');// store reference to menu element
$('#top_bar nav a').each(function(){
var $link = $(this).clone().removeClass().addClass('ma_level_0');
$('<li class="stmlevel0">').append($link).appendTo( $mobMenu);
});

var anchors = $('#top_bar nav').children();
anchors.each(function(){
var $this = $(this),
$li = $('<li class="stmlevel0"></li>');
$this.removeClass().addClass('ma_level_0').appendTo($li);
$li.appendTo('#stmobilemenu');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="top_bar" class="nav">
<div class="container">
<div class="row">
<nav class="clearfix">
<span>My Account</span>
<span> Rewards</span>
<span>Customer Service</span>
</nav>
</div>
</div>
</div>
<ul id="stmobilemenu" class="visible-xs visible-sm show">
<li class="stmlevel0">first</li>
</ul>

Disable next navigation link in bootstrap wizard [duplicate]

This question already has answers here:
How to disable HTML links
(16 answers)
Closed 6 years ago.
I have a simple bootstrap wizard. I want to disable the next navigation link based on some condition. Can someone please tell me how to do it using jQuery or CSS or any other method.
<div id="rootwizard">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul>
<li>Item Search</li>
<li>Item Details</li>
<li>Add SPR</li>
</ul>
</div>
</div>
</div>
<div class="tab-content">
<ul class="pager wizard">
<li class="previous first" style="display: none;">First</li>
<li class="previous">Previous</li>
<li class="next last" style="display: none;">Last</li>
<li class="next">Next</li>
</ul>
</div>
Thanks

the below code should work.
Basically it detects when the tab has changed, then it removes any disabled attribute that might exist. Then depending on the tab clicked there is an if statement that sets if the link can be clicked. After that if a disabled link is clicked, simply do nothing.
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var target = $(e.target).attr("href");
$(".wizard a").removeAttr("disabled");
if(target == "#tab3"){
$(".next").attr("disabled","disabled");
}
else if(target == "#tab1"){
$(".previous").attr("disabled","disabled");
}
});
$(".wizard a").on("click", function(event){
if ($(this).is("[disabled]")) {
event.preventDefault();
}
});

Update: Use .prop('disabled',true) instead of .attr('disabled','disabled')
without seeing the rest of your code it's challenging to give an ideal answer for your situation, but you should be able to set a Boolean and check that before allowing the Next button.
You can also apply some CSS to make the button LOOK disabled as well.
var nextOK = true;
$('#mybutt').click(function(){
$('#nextA').prop('disabled',true).css({'color':'red'}); //display:none, or whatever.
nextOK = false;
});
$('#nextA').click(function(e){
if (nextOK) window.location.href = 'http://google.com';
else alert('Button disabled');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div id="rootwizard">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul>
<li>Item Search
</li>
<li>Item Details
</li>
<li>Add SPR
</li>
</ul>
</div>
</div>
</div>
<div class="tab-content">
<ul class="pager wizard">
<li class="previous first" style="display: none;">First
</li>
<li class="previous">Previous
</li>
<li class="next last" style="display: none;">Last
</li>
<li class="next"><a id="nextA" href="#">Next</a>
</li>
</ul>
</div>
<button id='mybutt'>Disable Next Button</button>

With javascript in the browser, you need to wait before the Document Object Model has completely loaded before calling some functions that manipulate the HTML.
You can achieve that by adding a simple document.ready function.
You can then add your condition in the function direcly, or any other code manipulating the HTML.
And lastly, by adding an id to the element you want to use, it would make your life much more easier.
Here is a sample of what it could look like:
document.ready = function() {
//Your condition
if(42 >= 1){
//Select the element and make it point to a void
$('#nextLink').attr('href', 'javascript:void(0)');
}
}
Using javascript:void is a really cross browser solution and works of on older versions (like good old IE).

A delete button is hiding behind another element. How can I make that element to be at the top so it's visible?

I'm trying to draw a delete button right at the right top corner of the collapsible box. I already did it but for some reason I can't make it show at the top of the collapsible element so it's visible. I tried to set it to visibility: visible but I still can't make it visible. Any ideas or suggestions will be appreciated.
Here's my HTML code:
<div data-role='main' class='ui-content' id='collapse'>
<div data-role='collapsible' data-theme='b' data-content-theme='b' data-iconpos='right' data-expanded-icon='collapse' data-collapsed-icon='expand'>
<h4>
<a href='#' data-rel='back' data-role='button' data-icon='delete' data-iconpos='notext' style='position:absolute;top:-20px;right: -10px'>Close</a>
<div class='ui-grid-a'> <div class='ui-block-a textfloatleft' > 1 new </div>
<div class='ui-block-b textfloatright'>January 6th 2016</div>
</div>
<span id='collapstxt'> first </span>
<button href='#' id='bt01' data-icon='check' data-iconpos='right' style='width:100px;' onclick='alert(1);event.stopPropagation();' >Reply</button>
</h4>
<ul data-role='listview'>
<li id='answerstyle'><span id='answerstxt'> first </span>
<div class='ui-block-b answrfloatright'>January 6th 2016</div>
</li>
<li id='answerstyle'>Audi</li>
<li id='answerstyle'>BMW</li>
<li id='answerstyle'>Cadillac</li>
<li id='answerstyle'>Ferrari</li>
</ul>
</div>
</div>
And my jsfiddle example

To get the effect yore looking for you would need to add overflow: visible; to the containing element:
a.ui-collapsible-heading-toggle.ui-btn.ui-icon-expand.ui-btn-icon-right.ui-btn-b { overflow:visible;}
Here is the JS Fiddle

Change max height element after it being clicked

I'm writting a dropdown menu and I wanted to have the dropdown being controlled by javascript.
My dropdown has the sub menu hidden of sight max-height: 0px; and when the correspondent anchor tag is clicked, I change its max-height parameter to 400px, using the following function:
function drop_down(name) {
document.getElementById(name).style.maxHeight = "400px";
}
So far so good. The problem is that the element's max-height, stays at 400px and the sub menu does not hide. So I thought that I should target the click of the mouse and when this happens check if there is any element with 400px and change it back to 0.
$('html').click(function() {
var max_h = document.getElementsByClassName("nav_content");
var i;
for(i = 0 ; i < max_h.length ; i++)
{
if(max_h[i].style.maxHeight == "400px")
{
max_h[i].style.maxHeight = "0px";
}
}
});
What happens is that this function tracks every click, even the one used to display the sub menu. So my question is: is there a way to only activate the second function after I clicked my sub-menu? Because I always want the click that comes after the menu is displayed to close the sub menu.
HTML:
<body>
<div class="nav_container">
<nav class="nav_main">
<div class="logo">
<a href="#">
<img src="../majo.png" alt="logo">
</a>
</div>
<ul class="nav" id="nav">
<li>
Home
</li>
<li>
Consultas
<div id="nav_consul" class="nav_content">
<div class="nav_sub">
<ul>
<li>
Informação Dia a Dia
</li>
<li>
Totais Mensais
</li>
<li>
Tarifário Atual da Rede
</li>
<li>
Data específica
</li>
<li>
Atividade do Sistema
</li>
<li>
Coimas
</li>
</ul>
</div>
</div>
</li>
<li>
Simulações
<div id="nav_simul" class="nav_content">
<div class="nav_sub">
<ul>
<li>
Criar tarifa Simples
</li>
<li>
Criar tarifa Complexa
</li>
<li>
Simular com Nova Tarifa
</li>
</ul>
</div>
</div>
</li>
<li>
Preferências
<div id="nav_prefs" class="nav_content">
<div class="nav_sub">
<ul>
<li>
Lista de acessos
</li>
<li>
Alterar Password
</li>
<li>
Alterar Dados de Conta
</li>
</ul>
</div>
</div>
</li>
<li>
Log Out
</li>
</ul>
</nav>
</div>
<div id="content_main">
</div>
<footer></footer>
<script src="../js/jQuery.js"></script>
<script src="../js/user_menu.js"></script>
<script src="../js/user_nav.js"></script>
<script src="../js/user_clear_sub_menu.js"></script>
</body>

Here is an easy solution:
Create the following CSS-Styles:
.nav_content.visible {
max-height: 400px;
}
.nav_content.invisible {
max-height: 0px;
}
Set the overflow property for your nav_content to hidden:
.nav_content{
overflow: hidden;
}
Now add the class invisible to your submenus, if you want them to be invisible by default (you can do this manually in the markup or by js code):
Manually e.g.:
<div id="nav_prefs" class="nav_content invisible">
or by code (after the elements have been loaded):
$(".nav_content").addClass("invisible);
Now, if you just need to adjust your drop_down function to toggle the element's invisible/visible class:
function drop_down(dropdownID){
$('#'+dropdownID).toggleClass("visible invisible");
}
UPDATE: To make all visible submenus disappear when clicked elsewhere use this piece of code, when the window is loaded:
$(document).on('click', function (e) {
if (!$(e.target).is('.nav_item') && !$(".nav_item").has(e.target).length !== 0) {
$('.nav_content.visible').toggleClass("visible invisible");
}
});
If you only want to have one submenu visible at a time, you can use this version of your drop_down function:
function drop_down(dropdownID) {
$('.nav_content.visible').toggleClass("visible invisible");
$('#' + dropdownID).toggleClass("visible invisible");
}
A working fiddle can be found here
EDIT: Since you used jQuery in your original code, I assumed the answer can use jQuery too

You'll want to create a click handler on your document, then check the target of the click. If the target of the click has a certain class, use the menu behavior. If not, or if it's a sub-menu, close the menu.
Here's a question with multiple examples:
How do I close menu on click and when the user clicks away?
Also, I'd recommend not using max-height to hide and show. Since you're using jquery already, you could just use hide() and show().
One more thing: since you're using jquery already, you don't need to use these calls: document.getElementById(name). You can do a $("#yourId") or for document.getElementsByClassName("nav_content"); you can use $(".your-class")

It looks like you attached click event to entire document. I think you need to change only $('html').click(function() { to something like $('sub-menu-selector').click(function() { to
only activate the second function after I clicked my sub-menu
Aside to that, since it's only piece of jQuery and if you're not using it elsewhere, I would replace this with addEventListener and attachEvent, but maybe that's just me :)

In that case you can use jQuery.not() method to exclude the dropdown menu from your jQuery selection, here's what you need :
$('html').not(document.getElementsByClassName("nav_container")[0]).click(function() {
//As you can pass an element to it
You can also use the :not in your first selector like this:
$('html:not(div.nav_container))

How to close all elements that are opened with jquery? (Behavior similar to the accordion menu)

I have this html code:
<div id="menu">
<ul id="menuFuncionalidades">
<li>
<div class="menuFuncionalidades_categoria">
Index</div>
</li>
<li>
<div class="menuFuncionalidades_categoria">
Cadastros</div>
<div class="menuFuncionalidades_content_links">
<div class="menuFuncionalidades_content_links_descricao">
<span class="menuFuncionalidades_content_links_descricao_titulo">Descrição</span>
<div class="menuFuncionalidades_content_links_descricao_texto">
Lorem Ipsum...
</div>
</div>
<div class="menuFuncionalidades_content_links_links">
<ul><b>Acesso Usuario</b>
<li>Pesquisar </li>
<li>Incluir </li>
<li>Alterar </li>
<li>Consultar </li>
</ul>
<ul><b>Produto</b>
<li>Pesquisar </li>
<li>Incluir </li>
</ul>
<ul><b>Perfil</b>
<li>Pesquisar </li>
<li>Incluir </li>
</ul>
</div>
</div>
</li>
<li>
<div class="menuFuncionalidades_categoria">
Coletores</div>
<div class="menuFuncionalidades_content_links">
<div class="menuFuncionalidades_content_links_descricao">
<span class="menuFuncionalidades_content_links_descricao_titulo">Descrição</span>
<div class="menuFuncionalidades_content_links_descricao_texto">
Lorem Ipsum...
</div>
</div>
<div class="menuFuncionalidades_content_links_links">
<ul>
<b>Coletor 1</b>
<li>Pesquisar </li>
<li>Incluir </li>
</ul>
<ul>
<b>Coletor 2</b>
<li>Pesquisar </li>
<li>Incluir </li>
</ul>
<ul>
<b>Coletor 3</b>
<li>Pesquisar </li>
<li>Incluir </li>
</ul>
</div>
</div>
</li>
</ul>
</div>
My objective is when i click in a menuFuncionalidades_categoria i close all menuFuncionalidades_content_links that is opened, and opened the right one that is in the same level of the menuFuncionalidades_categoria that i click. So, i try this, but i have no success:
$(document).ready(function () {
$('#menuFuncionalidades > li > .menuFuncionalidades_categoria').click(function () {
$("#menu").children().find('.menuFuncionalidades_content_links').each(function () {
// I need a code here to close only the tags that are opened but is not the current
if ($(this).css('display') == 'block') {
$(this).hide();
}
});
$(this).parent().find('.menuFuncionalidades_content_links').slideToggle('normal').css('width', $('#menu').css('width'));
});
});
What am i missing or doing wrong?
OBS: The behavior that i want, is similar with accordion menu.
DEMO here: http://fiddle.jshell.net/ry9dz/1/

As #karim79 says, you can't check "display" that way - it's a css attribute, not an html attribute.
On the other hand, if you want to close all other entries, then just do that - no need to check if they are visible first! I also suggest you use a more efficient event handler for all your items, instead of binding it to all of them. Using jQuery 1.7, something like this would work:
$(document).ready(function () {
$("#menuFuncionalidades").on("click", ".menuFuncionalidades_categoria", function(event) {
var selectedMenu = $(event.target).parents("li").find(".menuFuncionalidades_content_links")
, visible = selectedMenu.is(":visible");
// Hide all others
$("#menuFuncionalidades .menuFuncionalidades_content_links").hide();
// Show this one unless it was already visible
if(!visible) {
selectedMenu
.slideToggle('normal')
.css('width', $('#menu').css('width'));
}
// Prevent the default action
event.preventDefault();
});
});

You can hide multiple elements without iterating though all of them to see which ones aren't hidden.
Replace;
$("#menu").children().find('.menuFuncionalidades_content_links').each(function () {
if ($(this).attr('display') == 'block') {
$(this).hide();
}
});
with;
$("#menu").find('.menuFuncionalidades_content_links').hide();
$(this).attr('display') is invalid as there are no "display" attribute and instead of using .css('display') == 'block' you could simply use the psuedo selector :visible.

You want the display css property:
if ($(this).css('display') == 'block') {
$(this).hide();
}
or:
if ($(this).is(':visible')) {
$(this).hide();
}