Wednesday, December 4, 2013

How to make a Tabbed Panel using CSS without Javascript

    Tabbed Panels are not a new thing, they have been around on your desktop since the first graphic interface. The web is here, but we don't do things like pepperidge farm remembers. A long time ago netscape came up with this client side scripting language, we call javascript, ECMAScript for picky. It has proven very useful for all sort of things. And more recently thankfully or not with the explosion of libraries like jQuery, you probably see Tabbed Panels everyday on the web too.

But Today I was fiddling around and I found something that I though it was very cool and I want to share with you guys that it is possible to make a Tabbed Panel with pure CSS and markup, without Javascript.

Don't get me wrong, I love javascript and I write javascript everyday, but is very cool to see that it is possible to do this kind of things without it.

DEMO

JSFIDDLE http://jsfiddle.net/Victornpb/h2nb6/

Tab 1

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

Tab 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin iaculis diam eget leo dapibus suscipit. Integer vulputate lacinia libero, nec interdum diam consectetur non. Quisque elementum augue lectus, id euismod risus bibendum quis. Integer nec turpis facilisis, vestibulum mi vel, mattis nisi. Integer et sapien odio. Pellentesque enim ipsum, dictum vel malesuada non, elementum sed augue. Curabitur quis lectus libero. Proin vel elementum quam. Nam ipsum ligula, condimentum nec ante vitae, sollicitudin auctor elit. Morbi et elementum lectus. Aenean vulputate lobortis nunc.

Tab 3

Quisque orci metus, elementum et purus vitae, fringilla dictum orci. Sed tincidunt, lectus vitae bibendum vehicula, turpis nisi pharetra ante, et posuere diam sem eget metus. Curabitur id felis non odio aliquam dignissim. Fusce volutpat vulputate enim quis pellentesque. In ut nunc eleifend, rutrum velit non, sollicitudin lectus. Praesent fringilla ipsum lectus, condimentum varius elit accumsan nec. Curabitur hendrerit, orci pretium pulvinar lobortis, nunc metus ultricies elit, vel sodales urna erat et quam. Nulla ac turpis pretium, gravida mauris vitae, interdum arcu. Aenean porttitor, justo a consectetur iaculis, neque est varius nisi, a vulputate eros elit ac justo. Etiam elementum ipsum sit amet dignissim lacinia.




The little magic behind it is a radio button before each tab. By nature of how radio buttons work, when one radio is checked, it's the only one checked, which makes then useful for out TabbedPanel, which will only show one tab at time.

<input type="radio" name="tabs" id="tab1" checked>
<div>
    <!-- Content tab 1 -->        
</div>

<input type="radio" name="tabs" id="tab2">
<div>
    <!-- Content tab 2 -->          
</div>

<input type="radio" name="tabs" id="tab3">
<div>
    <!-- Content tab 3 -->
</div>

This selector will select a div that it's right after a checked radio button

input[type="radio"]:checked+div{
    /* SHOW TAB */
}

But we don't want to show the radio buttons, so we hide then using CSS. But, there's a problem how we are supposed to check a radio button if it's hidden? The answer is a Label. A label let us refer to another element even if it's hidden, so that's what we are using as Tab buttons. The good thing is that allow us to place the tabs in any order we want, also put text and icons inside, even outside the tabbedPane.

<div class="tabBar">
    <label for="tab1">Tab 1</label>
    <label for="tab2">Tab 2</label>
    <label for="tab3">Tab 3</label>
</div>

The full markup is something like this

<div class="tabbedPanel">
    
    <div class="tabBar">
        <label for="tab1">Tab 1</label>
        <label for="tab2">Tab 2</label>
        <label for="tab3">Tab 3</label>
    </div>
    
    <div class="tabs">
        
        <!-- TAB 1 -->
        <input type="radio" name="a" id="tab1" checked>
        <div>
            <h1>Tab 1</h1>
            <p>Content</p>
        </div>
        
        <!-- TAB 2 -->
        <input type="radio" name="a" id="tab2">
        <div>
            <h1>Tab 2</h1>
            <p>Content</p>
        </div>
        
        <!-- TAB 3 -->
        <input type="radio" name="a" id="tab3">
        <div>
            <h1>Tab 3</h1>
            <p>Content</p>
        </div>
        
    </div>
    
