when i view my website in mobile with lot of filters, the breadcrumb length becomes too large. so i want to replace all the li tags that are behind the second last li. that means all the li except first, last and last-1 li need to be replaced with dots.
Anybody can help me fix this with jquery, javascript, or css?
<ul class="left">
<li class="active">Airways</li>
<li>Trauma</li>
<li>Medical</li>
<li>OB | Peds</li>
<li>Patient Assessment</li>
<li>Proprietary</li>
<li>Trauma</li>
<li>Medical</li>
<li>OB | Peds</li>
<li>Patient Assessment</li>
<li>Proprietary</li>
</ul>
This is just example code i have added here.
You can try with jquery like this. Basically if it is a smaller width device, and if it is not first, last or second last child, the text of the link tag is replaced by '..' .
<script>
$(document).ready(function () {
if (window.matchMedia("(max-width: 767px)").matches)
{
// The viewport is less than 768 pixels wide
console.log("This is a mobile device.");
$('ul.left li').each(function() {
$this = $(this); // cache $(this)
if (! $this.is(':first-child') && ! $this.is(':nth-last-child(2)') && ! $this.is(':last-child') ) {
$this.find('a').text("..");
}
});
}
});
</script>
This is my first answer on stack overflow, hope this is what you want this is the codepen link
https:// codepen.io/vatzkk/pen/yLYMJeG
HTML
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<ul class="left" id="bread">
<li class="active">Airways</li>
<li id="dropdown" style="display:none">
<div class="dropdown" >
<i class="dropbtn">...</i><i class="fas fa-caret-down"></i>
<div class="dropdown-content" id="dropdown-list">
</div>
</div>
</li>
<li>Trauma</li>
<li>Medical</li>
<li>OB | Peds</li>
<li>Patient Assessment</li>
<li>Proprietary</li>
<li>Trauma</li>
<li>Medical</li>
<li>OB | Peds</li>
<li>Patient Assessment</li>
<li>Proprietary</li>
</ul>
Javascript
//you can add your conditions over here
document.getElementById("dropdown").style.display="block";
var arr=[...document.getElementById("bread").children];
var dropdownItems=arr.slice(2,-2);
dropdownItems.map(item=>{
document.getElementById("bread").removeChild(item);
document.getElementById("dropdown-list").appendChild(item);
});
Pure CSS Working example: https://jsfiddle.net/3o8vuwd6/2/
First give your list a class
<ul class="left breadcrumblist">
CSS:
/* This is just to give it some styling as you haven't given any */
.breadcrumblist li {
list-style: none;
display: inline-block;
padding-right: 0.5em;
}
.breadcrumblist li + li::before{
content: "/";
padding-right: 0.5em;
}
/* adjust to your breakpoint. 9999 just so it works on large screen as an example */
#media only screen and (max-width: 9999px) {
/* hide all */
.breadcrumblist li{
display: none;
}
/* show first and last */
.breadcrumblist li:first-child,
.breadcrumblist li:last-child{
display: inline-block;
}
/* add ... to the end of the first one */
.breadcrumblist li:first-child::after{
content: "...";
padding-left: 0.5em;
}
/* fiddle with the content we added in styling */
.breadcrumblist li + li::before{
content: "";
padding-right: 0;
}
}
Thank you all for your guidance and finally i made something work according to my requirement and also i want to share it here because in case in future if someone looks for the same issue he or she can be benefited from this. This is also from the modifications that all you have just posted above.
<ul class="left" id="bread_cumb">
$(document).ready(function(){
if (window.matchMedia("(max-width: 767px)").matches)
var width = $(window).width();
if (width < 720) {
$('#bread_cumb li:not(:first-child):not(:nth-child(2)):not(:last-
child):not(:nth-last-child(2))').html('<span style="margin-
left:7px;margin-right:7px;"> ... </span>');
var last =$('#bread_cumb li:last-child').text();
var re = /^([A-Za-z0-9_'",.!##$%^&*()-+=?/\|:]+)[\s,;:]+([a-z]+)/i;
var m = re.exec(last);
$('#bread_cumb li:last-child').html('<a>'+m[1]+' '+m[2]+'...</a>');
}
});
Thanks all for your valuable ideas.
Related
Need to align my odd number list iteam in center. Mean if i have five list iteam like below then last li should align center others should align side by side in mobile device.
<ul>
<li> name1</li>
<li> name2</li>
<li> name3</li>
<li> name4</li>
<li> name5</li>
</ul>
So fist i need to validate li count whether it's ending witj odd number or even number then i need to align last li center of the screen.
As JS just set's the CSS attribs to fit anyway, you might as well check out if a pure css solution fit's your problem.
See: https://stackoverflow.com/a/5080748/1614903
Assuming that the data will not be presented in ascending order, then a JavaScript solution may be required. See my example for a proof of concept. The CSS solutions will be fine when the data is presented in ascending order.
document.addEventListener('DOMContentLoaded', function() {
var list1 = document.querySelector('#list1');
var listItems = list1.querySelectorAll('li');
for (var li of listItems) {
addCenterAlignToListItem(li);
}
});
function addCenterAlignToListItem(li) {
var txt = li.textContent;
// RegEx matches a number at the end of the string.
var num = txt.match(/\d+$/);
if (!num) {
// There was no number at the
// end of the string.
return;
} else {
// Get the string from the
// regex match.
num = num.pop();
}
if (num % 2 === 1) {
// This is odd
li.classList.add('centered');
}
}
.centered {
text-align: center;
}
<!--
The list is intentionally
out of order.
-->
<ul id="list1">
<li>name2</li>
<li>name5</li>
<li>name1</li>
<li>name3</li>
<li>name4</li>
</ul>
Hope this works for you!
.list li {
text-align: inherit;
}
.list li:nth-child(odd) {
text-align: center;
}
.list li:nth-child(even) {
text-align: inherit;
}
<ul class="list">
<li> name1</li>
<li> name2</li>
<li> name3</li>
<li> name4</li>
<li> name5</li>
</ul>
http://plnkr.co/edit/F8K66L?p=preview
I have a li menu which at 300px goes to display:none, while the mobile_nav button turns on.
Now currently in my Controller I'm using this
main.js
$scope.mobileMenu = function() {
var menu = document.getElementById('main_nav');
if (menu.style.display == 'block') {
menu.style.display = 'none';
} else {
menu.style.display = 'block';
}
};
If I open the mobile menu, then close it, it stays closed on a larger view when resized, even though I have display:block in the CSS. Also need the mobile menu to close if an item is clicked inside of it.
Tried this, but without any luck
index.html
<div
ng-click="isMobileNavOpen = !isMobileNavOpen"
class="mobile_nav">
=
</div>
<nav id="main_nav" ng-init="isMobileNavOpen = true" ng-show="isMobileNavOpen">
<ul>
<li><a ui-sref="home">Home</a></li>
<li><a ui-sref="about">About</a></li>
</ul>
</nav>
style.css
// the button
.mobile_nav {
display: none;
}
#media all and (max-width: 300px) {
.mobile_nav {
display: block;
}
#main_nav {
display: none;
}
#main_nav li {
float: none;
margin-bottom 20px;
}
#main_nav a {
width: 100%;
}
}
Found the perfect library!
https://github.com/AnalogJ/matchmedia-ng
^ Here is the code that fixed my issue (needed an Angular way to detect size)
var unregister = matchmedia.onPhone( function(mediaQueryList){
$scope.isPhone = mediaQueryList.matches;
});
Did have to use the overrides to adjust to my pixel specifications:
angular.module('myapp', ['matchmedia-ng']).config(['matchmediaProvider', function (matchmediaProvider) {
matchmediaProvider.rules.phone = "(max-width: 500px)";
matchmediaProvider.rules.desktop = "(max-width: 1500px)";
}]);
Also had to go ahead with 2 different navs :/ will still try to play around with this a bit to see if I can get it down to using just 1 nav:
<div class="mobile_nav noselect">
<div ng-click="isMobileNavOpen = !isMobileNavOpen" class="icon-menu"></div>
</div>
<nav id="main_nav">
<nav id="mobile_nav" ng-show="isMobileNavOpen">
I got list of li tag that have 2 kinds of class name coding and design. The result that i want is if the li is design the post-link is display block and the site-link is display none while coding class name will have opposite effect. I store the li class into array then the condition will loop to find out what li tag have class name of design and coding. The result is the condition only read the last element of the array. Can you help me on this... sorry not good in asking question in english.
HTML
<li class="Design">
<a class="post-link"></a>
<a class="site-link"></a>
</li>
<li class="Design">
<a class="post-link"></a>
<a class="site-link"></a>
</li>
<li class="Coding">
<a class="post-link"></a>
<a class="site-link"></a>
</li>
var workArray = [];
var $work = jQuery('.slide-container li');
var $workClass = $work.attr('class');
$work.each(function(){
workArray.push($workClass);
for(i = 0; i < workArray.length; i++){
if(jQuery(this).hasClass('Design')){
jQuery('.post-link').css('display','block');
}else{
jQuery('.post-link').css('display','none');
}
}
});
css:
.Design .site-link {
display: none;
}
.Coding .post-link {
display: none;
}
and let the browser does the array/traverse push/pop by itself ;)
Just use relevant selectors and methods:
$('.Design .post-link').show(); // useless if not hidden by default
$('.Coding .post-link').hide();
Of course, you could just set CSS rules:
.Design .post-link { display: block;}
.Coding .post-link { display: none;}
It sounds like you are overcomplicating it.
I am trying to center a series of SPANs vertically inside their parent LIs.
The height values returned are all the same which means there must be something wrong with this code as some of the spans are on two lines.
Not sure if getting the height of an inline element (span) is a problem, any suggestions appreciated.
HTML:
<li class="nav-level-2-item">
<a href="">
<span class="menu-item">Text</span>
</a>
</li>
<li class="nav-level-2-item">
<a href="">
<span class="menu-item">Longer Text</span>
</a>
</li>
</ul>
JS:
$(document).ready(function () {
var navItem = $('li.nav-level-2-item');
navItem.each(function() {
var containerHeight = $('li.nav-level-2-item').height();
var spanHeight = $('span.menu-item').height();
alert(spanHeight)
$('span.menu-item').css('top', (containerHeight - spanHeight) / 2);
});
});
Making your span a block-level element will give it height:
<style> span.menu-item { display:block /* or inline-block */; } </style>
As an alternative, you could change the span to be one of the native block-level elements.
I'm not sure whether this is applicable to your code, but maybe you could avoid using jQuery altogether by making the <li> elements inline-block and centering them vertically:
li.nav-level-2-item
{
display: inline-block;
*display: inline; *zoom: 1; /* IE 6-7 hack */
vertical-align: middle;
}
Or another possible solution:
li.nav-level-2-item
{
display: table;
}
li.nav-level-2-item a
{
display: table-cell;
vertical-align: middle;
}
For additional CSS-only solutions, check out http://phrogz.net/css/vertical-align and http://www.vanseodesign.com/css/vertical-centering.
I'm not sure what the goal is, but I do have an answer for why the alert is always the same. You're iterating the li elements with .each(), but on each iteration, you aren't referencing the current item, so you always retrieve the height of the first matching element. Try this:
http://jsfiddle.net/5uwuQ/
$(document).ready(function () {
var navItem = $('li.nav-level-2-item');
navItem.each(function() {
var containerHeight = $(this).height();
var spanHeight = $('span.menu-item', this).height();
console.log(spanHeight)
});
});
Vertical centering of menu items is probably going to be easier by setting the line-height.
I'm trying to make a stupid horizontal nav bar with a drop-down on some of the items. The way I decided to do it is just by putting the drop-down in a div tag. This is easily changeable, i just don't like to go heavy on the html side.
Basically I just want my drop down to work when you hover over the parent element. Additional css is going to be used to make it pretty and positioned better.
Here's my js:
var dropdown = $('.dropdown');
var parent = dropdown.parent();
$(parent).hover(
function () {
dropdown.css('display', 'block');
}
);
Here's my css:
div.nav {
text-align: center;
}
div.nav > ul > li {
margin-top: 15px;
text-align: center;
font-size: 1.25em;
}
div.nav > ul > li {
display: inline-block;
list-style-type: none;
}
div.nav a {
padding: 1em;
}
div.dropdown {
display: none;
background-color: black;
position: absolute;
}
Here's my html:
<div class="nav">
<ul>
<li>Home</li>
<li>
Sample Game
<div class="dropdown">
About it
<br>
Game
</div>
</li>
<li>TP Solutions</li>
<li>Projects</li>
<li>Contact Me</li>
</ul>
<div class="clear"></div>
You should not be using "parent" as a variable name, as it's a reserved word.
$(document).ready(function() {
var $dropdown = $('.dropdown'),
$parent = $dropdown.parent();
$parent.on("mouseover",
function () {
$dropdown.css('display', 'block');
}
);
$parent.on("mouseout",
function () {
$dropdown.css('display', 'none');
}
);
});
According to the oreder this has to be done:
add a jQuery plugin first
Then add your script
so the order will be like this:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'>
</script>
<script>
$(function(){
var dropdown = $('.dropdown');
var parent = dropdown.parent();
$(parent).hover(function () {
dropdown.css('display', 'block');
});
});
</script>
Please try the below code.
$(".nav").on("mouseenter","li",function(){
$(this).find(".dropdown").show();
});
$(".nav").on("mouseleave","li",function(){
$(this).find(".dropdown").hide();
});
In your code " dropdown.parent(); " -> this will refer all the parents which have child dropdown and will show the menu. we need to refer current hover parent. Please check the working example in below link.
http://jsfiddle.net/renjith/wX48f/
There are so many good solutions to use jQuery and CSS to show a drop down menus. So you don't need to reinvent the wheel. Here are some examples that you might be able to find one to fit your need.