We Keep Coding

Track display of div and change display of another div accordingly

I want to change the display of a div when display of another div inside tab layout changes.
div with id noshow should be hidden when tabs(id: tab-flyouts ) are open and vice-versa.
I have tried checking visibility of tab-flyouts and change the visibility of 'noshow' div accordingly but did not work.
<div class="tab-menu">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
</div>
<div class="tab-flyouts" id="tab-flyouts" style="display:none">
<div class="vc_row wpb_row vc_row-fluid">
<div id="t1" style="display:none">
Tab 1 content
</div>
<div id="t2" style="display:none">
Tab 2 content
</div>
<div id="t3" style="display:none">
Tab 3 content
</div>
</div>
</div>
<div id="noshow">
This needs to be hidden when tabs are open
</div>
and here is jquery for tabs.
$(document).ready(function() {
$('.tab-menu li > a').on('click', function (e) {
e.preventDefault();
var $this = $(this);
var $tabName = $(this).attr('href');
var $tabFlyout = $('.tab-flyouts');
$(this).toggleClass('active').closest('li').siblings().children('a').removeClass('active');
if ($tabFlyout.is(':visible')){
if ($this.hasClass('active')) {
$('body').addClass('active-tab-menu');
var $activeTab = $tabFlyout.find('div' + $tabName);
$activeTab.siblings(':visible').fadeOut();
$activeTab.fadeIn();
var $h2s = $activeTab.find('.filters').siblings('h2');
$h2s.each(function () {
var $this = $(this);
var $listOfLinks = $this.next('.list-of-links');
if ($listOfLinks.is(':visible')) {
if (!$listOfLinks.children('li:visible').length) {
$this.hide();
} else {
$this.show();
}
}
});
if (!$activeTab.find('h2:visible').length && !$activeTab.find('.no-results')) {
$activeTab.find('.no-search-results').show();
}
} else{
$('body').removeClass('active-tab-menu');
$tabFlyout.slideUp(function () {
$tabFlyout.children('.wrapper > div').hide();
});
}
} else {
$('body').addClass('active-tab-menu');
var $activeTab = $tabFlyout.find('div' + $tabName);
$activeTab.show().siblings().hide().end().end().slideDown('fast', function () {
$('body').trigger('tab_flyout.open');
});
}
});
});
https://codepen.io/anon/pen/ooXdLd

If you want to hide the noshow DIV when all tabs are open, this is not possible based on your code because you are always showing one tab at time, and other tabs are hidden.
But, if you want to hide the noshow DIV when only one tab is open:
Add a $('noshow').show() when tabs are hidden.
And, add a $('noshow').hide() when any tab is shown.
Or, Add $('noshow').toggle() to switch between them.

jQuery attribute auto switch

am trying to make a svg animation attribute switch with a setTimeout function.
Part of animation works when i add the "jQuery('#animation2').attr('xlink:href', '#core_type');" in setTimeout function but when i add the variable it does nothing. here is the code:
var AttributeOne = jQuery('#animation2').attr('xlink:href', '#core_type');
var AttributeTwo = jQuery('#animation1').attr('xlink:href', '#core_type');
var AttributeSwitch = AttributeOne;
(function theLoop (i) {
if(AttributeSwitch == AttributeOne) {
AttributeSwitch = AttributeTwo;
} else {
AttributeSwitch = AttributeOne;
}
setTimeout(function () {
AttributeSwitch
if (--i) {
theLoop(i);
}
}, 6000);
})(100);

Try this demo, it is pretty much what you want. Add your own CSS to it.
HTML :
<div id="tabs">
<ul class="tabs" id="tabsnav">
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
<li>Tab 4</li>
</ul>
<div id="tab-1">
Contents for tab 1
</div>
<div id="tab-2">
Contents for tab 2
</div>
<div id="tab-3">
Contents for tab 3
</div>
<div id="tab-4">
Contents for tab 4
</div>
</div>
JAVASCRIPT:
jQuery(document).ready(function () {
jQuery("#tabs > div").hide(); // hide all child divs
jQuery("#tabs div:first").show(); // show first child div
jQuery("#tabsnav li:first").addClass("active");
jQuery(".menu-internal").click(function () {
jQuery("#tabsnav li").removeClass("active");
var currentTab = jQuery(this).attr("href");
jQuery('#tabsnav li a[href="' + currentTab + '"]')
.parent()
.addClass("active");
jQuery("#tabs > div").hide();
jQuery(currentTab).show();
return false;
});
// Create a bookmarkable tab link
hash = window.location.hash;
elements = jQuery('a[href="' + hash + '"]'); // look for tabs that match the hash
if (elements.length === 0) {
// if there aren't any, then
jQuery("ul.tabs li:first").addClass("active").show(); // show the first tab
} else {
elements.click();
} // else, open the tab in the hash
});

