Archives

Categories

Links

Author: adam

So this next post covers a simple slideshow that uses a combination of CSS and JavaScript. Once again, some degree of knowledge is assumed on CSS and JavaScript. Here we are displaying an image which slides to the left to reveal another image. This happens, in our case, 5 times and then the slideshow slides back to the right to the first image. The 5 slides are each 250 pixels by 250 pixels in size and show for 5 seconds.

To start with, we’ll take a look at the HTML for the slideshow. It consist of a DIV container (“slideshow”) within which is a another DIV container (“runner”) which will hold all the images. The images are drawn side by side in a line.

Here we position the slideshow to the centre of the screen using the left attribute. In order to do this we must use positioning which we still want to remain relative to the other items on the page. We also want to restrict the positioning of the child container to be within the parent, allowing us to manipulate the slides to the correct position. The width and height are set to 250 pixels, the same as the physical size of the slides, giving us our viewing window. Because we are going to be sliding the pictures left and right, but only want the one within our window visible, we have to hide the overflow.

The container holding our slides will need to be as wide as the combination size of all our slide (5 slides * 250 pixels), the height to one of our slides, and the position will need to be absolute so we can move the string of slides left and right within the parent.

We start off at position 0,0 on slide 1. The manipulation of the slides will be done with JavaScript which we’ll get to in a moment, but when the slide moves we want a smooth transition from one slide to the next and we want it to be slow enough to be visible. Any change to the left property of the child container (“runner”) will fire off the transition over 0.5 seconds and it will ease-out rather than move linear. The last declaration is actually a bit of a hack. When drawing the slides next to each other, a small undesirable gap of a couple of pixels is left either side of each slide. This is removed by the assigning of font-size 0. Strange but true.

First we need to declare a variable to hold the position of the slides, which we do with “x = 0”. We also have a variable for the number of slides we are going to process “noOfSlides = 5”. Between these two values, we can manipulate the left position of the child container “runner” to align with the slide sized window declared in the parent container “slideshow”. We simply change the left position by 250 pixels each time to reveal the next slide. Because we start at 0 and want the slides to move to the left, we have to use negative numbers, so to move our string of slides left one slide, we simply deduct -250 pixels from it’s left position. This we do 5 times for the 5 slides. If our position counter “x” is equal to 5 slides * -250 pixels (our 5 slide positions), we reset it back to 0. This causes the 5 slides to move to the right in succession and the process starts again. To start the process off, we make a call to the function “changeImage” when the window has fully loaded in the first instance. After that the slideshow becomes self perpetuating.

A short while ago, I published a post that created a CSS Toggle Switch in it’s very basic form. Here we use the same code, changing class names, and add a couple of other tweaks to make a similar toggle switch. Now it’s round and we’ve added some shadowing to make it look slightly better. Nonetheless, it’s still a very basic piece of code. The code assumes some level of understanding with CSS/HTML. (click here for demo)

For a look at the code in more depth, please see Simplest Toggle Switch as here we only look at the couple of bits added or changed from that code.

We have simply changed the border radius to 40 pixels from 10 pixels in two places (tgWrapper and tgLabel) and added box shadow in two two places (tgWrapper and tgLabel). That’s it. Simple as can be.

There are many excellent solutions on the Internet to produce a simple push switch such as this with varying degrees of difficulty. I have tried to keep this one to the absolute bare bones to make it as simple as possible. The code assumes some level of understanding with CSS/HTML.

The code sets the default margin and padding for all elements to 0 so that we don’t have any padding or margins getting in the way of our positioning. There is an H1 title on the page that we want some spacing on the top of the title, and we want it centred. We’ve also set the H1 title to be blue. Now for the actual push button itself.

Once again, as we’ve seen in other posts, we have a parent container with siblings of a checkbox and a label. This is all the HTML needed for the push button. The rest of the magic is done in CSS. One point to note here is the use of a font from Font Awesome. This will be our power label. It’s simply a case of linking to the font awesome stylesheet (see full code below) and then drawing the icon with:

