Custom animation menu CSS/ jQuery

Custom animation menu CSS/ jQuery - javascript

I have this code snippet and wanted to know if there is any possibility to modify it, in order to obtain after hover translation, keeping in place or moving a few more pixels to the right on click event, until another menu botton will be clicked.
// mynewmenu implementation
$('nav ul li').mouseover(function(e){
//Set the aesthetics (similar to :hover)
$('nav ul li').removeClass('hovered');
$(this).addClass('hovered');
});
var pageSize = 4,
$links = $(".pagedMenu li"),
count = $links.length,
numPages = Math.ceil(count / pageSize),
curPage = 1
;
showPage(curPage);
function showPage(whichPage) {
var previousLinks = (whichPage - 1) * pageSize,
nextLinks = (previousLinks + pageSize);
$links.show();
$links.slice(0, previousLinks).hide();
$links.slice(nextLinks).hide();
showPrevNext();
}
function showPrevNext() {
if ((numPages > 0) && (curPage < numPages)) {
$("#nextPage").removeClass('hidden');
$("#msg").text("(" + curPage + " of " + numPages + ")");
} else {
$("#nextPage").addClass('hidden');
}
if ((numPages > 0) && (curPage > 1)) {
$("#prevPage").removeClass('hidden');
$("#msg").text("(" + curPage + " of " + numPages + ")");
} else {
$("#prevPage").addClass('hidden');
}
}
$("#nextPage").on("click", function() {
showPage(++curPage);
});
$("#prevPage").on("click", function() {
showPage(--curPage);
});
.hidden {
display: none;
}
body {
font: normal 1.0em Arial, sans-serif;
}
nav.pagedMenu {
color: red;
font-size: 2.0em;
line-height: 1.0em;
width: 8em;
position: fixed;
top: 50px;
}
nav.pagedMenu ul {
list-style: none;
margin: 0;
padding: 0;
}
nav.pagedMenu ul li {
height: 1.0em;
padding: 0.15em;
position: relative;
border-top-right-radius: 0em;
border-bottom-right-radius: 0em;
-webkit-transition:
-webkit-transform 220ms, background-color 200ms, color 500ms;
transition: transform 220ms, background-color 200ms, color 500ms;
}
nav.pagedMenu ul li.hovered {
-webkit-transform: translateX(1.5em);
transform: translateX(1.5em);
}
nav ul li:hover a {
transition: color, 1200ms;
color: red;
}
nav.pagedMenu ul li span {
display:block;
font-family: Arial;
position: absolute;
font-size:1em;
line-height: 1.25em;
height:1.0em;
top:0; bottom:0;
margin:auto;
right: 0.01em;
color: #F8F6FF;
}
a {
color: gold;
transition: color, 1200ms;
text-decoration: none;
}
#pagination, #prevPage, #nextPage {
font-size: 1.0em;
color: gold;
line-height: 1.0em;
padding-top: 250px;
padding-left: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="pagedMenu">
<ul style="font-size: 28px;">
<li class="" style="margin-bottom: 5px;">Link 1</li>
<li class="" style="margin-bottom: 5px;">Link 2</li>
<li class="" style="margin-bottom: 5px;">Link 3</li>
<li class="" style="margin-bottom: 5px;">Link 4</li>
<li class="" style="margin-bottom: 5px;">Link 5</li>
<li class="" style="margin-bottom: 5px;">Link 6</li>
<li class="" style="margin-bottom: 5px;">Link 7</li>
<li class="" style="margin-bottom: 5px;">Link 8</li>
<li class="" style="margin-bottom: 5px;">Link 9</li>
<li class="" style="margin-bottom: 5px;">Link 10</li>
<li class="" style="margin-bottom: 5px;">Link 11</li>
<li class="" style="margin-bottom: 5px;">Link 12</li>
</ul>
</nav>
<div id="pagination">
Previous
Next
<span id="msg"></span>
</div>
A live example here.