how to set selected value from ul li based drop down to SELECTED

I want to set the selected value as selected just like in select box, but i cannot do it, following is my HTML, i have also attached the Fiddle with it so that i can show my CSS too,
<section class="main">
<div class="wrapper-demo">
<div id="dd" class="wrapper-dropdown-2" tabindex="1">
select Color
<ul class="dropd">
<li style="border-right-color:#F6EB61" value="F6EB61">
<a>100 C</a>
</li>
<li style="border-right-color:#F7EA48" value="F7EA48">
<a>101 C</a>
</li>
<li style="border-right-color:#FCE300" value="FCE300">
<a>102 C</a>
</li>
</div>
</div>
</section>
This is my Java script code
$(document).ready(function (e)
{
function DropDown(el) {
this.dd = el;
this.initEvents();
}
DropDown.prototype = {
initEvents: function () {
var obj = this;
obj.dd.on('click', function (event) {
$(this).toggleClass('active');
event.stopPropagation();
});
}
}
var dd = new DropDown($('#dd'));
$(document).click(function () {
// all dropdowns
$('.wrapper-dropdown-2').removeClass('active');
});
});
Demo FIDDLE
http://jsfiddle.net/h65gbpu0/4/

something like this? http://jsfiddle.net/h65gbpu0/6/
$(document).ready(function() {
$('.dropd li').on('click', function() {
console.log('clicked');
var val = $(this).find('a').html();
var col = '#' + $(this).attr('value');
console.log(col);
$('.selected').css('border-right', '20px solid' + col);
$('.selected').html(val);
});
});
<div class="selected" style="margin-right:30px;"> select Color</div>

I have a menu and I don't how to use proprely slideToggle, to slideDown and slideUp when i pressed another li from ul?

I have a function for main menu :
$('.main-menu-left > li > div').each(function(){
if( $(this).next('.sub-menu').length ){
$(this).on('click', function(e){
e.preventDefault();
$(this).parent('li').find('.sub-menu').slideDown('slow');
});
}
});
And a function for slide up menu:
$('body').on('click', function(){
if( $('.sub-menu').is(':visible') ){
$('.sub-menu').slideUp();
}
});
<ul id="menu-left" class="main-menu-left">
<li>
<div class="group-menu"><span>Browse</span><a id="first-li"><p class="menu-text"><i class="icon-small-arrow-gold"></i>Blinds</p></a></div>
<ul class="sub-menu">
<li><span>Explore</span><u>+</u>Wooden Blinds<b>(18 collections)</b>
<ul class="list-products">
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-3 col-lg-3">
<li><a class="title">Next day<p class="details">no Samples of Verticals Blinds</p></a></li>
<li><a class="title">Blackout<p class="details">96 Samples of Verticals Blinds</p></a></li>
<li><a class="title">Pattern<p class="details">120 Samples of Verticals Blinds</p></a></li>
<li><a class="title">Wipeable<p class="details">30 Samples of Verticals Blinds</p></a></li>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
<p class="text-explore">&explore all <s>Vertical Blinds</s> </p>
</div>
</div>
</div>
</ul>
</li>
<li><span>Explore</span><u>+</u>Venetians Blinds<b>(20 collections)</b></li>
</ul>
</li>
<li class="hidden-md hidden-sm hidden-xs"><a><p class="menu-text"><i class="icon-small-arrow-gold"></i>Roman</p></a></li>
</ul>
This is html code, for my menu.
It's opening and closing simultaneously. And how can i do to close an li and open other on click ?

