Veränderte Größenangaben mit JavaScript ermitteln

Durch die CSS-Angaben max-width und max-height können Größenangaben von HTML-Elementen verändert werden. Um die veränderte Größe abzufragen, können dann die Eigenschaften clientWidth und clientHeight verwendet werden.

Das folgende Beispiel veranschaulicht den Sachverhalt.
Veränderte Größenangaben mit JavaScript ermitteln weiterlesen

Unterschied von UriKind.Relative und UriKind.Absolute

Möchte man Dateien in einer Windows Phone-Applikation benutzen, muss man diese meist über einen Uniform Resource Identifier (URI) referenzieren. Für einen URI gibt es verschiedene Arten (uriKind). Die drei standardmäßigen sind UriKind.Relative, UriKind.Absolute und UriKind.RelativeOrAbsolute. Ich möchte kurz den Unterschied von UriKind.Relative und UriKind.Absolute zeigen.
Unterschied von UriKind.Relative und UriKind.Absolute weiterlesen

Export a GraphML graph as image with Java

In my post „How to parse GraphML files with a cool Java library“ I showed how to parse a GraphML XML file. In this post I want to show you, how you can visualize it. All you need is the yEd – Graph Editor and some extra markup in your XML file.
Export a GraphML graph as image with Java weiterlesen

Custom website image and description for Facebook Share

If you share a link of a website on Facebook, then Facebook will display the title, description and an image of that website. If you are a webmaster, then you can define what will be shown on Facebook. Let’s have a look at my example:

<title>Der Blog von Benny Neugebauer</title>
<meta name="description" content="Benny Neugebauer schreibt in seinem Blog über Tipps und Tricks in der Webentwicklung. Zu den Themen zählen JavaScript, Java, PHP, HTML5, SEO und Photoshop." />
<meta name="medium" content="blog" />
<link rel="image_src" href="https://www.bennyn.de/images/logo.png" / >

Explanation:

  1. Facebook will show the standard HTML title of your webpage.
  2. You can set description, which will be shown. It can be 160 characters long but to be compatible with the Google search, it should not be longer than 130 characters.
  3. It is recommended to determine the type of your website. Possible values are: audio, image, video, blog, news and mult (multiple).
  4. Finally you can set a thumbnail picture for your website. The size should be 100×100 pixels.

Here is the final result of my customization:

More information can be found in the Facebook Share documentation.

Create a link with an image in JavaScript

With JavaScript you can dynamically create every HTML element that you want. Here is an example on how to create a link with an image:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Create a link with an image in JavaScript</title>
    <style type="text/css">
      .googleImage{ border: 2px solid blue; }
    </style>
  </head>
  <body>  
    <script type="text/javascript">
      // Link
      var link = document.createElement('a');
      link.href = 'http://www.google.de/';
      // Alternative:
      link.setAttribute('href', 'http://www.google.de/');
 
      // Image
      var image = document.createElement('img');
      image.className = 'googleImage';
      image.src = 'http://www.google.de/images/logo.png';
 
      // Create a link with an image inside
      link.appendChild(image);
      // Display the link
      document.body.appendChild(link);
    </script>
  </body>
</html>