I have an unordered list looking like this
HTML
<div id="pop">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
</ul>
</div>
<div id="info-1></div>
<div id="info-2></div>
And when you hover over one of the items a window is displayed with some info regarding the item. I have worked this out for one item, now I wanna know how I can make this work for the entire list.
My initial thought was to create one script per each item... but that seems a bit thick considering the functionality of js.
Javascript
$(function(){
$('pop a').hover(function(){
$('#info-1').show();
},function(){
$('#info-1').hide();
});
});
So my question is of course, how can I make this script to work for all items.
I'd suggest:
$('#pop li').hover(
function() {
$('div.info').eq($(this).index()).show();
}, function() {
$('div.info').eq($(this).index()).hide();
});
Working with slightly-changed HTML:
<div id="pop">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
</ul>
</div>
<div class="info"></div>
<div class="info"></div>
<div class="info"></div>
<div class="info"></div>
<div class="info"></div>
<div class="info"></div>
<div class="info"></div>
JS Fiddle demo.
What I forgot to say is that this will show the .info element that corresponds to the same index as the currently hovered-over li element, so hovering the first li will show the first .info, and so on. So it's dependant on maintaining a predictable relationship between the li and the .info elements.
As an aside, it's possible to replicate this interaction using just CSS, albeit it requires a click rather than a hover event, so long as you amend the li HTML to include a link that points to the id of the relevant div:
<div id="pop">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
</ul>
</div>
<div class="info" id="info1"></div>
<div class="info" id="info2"></div>
<div class="info" id="info3"></div>
<div class="info" id="info4"></div>
<div class="info" id="info5"></div>
<div class="info" id="info6"></div>
<div class="info" id="info7"></div>
And the CSS:
.info {
/* hides by default */
display: none;
}
.info:target {
/* shows when targeted */
display: block;
}
JS Fiddle demo.
Incidentally, quoting attributes is optional (though if it's an attribute that contains white-space it must be quoted), but if you quote you must have a quote at both ends of the value you're quoting: <div id="info-1></div> is not valid HTML (since the string isn't closed until the next line at the beginning of the next attribute); use: <div id="info-1"></div>.
And, further, your posted jQuery:
$(function(){
$('pop a').hover(function(){
$('#info-1').show();
},function(){
$('#info-1').hide();
});
});
This can't work, because:
the selector won't match any elements, you're trying to target an a element inside of a pop element (which, obviously, doesn't exist). What you need to do is preface the id with a # (as you do in the next line, so I'm assuming a typo there), to give: $('#pop a'). But,
there are no a elements in the #pop element, therefore no events will be, or can be, bound.
If you need to use that form, however, then a couple of adaptations can make it work:
$(function(){
$('#pop li').hover(function(){
$('#info-' + $(this).text().match(/(\d+)/)).show();
},function(){
$('#info-' + $(this).text().match(/(\d+)/)).hide();
});
});
JS Fiddle demo.
References:
eq().
hide().
hover().
index().
match().
show().
text().
try this :
$(function(){
$('#pop li').hover(function(){
$('#info-'+$(this).index()+1).show();
},function(){
$('#info-'+$(this).index()+1).hide();
});
});
you've binded an hover event on all a tags inside pop element (though you have syntax error, you should always add '#' when addressing an element by id) and you don't have them
what you''re looking for is :
$('#pop li').hover(function() {
});
Here is sample http://fiddle.jshell.net/7QmR5/
HTML:
<div id="pop">
<ul>
<li id="li1">Item 1</li>
<li id="li2">Item 2</li>
<li id="li3">Item 3</li>
</ul>
</div>
<div id="info-1" style="display:none;">info 1</div>
<div id="info-2" style="display:none;">info 2</div>
<div id="info-3" style="display:none;">info 3</div>
JavaScript:
$(function(){
$('#pop li').hover(function(){
$('#info-' + $(this).attr('id').replace('li','')).show();
},function(){
$('#info-' + $(this).attr('id').replace('li','')).hide();
});
});
I've got an easier solution:
CSS
#info-1{
display:none;
}
ul > li:hover #info-1 {
display:block;
}
giving the li elements an id will make it easier to select them using CSS unless you want to use pseudo I believe it's called.
Or the jQuery if needed:
$('li:eq[0]','#pop').hover(function(){
$('info-1').show();
});
Related
This is a really hard question to find a title for, but here is it.
I got this HTML, that I can't change
<ul>
<li>
First part of the list
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
</li>
<li>
Second part of the list
<ul>
<li>item 3</li>
</ul>
</li>
</ul>
And I'd like to apply things to the "first part of the list" and "Second part of the list" part, but not the nested ul part, like CSS transform scaleY, and a custom Jquery onClick method.
So, the solution I'd like would be a way to JQueryly add around those.
Is this possible?
Thank you a lot
To achieve this you can filter() the li contents() to retrieve the text nodes within it, then wrap that in a span and apply the needed CSS rules. Something like this:
$('#container > ul > li').each(function() {
var foo = $(this).contents().filter(function() {
return this.nodeType == 3 && this.textContent
}).wrap('<span />');
});
#container > ul > li > span {
color: red;
display: inline-block;
transform: scaleY(2);
margin: 0 0 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<ul>
<li>
First part of the list
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
</li>
<li>
Second part of the list
<ul>
<li>item 3</li>
</ul>
</li>
</ul>
</div>
I have 2 lists of elements. When I click on an element of first list (it is a link), I basically need to add css class 'is-active' to that element AND to corresponding item from another list. I think they have to be in separate lists, as they are in two different bootstrap columns for mobile friendliness. I am currently styling elements from first list with:
$(document).ready(function(){
$('.tabs li').click(function(){
$(this).addClass('is-active');
$('.tabs li').not(this).removeClass('is-active');
});
})
Can't select elements from the other list though.. Any ideas how can I achieve this functionality with css, js/jquery?
My html structure currently is like this:
<div class="col-md-6">
<ul class="tabs">
<li class="tabs-title is-active">
title_1
</li>
<li class="tabs-title">
title_2
</li>
</ul>
</div>
<div class="col-md-6">
<div class="tabs-content">
<div class="tabs-panel is-active">
<div class="entry">
<p>content_1</p>
</div>
</div>
<div class="tabs-panel">
<div class="entry">
<p>content_2</p>
</div>
</div>
</div>
</div>
When I click on 2nd link from first column, the 2nd div from second column should get 'is-active' class. Is this possible?
I guess lists do not have corresponding elements right now. What do I need to have the items linked in some way?
Here's an example, since we don't know what your list looks like.
<ul class="tabs">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
<ul class="letters">
<li>item a</li>
<li>item b</li>
<li>item c</li>
</ul>
Also, it's easier to remove all instances of the is-active class and then add it just to the target elements.
$(document).ready(function(){
$('.tabs li').click(function(){
var index = $('.tabs li').index(this);
$('.tabs li, .letters li').removeClass('is-active');
$(this).addClass('is-active');
$('.letters li').each(function(i) {
if (i == index)
$(this).addClass('is-active');
})
});
})
https://jsfiddle.net/fzeauw7a/
I have Grid / List view content and want to run the javascript code only at Grid View.
I have added the Main Class for Grid ".grid" but it still effect the List view too.
// SHOW HIDE GALLERY BUY BUTTONS
$(document).ready(function(){
$('ul.grid li.text').hover(
function(){
$(this).find('.button').delay(400).fadeIn(200);
},
function(){
$(this).find('.button').clearQueue().fadeOut(400);
});
});
<div id="container">
<div class="buttons">
<button class="grid">Grid View</button>
<button class="list">List View</button>
</div>
<ul class="list">
<li class="text">Item 1<button class="button">Button</button></li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
</ul>
</div>
Check the jsFiddle Demo
After the Page loads
In List View Button is shown and should stay showed
In Grid View Button should be hidden and at a mouseover the list should be shown.
I made two changes
CSS
#container .list .button {display:block !important;}
This overrides the style settings on button made by jQuery
jQuery
$(document).ready(function(){
$(document).on('mouseenter', '.grid li.text', function(){
$(this).find('.button').delay(400).fadeIn(200);
});
$(document).on('mouseleave', '.grid li.text', function(){
$(this).find('.button').clearQueue().fadeOut(400);
});
});
This will animate only the grid view button (delegated with .on())
check my jsFiddle here
Your HTML markup was wrong
Here is the Updated Demo
$('.styled_view .article_wrapper').hover(
function(){
$('.article_button',this).delay(400).fadeIn(200);
},
function(){
$('.article_button',this).clearQueue().fadeOut(400);
});
I'm trying to iterate through a list of elements and wrap them in a link tag. However, my list displays differently than I want to.
Here is what it should look like: http://jsfiddle.net/eMexU/
HTML
<div id="list" data-role="listview">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</div>
Here is what it looks like when I use $.each and wrapInner(): http://jsfiddle.net/zpFDa/1/
HTML
<div id="list" data-role="listview">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</div>
JS
$("#list li").each(function () {
$(this).wrapInner('')
});
The only way to do this, is replacing existing li with new ones and then call .listview('refresh') to apply styles / enhance markup.
Demo
$("#list li").each(function () {
var text = $(this).text();
$(this).replaceWith('<li>' + text + '</li>')
});
$('#list').listview('refresh');
Is it possible to clone a specific < li> and put it above an other specific < li>?
Any clue would help me..?
HTML
<div id="main">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
Pseudo Javascript (JQuery)
$('#main ul li:eq(3)').duplicateAndPutAbove('#main ul li:eq(2)');
HTML Result
<div id="main">
<ul>
<li>Item 1</li>
<li>Item 3</li> <!-- Item 3 was duplicated (or cloned) and then putted ABOVE Item 2 -->
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
You were really close, you wanted clone and insertBefore (and remember that eq is zero-based):
$('#main ul li:eq(2)').clone().insertBefore('#main ul li:eq(1)');
Live example
$('#main ul li:eq(3)').clone().insertBefore('#main ul li:eq(2)');
Demo: http://jsfiddle.net/karim79/8LpuN/
var elem = $('li').contains('3').clone(); // make a copy
$('li').contains('Item 3').before(elem); // insert before the cloned element
$('#main ul li:eq(3)').clone().insertBefore('#main ul li:eq(2)');