How to hold “invisible” values and get them using JavaScript

4 Views

I run a music blog using WordPress and I have a custom music player for it. Every time a post has a song attached to it, I want to create a way to hold that information and later access custom variables. What I need is something along the lines of… 

<div class="playable" 
     title="Song Title" 
     mp3="URL" 
     soundcloudLink="https://soundcloud.com/cashcash/take-me-home-jordy-dazz">
</div>

Then in my $(document).ready() function I would need a function that finds all objects of class “playable” and be able to access the title tag, mp3 tag, soundcloudLink tag, etc.

Read More

Any easy suggestions?

Post Views: 4

Related posts

Leave a Reply

3 comments

  1. It sounds like you’re looking for data-* attributes:

    3.2.3.9 Embedding custom non-visible data with the data-* attributes

    A custom data attribute is an attribute in no namespace whose name starts with the string “data-“, has at least one character after the hyphen, is XML-compatible, and contains no uppercase ASCII letters.

    All attribute names on HTML elements in HTML documents get ASCII-lowercased automatically, so the restriction on ASCII uppercase letters doesn’t affect such documents.

    Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.

    These attributes are not intended for use by software that is independent of the site that uses the attributes.

    E.g., they always pass validation, and they’re only for your use.

    So for instance:

    <div class = "playable"
     title = "Song Title"
     data-mp3 = "URL"
     data-soundcloudLink = "https://soundcloud.com/cashcash/take-me-home-jordy-dazz"
></div>

    When you need to access that information, you get a jQuery object for the div, and then use attr("data-mp3") or data("mp3") to access it. (Or without jQuery, get the HTMLDivElement and use getAttribute.) Note that I haven’t changed title. title is a valid attribute, and accessible via .prop("title") on jQuery instances or via .title on DOM elements.

    Note that data is assymetrical: It reads from data-* attributes for initialization, but doesn’t write to them.

  2. You can try the data- attribute which can easily be retrieved by .data() method.

    HTML:

    <div id="thing" data-title="Keine Lust" data-file="keine_lust.mp3"></div>

    JQuery

    var song_title = $("#thing").data("title");
var song_file = $("#thing").data("file");

  3. You can use the .hasClass() jquery function to display the attributes of the elements with that class. Add an ID to the element like in this case I added test.. here is how to alert them.

       $(document).ready(function(){
var className = $('#test').hasClass('playable')
    if( className ){

        var url = $('#test').attr('soundcloudLink');
        var title = $('#test').attr('title');

        document.write(title);
        document.write(url);
    }


});

    This one displays the soundcloud link and the title if the element has the class playable. here is a fiddle. http://jsfiddle.net/uprosoft/2Frk3/3/