Displaying selection text in span - javascript

So let's say I have this code:
<span id="select_list">
<ul>
<li><a id="1">1</a></li>
<li><a id="2">2</a></li>
<li><a id="3">3</a></li>
</ul>
</span>
<span id="selection"></span>
And let's also assume that there are a lot of list elements, ex. '4,5,6,7... etc'.
Can I get a html file, that is basically just text, that corresponds to the list element's ID (ex. 1.html, 2.html,... etc), to show in 'selection'?
If so how?
Thanks for your time. Hope I explained it well.

Something like this (jQuery) should work:
var list = $("#select_list");
var sel = $("#selection");
$("a", list).on("click", function(){
var id = $(this).attr("id");
sel.load(id+".html");
});

<div id="select_list">
<ul>
<li id="1">1</li>
<li id="2">2</li>
<li id="3">3</li>
</ul>
</div>
<div id="selection"></div>
i would use a div not span spans are for if you want to change the size of something particular like this:
<li id="1" href="#"><a href="#"><span style="color: red;
font-size: 30px">1</span></a></li>
and from what i am understanding you want a selector to select them in css?
if so this is how:
#select_list ul li:nth_child(1) {
}
or
#select_list ul li#2 {
}
hope this helps you

I would suggest using data-attributes instead of IDs.
HTML
<ul class='selection-list'>
<li data-name='Dog'>Dog</li>
<li data-name='cat.html'>Cat</li>
<li data-name='45'>Fourty Five</li>
<li data-name='Triangle'>Three sides</li>
</ul>
<div class="output js-output"></div>
jQuery
var $output = $('.js-output');
$('.selection-list li').on('click', function() {
var selectionValue = $(this).data('name');
$output.text(selectionValue);
});
CSS
.selection-list li {
cursor: pointer;
}
jsFiddle
iframe
I'm starting to think that you are asking for an iframe with dynamic source. The question is unclear. You may want to try and rewrite it. - Here is what I think you may be after...
HTML
<ul class='selection-list'>
<li data-url='http://reputable.agency'>Reputable Agency</li>
<li data-url='http://perpetual.education'>Perpetual Education</li>
<li data-url='http://example.com/index.html'>Example.com</li>
</ul>
<iframe src='http://example.com' class="output js-output"></iframe>
JavaScript / jQuery
var $output = $('.js-output');
$('.selection-list li').on('click', function() {
// get the 'data-url' from the element...
var selectionValue = $(this).data('url');
// put that data-url into the src attribute of the iFrame
$output.attr('src', selectionValue);
});
Also..
Note that if you are using the same domain for all of these, you can build those urls differently to keep things simple.
<li data-url='index.html'>Example.com</li>
$output.attr('src', 'http://yoursite.com/' + selectionValue);
jsFiddle
AJAX
Now I'm wondering if you mean AJAX. Here is an example - but it's not tested because I don't have access to a bunch of relative URLs - but here is the basics - and should lead you to the right documentation.
HTML
<ul class='selection-list'>
<li data-url='index.html'>Reputable Agency</li>
<li data-url='index.html'>Perpetual Education</li>
<li data-url='index.html'>Example.com</li>
</ul>
<div class="output js-output"></div>
JavaScript / jQuery
var $output = $('.js-output');
var getOtherPage = function(target) {
$.ajax({
url: target,
success:function(response){
$output.html(response);
},error:function(){
alert("error");
}
});
};
$('.selection-list li').on('click', function() {
var selectionValue = $(this).data('url');
getOtherPage(selectionValue);
});

Related

get list equal height inside div element

Please take a look at this FIDDLE. I have two pairs of unordered lists, each of which is inside a div element.pricing-table. The following code can find the li with the same classes, get the max height and set the height of all of them to the same. But I want to limit it to getting the max-height of each pair of lists inside each div element.
I think this line is giving me problem because it is getting all the lists with the same classes in the document:
var elems = $('.pricing-table ul li.' + elem.className),
I don't think I can use $(this) and update it like $(this +elem.className). Any suggestions?
Jquery script:
$(document).ready( function(){
$('.pricing-table ul li').each(function(i, elem) {
var elems = $('.pricing-table ul li.' + elem.className),
heights = $.map(elems, function(li) {
return $(li).height();
}),
max = Math.max.apply(null, heights);
elems.height(max);
});
});
HTML
<div class="pricing-table">
<ul>
<li class="heading">Bronze</li>
<li class="year">2003<p>(Text)..........</li>
<li class="package">Starter package</li>
<li class="location">Africa (Text).......)</li>
<li class="description">Text............ </li>
</ul>
<ul class="feature">
<li class="heading">Silver</li>
<li class="year">2004</li>
<li class="package">Intermediate package</li>
<li class="location">Asia</li>
<li class="description">Text............ </li>
</ul>
</div>
<div class="pricing-table">
<ul>
<li class="heading">Bronze</li>
<li class="year">2003<p>(Text)..........</li>
<li class="package">Starter package</li>
<li class="location">Africa (Text).......)</li>
<li class="description">Text............ </li>
</ul>
<ul class="feature">
<li class="heading">Silver</li>
<li class="year">2004</li>
<li class="package">Intermediate package</li>
<li class="location">Asia</li>
<li class="description">Text............ </li>
</ul>
</div>
You’d need to get only the li that are descendants of your current .pricing-table element, so you’ll have to iterate over the latter first:
$(document).ready(function () {
$('.pricing-table').each(function (i, e) {
$(e).find('ul li').each(function (i, elem) {
var elems = $(e).find('ul li.' + elem.className),
heights = $.map(elems, function (li) {
return $(li).height();
}),
max = Math.max.apply(null, heights);
elems.height(max);
});
});
});
… or something like that. http://jsfiddle.net/p3sfy/3867/
(Still kinda ugly, since it will iterate over the li multiple times, so that’s rather just a “quick fix” – but I don’t wanna think about anything more sophisticated here before I have not first heard a convincing argument why this data is not marked up using tables in the first place …?)

