CODEWITHSUNDEEP
javascriptjqueryhtml
SamK
SamK

Reputation: 67

Extract Link Query String Data And Create A New Link Inside A Different List

The goal is to have info from a link in #list and have it create a new link in #list3. Here is the link http://jsfiddle.net/4y5V6/24/ Is there a way to make it where once you click a link it will push it to #list3 and make the link look like this twitch.tv/chat/embed?channel=(channelname)&popout_chat=true ?

Thank you for your time!!

HTML:

<div id="navi">
                        <ul>
                        <li>Stream Selection:</li>
                            <li>SC2<ul id="list"><li><ul></ul></li></ul></li>
                            <li>League<ul id="list2"><li><ul></ul></li></ul></li>
                            <li>Chat<ul id="list3"><li><ul></ul></li></ul></li>
                            </ul>
                        </div>





<iframe id="iframe1" name="iframe1" type="text/html" src="" frameBorder="0" height="200px" width="300px">

                </iframe>

Current function that populates the list.

// first set of streams SC2
   $.getJSON("https://api.twitch.tv/kraken/search/streams?q=starcraft&limit=18&&type=top&callback=?", function (data) {
    var temp = "";

    $.each(data.streams, function (index, item) {
        temp = temp + "<li><a target='iframe1' href='http://www.twitch.tv/widgets/live_embed_player.swf?channel=" + item.channel.name + "'>" + item.channel.display_name + "</a></li>";

        });
    $("#list ul ").html(temp);
});




// next set of streams LoL
   $.getJSON("https://api.twitch.tv/kraken/search/streams?q=League%20of%20Legends&limit=18&&type=top&callback=?", function (data) {
    var temp = "";

    $.each(data.streams, function (index, item) {
        temp = temp + "<li><a target='iframe1' href='http://www.twitch.tv/widgets/live_embed_player.swf?channel=" + item.channel.name + "'>" + item.channel.display_name + "</a></li>";

        });
    $("#list2 ul ").html(temp);
});

Upvotes: 0

Views: 161

Answers (1)

SpYk3HH
SpYk3HH

Reputation: 22580

$('#navi').on('click', '#list a', function(e) {
    var x = $(this).prop('href'),
        y = x.slice(x.indexOf('channel')+8),
        z = 'twitch.tv/chat/embed?channel=('+y+')&popout_chat=true',
        clone = $(this).clone().attr('href', z);
    $('#list3 ul').append($('<li />', { html: clone }));
});

Fork

Alternate version: No duplicates.

Adding ability to open new chat link in new smaller window

jsFiddle only copies list 1 to list 3
jsFiddle Copies from both list 1 and 2 to list 3

//  The following call is jQuery's way of assigning events to both "Static"
//  && "Dynamic" Elements. This way, even if the element is loaded after
//  page load, it still gets the event callback.
//  Keep in mind, you do need either a static parent (such as below, I use
//  `$('#navi')`, since I assume this element is always present on your page 
//  load) |OR| you can use `$(document)`. The later is often recommended 
//  against, as you could run into "slowed down response" issues or naming 
//  issues. Personally, I use `$(document)` all the time and haven't had a 
//  complaint yet.
//  Then you simply assign your event(s) to your "Selectors"
//  For just list 1 that would be
//  .on('click', '#list a'
//  For list 1, and 2 that would be
//  .on('click', '#list a, #list2 a'
//  See Also: http://api.jquery.com/on/
$('#navi').on('click', '#list a, #list2 a', function(e) {
    var x = $(this).prop('href'),   //  get href of <a> clicked
        y = x.slice(x.indexOf('channel')+8),    //  extract name
        z = 'twitch.tv/chat/embed?channel=('+y+')&popout_chat=true',    //  create new href link
        clone = $(this).clone().attr('href', z),    //  clone this <a> and replace href with new one created
        item = $('<li />', { class: y, html: clone });  //  create new <li> making our cloned <a> it's innerHTML
    if (!$('#list3 ul .' + y).length) $('#list3 ul').append(item);  //  check <li> item doesn't already exist and add to list
})  //  Thanks to jQuery "chaining", I don't have to "recall" our static parent
.on('click', '#list3 a', function(e) {
    e.preventDefault();
    var lnk = $(this).attr('href');
    //  The following is basic JavaScript and simply opens a new window
    //  simply adjust width and height based on PIXELS
    //  see more window.open options @: http://www.w3schools.com/jsref/met_win_open.asp
    //  See Also: http://stackoverflow.com/questions/tagged/javascript+window+open
    window.open(lnk, "myWindowName", "width=800, height=600");
})

Upvotes: 1

Related Questions