I made a unordered list that randomizes its list items, of which I only want to show 5 on normal screen sizes and 3 on smaller screen sizes.
By using the jQuery slice() function I remove the other list items based on window size.
However, after reaching <650px window size (where it slices to 3 items), I can't seem to re-append the removed list items when going back to >650px window size.
I tried to use the detach() function but can't get it to work so far.
This is my code:
function showHide() {
var displayDefaultLarge = $("ul li").slice(5);
var displayDefaultSmall = $("ul li").slice(3);
var insertLarge = displayDefaultLarge;
if ($(window).width() < 650) {
insertLarge = displayDefaultSmall.detach();
} else {
insertLarge.appendTo("ul");
insertLarge.detach();
}
}
showHide();
$(window).resize(function() {
showHide();
});
A Jsfiddle to show what's going wrong can be found here: https://jsfiddle.net/ccmrfb4z/
Thanks in advance.
one option, instead of using javascript is to use css media queries:-
li {
display: inline-block;
}
/* standard - show 5 */
li:nth-child(n+6) {
display: none;
}
/* less than 650 - show 3 */
#media (max-width: 650px) {
li:nth-child(n+4) {
display: none;
}
}
<ul>
<li>
<a href="#">
<div class="item">
<img src="http://placehold.it/50x50">
</div>
<p>Name</p>
</a>
</li>
<li>
<a href="#">
<div class="item">
<img src="http://placehold.it/50x50">
</div>
<p>Name</p>
</a>
</li>
<li>
<a href="#">
<div class="item">
<img src="http://placehold.it/50x50">
</div>
<p>Name</p>
</a>
</li>
<li>
<a href="#">
<div class="item">
<img src="http://placehold.it/50x50">
</div>
<p>Name</p>
</a>
</li>
<li>
<a href="#">
<div class="item">
<img src="http://placehold.it/50x50">
</div>
<p>Name</p>
</a>
</li>
<li>
<a href="#">
<div class="item">
<img src="http://placehold.it/50x50">
</div>
<p>Name</p>
</a>
</li>
<li>
<a href="#">
<div class="item">
<img src="http://placehold.it/50x50">
</div>
<p>Name</p>
</a>
</li>
<li>
<a href="#">
<div class="item">
<img src="http://placehold.it/50x50">
</div>
<p>Name</p>
</a>
</li>
<li>
<a href="#">
<div class="item">
<img src="http://placehold.it/50x50">
</div>
<p>Name</p>
</a>
</li>
<li>
<a href="#">
<div class="item">
<img src="http://placehold.it/50x50">
</div>
<p>Name</p>
</a>
</li>
</ul>
Try using :lt(), :gt() selectors ; .show(), .hide()
function showHide() {
if ($(window).width() < 650) {
$("ul li:gt(2)").hide();
} else {
$("ul li:lt(5)").show();
}
}
$("ul li").slice(5).remove();
showHide();
$(window).resize(function() {
showHide();
});
jsfiddle https://jsfiddle.net/ccmrfb4z/1/
Related
I have a HTML structure like so
<div class="outer-wrapper">
<ul id="primary-nav">
<li data-rel="mB">
<a href="#">
<h1 class="title">Title</h1>
</a>
</li>
<li data-rel="mE">
<a href="#">
<h1 class="title">Title</h1>
</a>
</li>
<li data-rel="yB">
<a href="#">
<h1 class="title">Title</h1>
</a>
</li>
</ul>
<div id="feature-images">
<div class="image-field">
<ul>
<li data-motion="mB">
<div class="img" style="background-image:url('/images/full1.jpg')"></div>
</li>
<li data-motion="mE">
<div class="img" style="background-image:url('/images/full2.jpg')"></div>
</li>
<li data-motion="yB">
<div class="img" style="background-image:url('/images/full3.jpg')"></div>
</li>
</ul>
</div>
</div>
</div>
When the primary-nav li a is hovered, jQuery is to slide an image with the apopropriate data-motion attribute of the hovered #primary-nav li.
function mpSlide() {
$("#primary-nav li a").on("mouseenter", function () {
var $itemAtt = $(this).data("rel");
$("#feature-images .image-field ul li[data-motion='" + $itemAtt + "']").addClass("is-open");
}).on('mouseleave', function () {
$("#feature-images .image-field ul li").removeClass("is-open");
});
}
My console gives no errors or warning. I'm not sure what I have done here.
You can use mouseover and mouseout for this like so also you need to remove the a from your select because it doesn't have a data-rel attribute.
$("#primary-nav li").mouseover(function() {
var $itemAtt = $(this).data("rel");
$("#feature-images .image-field ul li[data-motion='" + $itemAtt + "']").addClass("is-open");
}).mouseout(function() {
$("#feature-images .image-field ul li").removeClass("is-open");
});
.is-open{
background-color:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer-wrapper">
<ul id="primary-nav">
<li data-rel="mB">
<a href="#">
<h1 class="title">Title</h1>
</a>
</li>
<li data-rel="mE">
<a href="#">
<h1 class="title">Title</h1>
</a>
</li>
<li data-rel="yB">
<a href="#">
<h1 class="title">Title</h1>
</a>
</li>
</ul>
<div id="feature-images">
<div class="image-field">
<ul>
<li data-motion="mB">
<div class="img" style="background-image:url('/images/full1.jpg')"></div>
</li>
<li data-motion="mE">
<div class="img" style="background-image:url('/images/full2.jpg')"></div>
</li>
<li data-motion="yB">
<div class="img" style="background-image:url('/images/full3.jpg')"></div>
</li>
</ul>
</div>
</div>
</div>
I have menus in 'ul, li' how can I disable the parent menu using JavaScript? I want to stop redirect for parent menu and only child menu will get redirected
I cannot add class or id in the html to disable the parent menu. is there any way that will help to stop redirect using JavaScript?
Following is my HTML code:
<ul class="firstLevel" style="">
<li class="sel">
<div class="item">
<a title="Home" href="#/"><span>Home</span></a>
</div>
</li>
<li class="dir">
<div class="item">
<a title="About Us" href="#/page-18080"><span>About Us</span></a>
<ul class="secondLevel">
<li class=" ">
<div class="item">
<a title="Vision" href="#/page-18126"><span>Vision</span></a>
</div>
</li>
<li class=" ">
<div class="item">
<a title="Our Team" href="#/Our-Team"><span>Our Team</span></a>
</div>
</li>
<li class=" ">
<div class="item">
<a title="Our Board" href="#/page-18128"><span>Our Board</span></a>
</div>
</li>
<li class=" ">
<div class="item">
<a title="Our Charter" href="#/page-18127"><span>Our Charter</span></a>
</div>
</li>
</ul>
</div>
</li>
<li class="dir">
<div class="item">
<a title="Events" href="#/events"><span>Events</span></a>
<ul class="secondLevel">
<li class=" ">
<div class="item">
<a title="About the event" href="#/page-18147"><span>About the event</span></a>
</div>
</li>
</ul>
</div>
</li>
</ul>
https://api.jquery.com/event.stoppropagation/
$(child).on("click", function(event) {
// TODO
event.stopPropagation();
});
Based on what I understood, you want to disable all firstLevel links except links also under secondLevel. As requested I have not touched the HTML and the javascript will do all the work by itself.
SEE COMMENTS FOR STEP-BY-STEP EXPLANATION:
$(function() {
$(".firstLevel").find('a').each(function() {
// this is all link elements under element with class firstlevel
if ($(this).parents('.secondLevel').length) {
// this is all link elements which also is under element with class secondLevel
$(this).click(function() {
//don't disturb the event here. feel free to remove the below alert as well.
alert("this link will work");
});
} else {
// this is all link elements under a firstLevel element but not a secondLevel element
$(this).click(function() {
// we shud block this click. we will return false so that jQuery will internally call e.stopPropogation() and e.preventDefault() and thus stop the link from working.
alert("this link will not work");
return false;
});
}
});
});
WORKING SNIPPET EXAMPLE: (note that the HTML is same as you posted. no changes were made there, only the above javscript was added!)
$(function() {
$(".firstLevel").find('a').each(function() {
if ($(this).parents('.secondLevel').length) {
$(this).click(function() {
alert("this link will work");
});
} else {
$(this).click(function() {
alert("this link will not work");
return false; //this will call e.stopPropogation() and e.preventDefault() and thus stop the link from working.
});
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="firstLevel" style="">
<li class="sel">
<div class="item">
<a title="Home" href="#/"><span>Home</span></a>
</div>
</li>
<li class="dir">
<div class="item">
<a title="About Us" href="#/page-18080"><span>About Us</span></a>
<ul class="secondLevel">
<li class=" ">
<div class="item">
<a title="Vision" href="#/page-18126"><span>Vision</span></a>
</div>
</li>
<li class=" ">
<div class="item">
<a title="Our Team" href="#/Our-Team"><span>Our Team</span></a>
</div>
</li>
<li class=" ">
<div class="item">
<a title="Our Board" href="#/page-18128"><span>Our Board</span></a>
</div>
</li>
<li class=" ">
<div class="item">
<a title="Our Charter" href="#/page-18127"><span>Our Charter</span></a>
</div>
</li>
</ul>
</div>
</li>
<li class="dir">
<div class="item">
<a title="Events" href="#/events"><span>Events</span></a>
<ul class="secondLevel">
<li class=" ">
<div class="item">
<a title="About the event" href="#/page-18147"><span>About the event</span></a>
</div>
</li>
</ul>
</div>
</li>
</ul>
Best regard,
I have a menu and i want to use the active class active with url format but I don't know how:
<div class="col-sm-6">
<div class="menul">
<a href="#">
<div>
<img src="image" alt="">
<span class="sombra"></span>
<img class="onhover" src="image" alt="image">
</div>
</a>
</div>
</div>
$(".menul a").each(function() {
if (this.href == window.location.href)
$(.onhover).addClass("active");
})
try to implement with navbar nav class example below
<ul class="nav navbar-nav">
<li class="active">
<a href="#">
<img src="img" alt="">
</a>
</li>
<li>
<a href="#">
<img src="img" alt="image">
</a>
</li>
</ul>
I want to do a dropdown menu. Cover a distance. But I have a problem. When I click the product menu and opening menu after product menu with the open, click the references menu opening. But click the both menu it can be break down. This problem because of Javascript. Below I share my code also Html and Javascript. I wait for your help.
---HTML---
<div class="cbp-hsinner">
<ol class="parent">
<li>Home</li>
<li>About</li>
<li>
Product
<ol class="child">
<li>
<a href="#">
<img src="img/logom.jpg" alt="img01" />
<span>Delicate Wine</span>
</a>
</li>
<li>
<a href="#">
<img src="img/2.png" alt="img02" />
<span>Fine Spirit</span>
</a>
</li>
<li>
<a href="#">
<img src="img/3.png" alt="img03" />
<span>Heavenly Ale</span>
</a>
</li>
<li>
<a href="#">
<img src="img/4.png" alt="img04" />
<span>Juicy Lemonade</span>
</a>
</li>
<li>
<a href="#">
<img src="img/5.png" alt="img05" />
<span>Wise Whiskey</span>
</a>
</li>
<li>
<a href="#">
<img src="img/6.png" alt="img06" />
<span>Sweet Rum</span>
</a>
</li>
</ol>
</li>
<li>
References
<ol class="child">
<li>
<a href="#">
<img src="img/1.png" alt="img01" />
<span>Delicate Wine</span>
</a>
</li>
<li>
<a href="#">
<img src="img/2.png" alt="img02" />
<span>Fine Spirit</span>
</a>
</li>
<li>
<a href="#">
<img src="img/3.png" alt="img03" />
<span>Heavenly Ale</span>
</a>
</li>
<li>
<a href="#">
<img src="img/4.png" alt="img04" />
<span>Juicy Lemonade</span>
</a>
</li>
<li>
<a href="#">
<img src="img/5.png" alt="img05" />
<span>Wise Whiskey</span>
</a>
</li>
<li>
<a href="#">
<img src="img/6.png" alt="img06" />
<span>Sweet Rum</span>
</a>
</li>
</ol>
</li>
<li>Contact</li>
</ol>
</div>
---JavaScript---
$('.child').hide();
$('.parent > li > a').click(function () {
$(this).parent().find('.child').slideToggle('slow');
});
You have to hide all menu before opening a menu.
You can use this code.
$('.child').hide();
$('.parent > li > a').click(function () {
$('.parent').find('.child').hide(); // this will hide menu
$(this).parent().find('.child').slideToggle('slow');
});
How to place the blocks in such a way?
Link of the image -> http://upload.akusherstvo.ru/image664571.jpg
<ul class="list">
<li class="item">
<a href="/" class="link">текст
<img src="" class="img">
</a>
</li>
<li class="item">
<a href="/" class="link">текст
<img src="" class="img">
</a>
</li>
<li class="item">
<a href="/" class="link">текст
<img src="" class="img">
</a>
</li>
</ul>
I would make 4 separate CSS columns and fill each of them separately.