</div>

This is more or less of what like the CSS would be

.tabbedPanel{
    display: table;
}
.tabbedPanel .tabBar{
    display: table-row;
    height: 0;
}
.tabbedPanel .tabBar label{
    display: inline-block;
}
.tabbedPanel .tabs{
   display: table-row;
   height: auto;
}
.tabbedPanel .tabs > input[type="radio"]{
    display: none;
}
.tabbedPanel .tabs > div{
    height: 100%;
    overflow: scroll;
}
.tabbedPanel .tabs > input[type="radio"]:not(:checked)+div{
    display: none;
}
.tabbedPanel .tabs > input[type="radio"]:checked+div{
    display: table-row !important;
}

Adding some quick look and feel

/**** Visual ****/
.tabbedPanel{
    border: 1px solid grey;
    height: 300px;
    width: 300px;
}
.tabbedPanel .tabBar{
    background: #F0F0F0;
    font-family: Helvetica, Arial, sans-serif;
}
.tabbedPanel .tabBar label{
    cursor: pointer;
    
    background: #C0C0C0;
    
    border: 2px outset #CCC;
    border-bottom-color: transparent;
    border-radius: 3px 3px 0 0;
    
    padding: 0.5em;
    padding-top: 4px;
    padding-bottom: 4px;
    
    margin-top: 3px; 
    margin-right: 1px;
}
.tabbedPanel .tabBar label:first-child{
    margin-left: 5px;
}
.tabbedPanel .tabBar label:hover{
    color: #38f;
}
.tabbedPanel .tabBar label:active,
.tabbedPanel .tabBar label.active{
    color: blue;
    background-color: #DDD;
    border: 2px outset #BBB;
    border-bottom: 2px solid transparent;
}
.tabbedPanel .tabBar label:focus{
    outline: 2px solid yellow;
}

.tabbedPanel .tabs > div{
    border: 2px outset #DDD;
}

I'm not sure how and if it can be used in a production environment. I can't answer that, but as-is, probably not. Somehow IE always finds its ways to not work with things properly, and that would kill every hope to let it going to production.

There's limitations. I couldn't figure out how to keep the current Tab button highlighted yet. Radio buttons require a name to work as a radio group, and labels require each radio button to have a unique ID.

Anyway, I hope you find it interesting, if you have any though on this, drop a comment.

Sunday, September 8, 2013

SIME - System Information Menu Editor

SIME was an attempt to do a WYSIWYG editor to design menu interfaces for touchscreen GPS Systems and PocketPCs running WindowsCE.

The tool was used to generate a serialized graphic representation in a  "INI" like format file which is used to generate a menu by the SystemInformation32 application.

SystemInformation is a free german software by ultimatelaunch.de

It was a pretty good exercise writing javascript, everything was built from scratch, no jQuery or other fancy libraries. It uses only javascript css3 and html5 techniques, and there's no server side part.

Unfortunately I never managed to get it completed, but I hope I will get it done someday.

The source code is not minified of obfucated, so feel free to check it out, and if you want to continue this or use it to build another thing maybe, drop me a note on my contact page or social networks.

The documentation for the launcher software can be found here Ini-Beschreibung and here Tutorial, unfortunately texts are only in german, but you can use google for that.

Check it out here http://vitim.us/playground/SIME_SystemInformationMenuEditor/

Resistor WebApp




There are two things that I like doing, writing Javascript and playing with electronics.
Check out my little resistor color code helper.

It supports URL anchors, so you can easily use URLs like these:
vitim.us/playground/resistor/#4K7
vitim.us/playground/resistor/#4.7K
vitim.us/playground/resistor/#1.8MΩ 0.5%
vitim.us/playground/resistor/#brown-green-red
vitim.us/playground/resistor/#brown-black-red-gold
vitim.us/playground/resistor/#brown|black|red|red

