This question already has answers here:
Trigger click jquery not working
(4 answers)
Closed 6 years ago.
I am trying to pass a click event on parent li element to its child a.
following is the code I have tried, which does not seem to work. Where did i go wrong? and what is the best way to achieve this.
EDIT I understand I can restyle my a elements and get myself completely out of this situation. But I want to know why the bellow code is not working and what is a propper way to achive this kind of passing of events.
$('.menuItem').click(function() {
$(this).children('a').trigger('click');
});
ul {
list-style: none;
padding: 0px;
position: relative;
z-index: 1000;
display: inline-block;
background-color: white;
height: 30px;
}
ul li {
display: inline-block;
padding: 20px;
margin-right: 0px;
font-weight: 500;
background-color: white;
cursor: pointer;
}
ul li:hover {
background-color: red;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="menuItem">
<a href="www.google.com">
Home
</a>
</li>
<li class="menuItem">
<a href="www.google.com">
About
</a>
</li>
<li class="menuItem">
<a href="www.google.com">
News
</a>
</li>
<li class="menuItem">
<a href="www.google.com">
Gallery
</a>
</li>
<li class="menuItem">
<a href="www.google.com">
Media
</a>
</li>
<li class="menuItem">
<a href="www.google.com">
Contact
</a>
</li>
</ul>
Why not do it this way?
$('.menuItem').click(function() {
var href = $('a', this).attr('href');
window.location.href = href; //causes the browser to refresh and load the requested url
});
Related
for some reason the close button on the sidebar is not showing nor working, the show sidebar works perfectly fine however the closing function is not working. im providing the html, css ans javascript related to the close function
here's my html:
<aside class="sidenav">
<div class="sidenav__close-icon">
<i class="bi bi-x-lg"></i>
</div>
<img class="sidenav__logo" src="../static/img/ManageX5.png">
<ul class="sidenav__list">
<li class="sidenav__list-item">
<a class="sidenav__list-item-items" href="{{url_for('dashboard')}}">Dashboard</a>
</li>
<li class="sidenav__list-item">
<a class="sidenav__list-item-items" href="{{url_for('profile')}}">Profile</a>
</li>
<li class="sidenav__list-item">
<a class="sidenav__list-item-items" href="{{url_for('users')}}">Users</a>
</li>
<li class="sidenav__list-item">
<a class="sidenav__list-item-items" href="{{url_for('projects')}}">Projects</a>
</li>
<li class="sidenav__list-item">
<a class="sidenav__list-item-items" href="{{url_for('sites')}}">Sites</a>
</li>
</ul>
<ul class="sidenav__logout">
<li class="list-logout-item">
<a class="sidenav__list-item-logout" href="#">logout</a>
</li>
</ul>
</aside>
this is the JS part:
const menuIconEl = $('.menu-icon');
const sidenavEl = $('.sidenav');
const sidenavCloseEl = $('.sidenav__close-icon');
/*===== Add and remove provided class names =====*/
function toggleClassName(el, className) {
if (el.hasClass(className)) {
el.removeClass(className);
} else {
el.addClass(className);
}
}
/*===== Open the side nav on click =====*/
menuIconEl.on('click', function() {
toggleClassName(sidenavEl, 'active');
});
/*===== Close the side nav on click =====*/
sidenavCloseEl.on('click', function() {
toggleClassName(sidenavEl, 'active');
});
and this is the css related to the sidebar:
.sidenav__close-icon {
position: absolute;
visibility: visible;
top: 8px;
right: 12px;
cursor: pointer;
font-size: 20px;
color: #000;
}
The reason of why you can't see the close icon isn't showing up is that you don't have the necessary styles that makes the element (.sidenav__close-icon) to be rendered/shown as an icon.
If you have it somewhere in your project, I suggest you making some tweaks like the following:
You can use jQuery's toggleClass method to toggle a class
function toggleClassName(el, className) {
el.toggleClass(className);
}
The close button/icon has CSS properties (position, top, right) that makes it positioned to top right of the page which results in not visible. You may have to add the following CSS in order to give close icon a relative position. In your case, the relativity can be inherited from its parent, the .sidenav element.
.sidenav {
position: relative;
width: 200px;
}
.sidenav__close-icon {
position: absolute;
visibility: visible;
top: 8px;
right: 12px;
cursor: pointer;
font-size: 20px;
color: #000;
}
Here's a snippet which toggles active class and demonstrates the change
const menuIconEl = $('.menu-icon');
const sidenavEl = $('.sidenav');
const sidenavCloseEl = $('.sidenav__close-icon');
/*===== Add and remove provided class names =====*/
function toggleClassName(el, className) {
el.toggleClass(className);
// Much shorter, but the following lines can also work
/*if (el.hasClass(className)) {
el.removeClass(className);
} else {
el.addClass(className);
}*/
}
/*===== Open the side nav on click =====*/
menuIconEl.on('click', function () {
toggleClassName(sidenavEl, 'active');
});
/*===== Close the side nav on click =====*/
sidenavCloseEl.on('click', function () {
toggleClassName(sidenavEl, 'active');
});
.sidenav {
position: relative;
width: 200px;
}
.sidenav__close-icon {
position: absolute;
visibility: visible;
top: 8px;
right: 12px;
cursor: pointer;
font-size: 20px;
color: #000;
}
.active {
outline: 1px solid red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<aside class="sidenav">
<div class="sidenav__close-icon">
<i class="bi bi-x-lg">X</i>
</div>
<img class="sidenav__logo" src="../static/img/ManageX5.png">
<ul class="sidenav__list">
<li class="sidenav__list-item">
<a class="sidenav__list-item-items" href="{{url_for('dashboard')}}">Dashboard</a>
</li>
<li class="sidenav__list-item">
<a class="sidenav__list-item-items" href="{{url_for('profile')}}">Profile</a>
</li>
<li class="sidenav__list-item">
<a class="sidenav__list-item-items" href="{{url_for('users')}}">Users</a>
</li>
<li class="sidenav__list-item">
<a class="sidenav__list-item-items" href="{{url_for('projects')}}">Projects</a>
</li>
<li class="sidenav__list-item">
<a class="sidenav__list-item-items" href="{{url_for('sites')}}">Sites</a>
</li>
</ul>
<ul class="sidenav__logout">
<li class="list-logout-item">
<a class="sidenav__list-item-logout" href="#">logout</a>
</li>
</ul>
</aside>
I have a simple html list like this...
.special {
background: yellow;
}
li:hover {
background: purple;
color:white;
}
<ul>
<li class="special">
<a href="#">
Item 1
</a>
</li>
<li>
<a href="#">
Item 2
</a>
</li>
<li class="special">
<a href="#">
Item 3
</a>
</li>
<li class="special">
<a href="#">
Item 4
</a>
</li>
<li>
<a href="#">
Item 5
</a>
</li>
</ul>
When a menu item with the special class is being hovered I want the background yellow color to be disabled on all items except the hover.
Is there a way I can do this with CSS or do I need to add some javascript?
You can do it with CSS. Use the selector ul:hover li to select all li tags which are descendants of uls which are being hovered on. And if you add a bit more CSS and a transition, you will get a cool effect. Try hovering over one li tag and then hovering over another one immediatly
li, li a {
transition:
all 0.5s cubic-bezier(1,0.5,0,0.5),
font-size 0.25s cubic-bezier(0,1,1,0);
-moz-transition:
all 0.5s cubic-bezier(1,0.5,0,0.5),
font-size 0.25s cubic-bezier(0,1,1,0);
-webkkit-transition:
all 0.5s cubic-bezier(1,0.5,0,0.5),
font-size 0.25s cubic-bezier(0,1,1,0);
text-align: center;
height: 22px;
}
.special {
background: orange;
}
ul:hover li{
background: white
}
ul:hover li:hover {
background: red;
height: 35px;
}
ul li a {
font-size: 16px;
}
ul:hover li a {
font-size: 20px;
}
ul:hover li:hover a {
color: white;
font-weight: 1000;
font-size: 30px;
}
<ul>
<li class="special">
<a href="#">
Item 1
</a>
</li>
<li>
<a href="#">
Item 2
</a>
</li>
<li class="special">
<a href="#">
Item 3
</a>
</li>
<li class="special">
<a href="#">
Item 4
</a>
</li>
<li>
<a href="#">
Item 5
</a>
</li>
</ul>
I'm having a bit of a problem where i don't know how to adjust the nav-tabs bootstrap/css file.
I want to add an image file inside the nav-tabs and make it so that the image became an icon and have the margin-bottom be near the wording of the nav-tabs. As far as my progress goes, most of my attempts seems to have failed to achieve what I want.
<ul class="nav nav-tabs" role="tablist" id="CreditCardInfoTab">
<li role="presentation" class="fa-sans" id="lstItemTabSaved">
<a href="#saved" aria-controls="saved" class="lbl-credit fa-sans" role="tab" data toggle="tab">
<i class="icon-cd" src="../Images/tab-creditcard.png">
<img style="margin-bottom: 0;" alt="credit/debit" />
</i> Pay with Saved Credit Card
</a>
</li>
<li role="presentation" class="fa-sans">
<a href="#new" aria-controls="new" class="lbl-credit fa-sans" role="tab" data-toggle="tab">
<div class="icon-cd" style="margin-bottom: 0px;">
<img src="../Images/tab-creditcard.png" />
</div>
Pay with New Credit Card
</a>
</li>
</ul>
As you can see in here ^, the saved tab tab became like that. I would appreciate any suggestion. thanks
Based on the inserted image, I can see that this is what you want if you can change the HTML structure!
img {
width: 48px;
height: 48px;
}
ul {
list-style: none;
}
ul li {
display: inline-block;
text-align: center;
border: 1px solid #ff0000;
}
<ul class="nav nav-tabs" role="tablist" id="CreditCardInfoTab">
<li role="presentation" class="fa-sans" id="lstItemTabSaved">
<a href="#saved" aria-controls="saved" class="lbl-credit fa-sans" role="tab" data toggle="tab">
<img src="https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fwww.newdesignfile.com%2Fpostpic%2F2013%2F08%2Fcredit-card-icon_363389.png&f=1&nofb=1" style="margin-bottom: 0;" alt="credit/debit" />
<p>Pay with Saved Credit Card</p>
</a>
</li>
<li role="presentation" class="fa-sans">
<a href="#new" aria-controls="new" class="lbl-credit fa-sans" role="tab" data-toggle="tab">
<img src="https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fwww.newdesignfile.com%2Fpostpic%2F2013%2F08%2Fcredit-card-icon_363389.png&f=1&nofb=1" />
<p>Pay with New Credit Card</p>
</a>
</li>
</ul>
The goal was to become like this:
As you can see, the icon is near towards the title, also the tab outline when click(active) become white in color and also red for the title
I've done some modification towards the css
.nav-tabs>li.active>a,
.nav-tabs>li.active>a:hover,
.nav-tabs>li.active>a:focus {
background-color: #fff;
font-weight: 700;
color: #c72027;
height: 90px;
}
.nav-tabs {
background-color: #FAFAFA;
font-weight: 700;
color: #CCC;
border: solid 1px #ddd;
height: 90px;
}
<ul class="nav nav-tabs" role="tablist" id="CreditCardInfoTab">
<li role="presentation" class="fa-sans" id="lstItemTabSaved">
<a href="#saved" aria-controls="saved" class="lbl-credit fa-sans center" role="tab" data-toggle="tab">
<i style="padding:5.8%; padding-bottom: 0px; margin: 0px auto; float: none; display: table;"><img style="Height: 22px; Width: 32px;" alt="credit/debit" src="../Images/tab-creditcard.png" /><br/></i>
<div style="font-weight: 700; font-size: 12px; padding-bottom:10%">Pay with Saved Credit Card</div>
</a>
</li>
<li role="presentation" class="fa-sans">
<a href="#new" aria-controls="new" class="lbl-credit fa-sans" role="tab" data-toggle="tab">
<i style="padding:6.8%; padding-bottom: 0px; margin: 0px auto; float: none; display: table;"><img style="Height: 22px; Width: 32px;" alt="credit/debit" src="../Images/tab-creditcard.png" /><br/></i>
<div style="font-weight: 700; font-size: 12px; padding-bottom:10%">Pay with New Credit Card</div>
</a>
</li>
</ul>
Its a bit of a mess since i directly apply the style towards the div
but it works and I got this:
However, if anyone can advice me on how to make my css structure more cleaner, do share. thanks!
So I was modifying HTML to make drop down panels in order to minimize use of JavaScript.
.nav-link {
border: 1px solid black;
margin: 10px;
text-decoration: none;
}
.panel-link {
display: none;
position: absolute;
}
.nav-link:hover .panel-link {
display: block;
}
<nav class="nav">
<a href="withoutchild.html" class="nav-link">
<span>Without Child</span>
<nav class="panel-link">
<h1>Works</h1>
</nav>
</a>
<a href="withchild.html" class="nav-link">
<span>With Child</span>
<nav class="panel-link">
<a>Not Works</a>
</nav>
</a>
</nav>
When you hover both of them, you notice that only the first link opens its drop down panel when you hover it. However, with the second link (Which was layed out exactly the same), it did not because it had a link element as the child. When I view the inspector of Chrome, I realized the '.panel-link' element moved out of the '.nav-link' element, and is now a sibling of '.nav-link'. which looked just like this:
<nav class="nav">
<a href="withoutchild.html" class="nav-link">
<span>Without Child</span>
<nav class="panel-link">
<h1>Works</h1>
</nav>
</a>
<a href="withchild.html" class="nav-link">
<span>With Child</span>
</a>
<!-- This element is moved outside its parent -->
<nav class="panel-link">
<a>Not Works</a>
</nav>
</nav>
Nested <a> (anchor tags) are illegal and result in unrecoverable errors.
In plain English, browsers ignore all contents of the nested <a>, until they meet the end of this tag (</a>), which they use to close the parent <a> tag.
Use the HTML validator of your choice for more details. I use nu.
I think the issue is that you have an <a> tag within a parent <a> tag.
I'm not sure what you wanted the <h1> text/link to look like so kept it in anyway. Using CSS, hovering a div can reveal another div.
.panel-link {
border: 1px solid black;
margin: 10px;
text-decoration: none;
}
.nav-link {
position: relative;
display: inline-block;
}
.nav-link-content {
display: none;
position: absolute;
z-index: 1;
}
.nav-link-content a {
color: black;
padding: 2px 16px;
display: block;
}
.nav-link-content a:hover {
background-color: #fff000
}
.nav-link:hover .nav-link-content {
display: block;
}
<nav class="nav">
<div class="nav-link">
<span>Without Child</span>
<div class="nav-link-content">
<h1>Works</h1>
</div>
</div>
<div class="nav-link">
<span>With Child</span>
<div class="nav-link-content">
Child 1
Child 2
Child 3
</div>
</div>
</nav>
This question already has an answer here:
keeping a: active until another link is clicked
(1 answer)
Closed 7 years ago.
I'm trying to do this: user clicks link, then the clicked link turns yellow and stay yellow until I click a link that's next to the clicked link. so they need to toggle. (not :active) this should be done with onclick I think. I personally want to do with css tho.
<div id="Space">
<ul>
<li role="presentation" class="sort">
hot
</li>
<li role="presentation" class="date">
update
</li>
</ul>
</div>
currently in css, I have
#Space li {
display: inline;
margin-left: 10px;
padding-bottom: 11px;
}
#Space li:hover {
border-bottom: 5px solid #6495ED;
}
and nothing for js. Javascript goes in html with <script></script> right? Any help would be appreciated, thank you :)
You can use :active along with :hover:
#Space li:active,
#Space li:hover {
border-bottom: 5px solid #6495ED;
}
Now, this kinda stays till you click another link. But there are better methods using <input type="radio" /> that persists.
#Space li {
display: inline;
margin-left: 10px;
padding-bottom: 11px;
}
#Space li:focus,
#Space li:hover {
border-bottom: 5px solid #6495ED;
outline: 0;
}
<div id="Space">
<ul>
<li role="presentation" class="sort" tabindex="1">
hot
</li>
<li role="presentation" class="date" tabindex="1">
update
</li>
</ul>
</div>
I used :focus in the above example, because the :hover is tied to the <li> and not in <a>.
JavaScript version could be as simple as adding and removing an .active class.
Use color in hover: selecor
#Space li {
display: inline;
margin-left: 10px;
padding-bottom: 11px;
}
#Space li:hover {
border-bottom: 5px solid #6495ED;
color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="Space">
<ul>
<li role="presentation" class="sort">
hot
</li>
<li role="presentation" class="date">
update
</li>
</ul>
</div>