How to take an li and put it into specific DIV - javascript

I'm new to jquery and I'm doing a slider.
I have:
<ul>
<li> <img src="image.jpg"><p>description of the current image</p></li>
<li> <img src="image.jpg"><p>description of the current image</p></li>
<li> <img src="image.jpg"><p>description of the current image</p></li>
<li> <img src="image.jpg"><p>description of the current image</p></li>
</ul>
what I need to do is when I click on a specific <li> element, it will be displayed in a lightbox with its content.
<div id="lightbox">Here is clicked li and its content</div>
I don't know really where to start.
How do I tell jQuery to take a li and put into div?

You could do as follows:
$(document).ready(function() {
$('li').on('click', function() {
$('#lightbox').html($(this).html());
});
});

Related

Hide and show li active tags in javascript

<div id="product">
<ul id="shop">
<li> Vision </li>
<li class="active">Type</li>
<li> Energy</li>
</ul>
</div>
I want to show only active li tags ,while other li tags will be hide.
Excepted Output will be
Type
I try javascript
$( document ).ready(function() {
$('#shop li.active').show();
});
But nothing will happen..
Using jQuery, you need to hide which are not active
$(document).ready(function() {
$('#shop li:not(.active)').hide();
$('#shop li.active').show();
});
Can be done using CSS as well
#shop li:not(.active){
display: none;
}
I want to show only active li tags ,while other li tags will be hide.
Hide the siblings
$('#shop li.active').show().siblings().hide();
Demo
$(document).ready(function() {
$('#shop li.active').show().siblings().hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="product">
<ul id="shop">
<li> Vision </li>
<li class="active">Type</li>
<li> Energy</li>
</ul>
</div>
But nothing will happen..
Since there was no logic for hiding the li's, only showing them. As shown above, you need to show the active ones and hide rest of them.
You have to add a little bit of css which will hide li tags by default
ul li{
display:none
}
https://jsfiddle.net/jzj6o5ms/1/
You can use .not & hide
$(document).ready(function() {
$('li').not('.active').hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="product">
<ul id="shop">
<li> Vision </li>
<li class="active">Type</li>
<li> Energy</li>
</ul>
</div>

jquery, move element to closest div

I want to move some span elements to closest div. I found the solution to my problem but it does not work for me. I have some Html code:
<ul>
<li>
<a><span>Some info</span></a>
</li>
<div class="cl1">...</div>
<li>
<a><span>Some info 2</span><a>
</li>
<div class="cl1">
...
</div>
...
</ul>
and to move <span> like this:
$('span').each(function () {
$(this).parent().parent().closest('.cl1').append(this);
})
but nothing happened. Any help would certainly be appreciated
you can't put a div in a ul, only li's.
your html has to be valid (a's, ul need to be closed)
Closest searches anscetors, not siblings.
since your markup is not valid as is, i'm not sure if you want the divs in the list or not. This example removes them from the lis, which breaks the list into two lists.
$('button').click(function() {
$('span').each(function() {
var $div = $(this).closest('ul').siblings('.cl1');
$(this).clone().appendTo($div);
$(this).remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<a><span>Some info</span></a>
</li>
</ul>
<div class="cl1">...</div>
<ul>
<li>
<a><span>Some info 2</span></a>
</li>
</ul>
<div class="cl1">...</div>
<button>Do Stuff</button>

Fire jQuery if parent lose class

I've got a simple Image-Slider (Flexslider 2 based on jQuery) on my website. If an element gets active, the element gets the class called "active-slide".
If this happen, the child should get the class "show". If the parent lose the class, the child should lose its class as well.
My current script is not working:
$( ".flexslider .slides li" ).change(function() {
$( ".child" ).toggleClass("show");
});
HTML CODE
<ul class="flexslider">
<li class="">
<img src="http://www.placehold.it/400x100">
<div class="flax-caption">Lorem Ipsum</div>
</li>
<li class="active-slide">
<img src="http://www.placehold.it/400x100">
<div class="flax-caption">Lorem Ipsum</div>
</li>
</ul>

Prevent ToggleClass on multiple elements

I have some li which i want when i hover on each of them toggle the class just for each oft hem not all.
Right now when i hover on each li all the LI will get the toggled class.
Here is the HTML and jQuery
<li><a class="one" href="#">
<img src="http://hhhhold.com/s"/></a>
<div id="project-title" class="me">Fandango
<span id="project-more">Learn more</span>
</div>
</li>
$('.one').hover(function() {
$('.me').closest('span').removeClass("dblock");
$('.me').closest('span').toggleClass('dblock');
});
Use $(this) to reference the active DOM element:
$('.one').hover(function() {
$(this).next('#project-title').find('span').removeClass('dblock');
// etc...
});
IDs should be unique in HTML too... Are you repeating the #project-title ID? If so it should be a class.

mouseover captions flashing when moused over

problem can be seen here: http://www.studioimbrue.com/beta
The code:
$(document).ready(function(){
$('div.caption').hide();
$('.captions ul li img').hover(function(){
$(this).siblings('div.caption').fadeIn('medium');
}, function(){
$(this).siblings('div.caption').fadeOut('medium');
});
});
Not sure what's causing the problem... Everything seems to be set up correctly.
The problem is that when the caption appears, your mouse is no longer on the image - a mouseleave event is sent to the image and a mouseenter to the caption div. The former triggers the fadeout. You can solve that by placing both the image and the caption into a container element (e.g. a <div>) and applying the event handler on this container. Then no matter whether the caption is showing or not, the outer container will not receive a mouseleave.
EDIT: Here's a working example:
HTML:
<div class="captions" id="talktostrangers">
<ul>
<li>
<img src="image1.jpg">
<div class="caption">Caption 1</div>
</li>
<li>
<img src="image2.jpg">
<div class="caption">Caption 2</div>
</li>
</ul>
</div>
Javascript:
$('.captions li').hover(function() {
$('.caption', this).fadeIn();
}, function() {
$('.caption', this).fadeOut();
});

Categories

Resources