Jquery convert dropdown to select with onchange event

I want to convert a drop down
<ul class="cat-items selectdropdown">
<li class="cat-item cat-item-25">
A-1 Compressor
</li>
<li class="cat-item cat-item-207">
World Hand Dryer
</li>
</ul>
To select menu dynamically. Here is what I am using and it looks perfectly. But The conversion is not being made and drop down is displayed instead of select.Here is jquery code which loads on ready.
$('ul.selectdropdown').each(function() {
var list = $(this),
select = $(document.createElement('select')).insertBefore($(this).hide());
$(select).attr("style","cursor:pointer;display: inline-block; width:99%;");
$('>li', this).each(function() {
var ahref = $(this).children('a'),
target = ahref.attr('target'),
option = $(document.createElement('option')).appendTo(select).val(ahref.attr('href')).html(ahref.html());
});
});
Once select is displayed I will use onchange to make it work.
$('select').bind('change',function () {
//Redirect Page
});
Any help would be appreciated. Here id demo url:restaurantapplianceparts.com
Ahmar.
I used your code with some changes to get this to work.
HTML
<ul class="cat-items selectdropdown">
<li class="cat-item cat-item-25">
A-1 Compressor
</li>
<li class="cat-item cat-item-207">
World Hand Dryer
</li>
</ul>
Javascript
$('ul.selectdropdown').each(function() {
var list = $(this),
select = $(document.createElement('select')).insertBefore($(this).hide());
$(select).attr("style","cursor:pointer;display: inline-block; width:99%;");
$('>li', this).each(function() {
var ahref = $(this).children('a'),
target = ahref.attr('target'),
option = $(document.createElement('option')).appendTo(select).val(ahref.attr('href')).html(ahref.html());
});
$(select).change(function() {
window.location.href = $(this).find('option:selected').val();
});
});
jsFiddle: http://jsfiddle.net/Cf7Pt/1/
Your code is working fine in jsfiddle. i updated your code.
<div id="dropdown">
<ul class="cat-items selectdropdown">
<li class="cat-item cat-item-25">
A-1 Compressor
</li>
<li class="cat-item cat-item-207">
World Hand Dryer
</li>
</ul>
createSelectBox();
function createSelectBox() {
var select = $('<select>');
$('ul.selectdropdown li').each(function() {
var anchor = $(this).find('a')
var option = $('<option>');
option.val(anchor.attr('href')).text(anchor.text());
select.append(option);
});
$('#dropdown').html(select);
}
Demo here
.live is deprecated since.. I don't even remember.
use .on. http://api.jquery.com/on/
also take a look at http://getbootstrap.com/ and use it's dropdown script.
don't reinvent the wheel.
creating a select menu for navigation is also bad practice.

how to find li with a particular data

I have the following html code:
<ul class="dropdown-menu shopping-cart-nav-drpdown">
<li class="item" data-item-id="58">
</li>
<li class="item" data-item-id="100">
</li>
<li class="item last">
View Cart
</li>
</ul>
Inside this shopping-cart-nav-drpdown, how do I find the li that has data-item-id=58? Is it possible to do this without iterating through all the children of ul and use getAttributes?
Sure:
$("li[data-item-id=58]")
And an awesome Demo
Yes, it is possible to do this without iterating through all the children of ul:
$('.shopping-cart-nav-drpdown li[data-item-id="58"]');
FIDDLE DEMO #1
You can also make it dynamic like this:
var data = 58;
$('.shopping-cart-nav-drpdown li[data-item-id="' + data + '"]');
FIDDLE DEMO #2
try this
jQuery( ".shopping-cart-nav-drpdown li" ).each(function(){
if($(this).data('item-id')=="58"){
alert('found');
}
});

How to save HTML ul-li structure into javascript object

