Examples for Javascript

Just add the following line before you close your "</body>":


<script async 
        src="https://guteurls.de/guteurls.js"  
        selector="<JQuery Selector String>"
        [allow="<URLPart>[,<URLPart>[,...]]"]
        [ignore="<URLPart>[,<URLPart>[,...]]"]
        [gif="<URL of GIF image, displayed during loading>"]
        [multiple="1"]
        [callback-a="(function(jqueryElement,url,$){<YourJS>})"]
        [callback="(function($){<YourJS>})"]
        [init="(function($){<YourJS>})"]
</script>
								

  • [...] lines are optional! You do not have to use them.
  • Set multible only if you want to display the box for the same link url a second time on the same page.
  • Set gif with an "empty.gif" (transparent pixel) or an loading animation gif.
  • callback-a will be called directly, after an URL was found in the element <jqueryElement>
  • callback will be called directly, after all HTML-DOM manipulation are done.
  • init will be called before HTML-DOM manipulation starts.
  • Execute document.guteUrls.execute(); if you added new posts via ajax to your page. In that case this function can generate new URL previews for URLs found in the new posts.

Examples values

<script async
        src="https://guteurls.de/guteurls.js"
        selector=".content div.singlePost"
        allow="facebook, nytimes.com, youtube.com"
        ignore="facebook*/events, youtube.com/playlist"
        gif="http://loading.io/assets/img/default-loader.gif"
        callback-a="(function(jqueryElement,url,$){console.log('url:'+url)})"
        callback="(function($){console.log('finished')})"
        init="(function($){console.log('JS will start to search URLs now')})"
</script>
								



Five examples

  1. Example 1
    The simplest one.

  2. Example 2
    Show the usage of callback-a

  3. Example 3
    Show the usage of callback-a and callback

  4. Example 4
    By using init I add a style to the html page, date sets a shadow, max-width and round borders.

  5. Example 5
    By using callback-a I change a link outside the posting text, and link to the found URL.

  6. Example 6
    Endless scrolling? You load posts via ajax, when user scrolls down? In that case you have to execute document.guteUrls.execute() afterwords.

Your Responsibility

If you use our service, you are responsible.
We are like an tool / html tag, which fetches data by a given URL, like the IMG SRC="URL" html tag.
You are responsible for displaying the data (text + images).
Note foreign copyright!

Example:

<html>
<head>
  <styles>
     .myP {}
  </styles>
</head>
<body>
   Bla:
  <div class="myP">
	My first text block. https://www.youtube.com/watch?v=_XZ8VVBXaNA End.
  </div> 

  <div class="myP">
      This is my
      <a href=""http://www.nytimes.com/2016/08/28/opinion/sunday/even-roger-federer-gets-old.html">
	  Second text</a> block
  </div> 

  <script async src="https://guteurls.de/guteurls.js" selector=".myP"></script>
</html>
							
Open this example in your browser

Example 2:


<html>
<head>
  <style>
    .myP {}
  </style>
</head>

<body>
  
  <pre id="divOUTPUT">
    <br />DEBUG - OUTPUT - callback-a:<br />=====
  </pre>

  <h1> Title: </h1>

  <div class="myP" id="divA">
    My first text block. https://www.youtube.com/watch?v=_XZ8VVBXaNA End.
  </div>

  <div class="myP" id="divB">
    This is my
    <a href="http://www.nytimes.com/2016/08/28/opinion/sunday/even-roger-federer-gets-old.html">
    Second text</a> block
  </div>

  <script async 
          src="https://guteurls.de/guteurls.js" 
          callback-a="(function(jqueryElement,url,$){ $('#divOUTPUT').append( '<br />  In ' + jqueryElement.attr('id') + ' ' + url); })"
          selector=".myP"></script>
</body>
</html>
This example shows the usage of callback-a.
callback-a will be executed when an url is found. (Maximal one per chapter!).
I put the found URLs into the "divOUTPUT" element.

Open this example in your browser

Example 3:


<html>
<head>
  <style>   
    body > div {
      width: 80%;
      max-width: 700px;
      border: 3px solid #000;
      margin: 20px auto 20px auto;
      padding: 20px
    }
  </style>
</head>

<body>
  <div><h1 style="text-align: center">Title</h1></div>

  <div>
    My first text block. https://www.youtube.com/watch?v=_XZ8VVBXaNA End.
  </div>

  <div>
    This is my
    <a href="http://www.nytimes.com/2016/08/28/opinion/sunday/even-roger-federer-gets-old.html">
    Second text</a> block
  </div>
  <script async
          src="https://guteurls.de/guteurls.js"
          callback-a="(function(jqueryElement, url,$) { jqueryElement.css( 'border', '10px dotted #0F0' );})"
          callback="console.log( 'Everything is done :-)' )"
          selector="body > div"></script>
