STARIKOVS

Archive for the ‘html’ Category

I’ve tried to create an image gallery with help of Galleria that gets photos from Picasa album but it does’t work when following an official Galleria manual. So, here’s my example of how to force it work.

Download Galleria

You can download galleria from the official site galleria.io. Create a folder named galleria_picasa and unzip Galleria into galleria_picasa/galleria, so that galleria-1.2.8.min.js will be available at the path galleria_picasa/galleria/galleria-1.2.8.min.js.

Create index.html and include scripts

Create index.html to be accessible at galleria_picasa/index.html.

Galleria utilizes jQuery, so it’s necessary to include jQuery script before others. Then include Galleria script and then the script of Pisaca plugin.

<title>Create an image gallery using Galleria and Picasa</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="galleria/galleria-1.2.8.min.js"></script>
<script src="galleria/plugins/picasa/galleria.picasa.min.js"></script>

Notice that you should use the right path to Galleria Picasa plugin! In my case, it’s galleria/plugins/picasa/galleria.picasa.min.js. It’s different in previous Galleria versions.

Create markup and styles for gallery

At this step, it’s time to create a DIV for the Galleria. Also, you can style Galleria’s HTML as you want with help of CSS.

<style>
    #gallery-example {
      width: 700px;
      height: 400px;
      background: #000;
    }
</style>
 
<div id="gallery-example">
</div>

Add script for Galleria

Add script to initialize Galleria and specify some options for Picasa.

<script>
Galleria.loadTheme("galleria/themes/classic/galleria.classic.min.js");
Galleria.run("#gallery-example", {
  picasa: "useralbum:110623521271153614238/Test",
  picasaOptions: {
    sort: "date-posted-asc"
  }
});
</script>

It’s very important to spcify the right user name and album name. To do this, just copy it from the Picasa album URL:

https://picasaweb.google.com/110623521271153614238/Test

This part of URL is what you need “110623521271153614238/Test”.

Make your Picasa album available to all the internet

Your Picasa images will be showed in Galleria image gallery only if the Picasa album is available to all the internet. So, check to rights of the album.

I’m implementing a simple layout with “display table” approach at the moment. I’ve been confused a lot, when I set the width for the table it’s ignored. I have big images in layout cells with “max-width 100%”.

For instance, there is a div element with “display table” and it has 800px width, also it has two divs with “display table-cell”, each cell has a big image as a content. In Chrome everything works well but in FireFox there’s a problem the width of table is ignored. Table cannot have a width less then 800px but if you have lots of contents table will grow.

To fix this behavior use table-layout fixed:

1
2
3
4
5
6
7
8

  <div class="layout">
    <div class="layout-cell">
      Lorem ipsum...
    </div>
    <div class="layout-cell">
      <img src="big_image.jpg">
    </div>
  </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

  .layout {
    display: table;
    width: 800px;
 
    /* try to remove this to test, in FF for example */
    table-layout: fixed;
  }
 
  .layout-cell {
    display: table-cell;
  }
 
  img {
    max-width: 100%;
  }

Try it here http://codepen.io/starikovs/pen/BrDKv.

Read more about CSS table-layout Property.

Recently I’ve tried to create some arrows for navigation with “previous” and “next” links. The main idea is of using some unicode arrow characters to associate them with previous or next directions. Yes, it’s left and right arrows

By default, I use Helvetica, Arial, sans-serif font family. As you can see on the picture below there’s a problem with UTF-8 arrows, they’re looked badly. This look depends on the font size. It’s possible to pick a font size when these arrows will be looked nicely.

I’ve played with the arrows for a while. It’s strange. If you’re going to use such approach just test before with the different font sizes. Just pick a suitable font size for the arrows, that’s all I’ve decided that I won’t use these arrows because of font size in percentage in my case. I prefer the second variant with < and > text.

HTML and CSS for arrows with unicode symbols:

1
2
3
4
5
6
7

  <div class="nav">
    <a href="#">? previous</a>
    <span class="separator">|</span>
    <a href="#">home</a>
    <span class="separator">|</span>
    <a href="#">next ?</a>
  </div>

1
2
3
4
5
6
7
8
9
10
11
12

  .nav {
    font: 16px/1.6 Helvetica, Arial, sans-serif;
  }
 
  a, a:link, a:visited {
    color: #a64600;
  }
 
  a:hover {
    color: #bf6d30;
    text-decoration: none;
  }

HTML and CSS for arrows with < and > text:

1
2
3
4
5
6
7

  <div class="nav nav-alt">
    <span class="arrow"><<</span><a href="#">previous</a>
    <span class="separator">|</span>
    <a href="#">home</a>
    <span class="separator">|</span>
    <a href="#">next</a><span class="arrow">>></span>
  </div>