<i class="fas fa-power-off pl"></i>

This is the standard for the use of Font Awesome icons. Only the class changes to reflect the icon wanted. You will also notice our own class of “pl” which will be used to position and size the icon into the centre of the button. Let’s configure our container:

We set the position to be relative to the page, define a width and height, centre the button using the “calc” function and give the button some space above it to make things more aesthetically pleasing. By setting the position to relative we do three things. We allow the element to be drawn relative to the other elements on the page (as if it were Static) but can overrule the position which in our case, we specify left to be the centre of the screen minus half the width of the button. (50% + 35 px). We also restrict the positioning of the containers siblings to be within the container by using relative, so a sibling with a top of 0 and a left of 0 is positioned at the top left corner of our parent container. As with our label:

The CSS here is nothing we haven’t seen before in other posts, except maybe the box shadow. This is what gives the button the effect of movement. We draw a shadow on the button and reduce that shadow when clicked. We also set our radius to be 50px which will make our button round. Width and height are set to 100% of the parent (our container) and the cursor will change to a pointer when the mouse is over the label. The rest merely specifies the colour of the button (we use the background colour), button border and the font colour which will be used by the power icon we are going to draw on top of the label. As follows:

.pl{
position: absolute;
top: 23px;
left: 23px;
font-size: 24px;
}

This should now be self explanatory as we already touched on what this class is for. Using absolute positioning (within our container), this CSS places our power icon in the centre of the button (the label body) and sets its font size. It is important to specify the font size as the position of the icon will change depending on the size of the font. Were you to want a larger font, for example, you would need to tweak the left and top position to centre the icon correctly.

Now to configure our checkbox:

.cb{
opacity: 0;
width: 100%;
height: 100%;
cursor: pointer;
}

The checkbox will be responsible for the button state but we only want the functionality of the checkbox and not the visual aspect. To hide the checkbox but keep it active we can set its opacity to zero. We also need to size it to take up the whole container, 100% width and height, as it will still detect then the mouse pointer is over the top of it, which we set to a pointer. All that’s left to do now is detect when the checkbox is checked and act accordingly:

When our checkbox is checked we look for our .lb sibling and change it’s style to show the action. Here we reduce the box-shadow by two thirds, change the colour of the background and border to a lighter grey, and the font colour to green. All this happens when the checkbox is checked and returns back to its previous state when the checkbox is unchecked.

There are many wonderful solutions to pure CSS toggle switches freely available on the Internet. However, sometimes, especially when learning CSS, you just want a simple solution that you can get your head around. CSS can and does get very involved and can become very difficult to understand so this is the simplest pure CSS toggle switch that I could come up with. The code assumes some level of understanding with CSS/HTML.

The first piece of CSS is not actually needed as part of the toggle switch but is used to dress the page that the toggle switch is displayed on.

*{
margin: 0;
padding: 0;
}
.h22{
padding: 50px;
color: #0000ff;
}

Here we remove all default margins and padding from all elements (using *) and set the padding and colour to use on the h2 title shown above our toggle switch. The switch itself is simply a container holding a checkbox and a label.

The container itself will be the body of the switch so we define it’s attributes with the above CSS. The position is set to relative which allows us to position the container relative to other elements on the page, such as the H2 title (see full code) but also specify the left position to centre the toggle switch body. We also need the position to be relative to restrict the position of the other elements to be held within the container space i.e the input and the label. The rest of the CSS above is pretty self explanatory, just width, height, and border definitions.

The “.toggle” will control the label and become the sliding button part of the button. The position is set to absolute so we can move the label to the top left corner of the container by specifying top 0, left 0. The button will be 44 pixels square and when a user moves over it, the cursor will change to a pointer. It’s appearance will be the background colour specified (red), as the background becomes the body of the button. The actual physical movement of the button (the slide) will run for 0.4 seconds by way of a transition. Basically, the button will stay at 0 pixels in the container until another command changes it’s left position. It will then change for one to the other in the time frame specified and the animation will ease in and then ease out.