</body>
</html>
This example shows the usage of callback-a and callback.
callback writes into the browser console, when everything is done.
callback-a adds a green border to each URL previewbox.

Open this example in your browser

Example 4:


<html>
<head></head>
<body>
  <div><h1 style="text-align: center">Title</h1></div>

  <div>
    My first text block. https://www.youtube.com/watch?v=_XZ8VVBXaNA End.
  </div>

  <div>
    This is my
    <a href="http://www.nytimes.com/2016/08/28/opinion/sunday/even-roger-federer-gets-old.html">
    Second text</a> block
  </div>

  <script async 
          src="https://guteurls.de/guteurls.js"
          init="(function($){$('head').append('<style>.guteUrls>div {box-shadow: 2px 1px 10px #111; max-width: 400px; padding: 1px 10px 10px 10px; border-radius: 8px}</style>');})"
          selector="body > div"></script>
</body>
</html>
This example shows the usage of init.
Before the searching for URLs, init will be exected.
By using init I add a style to the html page, which sets a shadow, max-width and round borders to all preview boxes by setting one CSS class.

Open this example in your browser

Example 5:


<html>
<head>
  <style>
    .myPost {}
    
    body > div {
      width: 80%;
      max-width: 700px;
      border: 3px solid #000;
      margin: 20px auto 20px auto;
      padding: 20px
    }
  </style>
</head>

<body>
  <h1>My Blog</h1>
  <hr />

  <div class="myP">
    <h2><a href="javascript:alert('Full text of first post.')">
      Title of first post
    </a></h2>
    <br />
    <span>
        My first text block. https://www.youtube.com/watch?v=_XZ8VVBXaNA End.
    </span>        
  </div>

  <hr />

  <div class="myP">
    <h2><a href="javascript:alert('Full text of second post.')">
      Title of second post
    </a></h2>
    <br />
    <span>
      This is my
      <a href="http://www.nytimes.com/2016/08/28/opinion/sunday/even-roger-federer-gets-old.html">
      Second text</a> block
    </span>        
  </div>

  <script>
      document.changePostTitleLink = function ( jqueryElement, url, $ ) {
        // The jqueryElement is the preview box.
        // This box is in the "span", beacause we definded selector=".myP > span"
        // We go up to the parent div.myP,
        // and then we search inside the div for <a href=... 
        // and then we change the href
        jqueryElement.closest('div.myP').each(function(element) {
             $(this).find('a').attr('href', url);
        });
      }
  </script>

  <script async  
          src="https://guteurls.de/guteurls.js" 
          callback-a="document.changePostTitleLink"
          selector=".myP > span"></script>
</body>
</html>
This example changes the link of the headlines ("h2").
The link will be the found URL.

Open this example in your browser

Example 6:


<html>
<head>
  <style>
    .myP {}    
    .divManyPosts>div { border-top: 1px solid #888; padding: 20px; }
    .aLoadMore { font-size: 30px; line-height: 40px; margin-bottom: 50px;}
  </style>  
</head>

<body>
  <h1>My Blog</h1>

  <div class="divManyPosts">
    <div class="myP">
      My first text block. https://www.youtube.com/watch?v=_XZ8VVBXaNA End.
    </div>

    <div class="myP">
      This is my
      <a href="http://www.nytimes.com/2016/08/28/opinion/sunday/even-roger-federer-gets-old.html">
      Second text</a> block
    </div>
  </div>

  <a href="javascript:loadMore()" class="aLoadMore">Load and show more posts</a>
  <br />
  <br />
  <br />

  <div id="divMorePosts" style="display:none">
    Third text block. It could be loaded via Ajax, when user scrolls down. 
    http://crypted-email.com is a great email encryption tool!    
  </div>



  <script async 
          src="https://guteurls.de/guteurls.js"           
          selector=".myP"></script>

  <script>
      function loadMore() {
        var $ = document.guteUrls.jQuery;
        $('div.divManyPosts').append(            
          '<div class="myP">a' + $('#divMorePosts').html() + '</div>' 
        );
        alert($('#divMorePosts').text());
        document.guteUrls.execute();
      }
  </script>
</body>
</html>
Endless scrolling? You load posts via ajax, when user scrolls down?
In that case you have to execute document.guteUrls.execute() afterwords.

Open this example in your browser