1
2
3
4
5
6
7

  /* In addition to CSS above. */
 
  .nav-alt .arrow {
    color: #a64600;
    display: inline-block;
    margin: 0 5px;
  }

Try it here http://codepen.io/starikovs/pen/Fapwk.

So, how to change underline style for hyperlink? It’s easy! Just you should set several CSS styles.

The main idea, is that you disable text-decoration for links, then make links to have a box model by adding display with inline-block value. After this, links have a box model and we may change bottom border of links as wel as borders of other sides, paddings and margins. By changing bottom border we achieving desired results:

1
2
3
4
5
6
7
8
9

a {
  display: inline-block;
  border-bottom: 1px dashed #ccc;
  text-decoration: none;
}
 
a:hover {
  border-bottom: 1px solid #aaa;
}

You can change bottom border size, style and color to get the border you want, it’s may be thick, dotted or dashed link underline style, or any other border you can make with CSS.

Try this sample http://codepen.io/starikovs/pen/rLFuf.

In the previous article we discussed how to position HTML elements over YouTube video. The problem is that YouTube video overlaps any html element, by default. How to force YouTube video showing behind HTML elements with help of HTML approach read in following article How to position html elements over YouTube video.

Here you’ll see how to perform the same but with JavaScript approach. First, script finds all the YouTube iframes and then adds wmode parameter to them. This wmode parameter should have transparent or opaque values.

1
2
3
4
5

  jQuery(function ($) {
    $("iframe[src]").each(function () {
      $(this).prop("src", $(this).prop("src") + "?wmode=transparent");
    });
  });

In this script jQuery of 1.8.2 is used. Note that this fix is needed for old browsers, for example, IE9 and older, some verstions of FireFox.

In this article you’ll find how to force YouTube video showing under your html elements.

By default, YouTube video is showed over any html element. In my case, the problem refers to Dropdown Menu and Lightbox. For example, when Lightbox is appearing YouTube video overlaps it ignoring z-index. In general, you may run into this problem with any html element you want to position over YouTube video.

At the moment, YouTube video is added to html page via iframe. Inside the iframe YouTube creates all the stuff it needs to show the video. In the depth of iframe there’s Flash Player, by default. If HTML 5 is used to show the video there isn’t any Flash in iframe and there isn’t any problem with overlay. Flash is inserted to the browser using or

helpx.adobe.com/flash/kb/flash-object-embed-tag-attributes.html

After reading the docs you can find an interesting attribute wmode and an interesting possible value of this attribute – transparent:

transparent – The SWF content is layered together with other HTML elements on the page.

That’s what we need! So, SWF content is Flash that we want to behave like other html elements.

Here is a schematic html code YouTube uses to show the video deep inside iframe:

1

  type="application/x-shockwave-flash" src="...">

Html should be like following to fix the problem with overlay:

1

  ="transparent" type="application/x-shockwave-flash" src="...">

Fortunately, it’s possible to toggle wmode attribute via iframe source parameters when inserting YouTube video to html:

1
2
3

  <iframe width="560" height="315" 
    src="http://www.youtube.com/embed/NeXMxuNNlE8?wmode=transparent" 
    frameborder="0" allowfullscreen></iframe>?

Take notice at src attribute and wmode parameter:

src=”http://www.youtube.com/embed/NeXMxuNNlE8?wmode=transparent“

Now, using this approach it’s possible to position Menu, Lightbox or any other html element over YouTube video or other flash/swf movie.

This problem appears not in all browsers, mostly in old browsers like IE, old versions of FireFox or WebKit. The test example is here:

http://jsfiddle.net/buhvf/1/

I’ve just fixed very evil bug.

My web site works well on all the major browsers. But when I tested it on Android phone, using standard Android browser, I was surprised.. In some text fields or inputs, that browser sets my email. By the way, there’s nothing about email in the input name or id. Again, all the major desktop browsers don’t have this bug.

Despite on the setted value attribute for the input, Android browser’s autocomplete still sets its value. So, it even ignores the value attribute prefering the autocomplete’s value.

PHP:

 echo $n ?>">

Then, in HTML:

<input type="text" name="n" value="qwerty">

But Android browser sets my email to this field.

The fix of this problem is simple. I’ve just set autocomplete=”off” attribute for the inputs!

<input type="text" name="n" value="" autocomplete="off">

In this article, I am going to test CSS 3 rounded corners. I do want to know can I use them in practice in different browsers. Here are some examples of CSS3 rounded corners and if you can see some rounded corners – congratulations your browser supports them!

Read the rest of this entry »

Today I had a problem with IE8. Compatibility Mode for IE7 didn’t work when I was working with the Artisteer generated theme that I was improving by hands. The tag order does matter but I have never thought it would.

Read the rest of this entry »