Pull the active list node item in 2nd position

Pull the active list node item in 2nd position - javascript

I have a list of items. I have node id of the 'active' class.
I want to get the active flex node_id and pull the active list item to the center position. I want to match the active_slide node_id with list item class and pull the item to center position.
eg: 233 is 'active_slide'. I want to compare the node_id and pull the list item and pull the item to center position like 69,233,299
jQuery(document).ready(function($){
setTimeout(function(){
var node_id = $('.flex-active-slide .node_id').text();
$('.thumbnailIcon').each(function(index, item){
$('.'+node_id+'li:eq(1)').before($('.thumbnailIcon li:eq(2)'));
});
},1000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="parent flex-active-slide">
<div class="node_id"><span>233</span></div>
<ul class="thumbnailIcon">
<li>left</li>
<li class="233">1</li>
<li class="69">2</li>
<li class="299">3</li>
<li>right</li>
</ul>
</li>
<li class="parent">
<div class="node_id"><span>222</span></div>
<ul class="thumbnailIcon">
<li>left</li>
<li class="233">1</li>
<li class="69">2</li>
<li class="299">3</li>
<li>right</li>
</ul>
</li>
<a href="#" class="flex-next">click<a>
<li class="parent">
<div class="node_id"><span>333</span></div>
<ul class="thumbnailIcon">
<li>left</li>
<li class="233">1</li>
<li class="69">2</li>
<li class="299">3</li>
<li>right</li>
</ul>
</li>

You could use the item element you already get from each and then re-order the li by insertAfter:
See a Fiddle here:
jQuery(document).ready(function($){
setTimeout(function(){
var node_id = $('.flex-active-slide .node_id').text();
$('.thumbnailIcon').each(function(index, item){
$(item).find('.'+node_id).insertAfter($(item).find('li:eq(2)'));
});
},1000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="parent flex-active-slide">
<div class="node_id"><span>233</span></div>
<ul class="thumbnailIcon">
<li>left</li>
<li class="233">1</li>
<li class="69">2</li>
<li class="299">3</li>
<li>right</li>
</ul>
</li>
<li class="parent">
<div class="node_id"><span>222</span></div>
<ul class="thumbnailIcon">
<li>left</li>
<li class="233">1</li>
<li class="69">2</li>
<li class="299">3</li>
<li>right</li>
</ul>
</li>
<a href="#" class="flex-next">click<a>
<li class="parent">
<div class="node_id"><span>333</span></div>
<ul class="thumbnailIcon">
<li>left</li>
<li class="233">1</li>
<li class="69">2</li>
<li class="299">3</li>
<li>right</li>
</ul>
</li>

Related

Anyone knows How to Auto Select an option from <Li> Javascript HTML

Here is the element I got from a ebsite
I want to make a script that I can use to auto select a size (Like 12).
<div class="select-size select-size-detail" id="sizeOptions" style="display: block;">
<div></div>
<ul class="select-box-size">
<li currupc="00886737650974">6.5</li>
<li currupc="00886737650981">7</li>
<li currupc="00886737659267">7.5</li>
<li currupc="00886737659274">8</li>
<li currupc="00886737659281">8.5</li>
<li currupc="00886737659304">9</li>
<li currupc="00886737659328">9.5</li>
<li currupc="00886737659335">10</li>
<li currupc="00886737659342">10.5</li>
<li currupc="00886737659359">11</li>
<li currupc="00886737659397">12</li>
</ul>
</div>
</div>

$('li').click(function(){
$('li').each(function(){ $(this).css({'border-style':'none'}); });
$(this).css({'border-style':'solid','border-width':'2px','border-color':'gray'});
alert('Select '+$(this).text() );
});
function click_li_by_value(_value){
$('li').each(function(){
var li_text=$(this).text();
if(li_text==_value){
$(this).click();
}
});
}
click_li_by_value('12'); //or '11' or '10.5'
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="select-size select-size-detail" id="sizeOptions" style="display: block;">
<div>
<ul class="select-box-size">
<li currupc="00886737650974">6.5</li>
<li currupc="00886737650981">7</li>
<li currupc="00886737659267">7.5</li>
<li currupc="00886737659274">8</li>
<li currupc="00886737659281">8.5</li>
<li currupc="00886737659304">9</li>
<li currupc="00886737659328">9.5</li>
<li currupc="00886737659335">10</li>
<li currupc="00886737659342">10.5</li>
<li currupc="00886737659359">11</li>
<li currupc="00886737659397">12</li>
</ul>
</div>
</div>

Fade in and fade out elements with hover in jQuery

I'm working with a menu. If the user moves the cursor over principal elements of the menu, it shows a sub-menu (it has a delay to hide), but if I move the cursor over another principal element, the previous element is still showing behind the new element (and is only hide passing the delay).
How can hide the previous element when I pass the cursor over another principal element?
Below is the menu:
$('li.dropdown').hover(function() {
$(this).find('.dropdown-menu').stop(true, true).delay(100).fadeIn(100);
}, function() {
$(this).find('.dropdown-menu').stop(true, true).delay(1000).fadeOut(100);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="main-menu" class="nav navbar-nav ref">
<li class="dropdown dropdown-large option">
<a id="drop-to" href="#" class="dropdown-toggle firstTextOption">P element</a>
<ul class="dropdown-menu dropdown-menu-large row change-f">
<li class="col-sm-4 option-sm">
<ul>
<li> </li>
<li class="dropdown-header title">subelement</li>
<li class="dropdown-header title">subelement</li>
<li class="dropdown-header title">subelement</li>
<li> </li>
</ul>
</li>
</ul>
</li>
<li class="dropdown dropdown-large option">
<a id="drop-to" href="#" class="dropdown-toggle firstTextOption">P element</a>
<ul class="dropdown-menu dropdown-menu-large row change-f">
<li class="col-sm-4 option-sm">
<ul>
<li> </li>
<li class="dropdown-header title">subelement</li>
<li class="dropdown-header title">subelement</li>
</ul>
</li>
</ul>
</li>
</ul>

I changed your second menu id to #drop-two.
$(document).ready(function(){
$('.dropdown-menu, .dropdown-menu2').hide();
$('#drop-to').mouseover(function() {
$('.dropdown-menu').fadeIn();
})
$('#drop-to').mouseout(function() {
$('.dropdown-menu').fadeOut(1000);
})
$('#drop-two').mouseover(function() {
$('.dropdown-menu2').fadeIn();
})
$('#drop-two').mouseout(function() {
$('.dropdown-menu2').fadeOut(1000);
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="main-menu" class="nav navbar-nav ref">
<li class="dropdown dropdown-large option">
<a id="drop-to" href="#" class="dropdown-toggle firstTextOption">P element</a>
<ul class="dropdown-menu dropdown-menu-large row change-f">
<li class="col-sm-4 option-sm">
<ul>
<li> </li>
<li class="dropdown-header title">subelement</li>
<li class="dropdown-header title">subelement</li>
<li class="dropdown-header title">subelement</li>
<li> </li>
</ul>
</li>
</ul>
</li>
<li class="dropdown dropdown-large option">
<a id="drop-two" href="#" class="dropdown-toggle firstTextOption">P element</a>
<ul class="dropdown-menu2 dropdown-menu-large row change-f">
<li class="col-sm-4 option-sm">
<ul>
<li> </li>
<li class="dropdown-header title">subelement</li>
<li class="dropdown-header title">subelement</li>
</ul>
</li>
</ul>
</li>
</ul>

Dropdown menu on click

I have tried numerous JS queries and none seem to be working.
I want to only show my dropdown menus when the list item they relate to is clicked, they need to show until the user either clicks off the ul or clicks a link.
Here is my html:
<div class="sub-nav">
<div class="container">
<ul>
<li class="active">All</li>
<li>Videos</li>
<li>Images</li>
<li>Maps</li>
<li>News</li>
<a href="#">
<li id="has-sub">More
<ul>
<li>Shopping</li>
<li>Books</li>
<li>Flights</li>
<li>Apps</li>
</ul>
</li>
</a>
<a href="#">
<li id="search-tools">Search Tools
<ul>
<li id="has-sub">Any Country</li>
<li id="has-sub">Any Time</li>
<li id="has-sub">All Results</li>
</ul>
</li>
</a>
</ul>
</div>
</div>

Try this:
$("li:has(ul)").click(function(){
$("ul",this).toggle('slow');
});
Make sure you have the jQuery library.

In this solution dropdown menus collapse when a link is clicked as you asked.
$('a').click(function(){
$('.container ul:not(:first-child)').hide();
if($(this).next().is('ul')){
$(this).next().toggle('slow');
}
});
ul ul{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sub-nav">
<div class="container">
<ul>
<li class="active">All</li>
<li>Videos</li>
<li>Images</li>
<li>Maps</li>
<li>News</li>
<a href="#"><li id="has-sub">More
<ul>
<li>Shopping</li>
<li>Books</li>
<li>Flights</li>
<li>Apps</li>
</ul>
</li></a>
<a href="#"><li id="search-tools">Search Tools
<ul>
<li id="has-sub">Any Country</li>
<li id="has-sub">Any Time</li>
<li id="has-sub">All Results</li>
</ul>
</li></a>
</ul>
</div>
</div>

<div class="sub-nav">
<div class="container">
<ul>
<li class="active">All</li>
<li>Videos</li>
<li>Images</li>
<li>Maps</li>
<li>News</li>
<li id="has-sub">More
<ul>
<li>Shopping</li>
<li>Books</li>
<li>Flights</li>
<li>Apps</li>
</ul>
</li>
<li id="search-tools">Search Tools
<ul>
<li id="has-sub">Any Country</li>
<li id="has-sub">Any Time</li>
<li id="has-sub">All Results</li>
</ul>
</li>
</ul>
</div>
</div>
this should work

Load jQuery library alternatively you can use like this.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Apply style to your menu html as below
<style>
li > ul{display:none;}
.show {display:block;}
</style>
Now this is what you are looking for.
<script>
jQuery("li:has(ul)").click(function(){
jQuery("ul",this).toggleClass('show');
});
</script>
$("li:has(ul)").click(function(){
$("ul",this).toggleClass('show');
});
li > ul{display:none;}
.show {display:block;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sub-nav">
<div class="container">
<ul>
<li class="active">All</li>
<li>Videos</li>
<li>Images</li>
<li>Maps</li>
<li>News</li>
<a href="#"><li id="has-sub">More
<ul>
<li>Shopping</li>
<li>Books</li>
<li>Flights</li>
<li>Apps</li>
</ul>
</li></a>
<a href="#"><li id="search-tools">Search Tools
<ul>
<li id="has-sub">Any Country</li>
<li id="has-sub">Any Time</li>
<li id="has-sub">All Results</li>
</ul>
</li></a>
</ul>
</div>
</div>
Use jQuery instead of $, because some frameworks or cms tools have conflict with it. So jQuery works always.

Get all list items that do not have a data attribute that starts with value

I have a list of elements that each have a data-name attribute. I want to select all elements that do not start with the prefix "arc" and hide them.
<ul id="slides">
<li data-name="arc_1">...</li>
<li data-name="arc_2">...</li>
<li data-name="biz_1">...</li>
<li data-name="biz_2">...</li>
<li data-name="cas_1">...</li>
<li data-name="cas_2">...</li>
<li data-name="cas_3">...</li>
<li data-name="prd_1">...</li>
</ul>
I have tried to use $('#slides li[data-name^="arc"]') but it selects the opposite of what it need.

Use :not():
$('#slides li:not([data-name^="arc"])')
$('#slides li:not([data-name^="arc"])').css('color','red')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="slides">
<li data-name="arc_1">...</li>
<li data-name="arc_2">...</li>
<li data-name="biz_1">...</li>
<li data-name="biz_2">...</li>
<li data-name="cas_1">...</li>
<li data-name="cas_2">...</li>
<li data-name="cas_3">...</li>
<li data-name="prd_1">...</li>
</ul>

Show / Hide UL based on link clicked

I would like to show / hide UL's based on what link is clicked, not sure if this is the best way?
JS Fiddle: http://jsfiddle.net/zangief007/rj8g0yh4/1/
HTML:
<ul class="category-1 group">
<li class="name">JOHN Smithe QC</li>
<li class="call">DDI <span>09 333 4545</span></li>
<li class="call">MOB <span>027 545 6987</span></li>
<li>david.heaney#heaneypartners.com</li>
</ul>
<ul class="category-3 group">
<li class="name">Barry White</li>
<li class="call">DDI <span>021 487 5896</span></li>
<li class="call">MOB <span>024 787 9854</span></li>
<li>susan.thodey#heaneypartners.com</li>
</ul>
<ul class="category-2 group">
<li class="name">Peter Pan</li>
<li class="call">DDI <span>231234</span></li>
<li class="call">MOB <span>234234</span></li>
<li>23423423423</li>
</ul>
JS:
$(document).ready(function () {
$(function() {
var curPage="";
$("#selectMe-desk li a").click(function() {
if (curPage.length) {
$("#"+curPage).hide();
}
curPage=$(this).data("category-");
$(""+curPage).show();
});
});
});

You had several errors in both your JS and HTML. I also simplified bits of your code. Here is the fixed version: http://jsfiddle.net/rj8g0yh4/2/
HTML:
<ul class="filter-desk" id="selectMe-desk">
<li class="category-1"><a class="active" href="#" data-page="category-1">Partners</a></li>
<li class="category-2"><a class="" href="#" data-page="category-2">Consultants</a></li>
<li class="category-7"><a class="" href="#" data-page="category-7">Senior Associates</a></li>
<li class="category-8"><a class="" href="#" data-page="category-8">Associates</a></li>
<li class="category-9"><a class="" href="#" data-page="category-9">Solicitors</a></li>
<li class="category-10"><a class="" href="#" data-page="category-10">Management</a></li>
<li class="category-3"><a class="" href="#" data-page="category-3">PA's</a></li>
</ul>
<ul class="category-1 group">
<li class="name">JOHN Smithe QC</li>
<li class="call">DDI <span>09 333 4545</span></li>
<li class="call">MOB <span>027 545 6987</span></li>
<li>david.heaney#heaneypartners.com</li>
</ul>
<ul class="category-3 group">
<li class="name">Barry White</li>
<li class="call">DDI <span>021 487 5896</span></li>
<li class="call">MOB <span>024 787 9854</span></li>
<li>susan.thodey#heaneypartners.com</li>
</ul>
<ul class="category-2 group">
<li class="name">Peter Pan</li>
<li class="call">DDI <span>231234</span></li>
<li class="call">MOB <span>234234</span></li>
<li>23423423423</li>
</ul>
JS:
$(function() {
$('.group').hide();
$('.category-1').show();
$("#selectMe-desk li a").click(function() {
var $a = $(this);
$(".group").hide().filter("."+$a.data("page")).show();
});
});

We Keep Coding

JavaScript is the programming language of the Web.

Pull the active list node item in 2nd position - javascript

Related

Anyone knows How to Auto Select an option from <Li> Javascript HTML

Fade in and fade out elements with hover in jQuery

Dropdown menu on click

Get all list items that do not have a data attribute that starts with value

Show / Hide UL based on link clicked

Categories

Resources