With this code:
<ul data-role="listview" id="routelist" data-theme="g">
<li id="firstlistitem" style="display:none;">
$("<li><a href='http://www.google.co.uk'></a></li>").text('content').insertAfter($("#firstlistitem"));
and see also this jsFiddle: http://jsfiddle.net/6MW2e/
How come I end up with an unlinked list item? How can I insert an element with a link?
thanks!
Because you're setting the text of the outer element (the <li>) and not the inner element (the link).
If you're going to keep that syntax, you could try:
$('<li></li>')
.append(
$('').text('content'))
.insertAfter($('#firstlistitem'));
It seems to me that it would be much cleaner if you simply did:
$('<li>' + content + '</li>')
.insertAfter($('#firstlistitem'));
Your overwriting the text of the <li> when you call .text("content")
$("<li/>", {
html: $("<a/>", { href: "http://www.google.co.uk", text: content })
}).appendTo("#routelist");
http://jsfiddle.net/hunter/6MW2e/5/
Related
I have this html code
<div id="left-container" class="w3-container w3-left">
<div class="wordDiv w3-container w3-pale-green w3-leftbar w3-border-green w3-hover-border-red">
<h1>Give</h1>
<h3>Selected Definition:</h3>
<ul style="display:none;">
<li> offer in good faith </li>
<li> inflict as a punishment </li>
<li> afford access to </li>
</ul>
</div>
<div class="wordDiv w3-container w3-pale-green w3-leftbar w3-border-green w3-hover-border-red">
<h1>Up</h1>
<h3>Selected Definition:</h3>
<ul style="display:none;">
<li> to a higher intensity </li>
<li> to a later time </li>
<li> used up </li>
</ul>
</div>
</div>
<div id="right-container" class="w3-container w3-right"></div>
I want the user, once he click on one of the wordDiv's, to be able to see the potential definitions of that word in the right container (which are found in the "ul" element of each "wordDiv"), select one of the definitions, then I want to display the selected definition in the original wordDiv in the left-container.
You can found Jsfiddle Demo Here
A solution using jQuery. Updated Fiddle
$(function() {
$('.wordDiv').click(function() {
var txt = $(this).find('ul').html();
$('#right-container').html('<ul>' + txt + '</ul>')
})
})
Please check this fiddle
I have added li elements to another div based on the div which you are selected.
You can use the jQuery this variable in the click function, here is a working jQuery example of your request Updated Fiddle
It puts the li elements in the right div AND adds the onclick listener, which has the knowlege of its origin ;)
$('h1').click(function(){
var origin=$(this);
$(this).siblings('ul').children().click(function(){
$(this).parent().hide();
$(origin).parent().append(this);
$(this).replaceWith($('<div>' + this.innerHTML + '</div>'))
})
$(this).siblings('ul').show();
$("#right-container").append($(this).siblings('ul'));
})
$('ldi').click(function(){
$(this).parent().hide();
$(this).parent().parent().append(this);
$(this).replaceWith($('<div>' + this.innerHTML + '</div>'))
})
Is there a way i can add an additional link to an existing menu, where i don't have the ability to change the HTML of the menu , but i am granted access to add javascript/jquery to the site ?
Here is the current HTML of the menu
<div id="hsubmenu">
<ul id="hsubmenuitems">
<li>Home</li>
<li>Live Scoring</li>
<li>Standings</li>
<li>Power Rank</li>
<li>Schedules</li>
<li>Message Board</li>
<li>Playoffs</li>
<li>Players Stats</li>
<li>League History</li>
<li>Transactions</li>
</ul>
</div>
I'd like to add another menu item to the end
<li>Rosters</li>
Yep, you can do this
var li = $('<li>') //Create new li item
li.append('Rosters') //Add href
$("#hsubmenuitems").append(li); //Add this li item with href to "hsubmenuitems"
$().ready(function(){
$('<li>Rosters</li>').appendTo('#hsubmenuitems');
});
http://jsfiddle.net/jk63F/
You can edit the innerHTML of the element to append your new item.
var listElement = document.getElementById('hsubmenuitems');
listElement.innerHTML += '<li>Rosters</li>';
With jQuery the syntax is a little shorter.
$("#hsubmenuitems").append('<li>Rosters</li>');
I'm appending a new list item and trying to scroll it into view.
Here is my HTML:
<div class="slim-scrollbar">
<ul class="chats">
<li class="out">dynamic text with variable lengths</li>
<li class="in">dynamic text with variable lengths</li>
<li class="in">dynamic text with variable lengths</li>
</ul>
</div>
My current jquery to append an item to the list:
var direction='out';
$('.chats').append('<li class="'+direction+'">'+textVar+'</li>');
My jquery attempt:
$(".chats").animate({
scrollTop: ???
}, 1000);
How do I scroll the new list element into view?
To use your code, this should work:
$('body,html').animate({
scrollTop: $('.chats li:last-child').offset().top + 'px'
}, 1000);
Step 1: make sure you've got the scrollTo() plugin installed.
Step 2: Save the appended object in a temporary variable, then scroll the body (or parent div, if in a scrollable div).
var newelem = $('<li class="'+direction+'">'+textVar+'</li>');
$('.chats').append(newelem);
$('body').scrollTo(newelem);
This may not be an option for you if you really need to use the jQuery animation, but, you could also give your list an id and then use native functionality to get the user to the newly added content.
<ul id="new-stuff" class="chats">
//Append the element and all that good stuff.
location.hash = '#new-stuff';
I would suggest a cleaner solution:
var direction = 'out',
lastLi = $("<li/>", {
class: direction,
text: textVar
}).appendTo('.cheats');
$(document).animate({
scrollTop: lastLi.offset().top + 'px'
}, 1000);
Assuming your list is inside a wrapper div with some height.
<div id="chatsWrapper" style="height: 200px; overflow:auto;">
<ul class="chats">
<li class="out">dynamic text with variable lengths</li>
<li class="in">dynamic text with variable lengths</li>
<li class="in">dynamic text with variable lengths</li>
</ul>
</div>
$('.chats').append('<li class="'+direction+'">'+textVar+'</li>');
Just animate the wrapper div to an arbitrarily high pixel value:
$('#chatsWrapper').animate({ scrollTop: 10000 }, 'normal');
I am trying understand why the .wrap() function in my basic table of contents function isn't working. The function filters headers from a textarea and places them in an iframe, and the basic part works. But whereas my desired output is this:
<ul>
<li class="toc_h2">This is an h2</li>
<li class="toc_h3">This is an h3</li>
<li class="toc_h1">This is an h1</li>
</ul>
What I am actually getting is this:
<ul>
<h2>This is an h2</h2>
<h3>This is an h3</h3>
<h1>This is an h1</h1>
</ul>
How can I fix this/what am I misunderstanding? The code is here and at http://jsfiddle.net/supertrue/JgWxJ/
headers.each(function(i) {
$(this).wrap('<li class="toc_' + this.nodeName.toLowerCase() + '"></li>').appendTo(toc);
});
You can change this:
$(this).wrap('<li class="toc_' + this.nodeName.toLowerCase() + '"></li>').appendTo(toc);
to this:
$('<li class="toc_' + this.nodeName.toLowerCase() + '"></li>').html(this).appendTo(toc);
Here's your fiddle: http://jsfiddle.net/JgWxJ/7/
Alternatively, you could just add .parent() before appending:
$(this).wrap('<li class="toc_' + this.nodeName.toLowerCase() + '"></li>').parent().appendTo(toc);
...and here's the fiddle: http://jsfiddle.net/JgWxJ/10/
There are several advanced jQuery plugins which filter <div>s by corresponding id or class. This is indeed based on a simple jQuery idea, but I am not sure how to implement it. Consider a menu to show/hide the content as
<ul id="filters" class="menu" indicator="filter">
<li>All</li>
<li>First</li>
<li>Third</li>
</ul>
and we want to control the display of contents:
<div class="box first">Something</div>
<div class="box first third">Something</div>
<div class="box third">Something</div>
What is the simplest jQuery Javascript code to do so?
By default, all <div>s are shown, when we click on a <li> from menu (e.g. FIRST), jQuery will filter the <div>s to only show <div>s in which the class is "first".
Don't use attribute "indicator" as it doesn't exist. Use the class element as below. Also the A elements are not needed.
<ul id="filters" class="menu">
<li class="selected all">All</li>
<li class="first">First</li>
<li class="third">Third</li>
</ul>
Then your script
// hide all divs
$('div.box').css('display','hidden');
// add click handler on control list
$('ul#filters li').click(function() {
var classList =$(this).attr('class').split(/\s+/);
$.each( classList, function(index, item){
if (item != 'selected') {
$('div.'+item).css('display','block');
}
});
});
$(function(){
$('#filters li a').live('click', function(){
$('.box').hide();
indirector = $(this).attr('indicator');
indirector = indirector.substring(1);
if(indirector == '')
$('.box').show();
else
$('div.' + indirector).show();
});
});
Reference
Use the class attribute instead of indicator and try the following:
$('#filters li').click(function(){
$('div.' + $(this).attr('class')).show();
});
for this to work you would have to assign an all class to your first LI as well as all of your DIVs. Hope this helps!
try this code,
$('#filters li').click(function(){
$("div.box").hide();
$('div.box' + $(this).children('a').attr('indicator')).show();
});