i have this following html structure usilg ul and li.
<ul class="treeview" id="productTree">
<li class="collapsable lastCollapsable">
<div class="hitarea collapsable-hitarea lastCollapsable-hitarea"></div>
<span id="top1" class="">top1</span>
<ul>
<li class="collapsable lastCollapsable">
<span class="">mod1</span>
<ul>
<li class="last">
<span>bottom1</span>
</li>
</ul>
</li>
</ul>
</li>
<li class="collapsable lastCollapsable">
<span id="top2" class="">top2</span>
<ul>
<li class="collapsable lastCollapsable">
<span class="">mid2</span>
<ul>
<li class="last">
<span>bottom2</span>
</li>
</ul>
</li>
</ul>
</li>
</ul>
the website allows user to add more data under this structure and am using jquery treeview to show the tree structure dynamically.
Now i need to save this whole ul-li structure into a js object for future use in the website. how do i achieve this? the last node("bottom1 and bottom2 here") has a class "last" if that helps.
as we can add data dynamically we can be sure how much levels of ul li is there at the end when user clicks "save"
You can use recursive function to save a tree object;
function save(obj_ul, tree){
var obj_lis = obj_ul.find("li")
if (obj_lis.length == 0) return;
obj_lis.each(function(){
var $this = $(this);
if($this.parent("ul").get(0) == obj_ul.get(0))
{
tree.push({
name : $this.find('> span').text(),
child : save($this.find("ul").first(), [])
});
}
});
return tree;
}
console.log(save($('#productTree'), []));
If you want to reprouce the same thing verbatim, as a string of HTML elsewhere on the site, you could just do this? Then .append() or .prepend() treeview where you like.
​var treeview = $('#productTree').parent().html()
Assuming you want JSON:
function save(){
var tmp = [];
$('#productTree li.collapsable').each(function(){
var $this = $(this),
$spans = $this.find('span'),
o = [];
$spans.each(function(){
o.push($(this).text())
})
tmp.push(o);
});
return tmp;
}
You could also use map() to accomplish the same thing, too.
EDIT: Updated, assuming your text will live inside a span. This will create an array of arrays, each containing the text from the spans inside each of your list-items.

check URL for text and then add class to li using jquery or js

My URLs look like this:
http://www.site.co.uk/en-us/aboutus/abgroup.aspx
http://www.site.co.uk/en-us/casestudies.aspx
Here is the menu HTML markup
<ul class="sf-menu">
<li class="first">Home</li>
<li class="">About Us</li>
<li class="">Case Studies</li>
</ul>
How can I read the URL and look for /aboutus/ and highlight that particular list item?
I would also like to do this with casestudies << this is different as it doesnt have a sub directory.
I would like to use jquery? I think i need to parse the URL? and then check for the words and then add a class or bold to the li ??
edit: i want to know what the URL in the browser is, it should match the check in the jquery and then make the li bold or add a class.
Simply:
$('a[href*="/aboutus/"]').css('color', 'red');
See the jsFiddle Example.
Update:
If you want to know if the current URL in the browser matches one of the links then use this:
$('a[href*="'+window.location.href+'"]').css('color', 'red');
Give each of your menu elements an ID:
<ul class="sf-menu">
<li class="first" id="home">Home</li>
<li class="" id="aboutus">About Us</li>
<li class="" id="casestudies">Case Studies</li>
</ul>
And use this jQuery:
$(function() {
var currentPage = window.location.href.split("/")[4]);​​​​​​
$(".sf-menu li")each(function() {
if($(this).attr("href").indexOf(currentPage) > -1) $(this).addClass("highlight");
});
}
​
Nothing too sophisticated about this approach:
$(document).ready(function() {
$("ul.sf-menu li a").each(function() {
if ($(this).attr('href').match(/aboutus/) && window.location.match(/aboutus/)) {
$(this).parent().addClass('aboutus-highlight');
}
if ($(this).attr('href').match(/casestudies/) && window.location.match(/casestudies/)) {
$(this).parent().addClass('casestudies-highlight');
}
});
});
<?php if ($_SERVER["SCRIPT_NAME"] == "/en-us/aboutus/abgroup.aspx") { //whatever } ?>
oh you want js, here:
<script style='text/javascript'>
function checkURL() {
if(window.location == "http://www.site.co.uk/en-us/aboutus/home.aspx") {
document.getElementById('home').style.background = "yellow";
} else if (window.location == "http://www.site.co.uk/en-us/aboutus/abgroup.aspx") {
document.getElementById('abgroup').style.background = "yellow";
} else {
document.getElementById('casestudies').style.background = "yellow";
}
}
</script>
<body onload='checkURL()'>
<ul class="sf-menu">
<li class="first" id='home'>Home</li>
<li class="" id='abgroup'>About Us</li>
<li class="" id='casestudies'>Case Studies</li>
</ul>
yep that works
If you want to highlight any page under /aboutus/ - that is, you don't have just this one page, but several, but you do want the about us menu item to highlight:
if(window.location.indexOf('aboutus') != -1){
$('.sf-menu a[href$="aboutus/abgroup.aspx"]).addClass('here');
}
Then do your styling:
.sf-menu .here { background: red; }
Or whatever else you want.
You don't need to parse the URL as the href should match it (based on your example), so just this should work.
$('a[href=' + window.location.toString() +']').parents('ul').eq(0).addClass('highlight');

Categories