Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Format data returned by API

    I would like to know how to format the images are retrieved when the following function is called. Is there any way I can apply css style to it?

    myscript.js file

    Code:
    function bio()
    {
        echonest.artist("ARH6W4X1187B99274F").biographies( function(biographyCollection) {
        $('#gallery').append( biographyCollection.at(1).to_html('<p>${text} </p>') );
        });
    }
    Last edited by prital09; 12-01-2012 at 02:21 PM.

  • #2
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    short answer, Yes.

    long answer - sure all kinds of ways, but we cant help without seeing the resulting html or an example of it. your bio function is using a lot of code out of the current scope you have shown us so it's not really much to go on.


    I suppose you could add a class or id to the <p> tag and use css to target the image within that class or id

  • Users who have thanked DanInMa for this post:

    prital09 (12-01-2012)

  • #3
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you for your reply.

    Code:
    <html>
    
    	<head>
    		<title>Test</title>
    		<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    
    		<link rel="stylesheet" type="text/css" href="mystyle.css" />
    		<script src="jquery-1.4.4.js"></script>
    		<script src="jquery.tmpl.min.js"></script>
    		<script src="jquery.echonest.js"></script>
    		<script src="lastfm.api.js"></script>
    		<script src="lastfm.api.md5.js"></script>
    		<script src="lastfm.api.cache.js"></script>
    		<script src="testScript.js"></script>
    	</head>
    
    	<body>
    		<div id="page">
    			<div id = "header">
                	<div class="title">Music Recommendation</div>
           			<div class="subText">Recommendation: a test site!</div>
                </div>
    			<div id="menu">
    				<div class="menuLink"><a href="index.html">Home</a></div>
    				<div class="menuLink"><a href="index.html">About</a></div>
    				<div class="menuLink"><a href="index.html">Contact</a></div>
    			</div>
    			
    			<div id="pageContent">
    				<div class="articleTitle">TITLE</div>
    				<div class="articleContent">
    					<p>This is a test</p>
    						<input type="text" id="artist" name="artist" />
    						<button id="search-artist">Find</button>
    						<div id = "container">
    							<div id  = "gallery">
    								<button type="button" onclick="bio()">Try it</button>
    							</div>
    						</div>
    				</div>
    			</div>
    		</div>
    	</body>
    
    </html>
    The above is the html I am using.
    Code:
    function bio()
    {
    	var echonest = new EchoNest("I7BZAXMQ7B77C9MEJ");
    	echonest.artist("ARH6W4X1187B99274F").biographies( function(biographyCollection) {
        $('.articleContent').append( biographyCollection.to_html('<p>${text} </p>') );
    	});
    }
    The above is the function I am calling.

  • #4
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I took your suggestion in assigning an id and it worked, thank you!
    I was wondering how to do that to images as follows.

    How would I go about formatting the following?

    Code:
    function getSong()
    {
    	echonest.artist("Radiohead").images( function(imageCollection) {
    	$('#gallery').prepend( imageCollection.to_html('<img src="${url}">', {start: 0, end: 5}) );
    	});;
    }
    Last edited by prital09; 12-01-2012 at 02:21 PM.

  • #5
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Managed to find a solution by adding div tags around the image tags.

    Thank you for your help.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •