Grow your CSS skills. Land your dream job.

how extract title from link and place into other page on click event using jquery

  • # March 4, 2013 at 4:52 am

    1)i have two page abc. html and xyz .html

    in abc.html i place a link

    dadad

    2) in xyz .html

    but i cant extract title from that link and place it into div tag pf xyz.html page ..on same click event how can i do that please help me

    here i just want to give name of my video…..if this not work plese telll onother meth0d

    # March 4, 2013 at 6:51 am

    @pranavpatil19,

    Not too sure what the pros would do but i got a SUPER SIMPLE solution. If you just need a title from an element to a different page that’s too easy:

    The html

    <a title="dasdasdadad" href="xyz.html?http://www.youtube.com/embed/Aw03bV9mlQU">dadad</a>

    Get the title

    var getTitle = function(el) {
    return $(el).attr('title');
    };

    getTitle('a');
    // returns 'dasdasdadad'

    Next take that data and set it into local storage

    window.localStorage.setItem('title',getTitle('a'));
    var s = window.localStorage.getItem('title');

    On your xyz.html page call your stored data

    var new_title = window.localStorage.getItem('title');
    $(element).attr('title', new_title);

    One last thing, im not really sure what your code above is trying to do since some is in pre/code and some aren’t. I suggest making a use-case, like Code Pen, that way others can clearly see the code you are having trouble with.

    http://codepen.io/johnmotyljr/pen/zpFKm

    # March 4, 2013 at 1:20 pm

    http://www.sendspace.com/file/fuqrcm < === download my demo file
    or
    http://www.megafileupload.com/en/file/398577/chek-this-code-zip.html

    please check whre i am wrong. in index.html page .i click on link..then this redirecrt me to a.html

    at click event video load in iframe but my link title not load in div tag .div tag presnt in a.html

    # March 4, 2013 at 6:43 pm

    @pranavpatil19 ,

    Not 100% if this is what you wanted but what I did here was:

    1. Cleaned your code up
    2. Added a link to jQuery
    3. Created a function to get the anchor tag title attribute
    4. Parsed the anchor tag to extract only the youtube link (everything AFTER the ?)
    5. Stored both values into local storage
    6. On second page created a function to get and set the new attributes for your iframe
    7. ** i heavily commented the code **

    If you need anything further feel free to give me a hollar. Below is a link to the corrections with the same files ( index.html && a.html ).
    Download link for: Your finished code

    # March 5, 2013 at 3:39 am

    problem accor..
    check this code where i wrong
    http://www.sendspace.com/file/6tl3x6

    in my second page contain attribute have title tag

    whaen i run this code all title present in webpage attribute show

    what can i do now.. i just tryind to change title atttriblte to titl and change according to jquery put it cant help ..i got mesage undefined

    # March 5, 2013 at 8:30 pm

    Solutions by file:

    index.html

    1. Line *: Try using some kind of text editor so you dont have crazy amounts of white space and tabs. Indentation is important because:

          a. Clean and readable

          b. Easily shows parent/child relationship

      code example in forum post

    2. Line 5: Try loading your script files into the head or at least bottom of the body. They are being wrapped in the html element.
    3. Line 6: In HTML5 there is no need to include type="text/javascript" in your script tags.
    4. Line 17: Missing a closing </nav> tag.
    5. Line 12: Suggest maybe changing the anchor’s id="titl" into something more semantic or at least, less confusing. ie id="youtube-link"
    6. Line 12: a tag cannot have a property of titl, change to title=””.
    7. Permitted parent elements

      Any element that can contain phrasing elements, any element that can contain flow elements

      Source: W3C

    8. Line 12: Your anchor tag includes two divs and one img (Not saying we cant work around having content clickable).
    9. Line 12: data-iframe="true" is kind of redundant and not needed.
    10. What shouldn’t I use data attributes for?

      Although flexible, data attributes aren’t an appropriate solution for all problems.

      Data attributes should not be used if there is a existing attribute or element which is more appropriate for storing your data. For example, date/time data should probably be presented semantically in a time element instead rather than stored in custom data attributes.

      Source: HTML5 Doctor

    11. Line 12: Rather then using <data-title="The Huner <small>Video Opens in ColorBox</small>" try using title=””.
    12. Line 15: You are using the same title over. You could always leave the title blank and have a possible jQuery solution:
      $('a').attr('title', 'Video opens in ColorBox');

    a.js

    1. Line 8: Spelled title incorrectly, try return $(el).attr('title');

    output.html

    1. Line *: Good practice to refrain from CAPITALIZING some of your tags, stick to lowercase all around.
    2. Line 18: List elements are formed without <ul> or <ol>.

    b.js

    1. Line 23: Missing semicolon;

    Other suggestions!

    1. For your example, it wouldn’t hurt to just have one(1) javascript file that both your pages link to.
    2. In order to not throw any errors & you have local videos to add, you can use the <video>&ltvideo> tags. An iframe cannot set MIME types.

    Download the latest code.

    # March 7, 2013 at 10:22 am

    this is code work only for link1

    when i enter anothr link on the index page..

    every time first video is playing…this code work only for link1 ..

    # March 10, 2013 at 6:12 pm

    hey hi

    you actually help me , topic is how extract title from link and place into other page on click event using jquery

    you send me a complete code…. but in that code have one bug

    this code work only for link 1

    when i type 2nd url and click on second url….. video of first url is start playing…why this happen

    check this=> just add second link in index.html and provide new video link and click on second link.. you will understand what is error
    http://cloud.johnmotyljr.com/demos/pranavpatil19/Code_Complete_2.zip

    http://css-tricks.com/forums/discussion/23073/how-extract-title-from-link-and-place-into-other-page-on-click-event-using-jquery#Item_7

    # March 10, 2013 at 9:32 pm

    You need to understand why it is not working, hence, look into jQuery selectors.

    # March 11, 2013 at 2:51 am

    i tried but its not help me…please help me

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".