jQuery Extract Data from URL | Lessoncup Programming Blog

Friday, 20 December 2013

jQuery Extract Data from URL

Hi, today i am going to tell you about how to extract the data from url using jquery oembed, we have seen in many social network sites like Facebook Google Plus and other, i have done this using jquery.oembed plugin this plugin is use to embed the all kind of url data like images, videos, text, i did some small change in oembed file to manage the design things.


JAVASCRIPT

here write the click function to extract the data from url after click the button, inside the function write oembed() method to #result as a selector inside the oembed i have just used emdedMethod like append, fill and auto and maxWidth, maxHeight
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>

<script type="text/javascript" src="jquery.oembed.js"></script>

<script>

$(document).ready(function(){
 
 
 $('#btn').click(function(){
  
  var text = $('#box').val();
  
  $('#result').fadeIn(400);
  
  $("#result").oembed(text, 
                        {
                        embedMethod: "append", // you can use .. fill , auto , replace
                        maxWidth: 600,
                        maxHeight: 350,         
                        });
      
  
  $('#box').val("");
  
   
 });
  
});

</script>

CSS

<style>


#data{ width:600px; margin:0 auto; margin-top:20px;}

.result{width:200px;margin-top:10px;padding:5px; border:solid #ccc 0; display:none; font-size:18px;}

.btn{ padding:10px; background-color:#090; width:30px; color:#FFF; cursor:pointer;}

.box{ width:600px; height:80px;padding:5px; border:solid #ccc 1px;  margin-bottom:5px; resize:none;}

img{width:300px; border:solid #333 1px;}

.oembedall-container{width:600px; margin:0 auto;}

p{ font-size:18px; color:#333;}

b{color:#09F;}

.border{border-bottom:solid #F9F9F9 1px; margin:10px 0 10px 0; width:600px;}

</style>

HTML

take text box to place the URL, and take one DIV  #result to display the extracted data from url
<div id="lessoncup">

<div id="data">

<textarea name="" class="box" id="box"></textarea>

<div class="btn" id="btn">POST</div>

<div id="result" class="result"></div>

</div>

</div>

Live Demo   Download Script

7 comments :

  1. Good app. But there is a problem because it extracts all the text of a news story for example of rt.com. but is simple to fix. Good post!:

    ReplyDelete
  2. your demo is not working ... sry while posting nothing happened at my side.. plz correct it .. its good app kepp it up

    ReplyDelete
    Replies
    1. i have checked and the demo link is working fine .. check this link
      http://www.flickr.com/photos/saffron_blaze/11369707996/in/explore-2013-12-14/

      Delete
  3. Replies
    1. demo is not working

      Delete

Mohammad Khasim
Blogger | Web Developer
Hyderabad - INDIA
lessoncup@gmail.com

PHP | My SQL | JQUERY
Web Development Tools | CMS | Frameworks | SEO

Get my Latest Lessons