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 11 of 11
  1. #1
    New Coder
    Join Date
    Aug 2011
    Posts
    19
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Display Page Titles Of Links

    To be honest, I am not completely sure if this can be done with Javascript.
    Here's my objective, I want the title to be replaced with the destination's titles. And I want it to change automatically.

    Code:
    <a href="URL">title</a>
    <a href="URL">title</a>
    <a href="URL">title</a>
    <a href="URL">title</a>
    For example if one of my code says:

    Code:
    <a href="http://www.codingforums.com">title</a>
    Then it will automatically display:

    CodingForums.com- Web coding and development forums. Get help on JavaScript, PHP, CSS, XML, mySQL, ASP, and more!

    And if ever they have decided to edit their title, my thing will also automatically update if I refresh it.
    Last edited by Undisclosed; 09-07-2013 at 02:48 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
    server side code would have to be involved php/asp/.net that sort of thing

    heres a php solution : http://stackoverflow.com/questions/1...remote-webpage

  • #3
    New Coder
    Join Date
    Aug 2011
    Posts
    19
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Oh my, I have no knowledge of php.
    I assume this is the one. But I have no idea what to do with it.
    Code:
    <?php # getTitle.php
    
        if ( $_POST["url"] ) {
            $doc = new DOMDocument();
            @$doc->loadHTML( file_get_contents( $_POST["url"] ) );
            $xpt = new DOMXPath( $doc );
            $output = $xpt->query("//title")->item(0)->nodeValue;
        } else {
            $output = "URL not provided";
        }
    
        echo $output;
    
    ?>
    and

    Code:
    $.post("getTitle.php", { url:'http://example.com' }, function( data ) {
        alert(data);
    });

  • #4
    Regular Coder
    Join Date
    Jan 2013
    Location
    Germany
    Posts
    578
    Thanks
    4
    Thanked 77 Times in 77 Posts
    You save the PHP script on your server. Now, in your document, you can use the following script (which uses jQuery) to look at all links with "title" as the link text. It will first set the link text to the URL (since loading the actual title might take a second and "title" doesn't look very nice) and then set the correct title once it has loaded.

    Code:
    (function () {
        var setTitleAsDescription = function (elem) {
            $.post('getTitle.php', { url: $(elem).attr('href') }, function (data) {
                $(elem).html(data);
            });
        }
    
        $('a').filter(function () {
            return $(this).html() === 'title';
        }).each(function () {
            $(this).html($(this).attr('href'));
            setTitleAsDescription(this);
        });
    })();
    You can find a working example at the link below, but I stubbed the setTitleAsDescription function to simulate the little delay since I can't use PHP there.

    http://jsfiddle.net/a8xFy/1/

  • #5
    New Coder
    Join Date
    Aug 2011
    Posts
    19
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Sorry I'm still pretty new at javascript and php. First of all I just need this because I want to monitor these 50+ online shops (webpages), their title (page title) changes from: ShopName [Closed] to ShopName [Full] every few days. This isn't for my website's function or anything.

    So what I did was created a folder for where I will put all these files.
    I create a getTitle.php and pasted:
    Code:
    <?php # getTitle.php
    
        if ( $_POST["url"] ) {
            $doc = new DOMDocument();
            @$doc->loadHTML( file_get_contents( $_POST["url"] ) );
            $xpt = new DOMXPath( $doc );
            $output = $xpt->query("//title")->item(0)->nodeValue;
        } else {
            $output = "URL not provided";
        }
    
        echo $output;
    
    ?>
    But after that I don't really know what to do.

    EDIT:

    I created an html file with this as the content, but it still says "title" so I'm assuming I'm doing something wrong.
    Code:
    <html>
    <head>
    		<script language="javascript">
    			(function () {
    				var setTitleAsDescription = function (elem) {
    					$.post('getTitle.php', { url: $(elem).attr('href') }, function (data) {
    						$(elem).html(data);
    					});
    				}
    
    				$('a').filter(function () {
    					return $(this).html() === 'title';
    				}).each(function () {
    					$(this).html($(this).attr('href'));
    					setTitleAsDescription(this);
    				});
    			})();
    		</script>
    </head>
    
    <body>
    
    <a href="http://www.google.com">title</a> <br />
    <a href="http://www.yahoo.com">title</a> <br />
    <a href="http://www.bing.com">title</a>
    
    </body>
    </html>
    Last edited by Undisclosed; 09-07-2013 at 01:03 PM.

  • #6
    Regular Coder
    Join Date
    Jan 2013
    Location
    Germany
    Posts
    578
    Thanks
    4
    Thanked 77 Times in 77 Posts
    You need to include the jQuery library and then use my code snippet within the jQuery ready function. Look for some jQuery tutorials to see how it's done. It's also common to place javascript code right before the closing </body> tag instead of the head.

    Also, the language attribute is obsolete these days. You usually want to use

    Code:
    <script type="text/javascript"> ... </script>
    All of this can be written in Vanilla Javascript, without any jQuery, of course. But especially when it comes to Ajax requests, including jQuery (or any library with/for Ajax support) even for a small snippet might not be the worst thing.
    Last edited by Airblader; 09-07-2013 at 01:16 PM.

  • Users who have thanked Airblader for this post:

    Undisclosed (09-07-2013)

  • #7
    New Coder
    Join Date
    Aug 2011
    Posts
    19
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Ohh, thanks for tip!
    I tried it now, it no longer displays:
    But not it displays:
    Did I do something wrong? Here's my html. I think I am getting close though. Thanks to you.
    Code:
    <html>
    <head><title>Shop List</title>
    </head>
    <body>
    
    <a href="http://www.google.com">title</a> <br />
    <a href="http://www.yahoo.com">title</a> <br />
    <a href="http://www.bing.com">title</a>
    
    
    	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    	<script type="text/javascript">
    			(function () {
    				var setTitleAsDescription = function (elem) {
    					$.post('getTitle.php', { url: $(elem).attr('href') }, function (data) {
    						$(elem).html(data);
    					});
    				}
    
    				$('a').filter(function () {
    					return $(this).html() === 'title';
    				}).each(function () {
    					$(this).html($(this).attr('href'));
    					setTitleAsDescription(this);
    				});
    			})();
    	</script>
    </body>
    </html>
    EDIT: Oh and I put the html and php in the same folder. I feel like it's not recognizing the php though.
    Last edited by Undisclosed; 09-07-2013 at 01:46 PM.

  • #8
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,274
    Thanks
    28
    Thanked 271 Times in 265 Posts
    Quote Originally Posted by Undisclosed View Post
    Here's my objective, I want the title to be replaced with the destination's titles. And I want it to change automatically.

    Code:
    <a href="URL">title</a>
    <a href="URL">title</a>
    <a href="URL">title</a>
    <a href="URL">title</a>
    This can be done with PHP and without any JavaScript whatsoever.

    Live Example: https://patrick.dark.name/web.dev/de....processing.1/

    Below is the relevant code for it. (I removed the non-relevant code for this post; the full code is shown in the live example.)

    The code utilizes a PHP-based createLink function that you simply call with a URI. I added fallback to ensure that something is shown in case the title can't be obtained. Since Facebook is apparently blocking my host, you can see the fallback in the live example.

    PHP Code:
    <?php
        
    function getTitle($URI) {
            
    $localDocument = new DOMDocument();
            
    $foreignDocument file_get_contents($URI);
            if (
    gettype($foreignDocument) === "string") {
                @
    $localDocument->loadHTML($foreignDocument);
                
    $XPath = new DOMXPath($localDocument);
                if (
    $XPath->query("/html/head/title")->length 0) {
                    return 
    $XPath->query("/html/head/title")->item(0)->firstChild->nodeValue;
                }
            }
            return 
    "<var class=\"standalone\">missing title for " htmlspecialchars($URI) . "</var>";
        }
        function 
    createLink($URI) {
            
    $linkText getTitle($URI);
            return 
    "<a href=\"" $URI "\"><cite>" $linkText "</cite></a>";
        }
        echo 
    "<p>Here are the linked titles of several other popular websites: " createLink("https://www.facebook.com/") . ", " createLink("https://www.google.com/") . ", " createLink("http://www.wikipedia.com/") . ", " createLink("http://www.yahoo.com/") . ", and " createLink("https://www.youtube.com/") . ".</p>";
    ?>
    Last edited by Arbitrator; 09-07-2013 at 04:16 PM. Reason: Fixed an error. === string should have been === "string".
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #9
    New Coder
    Join Date
    Aug 2011
    Posts
    19
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Ohh this one actually do it. How do I exactly use this php file? I really have no knowledge in php I'm sorry.

  • #10
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,274
    Thanks
    28
    Thanked 271 Times in 265 Posts
    Quote Originally Posted by Undisclosed View Post
    Ohh this one actually do it. How do I exactly use this php file? I really have no knowledge in php I'm sorry.
    Put the code in a file with a *.php file extension and upload it to a Web server that supports PHP.

    If you don't have a server, you can turn your computer into one with the XAMPP program. The Windows download is at http://www.apachefriends.org/en/xampp-windows.html. Using default XAMPP settings and assuming "C:" is the installation drive, you would (1) put the PHP file in the C:\xampp\htdocs\ directory, (2) make sure the Apache module is running by executing xampp-control.exe (located at C:\xampp), and then (3) run your file from the URI http://localhost/myphpfile.php where myphpfile.php is the file name.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • Users who have thanked Arbitrator for this post:

    Undisclosed (09-07-2013)

  • #11
    New Coder
    Join Date
    Aug 2011
    Posts
    19
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Thank you guys so much. I got both working now. This is really useful for me. Thank you!


  •  

    Posting Permissions

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