You need to bind as different functions so that you can unbind the body click and the fire the slide open, slide closed separately. This is how I would write it:
//Wrap it in a function to avoid conflict. Pass in menu as an object we will use inside
(function ($, menu, undefined) {
//this is the initialiser function
menu.init = function() {
//Store the subNavs as a jQuery array so we can loop them
var subNavs = $('.sub-menu');
//Check there are members in the array
if( subNavs.length > 0 ){
//for each member run the initialiser
$(subNavs).each(function(i, subNav) {
//Select the head of the sub-menu in the DOM. In this case it is a sibling
$(subNav).siblings('.group-menu').on('click', function(e){
//prevent the default action of the click and stop it propagating up to the body
e.preventDefault();
e.stopPropagation();
//test if this is an open menu or closed and send each one to a different handler
if ($(subNav).hasClass('open')) {
menu.clickOff($(subNav));
}
else {
menu.clickOn($(subNav));
}
});
});
}
};
menu.clickOn = function(el) {
//set the element as 'open'
el.addClass('open');
//bind the body click handler
$('body').on('click', menu.clickBody);
//Do the slide down!
el.slideDown('slow');
};
menu.clickOff = function(el) {
//set the element as not 'open'
el.removeClass('open');
$('body').unbind('click', menu.clickBody);
//Do the slide up!
el.slideUp('slow');
};
menu.clickBody = function(e) {
//check if the target is the open menu item itself or part of it
if ($(e.target).closest('.sub-menu.open').length == 0) {
//If not, pass it through to the close handler
menu.clickOff($('.sub-menu.open'));
}
};
//call the initialiser() on page load
menu.init();
}(jQuery, window.menu = window.menu || {}, ""));
You can view the fiddle of this here: http://fiddle.jshell.net/h6Xnb/2/
Hope it helps.

Add new div in a nested HTML structure

I have this html structure and code:
<ul class="navMore">
<li>Link 1</li>
<li href="#"><a>Link 2</a><?li>
</ul>
<div class="row-fluid"></div>
$(".navMore li a").each(function() {
$(this).on("click", function() {
$('<div class="row-fluid"></div>').insertAfter($(this).closest('.row-fluid'));
$('<div id="content" class="span4"></div>').insertAfter($(this).next('.row-fluid'));
});
});
I need to add a new .row-fluid div just after the previous .row-fluid
Expected result:
<ul class="navMore">
<li>Link 1</li>
<li href="#"><a>Link 2</a><?li>
</ul>
<div class="row-fluid"></div>
<div class="row-fluid"></div>
But if we already added a new .row-fluid div, then the #content div should be put inside this newly added row-fluid div
How do I achieve this?
<ul class="navMore">
<li>Link 1</li>
<li href="#"><a>Link 2</a><?li>
</ul>
<div class="row-fluid"></div>
<div class="row-fluid">
<div id="content" class="span4"></div>
</div>
Finally, how can I do that if we have inserted 3 #content div, start again with a new .row-fluid div and all again?

Here you go.
<script type="text/javascript" >
$(document).ready(function () {
$(".navMore li a").click(function() {
var countOfDiv = $(".row-fluid").length;
if(countOfDiv < 2)
$('<div class="row-fluid"></div>').insertAfter(".row-fluid");
else
$(".row-fluid:last").html("<div id=\"content\" class=\"span4\"></div>");
});
});
</script>
Link 1
Link 2

function insertRow() {
$newdiv = $("<div class='row-fluid'/>");
$newdiv.insertAfter(".row-fluid:last");
return $newdiv;
}
// assume you're passing a content object into the routine
function insertContent( contentObj) {
$lastRow = $(".row-fluid:last");
if( $lastRow.children().length >= 3) {
insertRow().append( contentObj);
} else {
$lastRow.append( contentObj);
}
return contentObj;
}

Eventually I went with this:
$(".navMore li a").on("click", function() {
var $el = $(this);
var $row = $el.closest('.row');
if($row.next('.new').length){
$('<div class="span"></div>').appendTo('.new');
}
else {
$('<div class="new"></div>').insertAfter($row);
$('<div class="span"></div>').appendTo('.new');
}
});