pretty cool ha!?

And you can add to your home screen on your iOS Device.

Hope you like it!


Friday, April 26, 2013

SimCity4 Launcher

If you play Sim City 4 this is a must have full featured Launcher! It will let you to play Sim City 4 on a custom resolution, or play in a window while surfing the web or doing other things in the computer.

Have you ever lost hours of progress due to a crash? Forgot to save?

Never loose you progress again, with the auto save feature.

Your game will be automatically saved while playing on a chosen  interval.



Play your game in full 1920x1080p on a huge 21" monitor or any other resolution.

Play in widescreen resolutions.

Play in full-screen or play in a floating window, no more ALT+TAB.

Fully configurable.
Playing windowed while multitasking


You can select between 9 backgrounds or let it randomly choose one every time.
Supports additional parameters.

Option to exit launcher when the game is launched.










List of features:

  • Auto Save Feature - automatically save your game progress while playing.
  • Quick saving - no one have time for long waiting dialogs.
  • Save in a customized interval, you can adjust from every minute up to 120 minutes.
  • Log saving events
  • Custom resolution
  • Detect current resolution
  • Color depth
  • Launch game in full-screen or windowed
  • Rendering mode (Software, OpenGL or Software)
  • Background Loading
  • Ability to turn Music and Sound On and Off
  • Option to skip the Introduction videos
  • Game pausing
  • Choose a custom game data directory
  • Change Language
  • Change process priority
  • Feature to change number of logical core used.
  • Browse for the location of the game
  • Auto detect game executable on common directories
  • Specify custom parameters
  • Change between 9 background images
  • Random background
  • Option to exit the launcher when the game is launched
  • Option to reset defaults
  • Auto save settings to INI file
  • No dependencies, single executable.
  • Works on Wine (Linux, OSX...)

How to use:

  1. Download the executable
  2. Place it in any folder you like
    If you place it inside the SimCity folder it will automatically find the game executable.
        e.g.: ...\Maxis\SimCity4 Deluxe\ or ...\Maxis\SimCity4 Deluxe\Apps\

    If you have the game installed on the default path it will find the game automatically even if you place the launcher in any other folder.

  3. Double click it


If you like this you can always pay me a coffee:


Donate

Donate via PayPal
I will thank you from the bottom of my heart!


Download:





Monday, December 10, 2012

iBattery 2.0




iBattery Gadget 2.0 

A battery meter to the desktop of your Laptop, Notebook or Netbook.

Made for Windows Vista Sidebar or to Windows 7 Desktop


One of the most popular battery gadget, more than thousands of downloads, and now the version 2.0 is here.






New in version 2.0 (30/Oct/11)
  • Now support 5 colors
  • Option to show and hide percent value, time remaing, and status icon
  • Remaing time estimation now is supported by all devices using a built-in algorithm
  • New all engine, rewritten from zero
  • Sound effects
  • 3 sound themes
  • Performance improved
  • Low memory usage
  • Low CPU load
  • Improved response time
  • Update notifications
  • Other improvements
  • Avaliable in English and Portuguese


Version 1.0
  • Transparent
  • Show percent
  • Show charging status
  • Show AC status
  • Show when battery is removed
  • Show remaing time



Download Now


Thursday, October 11, 2012

Toggle visibility of hidden files and folders on Mac OS X



Now you can show and hide hidden files on Mac OS X directly from finder.
This utility allows to simple toggle visibility of hidden files and folders from Finder menu.

I made this utility using the Apple Automator App, works on Mac OS Lion and Mountain Lion.

How to use

Installation

To Mountain Lion Users:

Control+Click or Right-Click > Open



To install just unzip, double click the file, you will be asked to install it, 
just click Install and then click Done.



Download Now

Saturday, December 17, 2011

Vitim.tk moved to Vitim.us

Vitim.tk moved to Vitim.us

I had some issues with the old domain,
sorry for the blog being down for a week.

I'm working hard on this changes, sorry for the inconvenience.