I'm having some problems understanding the stracture of JQuery elements and how to move through the DOM tree.
My aim is to highlight (background color) the clicked link (a).
if the "li a" is inside ul which is not the main "menu" ul (meanning sub-menu link) then i want to highlight both the sub menu link and the top menu link.
My HTML code is:
<div id="site">
<div id="koteret">
<div id="top_menu">
<ul id="menu">
<li><a href="welcome.html" id="wel" title="HomePge" >home</a></li>
<li>read
<ul class="par">
<li><a href="welcome.html" id="b" title="title" >test</a></li>
<li>addRead</li>
</ul>
</li>
<li><a href="books.aspx" title="Books" >Books</a>
<ul class="par">
<li>Search</li>
<li>Register</li>
</ul>
</li>
<li><a href="contact.html" id="a" title="Contact" >CoNTACT</a></li>
</ul>
</div>
</div>
<div id="test">
<iframe id="con" src="welcome.html">ffffffffffffffffffffffffffffffsdfdsfsdfwefwfwfw
fwfwefwe<br />fwefwefw</iframe>
<div id="side_bar">fsfdsfsdf</div>
</div>
<div id="footer">footer</div>
</div>
</body>
As for the JQuery i tried this:
$(this).closest("ul").find("a").attr("id"));
and a few other versions with parents but i get "undefined" or empty strings when i check with alerts.
Can you help me understand where is my mistake?
I'm sure it's something very simple i just can't find it.
Thanks
To highlight the submenu link and its top most parent link use the following code:
$(this).css("background-color","red");
$(this).parents("li").last().find("a:first").css("background-color","red");
The first line highlights the link.
The second line will look for the top-most 'li' then select its immediate 'a' tag and highlight it
UPDATE:
To remove the highlight of the previous click use a CSS class:
.highlight {
background-color: red;
}
Then use the following code:
$("#menu").find(".highlight").removeClass('highlight');
$(this).addClass('highlight');
$(this).parents("li").last().find("a:first").addClass('highlight');
Related
I have the following bootstrap code which define our main menu navigation :-
<div class="col-xl-9 col-lg-9">
<div class="main-menu d-none d-lg-block">
<nav>
<ul id="navigation">
<li>home</li>
<li>FAQ</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
but i need to make the current page underline using bootstrap if possible?
Put a class in the one that is active and in css give the underline to the class
Like this:
<li class="active">home</li>
css:
.active{
border-bottom: xxxx;
border-color:xxxx;
border-style:xxx;
}
You need some JavaScript for this. Basically, you need to add a class dynamically, e.g. active to your active <li> element and then add some styles to this class. Check this article for further details.
I picked up HTML/CSS/Js a few days ago and I made my first very own website. I have this code that is a pop-up:
<div class="popupwindow">
<div class="popupbody">
<button class="closebtn">X</button>
<h3>Title</h3>
<p>Text</p>
</div>
</div>
And I have a menu with four buttons. The buttons look like so:
<ul>
<li class="menuone">button one</li>
<li class="menutwo"><a href="#">button two</a</li>
<li class="menuthree">button three</li>
<li class="menufour">button four</li>
</ul>
Right now my jQuery code only triggers when the button with the tag "menuone" is pressed.
My question is, can I use the same jQuery code somehow and generalize this?
You can use jquery selector for all buttons like following:
$('ul li a').on('click', function(){
// write your code here
})
I have a demo application here and in the upper left corners of the "tweets" there are dots and I have no idea where they come from. The code is written in Ember and the template looks like this
<h2>Ember.js DEMO Tweet list</h2>
<div class="tweets-list">
<h2>Tweets</h2>
<button {{action 'changeAllTweets'}}>Change All Tweets</button>
<button {{action 'changeOneTweet'}}>Change One Tweet</button>
<div class="row input-wrap">
</div>
{{#each this.model.topTweets as |model|}}
<li class="media">
<div {{action 'bindNewModel' this}} class="row">
<a class="pull-left" href="#"><img class="media-object" width="75" height="75" src={{model.avatar}}/></a>
<div class="media-body">
<h4 class="media-heading">{{model.favorites}}</h4>
<p>{{model.text}}</p>
</div>
</div>
<div class="row">
<div class="col-xs-4">
Expand
</div>
<div class="col-xs-8">
<ul class="list-inline text-right">
<li href="#">Reply</li>
<li href="#">Retweet</li>
<li href="#">Favorite</li>
<li href="#">More</li>
</ul>
</div>
</div>
</li>
{{/each}}
</div>
P.S. The SHOW LIST button must be pressed for the list to show
It's because you're using list items, i.e. <li> tags. They're shown with bullet points by default.
First of all, you should only use <li> tags inside an ordered or unordered list (<ol> / <ul>). You should consider if list items are appropriate here. Maybe <div>s are more suitable?
If you want to use list items you should wrap them in a <ul> list and then get rid of the bullet points by applying the styling: list-style-type: none.
Changing the display style of the list item will also get rid of the bullet point.
These are the list item markers. Add list-style:none; to the ul, and they will disappear.
Edit: I see that you are also missing the ul itself. The wrapping ul does not exist. These are just list items. Add the opening ul before the each statement and closing after it. And in case the list style none rule.
I'm on mobile and can't edit the fiddle.
There is HTML structural error.
Wrap the <li class="media"> with an <ul> tag. I can assume you are using Bootstrap. If yes then wrap the <li> tag with <ul class="list-group"> and add list-group-item class to the <li> tag like this: <li class="media list-group-item">
Please see this fiddle .I want to highlight the entire row of the parent for the drop down. Suppose in this scenario level1 and level23 should get highlighted as it is getting highlighted for the child items. I want to highlight the entire row with whole width. If it is the last child, I want to have bullet next to it. So, for the parent I want to highlight the entire row and for the child which doesn't have any further should have just square bullet next to it. Can someone please help me with these two things? As I am new to web UI technologies, I hardly got up to this working which took so much time. If someone could please help, would be appreciated.
<div class="row">
<div class="col-md-3">
<div class="well">
<div>
<ul class="nav">
<li>
<span class="glyphicon glyphicon-plus"></span><label label-default="" class="tree-toggle nav-header">Level1</label>
<ul class="nav tree" style="display: none;">
<li>Level21
</li>
<li>Level22
</li>
<li>
<span class="glyphicon glyphicon-plus"></span><label label-default="" class="tree-toggle nav-header">Level23</label>
<ul class="nav tree" style="display: none;">
<li>Level31
</li>
<li>Level32
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
In order to get the full width background color it looks like you will need to add some additional html. Basically I would add a div around level1 and level23 like so:
<div class="header-row"><span class="glyphicon glyphicon-plus"></span><label label-default="" class="tree-toggle nav-header">Level1</label></div>
You will then need to add some extra CSS:
.nav > li > .header-row:hover,
nav > li > .header-row:active{
text-decoration: none;
background-color: #000;
}
and adjust your toggle JS:
$(this).parent().parent().children('ul.tree').toggle(200);
heres the fiddle: http://jsfiddle.net/wshm6d5n/
I want to hide a text when I hover in my menu1 and on its sub menus too.
How can I do it ?
Here is my code :
http://jsfiddle.net/bulina/F2R7F/
<p id="text"> <b>This is the text that will hide on hover</b> </p>
<div id="menu4">
<ul>
<li id="list"><center><a href="#" >Menu1</a></center>
<ul>
<li>Sub1</li>
<li>Sub2</li>
<li>Sub3</li>
<li>Sub4</li>
<li>Sub5</li>
<li>Sub6</li>
<li>Sub7</li>
<li>Sub8</li>
</ul>
</li>
<li><center>Menu2</center>
<ul>
<li>Sub1</li>
<li>Sub2</li>
</ul>
</li>
<li><center>Menu3</center>
<ul>
<li>Sub7</li>
<li>Sub8</li>
</ul>
</li>
</div>
We can use jQuery hover method to handle both mouseEnter and mouseLeave events
by using its callbacks respectively.
$(selector).hover(mouseIn, mouseOut)
In above question, two different jQuery methods of hover and mouseout plays an independent role on same #text element. Hence their working doesn't give expected output.
All credits to #anton.
Refer fiddle from #anton comment above : jsfiddle.net/Alfie/F2R7F/2