after hover translation, keeping in place or moving a few more pixels
to the right on click event, until another menu botton will be
clicked.
Added .toggleClass(), .hasClass() , .not() , .siblings() , .hover() to jsfiddle https://jsfiddle.net/kjhtswp9/ originally created by #CY5 , maintaining hover translation effect
$(function () {
$('nav ul li').click(function (e) {
//Set the aesthetics (similar to :hover)
$('nav ul li')
.not(".clicked").removeClass('hovered')
.filter(this).addClass("clicked hovered")
.siblings().toggleClass("clicked hovered", false);
}).hover(function () {
$(this).addClass("hovered")
}, function () {
$(this).not(".clicked").removeClass("hovered")
});
var pageSize = 4,
$links = $(".pagedMenu li"),
count = $links.length,
numPages = Math.ceil(count / pageSize),
curPage = 1;
showPage(curPage);
function showPage(whichPage) {
var previousLinks = (whichPage - 1) * pageSize,
nextLinks = (previousLinks + pageSize);
$links.show();
$links.slice(0, previousLinks).hide();
$links.slice(nextLinks).hide();
showPrevNext();
}
function showPrevNext() {
if ((numPages > 0) && (curPage < numPages)) {
$("#nextPage").removeClass('hidden');
$("#msg").text("(" + curPage + " of " + numPages + ")");
} else {
$("#nextPage").addClass('hidden');
}
if ((numPages > 0) && (curPage > 1)) {
$("#prevPage").removeClass('hidden');
$("#msg").text("(" + curPage + " of " + numPages + ")");
} else {
$("#prevPage").addClass('hidden');
}
}
$("#nextPage").on("click", function () {
showPage(++curPage);
});
$("#prevPage").on("click", function () {
showPage(--curPage);
});
});
.hidden {
display: none;
}
body {
font: normal 1.0em Arial, sans-serif;
}
nav.pagedMenu {
color: red;
font-size: 2.0em;
line-height: 1.0em;
width: 8em;
position: fixed;
top: 50px;
}
nav.pagedMenu ul {
list-style: none;
margin: 0;
padding: 0;
}
nav.pagedMenu ul li {
height: 1.0em;
padding: 0.15em;
position: relative;
border-top-right-radius: 0em;
border-bottom-right-radius: 0em;
-webkit-transition: -webkit-transform 220ms, background-color 200ms, color 500ms;
transition: transform 220ms, background-color 200ms, color 500ms;
}
nav.pagedMenu ul li.hovered {
-webkit-transform: translateX(1.5em);
transform: translateX(1.5em);
}
nav ul li:hover a {
transition: color, 1200ms;
color: red;
}
nav.pagedMenu ul li span {
display: block;
font-family: Arial;
position: absolute;
font-size: 1em;
line-height: 1.25em;
height: 1.0em;
top: 0;
bottom: 0;
margin: auto;
right: 0.01em;
color: #F8F6FF;
}
a {
color: gold;
transition: color, 1200ms;
text-decoration: none;
}
#pagination,
#prevPage,
#nextPage {
font-size: 1.0em;
color: gold;
line-height: 1.0em;
padding-top: 250px;
padding-left: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="pagedMenu">
<ul style="font-size: 28px;">
<li class="" style="margin-bottom: 5px;">Link 1
</li>
<li class="" style="margin-bottom: 5px;">Link 2
</li>
<li class="" style="margin-bottom: 5px;">Link 3
</li>
<li class="" style="margin-bottom: 5px;">Link 4
</li>
<li class="" style="margin-bottom: 5px;">Link 5
</li>
<li class="" style="margin-bottom: 5px;">Link 6
</li>
<li class="" style="margin-bottom: 5px;">Link 7
</li>
<li class="" style="margin-bottom: 5px;">Link 8
</li>
<li class="" style="margin-bottom: 5px;">Link 9
</li>
<li class="" style="margin-bottom: 5px;">Link 10
</li>
<li class="" style="margin-bottom: 5px;">Link 11
</li>
<li class="" style="margin-bottom: 5px;">Link 12
</li>
</ul>
</nav>
<div id="pagination">
Previous
Next
<span id="msg"></span>
</div>
jsfiddle http://jsfiddle.net/kjhtswp9/3

Related

jQuery On Click Child Element does not remove the parent Element Class