The next part of the code configures the checkbox input.

.tg{
opacity: 0;
width: 100%;
height: 100%;
cursor: pointer;
}

We want the checkbox to be invisible but still be active. This we do by changing the opacity of the checkbox to 0. This allows it to still be clicked on and off but not seen. The size is set to be 100% of it’s parent (the container) and we want the cursor to become a pointer when the user moves over the checkbox.

The last part of the code is to configure what happens when the checkbox is checked.

When the checkbox is checked we simply set the left position of the label to 50px, which in turn will cause the transition to happen. The background colour changes to green (so our button turns green) and the border on the button turns a deeper green.

Following on from the Pure CSS tabs post, it seemed like a reasonable option to post code for a more traditional CSS/JavaScript type tabbed dialog. The code assumes some level of understanding with CSS/HTML/JavaScript.

Here we are positioning the dialog relatively to allow us to place it in the middle of the screen. We also set the width and height which can then be used in our positioning calculations for left and bottom. We want it half way across the screen minus half the width of the dialog and half way down the screen minus half the height of the dialog. We set an overall background colour and padding of 20 pixels between the edge of the dialog and the child elements. Set a coloured border and align all the text within this parent element to the left. Next we add an optional line. This simply draws a cross in the top right corner of the dialog which you can put your own code in to act when it’s clicked.

<span class="close" onclick='YourCodeHere;'>&times;</span>

You may want to use this dialog whereby a user clicks a button to show it, in which case you would put code behind the “X” to close (hide) the dialog when clicked. If you don’t want the “X” on the dialog, just delete this line from the full code. Now let’s add the buttons which will become our tabs:

You notice the onclick event has been specified to call a function called “showText” passing the tab number to that function. This will allow us to show the correct tab panel for that button (tab) at the correct time. Now to style the buttons to look more like tabs:

This is simply a case of adding a border to the top and sides, with rounded corners, and specifying the height and width of our tabs. We also want the curser to change to a pointer when hovering over the tabs (buttons).

.close:hover{
cursor: pointer;
}

In chrome, when the focus is set to one of our tabs, it will draw a unwanted rectangle on the tab. We can, however, remove this using style.

.btab:focus{
outline: none;
}

With that taken care of we can now add our code for the actual tab content.

A simple div tag for the content panel, which in our case is some “lorem ipsum”. This code we will replicate four times, one for each of our four tabs, with CSS taking care of the rest of our requirements.

Each of the tab content panels will be hidden and stacked on top of each other. We will use JavaScript later to detect the click of a tab and show the appropriate tab content. We set the width and height of the panel with some padding around the text that appears on it. Specify the font we want used, its size and that text is to be justified within the tab panel. We also want a little padding between paragraphs on the tab, rather than having them following straight on without a gap. This we do here by targeting the “p” element within the “.tab” parent:

.tab p{
padding: 10px;
}

We also want to specify a background and foreground colour for each tab, with a matching coloured tab panel.

.tab0, .btab0{
background-color: #ffffff;
color: black;
}

Here you can see we are declaring colours for two classes at once. The tab button and the tab panel. All that is to do now is add some JavaScript to make it all work.

First we assign all the elements with a class of “tab” to an array called tab. Then we cycle through the array, setting the display of the tab panel to “none” unless it is the panel that was clicked, where we set it to display “block”.

Last, but not least, remember the optional line that draws the “X” in the right hand corner of our dialog. We need some style for that also. If you omit the line this can also be omitted:

Once again we want a pointer to show when the cursor hovers over the “X”. We also want to draw the “X” in the right corner of the dialog. Normal static flow will not allow us to do this so we have to “float” right in order to make this happen. Lastly, we add some font styling to finish it off.

As a side note, I quite like the gap between tabs but for those of you who want to remove it, this can be done by clearing the floating element by adding clear:both; to the .tab style definition and floating the buttons left by adding float:left; to the .btab style definition.