Develop Reference

change parents div height on childs element height

I have div page and inside that div I have bootstrap multiselect container
<div class="content clearfix">
<ul class="multiselect-container dropdown-menu">
<li> ...</li>
</ul>
</div>
problem is that when there are many list items inside this multiselect element it stays hidden under parent div. How can I dynamically change parent div height as multiselection container element height change?
I tried already with
.content.clearfix {
height:auto;
}
but that doesn't helped

Try JS to set height dynamically as per your multi-list element height. Check if it can help to you. I just put this code inside setTimeout because in case your li elements are taking time to load on page. Please try without setTimeout function first.
$(document).ready(function(){
setTimeout(function(){
var multiselectHeight=$('.multiselect-container').height();
$('.content').height(multiselectHeight);
},1000);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content clearfix">
<ul class="multiselect-container dropdown-menu">
<li> ...</li>
</ul>
</div>

Change border of last row clicked in a dynamic table (using <ul>)

Here is my fiddle : http://jsfiddle.net/rshutxpj/3/
As you can see, when you click on the rows, there is a little border appearing. I basically want to only have the border change on the last row clicked, but I don't know what event to use to bring the previous row I clicked with no border. What would be the best way to do that?
P.S. I cant use the any type of "losefocus" or similar, because I got many table on my page and the last row clicked on this particular table need to stay visible to the user. Think it the same way as many groups of radiobox.
Here is the code:
<ul class="UploadTable" data-role="listview" data-inset="true" data-icon="false" style="min-width:350px">
<li style="text-align: center !important">
<label>UPLOAD SCHEDULE</label>
</li>
<li data-role="list-divider">
<div class="ui-grid-b">
<div class="ui-block-a" style="width:33%">Header 1</div>
<div class="ui-block-b" style="width:34%">Header 2</div>
<div class="ui-block-c" style="width:33%">Header 3</div>
</div>
</li>
<li id="addedTargetRow" class="fitting">
<a href="#" onclick="this.style.border='2px solid #000099;'">
<div class="ui-grid-b">
<div id="THW_ID" class="ui-block-a" style="width:33%">info1</div>
<div id="POS" class="ui-block-b" style="width:34%">info2</div>
<div id="IP" class="ui-block-c" style="width:33%">Info3</div>
</div> </a> </li>
<li id="addedTargetRow" class="fitting">
<a href="#" onclick="this.style.border='2px solid #000099;'">
<div class="ui-grid-b">
<div id="THW_ID" class="ui-block-a" style="width:33%">info1</div>
<div id="POS" class="ui-block-b" style="width:34%">info2</div>
<div id="IP" class="ui-block-c" style="width:33%">Info3</div>
</div> </a> </li>
<li id="addedTargetRow" class="fitting">
<a href="#" onclick="this.style.border='2px solid #000099;'">
<div class="ui-grid-b">
<div id="THW_ID" class="ui-block-a" style="width:33%">info1</div>
<div id="POS" class="ui-block-b" style="width:34%">info2</div>
<div id="IP" class="ui-block-c" style="width:33%">Info3</div>
</div> </a>
</li>
</ul>

You have duplicate IDs.
Why do want to have onclick on each anchor.(removed in demo)
Use this JS
$(document).on('click', '.fitting', function () {
$('.fitting').removeAttr('style'); // removes all previous borders
$(this).css('border', '2px solid #000099')// add border to current element
})
Demo
Warning:As you have only border in style attribute , removing it will not effect anything, Suppose if you have other styles along with border don't use .removeAttr('style'); , Use .css('border', 'none') like below
$(document).on('click', '.fitting', function () {
$('.fitting').css('border', 'none')// removes all previous borders
$(this).css('border', '2px solid #000099')// add border to current element
})
Update :
If there are multiple tables then use this $(this).parents('table').find('.fitting').css('border', 'none')
this finds the fitting elements of the table in which the row is clicked, excluding the same elements in other tables in DOM

NOTE: #J Santosh's answer will toggle all links in all of the tables and the question mentioned that there are multipe tables on the page would all lose their highlighting.
Having your onclick links on the list items will make this messy and is not performant (as I'll go thru below). To stay within The solution you are looking for is:
onclick="var links=this.parentNode.parentNode.querySelectorAll('.fitting a') || [], i = links.length; for (;!!i;i--) { links[i].style.border='none'; } this.style.border='2px solid #000099';"
This will make sure you are only removing the highlighted row from that table.
HOWEVER, There are some very concerning things about this structure.
Your id's are not unique. You should remove the id attributes.
You can use the href=javascript:"/* onclick stuff goes here */" instead of adding an onclick attribute.
There is no need to use anchor tags in the li as you are doing. Adding extra DOM items makes your DOM heavier and the page slower. I suspect you are only adding those because you want the pointer icon. You can fix that with CSS.
Your onclicks will all need to be updated the same way and makes your code less reusable. Adding eventHandlers to every li also is expensive in that the function isn't cached and requires extra resources for each DOM element.
Setting the style purely in javascript might be better done in CSS since it will be tied to your page layout styling. Create a class called "selected" or something similar and add the class onclick.
SO here is how I would code it:
HTML:
REMOVE ALL OF YOUR LINKS! You are using anchor tags wrong! Also, remove all of your id's.
CSS:
li.fitting { cursor: pointer; }
li.fitting.selected { border: 2px solid #000099 }
Javascript:
$(function(){
$('li.fitting').on('click', function() {
$(this).siblings().removeClass('selected');
$(this).addClass('selected');
});
});

You could use the HTML state of :focus and the JS "blur" event, hooked using the HTML attribute onblur. So, you would amend your onclick to this.style.border='2px solid #000099';this.focus(); and add onblur="this.style.border='none';" to that same link.

Styling Bootstrap tabbable nav

I'd like the functionality of the Bootstrap tabbable nav but I want to style each tab with a background image and text underneath. In fact, what I'd really like is to just put my photoshop images right in each tab and set the active state to my selected image.
I'm having a very difficult time doing this. Is it going to take a lot of custom work to get this working with this component?
I thought I could just try with some CSS but it's not giving me the correct formatting I want:
ul.nav.nav-tabs li {
display:inline-block;
background:url(../images/skypeIcon.png) no-repeat left center;
background-size:20px auto;
font-size:15px;
padding:2px 0 2px 28px
}
By the way, I'm using Bootstrap 2.3 so I can't use Bootstrap 3 Navbar Generator.

I can use a div tag inside my a tag and put whatever content I want in there.
<ul class="nav nav-tabs">
<li class="active">
<a href="#tab1" data-toggle="tab">
<div>
<img src="<%=context%>/images/defaultAvatar.png"/>
<br/>
Computer
</div>
</a>
</li></ul>

How to create hover effects for all links EXCEPT the one you hover on using javascript/jquery/css?

I recently saw a very interesting effect I would like to create in a navbar for a website. The effect was a hover effect, used for links in a menu list. Instead of the typical "change the link when you hover over it" , it changes every OTHER link BESIDES the one you are hovering. In the example I saw when you hover over one link in the list, it applied an opacity fade to all the other links, leaving the link you are hovering over at full opacity.
now i've tried some css things that ive looked up, something like this:
.menu-link:a + .menu-link {opacity: 0.7;}
...but that only achieved the effect for the link next to it , not all links with the same class. I'm assuming this can be achieved with javascript but im such a noob I cannot figure it out.
So could anyone help me figure out how to code up a quick function like this in either jquery or javascript? something that looks for a hover on an object with a specific class and then having an effect (such as lowering opacity) performed on all other objects with that class? Thanks for any help!
EDIT: okay i was asked to provide some code. this is the "menu of links" i have been working on, the are just a series of unordered lists that show up in a header div at the top of the page:
<div class="col-lg-2 col-md-2 menu-border">
<div class="menu-list">
<h4 class="list-title">Blog</h4>
<ul>
<li><a class="menu-link" href="#">Archive</a></li>
<li><a class="menu-link" href="#">Search</a></li>
<li><a class="menu-link" href="#">Tag Cloud</a></li>
</ul>
</div>
</div>
<div class="col-lg-2 col-md-2 menu-border">
<div class="menu-list">
<h4 class="list-title">Profile</h4>
<ul>
<li><a class="menu-link" href="#">Artist Profiles</a></li>
<li><a class="menu-link" href="#">Submit A Profile</a></li>
</ul>
</div>
</div>
<div class="col-lg-2 col-md-2 menu-border">
<div class="menu-list">
<h4 class="list-title">Connect</h4>
<ul>
<li><a class="menu-link" href="#">SoundCloud</a></li>
<li><a class="menu-link" href="#">linkedIN</a></li>
</ul>
</div>
</div>
they are just a few sub menus; however i have given all the links in all the sub menus a class ("menu-link") and I'm trying to figure out how to make a function that when hovering over one link with the "menu-link" class, all other links with that class do something (in my particular case i want them to fade to a > 1 opacity )

Using jQuery, you could do something like this:
jQuery
$('a.menu-link').hover(function(){
$('a.menu-link').not(this).toggleClass('toggle');
})
CSS
.toggle {
opacity: 0.7;
}
Here is a fiddle of it in action: http://jsfiddle.net/HMq67/
Using toggleClass() and not() you can change the style of every element that is not the one you are hovering over.

Give this jsFiddle a try. If nothing else, it should get you going.
In essence, you will need javascript to listen for the mousover and mouseout events. Then select all elements except the one you are currently hovering over.
$('nav li a').mouseover(function () {
$('nav li a').not($(this)).addClass('hover');
});
$('nav li a').mouseout(function () {
$('nav li a').not($(this)).removeClass('hover');
});

4 years later...lol.
You can achieve this with simple CSS!
For the code you provided above it would look like this:
.menu-list ul:hover .menu-link {
opacity: 0.7;
}
.menu-list ul:hover .menu-link:hover {
opacity: 1;
}
.menu-list ul li a {
display: block;
}
Fiddle: https://jsfiddle.net/fz6bumxx/6/
Note - I'm setting the a tags within each list items to block so that you can't trigger the link fades without hovering over one of the links.
Hope this helps!

Remove a parent class from a child element before calling method on parent (javascript/jquery)

Say I have the following unordered list
<ul class="foo">
<li>
<div class="bar">
</div>
<div class="baz">
</div>
</li>
<li>
<div class="bar">
</div>
<div class="baz">
</div>
</li>
</ul>
<div class="nav">
<a class="prev-link">Previous</a>
<a class="next-link">Next</a>
</div>
I pass the list to a carousel like so $(".foo").carouFredSel(//options) however i don't want the class bar to be affected by the carousel.
I've tried $('.bar').removeClass('foo') before calling the carousel, but it doesn't seem to work... it is still part of the carousel. How can i prevent that one div from inheriting the parent class or is there a different way I can prevent that div from being treated as part of the carousel i.e. (just left in place)?

You could try using the !important CSS rule on the .bar class properties you don't want to overwrite. But that's probably not the best use of the rule.
You could also try :not() with the Foo class selector.

This will remove the class foo from your whole ul, if that's what you're going for.
$('.bar').parents('.foo').removeClass('foo');