Hi I would like to get the current height of an element, then assign the height to the next element and so on..
For example
<ul>
<li class="elem1">Element here </li>
<li class="elem2">Element here </li>
<li class="elem3">Element here </li>
</ul>
Before:
elem1 = 100px
elem2 = 300px
elem3 = 150px
After:
elem1 = 100px (preserve it's height)
elem2 = 100px (will have the height from elem 1 which is 100px)
elem3 = 300px (will have the height of elem 2 which is 300px)
jquery code:
$('ul li').each(function(index){
var elem = $(this);
elem.next().css('height', elem.height()+'px');
});
It's not working. Kindly help me. Thanks.
If you are going to change the height, you need to read it before you change it. So that means you need to start at the end and work your way to the beginning.
var lis = $('ul li');
for(var i=lis.length-1;i>0;i--) {
lis.eq(i).height( lis.eq(i-1).height() );
}
Try this out:- http://jsfiddle.net/adiioo7/hW9ux/
JS:-
$('ul li').each(function (index) {
var elem = $(this);
elem.next().attr('data-height', elem.height() + 'px');
});
$('ul li').each(function (index) {
var elem = $(this);
if (elem.data("height")) {
elem.height(elem.data("height"));
elem.removeData("height");
}
});
CSS:-
.elem1 {
height:100px;
}
.elem2 {
height:200px;
}
.elem3 {
height:300px;
}
HTML:-
<ul>
<li class="elem1">Element here</li>
<li class="elem2">Element here</li>
<li class="elem3">Element here</li>
</ul>
its very simple.. just you the reverse that it..
$($("ul li").get().reverse()).each(function(index){
var elem = $(this);
elem.next().css('height', elem.height()+'px');
})
it will work perfectly.. !! try it
Try this.
<ul>
<li class="elem1">Element here </li>
<li class="elem2">Element here </li>
<li class="elem3">Element here </li>
</ul>
Jquery Code
var incr, i=0;
$('li').each(function(){
var $this = $(this);
incr = $this.height();
if(i == 0){
$this.next().height( $this.height());
i++;
} else {
$this.next().height( $this.height()+incr);
}
});
CSS:
.elem1 {height:100px;}
li {background-color:grey; width:100px;}
Working Demo: http://jsfiddle.net/xMGJe/4/
Related
<ul id="List">
<li class="li">1</li>
<li class="li">2</li>
</ul>
<ul id="List2"></ul>
const items = document.querySelectorAll(".li");
for(var i = 0; i < items.length; i++){
items[i].onclick = function(){
const list = document.getElementById("List2");
list.insertBefore(items[i], list.childNodes[0]);
}
}
im trying to move the clicked li element to another ul with the insertBefore method but it doesnt do anything when i click on one of the li elements, how can i do this? or am i doing anything wrong? Thanks in advance :D
Pure JS solution EDIT: The second solution is the more correct one
You can use append like :
const listone = document.querySelector("#List");
const listwo = document.querySelector("#List2");
var li = listone.querySelectorAll("li");
for (var i = 0; i < li.length; i++) {
li[i].onclick = function() {
listwo.append(this);
}
}
function MoveLi(el){
}
#List li{
color:red;
}
#List2 li{
color:blue;
}
<ul id="List">
<li>1</li>
<li>2</li>
</ul>
<ul id="List2"></ul>
After some tips in the comments, addEventListener solution:
const listone = document.querySelector("#List");
const listwo = document.querySelector("#List2");
const li = listone.querySelectorAll("li");
function MoveLi(){
listwo.append(this);
this.removeEventListener("click", MoveLi);
}
li.forEach( (el) => {
el.addEventListener("click", MoveLi);
});
#List li{
color:red;
}
#List2 li{
color:blue;
}
<ul id="List">
<li>1</li>
<li>2</li>
</ul>
<ul id="List2"></ul>
As you've tagged jQuery in the question, this can be achieved by using appendTo(). As you've only got 2 ul elements in the DOM the logic is simply to append the clicked li to the ul which is not its parent. Try this:
let $uls = $('#List, #List2');
$('li').on('click', e => {
let $li = $(e.target);
$li.appendTo($uls.not($li.closest('ul')));
});
/* Just to make the demo clearer: */
ul { border: 1px solid #C00; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="List">
<li class="li">1</li>
<li class="li">2</li>
<li class="li">3</li>
<li class="li">4</li>
<li class="li">5</li>
</ul>
<ul id="List2"></ul>
Assign the click handler to the original UL element - otherwise your LI elements will swap positions even after appended to the target UL (List2)
Use Event.target.closest("li") to retrieve the LI element
Finally, use Element.append()
const EL_list = document.querySelector("#List");
const EL_list2 = document.querySelector("#List2");
EL_list.addEventListener("click", (ev) => {
const EL_LI = ev.target.closest("li");
EL_list2.append(EL_LI);
});
#List2{background:gold;}
<ul id="List">
<li class="li">1</li>
<li class="li">2</li>
</ul>
<ul id="List2"></ul>
Tip: Never use onclick unless you create brand new Elements from in-memory. Use the better additive method Element.addEventListener() instead
when i scroll the page, i want to add class active menu item.
i can get the current div id like this var currSection = $(this).attr('id'). im stuck with id and data-id matching.
here is the codes. ty for helping guys.
$(document).scroll(function() {
var cutoff = $(window).scrollTop();
$('div').each(function(){
if($(this).offset().top + $(this).height() > cutoff){
$('div').removeClass('current');
$(this).addClass('current');
var currSection = $(this).attr('id');
console.log(currSection);
if ($('.circle li').data('id') == currSection) {
};
return false;
}
});
});
ul{
position:fixed;
z-index:9;
top:0;
}
.active{
color:red;
}
div{
height:500px;
}
div:nth-child(odd){
background:green;
}
div:nth-child(even){
background:blue;
}
<div id="home"></div>
<div id="who"></div>
<div id="team"></div>
<div id="why"></div>
<div id="contact"></div>
<ul class="circle">
<li data-id="home" class="active">a</li>
<li data-id="who">b</li>
<li data-id="team">c</li>
<li data-id="why">d</li>
<li data-id="contact">f</li>
</ul>
Change scroll event listener to this
$(document).scroll(function () {
var cutoff = $(window).scrollTop();
$('div').each(function () {
if ($(this).offset().top + $(this).height() > cutoff) {
$('div').removeClass('current');
$(this).addClass('current');
var currSection = $(this).attr('id');
console.log(currSection);
$('li').removeClass('active');
$('li[data-id=' + currSection + ']').addClass('active');
return false;
}
});
});
I want to show 3 li and after 1 second these 3 li will be slide up and next 3 li will be automatically show up in the div.#content
<div id="content">
<ul>
<li>122</li>
<li>first</li>
<li>second</li>
<li>third</li>
<li>fourth</li>
<li>fifth</li>
<li>sixth</li>
</ul>
</div>
I tried toggle with setTimeout function, but it does fulfill on my requirements. I know this question may be stupid for someone but believe I really need your guideline please guide me how can i done this task. I will appreciate if someone guide me. I don't want to use any plugin.
A better way (not a semantic way, but) to achieve this is to wrap every 3 <li> and then walk through them. One way is:
$(function () {
var lis = $("ul > li");
for(var i = 0; i < lis.length; i+=3) {
lis.slice(i, i+3).wrapAll("<div class='slide'></div>");
}
$(".slide").hide();
$(".slide:first").slideDown();
setInterval(function () {
if ($(".slide:visible").next(".slide").length == 0) {
$(".slide:visible").slideUp(function () {
$(".slide:first").slideDown();
});
}
else
$(".slide:visible").slideUp(function () {
$(this).next(".slide").slideDown();
});
}, 2500);
});
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<div id="content">
<ul>
<li>122</li>
<li>first</li>
<li>second</li>
<li>third</li>
<li>fourth</li>
<li>fifth</li>
<li>sixth</li>
</ul>
</div>
You can use :lt() and :gt() pseudo selectors
var i = 2,
$ul = $('#content ul'),
int = setInterval(function() {
$('li', $ul).slideUp();
$('li:gt(' + i + '):lt(3)', $ul).slideDown();
i += 3;
if (i + 1 >= $('li', $ul).length) clearInterval(int);
},
2000)
#content ul li:nth-child(n+4) {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="content">
<ul>
<li>122</li>
<li>first</li>
<li>second</li>
<li>third</li>
<li>fourth</li>
<li>fifth</li>
<li>sixth</li>
<li>first</li>
<li>second</li>
<li>third</li>
<li>fourth</li>
<li>fifth</li>
<li>sixth</li>
</ul>
</div>
UPDATE:
If you want to slide continuously then following code can be used
var i = 2,
$ul = $('#content ul'),
int = setInterval(function() {
$('li', $ul).slideUp();
$('li' + (i == -1 ? '' : ':gt(' + i + ')') + ':lt(3)', $ul).slideDown();
i += 3;
if (i + 1 >= $('li', $ul).length) i = -1;
},
2000)
#content ul li:nth-child(n+4) {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="content">
<ul>
<li>122</li>
<li>first</li>
<li>second</li>
<li>third</li>
<li>fourth</li>
<li>fifth</li>
<li>sixth</li>
<li>first</li>
<li>second</li>
<li>third</li>
<li>fourth</li>
<li>fifth</li>
<li>sixth</li>
</ul>
</div>
You can try this:
$("li").hide(); // this will hide all li first
$('ul li:lt(3)').show(); // this will display first 3 li from all li
You can do like this,
$("#content ul li").hide();
i = 0;
setInterval(function() {
i = (i + 3) % $("#content ul li").length;
$("#content > ul >li").slideUp();
$("#content > ul >li:gt(" + i + ")").slideDown();
$("#content > ul >li:gt(" + (i + 3) % $("#content ul li").length + ")").hide();
}, 1000);
Fiddle
Here is another possibility:
var steps = 3;
$(function tick() {
setTimeout(function () {
var top = '-=' + (steps * 31) + 'px';
var lis = $('li:lt(' + steps + ')');
var clones = lis.clone().appendTo('ul');
$.when(
$('li').animate({ top: top }, 'slow')
).done(function () {
clones.remove();
lis.appendTo('ul');
$('li').css('top', 'auto');
tick();
});
}, 1000);
});
* {
padding: 0;
margin: 0;
}
ul {
overflow: hidden;
height: 92px;
}
li {
display: block;
position: relative;
line-height: 30px;
padding: 0 10px;
background: #DDD;
margin-bottom: 1px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul><li>A</li><li>B</li><li>C</li><li>D</li><li>E</li><li>F</li><li>G</li><li>H</li></ul>
http://jsfiddle.net/deepansh/BHCZ4/2/ this is a fiddle.
I want to save toggle state in cookie so that after page reload I get the same state, and I want to close previously-open list after clicking for opening new list.
I want to do in in minimum lines.
HTML
<ul class="nav sidebar-nav" id="am_menu">
<li> <span>User</span>
<ul>
<li>Add User
</li>
<li>List User
</li>
<li>User Profile
</li>
</ul>
</li>
<li> <span>User</span>
<ul>
<li>Add User
</li>
<li>List User
</li>
<li>User Profile
</li>
</ul>
</li>
</ul>
CSS:
ul {
width: 200px;
}
img {
width: 14px;
}
li ul {
display: none;
}
li ul {
padding-left: 4em;
list-style:none;
}
li ul li {
line-height:35px;
}
li ul li ul {
padding-left: .5em;
}
JS
$(function () {
$('li').filter(function (i) {
return $('ul', this).length >= 1;
}).each(function (i) {
$(this).children("a")
.click(function (e) {
var $ul = $(this).next("ul");
if ($ul.is(":visible")) {
$ul.find("ul").toggle("slow()");
$ul.toggle("slow()");
} else {
$ul.toggle("slow()");
};
})
});
});
I'd personally take the approach (using, as in Arun's answer, the $.cookie plugin):
$(function () {
var toShow = $.cookie('lastShownIndex'),
topLevel = $('#am_menu').find('> li');
topLevel.click(function(){
$(this).children('ul').slideToggle().end().siblings().children('ul').slideUp();
$.cookie('lastShownIndex', $(this).index());
}).eq(toShow).find('ul').show();
});
JS Fiddle demo.
References:
children().
click().
end().
eq().
find().
index().
show().
slideUp().
jQuery cookie plugin is used
$(function () {
$('#am_menu li:has(ul) > a').click(function (e) {
var $ul = $(this).next("ul");
$ul.toggle("slow");
$('#am_menu li ul').not($ul).slideUp();
$.cookie('curr.menu', $(this).parent().index())
});
var cindex = $.cookie('curr.menu');
if (cindex != undefined) {
$('#am_menu li:has(ul)').eq(cindex).children('a').click()
}
});
Demo: Fiddle
On my website I've got a sticky header with several different nav items on it that when clicked will scroll down to find that section on the page. I was wondering how one would go about setting it up so the nav items change colour when the view is on the section it corresponds to. In other words, if the viewer is on section 'x', 'x' on the nav bar will change color.
Update: heres the code for the nav bar im using
<div class = 'nav-container'>
<nav>
<div id = 'nav-items-container'>
<ul class='nav-items'>
<li class='nav-item'><a href='#what'>what</a></li>
<li class='nav-item'><a href='#how'>how</a></li>
<li class='nav-item'><a href='#why'>why</a></li>
<li class='nav-item'><a href='#who'>who</a></li>
<li class='nav-item'><a href='#where'>where</a></li>
</ul>
</div>
</nav>
</div>
some css
.nav-container{
background-color:black;
height:50px;
width:410px;
font-size: 120%;
position:absolute;
}
a:link{
color:white;
}
a:visited{
color:#58ACFA;
}
#nav-items-container ul li{
display:inline;
}
#nav-items-container ul li a{
padding: 20px;
text-decoration:none;
}
#nav-items-container ul{
margin:0;
padding:0;
list-style-type: none;
text-align: center;
padding-top:15px;
}
If you can use jquery you can do something like:
<script type="text/javascript">
$(function() {
var sections = [],
anchors = $('#nav-items-container a[href^="#"]'), // anchor links with hash tags
docHeight = $(document).height(),
currentOffset,
setNavActive;
// handler to update the class
setNavActive = function(hash){
anchors.removeClass('current-section');
anchors.filter('a[href="' + hash + '"]').addClass('current-section');
};
// building our hash/start/end position map
$.each(anchors, function(i, item) {
currentOffset = $(item.hash).offset().top;
if (i > 0) {
sections[i-1].end = currentOffset;
}
sections[i] = {
hash: item.hash,
start: (i == 0 ? 0 : currentOffset),
end: docHeight
};
});
// on scroll event, check which map fits,
// find the hash and set the class
$(document).scroll(function() {
currentOffset = $(document).scrollTop();
for (var i = 0; i < sections.length; i++) {
if (sections[i].start <= currentOffset && sections[i].end > currentOffset) {
setNavActive(sections[i].hash);
}
}
});
});
</script>
I added a new style but you can make it nested or whatever:
.current-section {background:pink; }
jsFiddle
http://jsfiddle.net/fstreamz/krb6Q/3/
There is not enough information here to give the best answer. I can give one that works though.
Chang your headers to look like this:
<li class='nav-item' id = "nav_what"><a href='#what'>what</a></li>
<li class='nav-item' id = "nav_how"><a href='#how'>how</a></li>
<li class='nav-item' id = "nav_why"><a href='#why'>why</a></li>
<li class='nav-item' id = "nav_who"><a href='#who'>who</a></li>
<li class='nav-item' id = "nav_where"><a href='#where'>where</a></li>
then in the body of each page put
<script>
document.getElementById('nav_what').style.backgroundColor = "gray";
</script>
You would have to switch it out on each page with the correct id. Its more traditionally done manually with inline styles if the header is not loaded externally.
Add another CSS declaration as below and apply active style to the current page.
#nav-items-container ul li.active a {
color:red;
}
Apply the above style like this...
<li class='nav-item active'><a href='#what'>what</a></li>
jsFiddle Demo