Advanced Search

View RSS Feed

Recent Blogs Posts

  1. Responsive CSS3 Multi-Level Menu (no JavaScript)

    I decided to work more on the previous "CSS-only, Multi-Level, Off-Canvass/Slide-Out Menu (no JavaScript)" code so that it can be used on desktop as well as mobile.

    So here is the "Responsive CSS3 Multi-Level Menu (no JavaScript)".

    It's similar to the previous menu in that it uses the same side-docked, off-canvass menu pattern for mobile, but this new version now also sports a horizontal, dropdown menu bar in "desktop" view, which is just ...

    Updated 04-14-2014 at 10:10 AM by Beverleyh

    Categories
    CSS related
  2. CSS-only, Multi-Level, Off-Canvass/Slide-Out Menu (no JavaScript)

    I recently worked on a mobile forum with off-canvass/slide-out menu. I wanted to keep the project as small and lightweight as possible, so I chose to snub JavaScript and work on a CSS-only solution. The menu was just a simple 1-level effort using the checkbox hack (where you use the :checked state of a checkbox and a connected label to trigger something with CSS), but it was an excuse for me to play around with CSS3 transitions. That example is here: http://m.jemcon.org/phpBB3/

    Anyway, ...

    Updated 04-14-2014 at 10:11 AM by Beverleyh

    Categories
    CSS related
  3. Putting text on top of a video

    In July 2010 an enhancement to the YouTube video embed capability became available through a new embed code style. This style uses <iframe> and looks like this:
    <iframe src="http://www.youtube.com/embed/VIDEO_ID?" frameborder="0"></iframe>


    After VIDEO_ID? we can add the normal parameters, like this:
    <iframe src="http://www.youtube.com/embed/VIDEO_ID?start=0&amp;autoplay=1&amp;rel=0&amp;showinfo=0&amp;autohide=0&amp;modestbranding=1&amp;vq=large"
    ...

    Updated 10-14-2012 at 06:10 PM by molendijk

    Categories
    JavaScript & Ajax , CSS related
  4. Stretching an iframe or an object with pixel precision

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <title></title>
    ...

    Updated 06-17-2010 at 09:45 PM by molendijk

    Categories
    CSS related
  5. Styling Descriptions for Ultimate Fade-in slideshow (v2.1)

    There are actually 4 css selectors that can figure in this. Only three of them really matter. If you only have one show on your page, you only need to think about the last two. The selectors are:

    1. The id of the show, #fadeshow1, for example.

    2. .fadeslidedescdiv - the class for all description containers.

    3. .descpanelbg - the class for all description backgrounds.

    4. .descpanelfg - the class for all description foregrounds.

    ...
Page 1 of 2 12 LastLast