This snippet I supposed to work but it is not working. On click it adds the class to the parent element, but on click of a child element it doesn't remove the class. I also added JS Fiddle to test for you. Thanks in advance.
JS Fiddle: https://jsfiddle.net/fghjqepv/1/
jQuery(document).ready(function($) {
$(".menu-item-has-children").addClass("openLevel js-openLevel");
var $menuTrigger = $('.js-menuToggle');
var $topNav = $('.js-topPushNav');
var $openLevel = $('.js-openLevel');
var $closeLevel = $('.js-closeLevel');
var $closeLevelTop = $('.js-closeLevelTop');
var $navLevel = $('.js-pushNavLevel');
function openPushNav() {
$topNav.addClass('isOpen');
//$('body').addClass('pushNavIsOpen');
}
function closePushNav() {
$topNav.removeClass('isOpen');
$openLevel.siblings().removeClass('isOpen');
//$('body').removeClass('pushNavIsOpen');
}
$menuTrigger.on('click touchstart', function(e) {
e.preventDefault();
if ($topNav.hasClass('isOpen')) {
closePushNav();
} else {
openPushNav();
}
});
$openLevel.on('click touchstart', function() {
$(this).find($navLevel).addClass('isOpen');
});
$closeLevel.on('click touchstart', function() {
$(this).closest($navLevel).removeClass('isOpen');
});
$closeLevelTop.on('click touchstart', function() {
closePushNav();
});
});
#media screen and (max-width: 600px) {
.pushNav {
width: 75%;
right: -75%;
}
}
#media screen and (min-width: 601px) {
.pushNav {
width: 350px;
right: -350px;
}
}
ul.pushNav {
padding: 0;
margin: 0;
list-style-type: none;
}
.pushNav {
height: 100%;
position: fixed;
top: 0;
z-index: 100;
overflow-x: hidden;
overflow-y: auto;
background: #2e2f35;
transition: ease-in-out 0.5s;
}
.pushNav hr {
border: 1px solid #555;
}
.pushNav,
.pushNav a {
font-size: 1em;
font-family: helvetica, sens-serif;
font-weight: 100;
color: #fff;
text-decoration: none;
}
.pushNavIsOpen {
overflow: auto;
height: 100%;
}
.js-topPushNav.isOpen,
.pushNav_level.isOpen {
right: 0;
}
.closeLevel,
.openLevel {
cursor: pointer;
}
.openLevel,
.closeLevel,
.pushNav a {
padding: 1em 0;
display: block;
text-indent: 20px;
transition: background 0.4s ease-in-out;
}
.openLevel:hover,
.closeLevel:hover,
.pushNav a:hover {
background: #494a50;
}
.hdg {
background-color: #1e1e24;
}
.closeLevel,
closelevel>i {
font-size: 1em;
color: #a5a5a4;
}
.burger {
position: absolute;
top: 24px;
right: 48px;
}
.burger i {
font-size: 3em;
}
.screen {
position: fixed;
background: rgba(0, 0, 0, 0.7);
width: 100%;
height: 0;
top: 0;
bottom: 0;
right: 0;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.pushNavIsOpen .screen {
height: 100%;
opacity: 1;
}
.fa {
display: inline;
padding: 5px;
}
.wrapper {
max-width: 625px;
margin: 120px auto;
padding: 0 20px;
color: #fff;
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-weight: 100;
font-size: 1.1em;
line-height: 1.4em;
}
.wrapper a {
color: #20c270;
text-decoration: none;
}
.wrapper button {
background-color: #20c270;
margin: 50px auto;
display: block;
padding: 10px 40px;
border: none;
}
.wrapper button:hover {
background-color: #18a960;
}
.wrapper button a {
color: #fff;
font-size: 2em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="js-menuToggle">Click Me To Open</div>
<div class="pushNav js-topPushNav">
<div class="closeLevel js-closeLevelTop hdg">
<i class="fa fa-close"></i>
</div>
<div id="sidebar-menu-container" class=" meain-container">
<ul id="menu-header-menu" class="header_menu menu-level-1">
<li id="menu-item-6064" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-6064 openLevel js-openLevel">
Sub Menu
<div class="pushNav level-2 pushNav_level js-pushNavLevel">< Go Back
<h4>Sub Menu Title</h4>
<h2></h2>
<ul class="sub-menu">
<li id="menu-item-6019" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6019">Checkout</li>
</ul>
</div>
</li>
<li id="menu-item-6022" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6022">Sample Page</li>
<li id="menu-item-6063" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-6063 openLevel js-openLevel">
Sub Menu Con
<div class="pushNav level-2 pushNav_level js-pushNavLevel">< Go Back
<h4>Sub Menu Title</h4>
<h2></h2>
<ul class="sub-menu">
<li id="menu-item-6025" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6025">Blog – Masonry Boxed
</li>
</ul>
</div>
</li>
<li id="menu-item-6065" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-6065">3rd menu</li>
</ul>
</div>
</div>
When we click on "GO Back" Button, it does not remove the class (isOpen). Go back button is on Level 2 after clicking the Sub Menu Item.

When using .on() it can be a little finicky with the way event bubble up.
https://jsfiddle.net/Twisty/2xf7rk6g/9
JavaScript
jQuery(document).ready(function($) {
$(".menu-item-has-children").addClass("openLevel js-openLevel");
var $menuTrigger = $('.js-menuToggle');
var $topNav = $('.js-topPushNav');
var $openLevel = $('.js-openLevel');
var $closeLevel = $('.js-closeLevel');
var $closeLevelTop = $('.js-closeLevelTop');
var $navLevel = $('.js-pushNavLevel');
function openPushNav() {
$topNav.addClass('isOpen');
//$('body').addClass('pushNavIsOpen');
}
function closePushNav() {
$topNav.removeClass('isOpen');
$openLevel.siblings().removeClass('isOpen');
//$('body').removeClass('pushNavIsOpen');
}
$menuTrigger.on('click touchstart', function(e) {
e.preventDefault();
if ($topNav.hasClass('isOpen')) {
closePushNav();
} else {
openPushNav();
}
});
$openLevel.on('click touchstart', function() {
console.log("Open");
$(this).find($navLevel).addClass('isOpen');
});
$(".pushNav")
.on('click touchstart', ".js-closeLevel", function() {
console.log("Close");
$(this).parent().removeClass('isOpen');
})
.on('click touchstart', ".js-closeLevelTop", function() {
console.log("cLose Top");
closePushNav();
});
});
This is less ambiguous and the event is being triggered as expected.

replace this function
$closeLevel.on('click touchstart', function() {
$(this).closest($navLevel).removeClass('isOpen');
});
with this
$closeLevel.on('click touchstart', function() {
$(this).closest($navLevel).removeClass('pushNav_level isOpen');
});

Drop Down direction changes according to free space

I am just into programing and I need your help.
I have an issue with my drop down sub-menu-s. I have a simple drop down on my header, however it is located too close to window border in this case only(Depending on permissions).
So the sub-menu opens beyond window border to the right side and user doesn't see the content of it.
I want it to detect if there is enough space to open on the right side. If yes, open on right. If not open on the left. Could you please help me to solve this issue?
This is how it works when it has enough space.
Here is my html:
<ul class="main-menu-list">
<li class="header-dropdown-item">
<span class="header-dropdown-item-title">Admin</span>
<img src="../Layout/images//arrow-down.svg" alt="">
<ul class="sub-menu-list">
<li class="header-dropdown-item">
<a class="arrow-right header-dropdown-item-title">Users</a>
<ul class="sub-menu-list-right">
<li>
<a class="header-sub-menu-item">New
users</a>
</li>
<li>
<a class="header-sub-menu-item">Users
management</a>
</li>
<li>
<a class="header-sub-menu-item" >Contacts List</a>
</li>
</ul>
</li>
<li class="header-dropdown-item">
<a class="arrow-right header-dropdown-item-title">Security</a>
<ul class="sub-menu-list-right">
<li>
<a class="header-sub-menu-item" >Roles</a>
</li>
<li>
<a class="header-sub-menu-item" >Roles and
Permissions</a>
</li>
<li>
<a class="header-sub-menu-item" >Column Based
Security</a>
</li>
</ul>
</li>
<li class="header-dropdown-item">
<a class="arrow-right header-dropdown-item-title">Notifications Management</a>
<ul class="sub-menu-list-right">
<li>
<a class="header-sub-menu-item"
>Email Notifications</a>
</li>
<li>
<a class="header-sub-menu-item" >Sent Email
Notifications</a>
</li>
</ul>
</li>
<li class="header-dropdown-item">
<a class="arrow-right header-dropdown-item-title">Source Data Analysis</a>
<ul class="sub-menu-list-right">
<li>
<a class="header-sub-menu-item" >Automated
Error Logging</a>
</li>
</ul>
</li>
<li class="header-dropdown-item">
<a class="arrow-right header-dropdown-item-title">Technical Services</a>
<ul class="sub-menu-list-right">
<li>
<a class="header-sub-menu-item" >Dropdown Lists</a>
</li>
<li>
<a class="header-sub-menu-item" >Unconventional
Tags</a>
</li>
<li>
<a class="header-sub-menu-item"
>Tag Matching Duplicates</a>
</li>
<li>
<a class="header-sub-menu-item" >3 Digit Code
Register</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
Here is my CSS:
.sub-menu
background-color: header-sub-menu-background-color;
color: header-sub-menu-color;
display: flex;
justify-content: flex-end;
height: header-sub-menu-height;
padding-right: page-side-padding;
span
margin: 10px 0;
display: inline-block;
cursor: pointer;
ul
margin: 0;
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
font-family: font-default-content;
font-size: font-size-ssm;
font-weight: bold;
text-transform: uppercase;
padding: 0;
li
& + li
margin-left: 30px;
a
cursor: pointer;
ul
& > li:hover
& > a,
& > span
color: header-menu-active-color;
> .arrow-right:after
border-left-color: header-menu-active-color;
> .sub-menu-list
shown()
> .sub-menu-list-right
showImmediately()
li
.arrow-right
cursor: default;
&:after
pointer-events: none;
position: absolute;
content: "";
width: 0;
height: 0;
border-top: 3px solid transparent;
border-bottom: 3px solid transparent;
border-left: 3px solid gray-color-3;
display: inline-block;
vertical-align: middle;
right: 12px;
top: 0;
bottom: 0;
margin: auto;
a:hover, span:hover
color: header-menu-active-color;
.main-menu-list li
position: relative;
.sub-menu-list, .sub-menu-list-right
hidden()
display: inline-block;
list-style: none;
position: absolute;
background-color: black-color-1;
top: 31px;
left: -15px;
z-index: $main-menu-sub-menu-list-zindex;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
li
position: relative;
white-space:nowrap;
margin-left: 0;
:hover > .sub-menu-list-right
shown()
a
width: 100%;
font-family: font-default-content;
font-size: 10px;
font-weight: 700;
padding: 10px 32px 10px 15px;
display: inline-block;
&:hover
color: header-menu-active-color;
p:hover
color: header-menu-active-color;
.sub-menu-list
min-width: 100%;
hideWithDelay()
a
text-decoration: none;
display: inline-block;
color: gray-color-3;
.active
color: header-menu-active-color;
.sub-menu-list-right
top: 0;
left: 100%;
&:hover
.sub-menu-list
shown()
&:hover
shown()
.sub-menu-list-right
&:hover
shown()
span
background-color: black-color-1
.main-menu-list
li:first-child:nth-last-child(2)
li:first-child:nth-last-child(3)
.sub-menu-list-right
left: auto;
right: 100%;
And Pure JS:
<script type="text/javascript">
(function () {
handleMenuItems();
// functions:
function handleMenuItems() {
var menuEl = document.querySelector(".menu"),
userLinksList = menuEl && menuEl.querySelector(".user-links"),
recentlyItemListEl = menuEl && menuEl.querySelector(".recently-visited-item"),
favoriteItemListEl = menuEl && menuEl.querySelector(".favorites-item");
if (userLinksList) {
userLinksList.addEventListener("mouseover", function (evt) {
var options = {
url: "/api/userlinks",
method: "GET",
successCallback: onloadUserLinks
};
function onloadUserLinks(result) {
if (!window.__RAPMD__) {
window.__RAPMD__ = {};
}
window.__RAPMD__.lastUserLinks = result;
createMenuList(result.RecentLinks, recentlyItemListEl, "No recently visited pages");
createMenuList(result.Favorites, favoriteItemListEl, "No favorite pages");
}
if (!window.__RAPMD__ || !window.__RAPMD__.lastUserLinks) {
ajax(options);
}
});
userLinksList.addEventListener("mouseleave", function (evt) {
if (!window.__RAPMD__) {
return;
}
window.__RAPMD__.lastUserLinks = null;
});
}
}
function createMenuList(items, menuItemEl, emptyListTitle) {
if (!menuItemEl) {
return;
}
var df = document.createDocumentFragment();
(items.length ? items : [{ Title: emptyListTitle }]).forEach(function (item) {
var li = document.createElement("li"),
a = document.createElement("a");
if (item.Url) {
a.href = item.Url;
} else {
a.classList.add("empty-link-item");
}
a.innerHTML = item.Title;
li.appendChild(a);
df.appendChild(li);
});
menuItemEl.textContent = "";
menuItemEl.appendChild(df);
}
function ajax(options) {
var url = options.url,
method = options.method,
successCallback = options.successCallback,
failureCallback = options.failureCallback,
xhr = new XMLHttpRequest();
xhr.open(method, url);
xhr.onload = function () {
if (xhr.status === 200 && successCallback) {
var response = JSON.parse(xhr.responseText);
successCallback(response);
} else if (failureCallback) {
failureCallback();
}
};
xhr.send();
}
})();
</script>

I don't think there is an easy CSS way to solve this. The only option I can think about is to align it to the left if the space is not enough. You can use the document.querySelector("#sub-menu").getBoundingClientRect() function to get the position of the element.
{
"x": 1261.5,
"y": -309,
"width": 298,
"height": 452,
"top": -309,
"right": 1559.5,
"bottom": 143,
"left": 1261.5
}
Then you can check if the sub-menu would overflow out of the page and assign a class that makes it align to the left instead of the right.
const subMenuBound = document.querySelector("#sub-menu").getBoundingClientRect();
const windowWidth = document.getElementsByTagName("body")[0].clientWidth;
const subMenuX = subMenuBound.x;
const subMenuWidth = subMenuBound.width;
if (subMenuBound.width + subMenuBound.x > windowWidth) {
// assign a class to the sub-menu to
// align to the left instead of right
} else {
// remove the class
}

Added $(box).bind("click touchstart", function() { to my logic but not successful on iPad

I have added '$(box).bind("click touchstart", function() {' to my script but still not running on iPad. I'm trying to get this script to work across all devices so that user can select the box nunbers 1-8 and recommendation with a border will show below. any idea why this is breaking on iPad? is there a better way to structure this?
var numbers = document.querySelectorAll(".clicked");
var letters = document.querySelectorAll(".border");
numbers.forEach(function(box, index) {
$(box).bind("click touchstart", function() {
letters.forEach(function(box) {
box.classList.remove("showBorder");
});
var info = document.getElementsByClassName('box-tip')[0];
if (index > 2) {
info.style.left = 11 + ((index - 3) * 45) + 'px';
}
else {
info.style.left = 0 + 'px';
}
info.style.visibility = 'visible';
letters[index].classList.add("showBorder");
});
$(document).on("click", '.clicked', function(){
$('.clicked').removeClass('selected');
$(this).addClass('selected');
});
});
.list-box li {display: inline-block;list-style-type: none;padding: 1em;background:red;}
.list-box {margin:15px auto;padding:0;}
.box-sleeve li {display: inline-block;list-style-type: none;padding: 1em;background:red;}
.box-sleeve {margin:15px auto;padding:0;}
.showBorder { outline: 1px dashed #233354; outline-offset:1px;}
.box-tip {
display:inline;
margin: auto;
position: relative;
visibility: hidden;
padding-left:10px;
}
.numberCircle {
border-radius: 90%;
font-size: 12px;
border: 2px solid #000;
color: #fff;
background: #000;
padding: 0 4px;
}
.numberCircle span {
text-align: center;
display: block;
}
li.selected {color:#fff;background-color:#000;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>Test some logic one</span>
<ul class="list-box">
<li class="clicked">1</li>
<li class="clicked">2</li>
<li class="clicked">3</li>
<li class="clicked">4</li>
<li class="clicked">5</li>
<li class="clicked">6</li>
<li class="clicked">7</li>
<li class="clicked">8</li>
</ul>
<div>
<span>Test some logic two</span>
</div>
<div class="box-tip">
<span>Regular length for your collar size</span>
<span class="numberCircle">?</span>
</div>
<ul class="box-sleeve">
<li class="border">a</li>
<li class="border">b</li>
<li class="border">c</li>
<li class="border">d</li>
<li class="border">e</li>
<li class="border">f</li>
<li class="border">g</li>
<li class="border">h</li>
</ul>

Try the following tweaks:
Detect & store user agent first ua = navigator.userAgent;
Then match it with iPad's and store it event = (ua.match(/iPad/i)) ? "touchstart" : "click";.
Use as $(box).bind(event, function() { //do stuff });.
Working on iPad Air.
var numbers = document.querySelectorAll(".clicked"),
letters = document.querySelectorAll(".border"),
ua = navigator.userAgent,
event = (ua.match(/iPad/i)) ? "touchstart" : "click";
numbers.forEach(function(box, index) {
$(box).bind(event, function() {
letters.forEach(function(box) {
box.classList.remove("showBorder");
});
var info = document.getElementsByClassName('box-tip')[0];
if (index > 2) {
info.style.left = 11 + ((index - 3) * 45) + 'px';
} else {
info.style.left = 0 + 'px';
}
info.style.visibility = 'visible';
letters[index].classList.add("showBorder");
});
$(document).on("click", '.clicked', function() {
$('.clicked').removeClass('selected');
$(this).addClass('selected');
});
});
.list-box li {
display: inline-block;
list-style-type: none;
padding: 1em;
background: red;
}
.list-box {
margin: 15px auto;
padding: 0;
}
.box-sleeve li {
display: inline-block;
list-style-type: none;
padding: 1em;
background: red;
}
.box-sleeve {
margin: 15px auto;
padding: 0;
}
.showBorder {
outline: 1px dashed #233354;
outline-offset: 1px;
}
.box-tip {
display: inline;
margin: auto;
position: relative;
visibility: hidden;
padding-left: 10px;
}
.numberCircle {
border-radius: 90%;
font-size: 12px;
border: 2px solid #000;
color: #fff;
background: #000;
padding: 0 4px;
}
.numberCircle span {
text-align: center;
display: block;
}
li.selected {
color: #fff;
background-color: #000;
}
/* add these to prevent text move below 768 viewports */
#media (max-width: 768px) {
.box-tip span {
position: fixed;
left: 10px;
}
.box-tip span.numberCircle {
position: fixed;
left: 236px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>Test some logic one</span>
<ul class="list-box">
<li class="clicked">1</li>
<li class="clicked">2</li>
<li class="clicked">3</li>
<li class="clicked">4</li>
<li class="clicked">5</li>
<li class="clicked">6</li>
<li class="clicked">7</li>
<li class="clicked">8</li>
</ul>
<div>
<span>Test some logic two</span>
</div>
<div class="box-tip">
<span>Regular length for your collar size</span>
<span class="numberCircle">?</span>
</div>
<ul class="box-sleeve">
<li class="border">a</li>
<li class="border">b</li>
<li class="border">c</li>
<li class="border">d</li>
<li class="border">e</li>
<li class="border">f</li>
<li class="border">g</li>
<li class="border">h</li>
</ul>

dynamic fields class change per list element and Js to recognize part of the class

class in the list element change per box and are dynamic fields with width and length being the difference between the two. How to run my JS so that only the first part of the class is recognized without the number so js variable selectors should be '.attribute__swatch--width-' and '.attribute__swatch--length-'. please see my code below:
var numbers = document.querySelectorAll(".attribute__swatch--width-"),
letters = document.querySelectorAll(".attribute__swatch--length-"),
ua = navigator.userAgent,
event = (ua.match(/iPad/i)) ? "touchstart" : "click";
numbers.forEach(function(box, index) {
$(box).on(event, function() {
letters.forEach(function(box) {
box.classList.remove("showBorder");
});
var info = document.getElementsByClassName('box-tip')[0];
if (index > 2) {
info.style.left = 11 + ((index - 3) * 45) + 'px';
} else {
info.style.left = 0 + 'px';
}
info.style.visibility = 'visible';
letters[index].classList.add("showBorder");
});
$(document).on("click", '.clicked', function() {
$('.clicked').removeClass('selected');
$(this).addClass('selected');
});
});
.list-box li {display: inline-block;list-style-type: none;padding: 1em;background:red;}
.list-box {margin:15px auto;padding:0;}
.box-sleeve li {display: inline-block;list-style-type: none;padding: 1em;background:red;}
.box-sleeve {margin:15px auto;padding:0;}
.showBorder { outline: 1px dashed #233354; outline-offset:1px;}
.box-tip {
display:inline;
margin: auto;
position: relative;
visibility: hidden;
padding-left:10px;
}
.numberCircle {
border-radius: 90%;
font-size: 12px;
border: 2px solid #000;
color: #fff;
background: #000;
padding: 0 4px;
}
.numberCircle span {
text-align: center;
display: block;
}
li.selected {color:#fff;background-color:#000;}
#media (max-width: 768px) {
.box-tip span {
position: fixed;
left: 10px;
}
.box-tip span.numberCircle {
position: fixed;
left: 236px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>Test some logic one width</span>
<ul class="list-box">
<li class="attribute__swatch--width-14.5">1</li>
<li class="attribute__swatch--width-15">2</li>
<li class="attribute__swatch--width-15.5">3</li>
<li class="attribute__swatch--width-16">4</li>
<li class="attribute__swatch--width-16.5">5</li>
<li class="attribute__swatch--width-17">6</li>
<li class="attribute__swatch--width-17.5">7</li>
<li class="attribute__swatch--width-18">8</li>
</ul>
<div>
<span>Test some logic two length</span>
</div>
<div class="box-tip">
<span>Regular length for your collar size</span>
<span class="numberCircle">?</span>
</div>
<ul class="box-sleeve">
<li class="attribute__swatch--length-32">a</li>
<li class="attribute__swatch--length-34">b</li>
<li class="attribute__swatch--length-36">c</li>
<li class="attribute__swatch--length-38">d</li>
<li class="attribute__swatch--length-40">e</li>
<li class="attribute__swatch--length-42">f</li>
<li class="attribute__swatch--length-44">g</li>
<li class="attribute__swatch--length-46">h</li>
</ul>

You can use attribute selectors, specifically starts with (^=) to match:
document.querySelectorAll('[class^="attribute__swatch--width-"]');
document.querySelectorAll('[class^="attribute__swatch--length-"]')

jQuery submenu not displaying correctly

Here is my code here first menu working properly but when applied sub sub menu it's conflicting with previous li. You can check there is a list under food report . when clicking that child is not displaying.
$(document).ready(function() {
$(".menu_li").click(function() {
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
$('.child_ul').hide('slow');
$(this).children().children('.plus').show();
$(this).children().children('.minus').hide();
} else {
$(".menu_li").removeClass('selected');
$('.child_ul').hide('slow');
$(this).addClass('selected');
$('.plus').show();
$('.minus').hide();
$(this).children('.child_ul').show('slow');
$(this).children().children('.plus').hide();
$(this).children().children('.minus').show();
}
});
$(".menu_li1").click(function() {
if ($(".menu_li1").hasClass('selected')) {
$(".menu_li1").removeClass('selected');
$('.child_ul1').hide('slow');
$(".menu_li1").children('.child_ul1').children('.plus1').show();
$(".menu_li1").children('.child_ul1').children('.minus1').hide();
} else {
$(".menu_li1").removeClass('selected');
$('.child_ul1').hide('slow');
$(".menu_li1").addClass('selected');
$('.plus1').show();
$('.minus1').hide();
$(".menu_li1").children('.child_ul1').show('slow');
$(".menu_li1").children('.child_ul1').children('.plus1').hide();
$(".menu_li1").children('.child_ul1').children('.minus1').show();
}
});
});
.child_ul,
.child_ul1 {
display: none;
}
.left_menu ul li {
cursor: pointer;
}
.child_ul li,
.child_ul1 li {
border-left: 10px solid #222;
}
.child_ul,
.child_ul1 {
border-top: 1px solid #222;
}
.child_ul li a,
.child_ul1 li a {
background: #272525 none repeat scroll 0% 0% !important;
border-bottom: 1px solid #222;
}
.plus {
float: right;
margin-right: 5px;
}
.minus {
float: right;
margin-right: 5px;
}
ul li a {
background: #373737;
height: 30px;
padding-top: 14px;
display: block;
color: #949494;
text-decoration: none;
padding-left: 30px;
border-top: 1px solid #2f2f2f;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<li class='menu_li'>
<a>input form
<span class='plus'><img src='plus.png'></span>
<span class='minus' style='display:none'></span>
</a>
<ul class='child_ul'>
<li>
কাজের বিনিময়ে খাদ্য
</li>
<li>
সেতু কালভারট
</li>
<li>
ঘূর্ণিঝড় আস্রয় কেন্দ্র
</li>
</ul>
</li>
<li class='menu_li'>
<a>Report
<span class='plus'><img src='plus.png'></span>
<span class='minus' style='display:none'><img src='minus.png'></span>
</a>
<ul class='child_ul'>
<li class='menu_li1'>
<a>food report
<span class='plus1'><img src='plus.png'></span>
<span class='minus1' style='display:none'><img src='minus.png'></span>
</a>
<ul class='child_ul1'>
<li>
কাজের বিনিময়ে খাদ্য সাধারণ
</li>
<li>
কাজের বিনিময়ে খাদ্য সমন্নিত
</li>
</ul>
</li>
<li>
রিপোর্ট আর্কাইভ
</li>
</ul>
</li>

Thanks Tushar your comment helped me. I solved my problem I placed event.stopPropagation(); for my sub sub menu section then it worked properly. So I placed my own answer with snippet if it helped others.
$(".menu_li").click(function(event){
//$('.child_ul').hide('slow');
//$(this).children('.child_ul').toggle('slow');
if ($(this).hasClass('selected'))
{
$(this).removeClass('selected');
$('.child_ul').hide('slow');
$(this).children().children('.plus').show();
$(this).children().children('.minus').hide();
}else {
$(".menu_li").removeClass('selected');
$('.child_ul').hide('slow');
$(this).addClass('selected');
$('.plus').show();
$('.minus').hide();
$(this).children('.child_ul').show('slow');
$(this).children().children('.plus').hide();
$(this).children().children('.minus').show();
}
});
$(".menu_li1").click(function(event){
//event.preventDefault();
event.stopPropagation();
console.log('brick me!');
//$('.child_ul').hide('slow');
//$(this).children('.child_ul').toggle('slow');
if ($(this).hasClass('selected'))
{
$(this).removeClass('selected');
$('.child_ul1').hide('slow');
$(this).children('.child_ul1').children('.plus1').show();
$(this).children('.child_ul1').children('.minus1').hide();
}else {
$(".menu_li1").removeClass('selected');
$('.child_ul1').hide('slow');
$(this).addClass('selected');
$('.plus1').show();
$('.minus1').hide();
$(this).children('.child_ul1').show('slow');
$(this).children('.child_ul1').children('.plus1').hide();
$(this).children('.child_ul1').children('.minus1').show();
}
});
.child_ul,
.child_ul1 {
display: none;
}
.left_menu ul li {
cursor: pointer;
}
.child_ul li,
.child_ul1 li {
border-left: 10px solid #222;
}
.child_ul,
.child_ul1 {
border-top: 1px solid #222;
}
.child_ul li a,
.child_ul1 li a {
background: #272525 none repeat scroll 0% 0% !important;
border-bottom: 1px solid #222;
}
.plus {
float: right;
margin-right: 5px;
}
.minus {
float: right;
margin-right: 5px;
}
ul li a {
background: #373737;
height: 30px;
padding-top: 14px;
display: block;
color: #949494;
text-decoration: none;
padding-left: 30px;
border-top: 1px solid #2f2f2f;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<li class='menu_li'>
<a>input form
<span class='plus'><img src='plus.png'></span>
<span class='minus' style='display:none'></span>
</a>
<ul class='child_ul'>
<li>
কাজের বিনিময়ে খাদ্য
</li>
<li>
সেতু কালভারট
</li>
<li>
ঘূর্ণিঝড় আস্রয় কেন্দ্র
</li>
</ul>
</li>
<li class='menu_li'>
<a>Report
<span class='plus'><img src='plus.png'></span>
<span class='minus' style='display:none'><img src='minus.png'></span>
</a>
<ul class='child_ul'>
<li class='menu_li1'>
<a>food report
<span class='plus1'><img src='plus.png'></span>
<span class='minus1' style='display:none'><img src='minus.png'></span>
</a>
<ul class='child_ul1'>
<li>
কাজের বিনিময়ে খাদ্য সাধারণ
</li>
<li>
কাজের বিনিময়ে খাদ্য সমন্নিত
</li>
</ul>
</li>
<li>
রিপোর্ট আর্কাইভ
</li>
</ul>
</li>

If event.stopPropogation() doesn't work alone across different browsers try using event.preventDefault() along with event.stopPropogation().

Develop Reference

JavaScript is the programming language of the Web.

Custom animation menu CSS/ jQuery - javascript

Related

jQuery On Click Child Element does not remove the parent Element Class

Drop Down direction changes according to free space

Added $(box).bind("click touchstart", function() { to my logic but not successful on iPad

dynamic fields class change per list element and Js to recognize part of the class

jQuery submenu not displaying correctly

Categories

Resources