Rob Doyle Creative

How to Alternate Multiple Divs Using the jQuery Hide and Show Methods

by Leave a Comment

Have you ever wondered how to alternate multiple divs using the jQuery hide and show methods?. This can often come in useful when different links need to have a hover state that will show different content within the same container. A relevant example would be a home page that shows child page excerpts when you hover over parent headings.

In this post, we demonstrate how to get this working by creating three heading divs that when hovered over reveal and hide each headings child pages within the one container. To enable this to work, the JavaScript library, jQuery will need to be added to the mix.

Images Courtesy of https://placeimg.com/

HTML

The markup below shows the basic structure of this demonstration. To make things easier Bootstrap 4 is being used to help with the layout and create four columns.

 <!-- Child hover pages -->
    <section id="child-pages-section">
        <div class="container">
            <div class="row child-pages-wrapper">
                    <div class="col">
                        <div class="parent-pages">
                            <h2 class="parent active-parent hoverReveal1">HEADING ONE</h2>
                            <h2 class="parent hoverReveal2">HEADING TWO</h2>
                            <h2 class="parent hoverReveal3">HEADING THREE</h2>
                        </div>
                    </div>
                
                <!-- Wrapper 1 -->
                <div class="wrapper1 col-md-9 active-hoverReveal py-4">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="card">
                                <img class="card-img-top img-fluid" src="https://placeimg.com/205/101/animals" style="width:100%">
                                <div class="card-body p-0">
                                    <h6 class="card-title pt-1">lorem Ipsum 1</h6>
                                    <p class="card-text pb-1">Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod</p>
                                </div>
                            </div>
                        </div>
                    
                        <div class="col-md-4">
                            <div class="card">
                                <img class="card-img-top img-fluid" src="https://placeimg.com/205/101/arch" style="width:100%">
                                <div class="card-body p-0">
                                    <h6 class="card-title pt-1">lorem Ipsum 2</h6>
                                    <p class="card-text pb-1">Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel</p>
                                </div>
                            </div>
                        </div>
            
                        <div class="col-md-4 pr-4">
                            <div class="card">
                                <img class="card-img-top img-fluid" src="https://placeimg.com/205/101/nature" style="width:100%">
                                <div class="card-body p-0">
                                    <h6 class="card-title pt-1">lorem Ipsum 3</h6>
                                    <p class="card-text pb-1">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod </p>
                                </div>
                            </div>
                        </div>
                    </div>   <!-- end row-->
                </div>

                <!-- Wrapper 2 -->
                <div class="wrapper2 col-md-9 hidden-hoverReveal py-4">
                        <div class="row">
                            <div class="col-md-4">
                                <div class="card">
                                    <img class="card-img-top img-fluid" src="https://placeimg.com/205/101/people" style="width:100%">
                                    <div class="card-body p-0">
                                        <h6 class="card-title pt-1">lorem Ipsum 4</h6>
                                        <p class="card-text pb-1">Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore</p>
                                    </div>
                                </div>
                            </div>
                        
                            <div class="col-md-4">
                                <div class="card">
                                    <img class="card-img-top img-fluid" src="https://placeimg.com/205/101/tech" style="width:100%">
                                    <div class="card-body p-0">
                                        <h6 class="card-title pt-1">lorem Ipsum 5</h6>
                                        <p class="card-text pb-1">Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod </p>
                                    </div>
                                </div>
                            </div>
                
                            <div class="col-md-4 pr-4">
                                <div class="card">
                                    <img class="card-img-top img-fluid" src="https://placeimg.com/205/101/tech/sepia" style="width:100%">
                                    <div class="card-body p-0">
                                        <h6 class="card-title pt-1">lorem Ipsum 6</h6>
                                        <p class="card-text pb-1">Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis </p>
                                    </div>
                                </div>
                            </div>
                        </div>   <!-- end row-->
                    </div>
              
                    <!-- Wrapper 3 -->
                    <div class="wrapper3 col-md-9 hidden-hoverReveal py-4">
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="card">
                                        <img class="card-img-top img-fluid" src="https://placeimg.com/205/101/arch" style="width:100%">
                                        <div class="card-body p-0">
                                            <h6 class="card-title pt-1">lorem Ipsum 7</h6>
                                            <p class="card-text pb-1">Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p>
                                        </div>
                                    </div>
                                </div>
                            
                                <div class="col-md-4">
                                    <div class="card">
                                        <img class="card-img-top img-fluid" src="https://placeimg.com/205/101/animals" style="width:100%">
                                        <div class="card-body p-0">
                                            <h6 class="card-title pt-1">lorem Ipsum 8</h6>
                                            <p class="card-text pb-1">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore</p>
                                        </div>
                                    </div>
                                </div>
                    
                                <div class="col-md-4 pr-4">
                                    <div class="card">
                                        <img class="card-img-top img-fluid" src="https://placeimg.com/205/101/people/sepia" style="width:100%">
                                        <div class="card-body p-0">
                                            <h6 class="card-title pt-1">lorem Ipsum 9</h6>
                                            <p class="card-text pb-1">Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim</p>
                                        </div>
                                    </div>
                                </div>
                            </div>   <!-- end row-->
                   </div>

            </div>
         </div> 
    </section>

CSS

Here is basic CSS styling that is targeting the headings and Bootstrap 4 cards used to layout the content.

#child-pages-section .container {
    border: 2px solid lightgrey;
    margin: 20px auto;
    height: 100%;  
}

.hidden-hoverReveal {
    display: none;
}

.active-hoverReveal{
    display: block;
}


#child-pages-section .col {
    background-color: lightgrey;
    color: #993408; 
    padding: 20px 0 0 0px; 
    margin-right: 12px;
    display: inline-block;
}


.parent-pages h2 {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 1rem !important;
    margin: 0 0 30px 0px;
    padding-left: 10px;
}

.card {
    border: none;
}

.card h6 {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 15px;
    color: #000;
    font-weight: 700;
}

.card p {
    font-family: Tahoma, Geneva, Verdana, sans-serif;
    font-size: 13px;
    color: #333;
    font-weight: 500;
}


.active-parent {
    background: url(https://robdoylecreative.com/wp-content/uploads/2020/02/brown-notch.png) no-repeat right;
    background-size: 4% 100%; /*width and height of the notch image*/
    position: relative; 
    padding-left: 10px;
    color: #fff !important;
    z-index: 1; 
    right: 0;
}

.active-parent::before {
    content: "";
    background-color: #AB5511;
    background-position: left;
    position: absolute;
    display: inline-block;
    left: 0;
    z-index: -1;
    font-size: 1rem; 
    width: 96%; /*width of the css background*/
    height: 100%;
}

Once all the markup and CSS are in place the webpage should look like the image below where content for all divs are showing at once.

show all divs
Images Courtesy of https://placeimg.com/

In order for wrapper one to show on page load for heading one and nothing else, some custom classes need to be added to the HTML for wrappers 1, 2 and 3 that link to the CSS.

<div class="wrapper1 col-md-9 active-hoverReveal py-4">
<div class="wrapper2 col-md-9 hidden-hoverReveal py-4">
<div class="wrapper3 col-md-9 hidden-hoverReveal py-4">
.hidden-hoverReveal {
    display: none;
}

.active-hoverReveal{
    display: block;
}

What this is doing is only showing wrapper one and hiding wrappers two and three on page load. This is done by setting a default active class which in this case is wrapper one. Display: Block will allow is to show. The other wrappers are set to Display: None which will hide them.

jQuery will take over from here by dynamically alternating the content on hover using the hide() and show() methods.

jQuery

Looking back at the HTML headings, classes were added to prepare for the jQuery to work. They were hoverReveal1, hoverReveal2, and hoverReveal3 

<div class="parent-pages">
     <h2 class="parent active-parent hoverReveal1">HEADING ONE</h2>
     <h2 class="parent hoverReveal2">HEADING TWO</h2>
     <h2 class="parent hoverReveal3">HEADING THREE</h2>
</div>

The jQuery is hooking onto these classes to show and hide the various wrappers depending on what heading is being hovered on. This example is for wrapper one. It targets the .hoverReveal1 class that then runs the function to show wrapper one but hide wrappers two and three. This code is then replicated two more times to target the other wrappers.

//   Hover reveal for wrapper 1
    $('.hoverReveal1').hover(
      function() {
        $('.wrapper2, .wrapper3').hide();
        $('.wrapper1').show();
      }
    ),

Full jQuery Code

The .parent class is targeted and a function created to allow the heading to keep showing each corresponding wrapper on hover until another hovered heading. This allows for a wrapper to always be showing within the container instead of empty space causing the container to collapse. This is achieved by adding and removing an active class on the headings with .addClass() and .removeClass() methods.

<script>
  // Delayed hover on headings one, two and three. All three wrappers are nested within to alternate in line with the delayed hovers
  $( '.parent' ).hover(
    function() {
      $('.active-parent').removeClass('active-parent');
      $(this).addClass('active-parent');
    },

    //   Hover reveal for wrapper 1
    $('.hoverReveal1').hover(
      function() {
        $('.wrapper2, .wrapper3').hide();
        $('.wrapper1').show();
      }
    ),

    //   Hover reveal for wrapper 2
    $('.hoverReveal2').hover(
      function() {
        $('.wrapper1, .wrapper3').hide();
        $('.wrapper2').show();
      }
    ),

    //   Hover reveal for wrapper 3
    $('.hoverReveal3').hover(
      function() {
        $('.wrapper1, .wrapper2').hide();
        $('.wrapper3').show();
      }
    )
  );
</script>

Working Example

Here is a fully working Codepen example showing everything in action

See the Pen jQuery Hide() and Show() by Rob Doyle (@RobertMDoyle) on CodePen.

Conclusion

In this post, we learned how to alternate multiple divs using the jQuery hide and show methods. Some extra CSS classes were also used to reach the desired effect. As you can see this technique can come in very useful in making content more dynamic on a web page as well as operating within a condensed area of space that may come in useful especially when keeping content above the fold.

How to Join a Background Image and Background Color Together Using CSS

by Leave a Comment

Learning how to join a background image and background color together using CSS is a valuable skill. Have you ever been given the task of converting a PSD file into HTML and found the image assets did not always fit your needs?. This will often require the intervention of custom CSS to solve the problem.

The example below shows this in action. The background image provided was a brown notch triangle, but the requirements were that this needs to stretch along with the page on a hover state to produce a menu arrow.

This required the need for adding custom CSS to extend the triangle to produce the desired effect without using a second image. The background color has been given a different shade to highlight the join.

css background and image join
Background Color Indicated by Lighter Shade

Container Markup and CSS

The code below sets up the grey container area as well as the three H2 headings and font settings

<div class="container">
      <div class="headings">
           <h2 class="heading-1">HEADING ONE</h2>
           <h2 class="heading-2">HEADING TWO</h2>
           <h2 class="heading-3">HEADING THREE</h2>
      </div>
 </div>
.container {
    background-color: lightgrey;
    border: 1px solid darkgrey;
    padding: 20px 0; 
    margin: 0 auto;
    width: 50%;
}

.headings h2 {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 1.1rem !important;
    color: #993408;
    margin: 30px 0px;
    padding-left: 10px;
}

CSS Hover Selector

The CSS hover selector is used to select elements when hovered over by a mouse. The code below allows the triangle notch PNG to display to the right-hand side of the container and H2 heading selected.

By giving this image width of 4% and height of 100% the image will adapt to match the 96% width background and maintain ratio responsively.

.heading-1:hover, .heading-2:hover, .heading-3:hover {
    background: url(https://robdoylecreative.com/wp-content/uploads/2020/02/brown-notch.png) no-repeat right;
    background-size: 4% 100%; /*width and height of the notch image*/
    position: relative; 
    padding-left: 10px;
    color: #fff !important;
    z-index: 1; 
    right: 0;
}

Using a ::before Pseudo-Element

In order for the CSS color background to appear and join the background image, a special Pseudo-Element needs to be used called ::before. This allows content to be applied before a selected element which in this case is the triangle image.

The CSS below shows this in action. To find the color of an image, all that is needed is to use a service like https://imagecolorpicker.com/ . In this case the hex value of the image color is #E97820.

By giving this a width of 96% to add to the 4% image width the background color will also show on hover but before the image.

Z-index will need to be adjusted to allow the background color to sit behind the heading text, which in this case is z-index: -1.

.heading-1:hover::before, .heading-2:hover::before, .heading-3:hover::before {
    content: "";
    background-color: #e97820;
    background-position: left;
    position: absolute;
    left: 0;
    z-index: -1;
    font-size: 1rem; 
    width: 96%; /*width of the css background*/
    height: 100%;
}

Working Example

See the Pen Background image and color join with CSS by Rob Doyle (@RobertMDoyle) on CodePen.

Conclusion

As demonstrated above, merging background images and colors together is a useful skill that can be used in many scenarios such as putting icons before elements on a web page. Menus are also a place where this can be implemented easily.

There is also ::after Pseudo-Element which as you may have guessed targets after a selected element. These methods are also responsive when the screen is re-sized.

Learn to Target the Upwork RSS Feed and Get Automatic Job Notifications

by Leave a Comment

Are you a freelancer on Upwork and get frustrated when you see a job that you feel qualified to do but then realize that 30 other people have already submitted proposals that kick you out of the running?.

The main reason why this happens is that you have spotted the job too late. The key to Upwork is getting your proposal in as soon as possible after it goes live. The client will most probably look at the first dozen proposals then hire one of those freelancers in order to get things moving.

If you only check Upwork two times a day, then you are missing out on some good opportunities. The trick is to get notified quickly and maximize your chance of landing the job.

In this post, we are going to look at a few ways of delivering notifications using the Upwork RSS feed. Two using an RSS feed reader and the other IFTTT.

Getting a Targeted RSS Feed

In order to make this work you first need a targeted RSS feed based on a particular search term. That may be “WordPress” or “CSS” or whatever your specialty is as a freelancer. To do this head over to Upwork and search for your keywords.

upwork rss feed
Targeting the Upwork RSS Feed with a Specific Search Term

Once you see a list of relevant results, look to the left of the page on desktop and you will see a small RSS icon. Click on this and the feed will be displayed. Copy the URL of this feed. If “CSS HTML” was entered then only CSS and HTML jobs will be displayed.

Feedly RSS Reader

Feedly is a news aggregator that runs in different web browsers and mobile devices. If you are working on your desktop computer then the Feedly Notifier Google chrome extension is a good choice. You can also get apps for Android and iOS that do exactly the same thing.

feedly chrome extension
Feedly Notifier Chrome Extension

It is very beneficial to get notifications on a mobile phone as it goes where you go. This is a screen for the Feedly Android app:

feedly android app
Feedly Android Mobile App

To get things working paste the RSS feed URL from Upwork into the application. You may want to give your feeds specific names to identify them with your query. Once this is done you will see a list of the most recent jobs coming from Upwork. The only caveat to the free version of Feedly is that the feeds are updated periodically every couple of hours and not as every job is released. Never-the-less this keeps running 24/7 and keeps you posted which will be enough for many people. The paid version updates more often, as do all premium RSS readers which then brings this method up another level.

add rss feed in feedly web app
Adding Upwork RSS feed to Feedly
feedly desktop
Feedly Desktop App

Inoreader

Inoreader is very similar to Feedly and also has chrome and mobile apps. The notable difference the free version of Inoreader has over Feedly is that it fetches feeds more often. Usually around every 30 mins. It is very easy to add feeds with the use of the chrome Inoreader companion app.

inoreader
Inoreader Companion Chrome Extension

Once you click on one of the job links, such as “Upwork CSS Worldwide” it will take you to the Inoreader desktop app where you can view the jobs more clearly.

inoreader desktop app
Inoreader Desktop App

When using the Inoreader mobile app, the feed outputs as a simple text list for easy scanning, which then links to Upwork to view the original job posting.

inoreader mobile
Inoreader Android Mobile App

IFTTT

IFTTT stands for “If This Then That”. It uses applets to automate tasks with what they call “Recipes”. Recipes run many tasks that could be looked upon as repetitive for a human to do manually.

For this task, we are going to use an IFTTT recipe called “RSS Feed to Email“. This is extremely easy to set up. All that is needed is to set up a free IFTTT account and click connect. Paste in the Upwork RSS feed URL when asked and any new jobs that go live on Upwork will get emailed to you. This may be a more preferable notification method depending on the individual.

ifttt
Connect Recipe to Your Account
ifttt connect
Confirm Applet Connection
ifttt rss form
Enter Upwork RSS Feed and Any Customisations

IFTTT is also fast as like Inoreader, as it checks, feeds every 30 minutes and then sends out an email of any jobs that have gone live during that interval. You can change the titles of your emails to suit your needs from within the IFTTT app dashboard.

Conclusion

In this post, we learned how to use the Upwork RSS feed to get real-time job notifications. The first methods looked at was the Feedly RSS news reader and Inoreader. There are many other RSS readers out there. another one to mention is RSS Feed Reader which is also very good. These readers have great companion apps and are well supported. Because of the faster RSS fetch speed, Inoreader is the winner here.

We then looked at IFTTT which uses recipes to run tasks. IFTTT has been around for a number of years now and can do many different things. It links up well with Google applications like calendar and docs. For this task, a simple applet was being run to send new jobs added to the Upwork feed to email. This is very useful as email is often the thing people check most throughout the day.

Whichever method you choose, you will now be in a better position when it comes to getting your proposal in earlier rather than later.

Learn How to Create a Vertical Slick Slider with Custom Dots and Arrows

by Leave a Comment

In this post, we are going to learn how to create a vertical slick slider with custom dots and arrows using your own icons to replace the default buttons provided by slick.

vertical slick slider example
Click Image to View Fully Working Example

Before we start the slider, files need to be installed into your working project. These can be downloaded from the official site Here.

This file structure shows the folders that need to be in place. This includes the newly downloaded slick folder as well as folders to hold your custom CSS and images. The extra folders and files here are for bootstrap CSS and JavaScript which is an optional step. The main working files for this project will be index.html and css/custom.css.

slick-slider-directory
File Directory for Project

The first step is to point to the slick and custom CSS files by adding style sheets to the <head> section of the index.html file. This is followed up by creating the markup for the slider structure and content. In this example, three slides are being created with a div for each image and a nested div for the content.

HTML

<head>
   <!-- Slick Slider -->
    <link rel="stylesheet" type="text/css" href="slick/slick.css"/>

    <!-- Custom CSS -->
    <link rel="stylesheet" href="css/custom.css">
</head>
 <!-- Slider Section -->
    <section id="slider" class="container-fluid">
        <div class="container slick-slider">
           <div class="slide">
                <img src="images/slider-image1.jpg">
                <div class="slide-content">
                    <h4>Slide Title 1</h4>
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore,Lorem ipsum dolor sit amet, consetetur sadipscing elitr Lorem ipsum dolor sit amet, consetetur sadipscing elitr Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
                </div>
            </div>
            <div class="slide">
                <img src="images/slider-image2.jpg">
                <div class="slide-content">
                    <h4>Slide Title 2</h4>
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et doloreLorem ipsum dolor sit amet, consetetur sadipscing elitr Lorem ipsum dolor sit amet, consetetur sadipscing elitr Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
                </div>
            </div>
            <div class="slide">
                <img src="images/slider-image3.jpg">
                <div class="slide-content">
                    <h4>Slide Title 3</h4>
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore Lorem ipsum dolor sit amet, consetetur sadipscing elitr Lorem ipsum dolor sit amet, consetetur sadipscing elitr Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
                </div>
            </div>
        </div>
    </section>

The JavaScript section mainly consists of one function with various values that can be added to enhance the functionality of the slider. By adding vertical: true this makes the slides scroll vertically. The arrows and dots are also enabled by changing the values to true.

To customise the arrows, a div needs to be added as a value to prevArrow & nextArrow. This is to allow a class to be declared in order to connect to the custom CSS.

In order for the dots to show as an active state for each slide, a customPaging function is added to point to the active and non-active dot images located in the images folder.

JavaScript

<!-- Slick Slider Script -->
<script type="text/javascript" src="slick/slick.min.js"></script>

<script type="text/javascript">
        $(document).ready(function(){
            $('.slick-slider').slick({
                vertical: true,
                slidesToShow: 1,
                slidesToScroll: 1,
                autoplay: true,
                arrows: true,
                prevArrow: '<div class="slick-prev"></div>',
                nextArrow: '<div class="slick-next"></div>',
                dots: true,
                customPaging : function(slider, i) {
                return '<a href="#"><img src="images/slide-dot.png" /><img src="images/slide-dot-active.png" /></a>';
                },
            });
        });
</script>

The CSS is a little more involved but fairly easy to follow. The slider has a light grey border and is full width with a position of relative so that the content can be absolute positioned with opacity on the right-hand side. The .slick-dots class mainly consists of the styles for positioning the dots on the right-hand side of the slider using Flexbox CSS. The CSS :nth-child() Selector works in conjunction with the JavaScript customPaging to allow the active red dot to show with the current slide.

With the .slick-prev & .slick-next classes declared in the JavaScript, the CSS can hook on to display the arrows and position them. The background-size needs to be set to “contain” and a position of absolute. The CSS :hover Selector is used allowing the arrow to change to the colour red whenever a mouse hovers over it.

CSS

/* Slider Section */

.slick-slider {
    border: 10px solid lightgrey;
    width: 100%;
    padding: 0;
    position: relative;
    top: 5%; 
        
}

#slider {
    background-color: grey;
    height: 100%;
    padding: 2% 10%;
    
}

#slider img {
    width: 100%;
    margin: 0;
    padding: 0;
}

.slide {
    position: relative;
    border: none;
}

.slide-content {
    position: absolute;
    top: 0px;
    right: 0%;
    height: 100%;
    width: 35%;
    background-color: #000;
    opacity: 0.8;
    color: #fff;
    text-align: center; 
    padding: 25px 70px 25px 25px;  
    text-align: left;  
}


/* Slick Dots */

.slick-dots {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    list-style: none;
    text-align: center;
    margin: 0px 3px;
    padding: 11% 1% 11% 1.5%;
    border-left: 3px solid lightgrey;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

}


.slick-dots li img:nth-child(1) {
    display: block;  
}  

.slick-dots li img:nth-child(2) {
    display: none;   
}

.slick-dots li.slick-active img:nth-child(1) {
    display: none;   
}

.slick-dots li.slick-active img:nth-child(2) {
    display: block;  
}

/* Slick Arrows */

.slick-prev, .slick-next {
    height: 20px;
    width: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
   
}

.slick-prev {
    background-image: url('/images/slider-up-arrow.png');

    /* place button top right */
    top: 2%;
    right: 1%;
    z-index: 10;
}


.slick-next {
    background-image: url('/images/slider-down-arrow.png');

    /* place button bottom right */
    right: 1%;
    bottom: 2%;
    z-index: 20;
}

.slick-prev:hover {
    background-image: url('/images/slider-up-arrow-hover.png');

    /* place button top right */
    top: 2%;
    right: 1%;
    z-index: 10;
}

.slick-next:hover {
    background-image: url('/images/slider-down-arrow-hover.png');

    /* place button bottom right */
    right: 1%;
    bottom: 2%;
    z-index: 20;
}

Conclusion

As you can see, learning how to create a vertical slick slider with custom dots and arrows is not a difficult task. Most of the work is done in the CSS, but once you understand the process, versatile and custom sliders can be created quickly.

What is a JavaScript Multidimensional Array?

by Leave a Comment

JavaScript Multidimensional arrays are not supported natively with a specific syntax but they can still be created by placing arrays within arrays. This means that the elements within an array consist of more arrays.

The code example below shows how a JavaScript multidimensional array can be constructed to hold questions and answers for a quiz.

Working inwards, the outer array holds all the questions and can have more than one if comma separated. The next array holds all the elements for one specific question. These become their own comma-separated arrays. This includes the question array, an array with all the answer choices, a correct answer array and finally an array to state how many answers were considered correct. Remember arrays are zero-based.

JavaScript Multidimensional Array Example 

const questions = 

[
    	[ [ "What does alt text stand for?" ],    //Enter Your Question 
    
    	[
    
    	"Alter ego text",    //Multiple Choice Answer (A)
    
    	"Alternate text",   //Multiple Choice Answer (B)
    
    	"Alternator text",    //Multiple Choice Answer (C)
    
    	"Alternating text"    //Multiple Choice Answer (D)
    
    	], 
    
    	["B"],               //Correct Answers
    
    	[1] ],               //How Many Correct Answers for This Question
];

As an example, to access the correct answer manually and print it to the console, all that would need to write is:

console.log(questions[0][1][1]);

"Alternate text",   //Multiple Choice Answer (B)

This method of holding data can be coded up to create a very advanced quiz application. The purpose of this post is just to show you what a JavaScript multidimensional array is and how it is constructed.

Conclusion

JavaScript Multidimensional arrays can be very useful, especially in a scenario like a quiz as so much information can be very neatly held together whilst producing short, clean and concise code that is easy to access.

How to Make an Animation Using CSS Only – No JavaScript!

by Leave a Comment

Do you know how to make an animation using CSS only and no JavaScript?. Today we are going to dive into a fun little CSS3 Animation demo that will show you exactly how easy it is to do.

Sometimes when you visit websites you may see some cool animations to help get a message across. This could be for branding, enhancing the website or just for fun. This example is just a fun way to show you how easy it is to implement without JavaScript.

CSS3 has a great feature in it called Keyframes which specifies different values along the different stages of an animation cycle. These are initiated using the @keyframes rule.

Below we are creating an empty div with a class of “box”. This will be targeted within the CSS to show a 100px logo box within the browser.

HTML

<div class="box"></div>

Here is the @Keyframes rule that contains all the action points between 0% and 100%. In this example, the action points are 25%, 50%, 75%, and 100%. The comments in the code explain in detail what each action point is doing, but this is allowing the box to move to all four corners of its container anti-clockwise starting top left and finishing top left.

CSS3 @Keyframes

@keyframes circleThePage {
  0% {    /* top left starting point */
    left: 0;  
    top: 0;
  }
  
  25% {  /* bottom left 2nd point */
    left: 0;
    top: calc(100% - 100px); /* 100% from top minus height of box */
  }
  
  50% {  /* bottom right 3rd point */
    top: calc(100% - 100px); /* 100% from top minus height of box */
    left: calc(100% - 100px); /* 100% from left minus width of box */
  }
  
  75% {  /* top right 4th point */
    left: calc(100% - 100px); /* 100% from left minus width of box */
    top: 0;
  }
  
  100% { /* back to top left starting point */
    left: 0;
    top: 0;
  } 
}

This rule is targeting the “box” class and giving it a size, background image and declaring the @Keyframes rule created called “circleThePage” within “animation-name”. Other CSS properties are used to help control the animation such as duration, fill-mode, direction, iteration-count, and timing.

CSS

.box {
  position: fixed;
  left: 0;
  top: 0;
  width: 100px;
  height: 100px;
  background-image: url('https://robdoylecreative.com/wp-content/uploads/2019/12/header-logo.png');
  animation-name: circleThePage;
  animation-duration: 8s;
  animation-fill-mode: forwards;
  animation-direction: normal;
  animation-iteration-count: infinite;
  animation-timing-function: linear; /* or ease etc.. */
}

The CodePen below shows the animation in action. These settings can be changed to allow all sorts of cool effects and customization.

Animation in Action

See the Pen CSS3 Animation Mini Project – Skim the Edge by Rob Doyle (@RobertMDoyle) on CodePen.

Conclusion

Knowing how to make an animation using CSS only is a useful skill. Normally you would expect JavaScript to be hiding somewhere within this sort of code. Not in this case. Its just CSS3 and one empty div.

How to Add a Transparent Text Box Over an Image Using CSS

by Leave a Comment

When you visit some websites, have you ever wondered how text can be transparent over an image or background, or there is a transparent box with text?. Well, this is not as difficult to do as it seems, we just need to apply a few lines of HTML and CSS. Read on as I show you how it’s done.

In this example, I am going to use an image as a background and show you how to add a transparent text box over an image using CSS.

First, we need some HTML markup. Here we are creating a wrapper div and within it is the background image and another div for the text box. Nested within the text box is yet another div containing the text content. In this case an H2 heading and a paragraph of text.

HTML

<html>
  <div id="wrapper">
    <img src="images/nature.png">
    <div id="textbox">
      <div id="content">
        <h2>Let's Explore the Great Outdoors</h2>
        <p>
          Duis aute irure dolor in reprehenderit in voluptate velit 
          esse cillum dolore eu fugiat nulla pariatur.
        </p>
      </div>
    </div>
  </div>
</html>

Next, we need to add the CSS for the wrapper, text box and content. The wrapper needs to be given a position of relative so that the text box can have a position of absolute. The text box can then be moved using ‘top’ and ‘left’ CSS properties. The box is then given a grey background with an opacity setting. In this case 0.8. The text is centered using ‘text-align: center’

As the text content is nested within the text box, all that is added with CSS in this scenario is padding. Here is the CSS:

CSS

#wrapper {
  width: 640px;
  margin: 0 auto;
  position: relative;
}

#textbox {
  margin-top:50px;
  background-color: lightgrey;
  position: absolute;
  width: 300px;
  height: 400px;
  opacity: 0.8;
  top: -12px;
  left: 35px;
  text-align: center;
  border: 2px solid silver;
}

#content {
  padding: 100px 30px;
}

RESULT

Conclusion

As you can see learning how to add a transparent text box over an image using CSS is very easy to understand with minimal code and no JavaScript. Doing this on your websites can really make your message stand out. Try it for yourself and see.

Should Age be a problem? The Truth about Learning to Code Later in Life

by Leave a Comment

So I’ve been looking at a lot of blog, forum and social media posts lately and seeing many people talking about learning to code in their 30s, 40s and 50s and beyond. These people are looking for support but often are met with negative comments saying that they shouldn’t bother or they are too old.  Now it would be silly and nieve to think that agism does not exist in all different kinds of industries because it does. However, it doesn’t have to be that way for you. You just need to get the message across that you can do the job or service and that you can provide plenty of value in the process.

A Social Stigma

Age can be a social stigma but a lot of good employers are really only interested in who can do the job as opposed to whether you fit into a certain social category. There are company cultures which might frighten off older coders from applying for jobs due to the fact that they may be working with younger developers who may not have the same interests as you. This may be an issue but it really doesn’t matter because at the end of the day it should be about what you can do and not how old you look. Commitment should go without saying.

A View from My Perspective

I am 50 this year and I don’t have a background in computing or coding I used to work in the printing industry for 25 years and then I decided I wanted out to go to university to do a business computing degree. After 3 years I came out with the first degree with honours and realised that yes I can learn to code and work alongside students half my age who did not judge me for my age. If anything there was mutual respect and we all became friends and helped each other out. I found that University was a very rewarding experience which I would recommend to anybody because of the confidence you can build as well as the soft skills that you can learn from such an experience.

After leaving University I decided to become more specialised in the skills that would be required to be a freelance front-end web developer and focus my attention more towards WordPress JavaScript HTML CSS and frameworks. I have now launched myself as a freelance front-end web developer specialising in WordPress theme development and deploying websites for clients. This has all been achieved through focus and determination, self-drive and belief that you can achieve what you want by taking no notice of any of the trolls out there who would say otherwise.

Believe in Yourself

If you believe that you can do the job then don’t let anybody stop you from living your dreams. If you are an older developer don’t worry about seeing yourself as the stereotypical developer typically out there as you can learn to code at any age. Sure certain opportunities might not arise for you due to ageism, and this is just part of the game. Just give these clients and employers a wide birth as they are not worth your time or working for anyway.

For me, freelancing is proving to be the best fit. This gives me the freedom to work the hours that I choose that fits in with my lifestyle. The year 2020 will be an exciting year for me as I grow as a freelance web developer. I will be continuing to develop my skills because one thing is for sure if you can accept that you’ll never be an expert but always a student to web development and that technologies and languages are always changing you can remain a humble developer who knows that this will always be a work in progress and that every day is a school day (no room to be big-headed here).

A Recommendation

Development is an ocean of information that can easily overwhelm anybody learning how to do this whatever age you are so it is my recommendation that you specialise and focus on a set of skills and in doing so so you will gain greater confidence in taking the leap to do the professional service that you know you can offer.  For me, that is front-end development, but more specifically WordPress as that fits in very well as a freelancer.

If anybody is reading this is worried about learning to code later in life, then stop right there because there is nothing you can do about that. There is no elixir of life or time machines, so stop worrying about it. Just look in the mirror and say “I can do this”, I can provide value. To be older can offer extra value and soft skills that a younger person can’t offer. Feel the fear but do it anyway, you may just surprise yourself.

Conclusion

If you are an older person learning how to code and you have any opinions or experiences with this subject then please leave a comment below and let’s discuss it because I feel what I’ve overcome the major obstacles that were holding me back although I must say I’ve had my ups and downs along the way. Nothing is easy but it is all very doable.

What is the z-index property in CSS and How is it Controlled?

by Leave a Comment

The z-index is a stacking order property for an element. What does this mean exactly?. Well, think of it as something similar to using layers in Photoshop. The stacking order controls what element is positioned first, last or in between.

With z-index, you could define the order of images, or place text over or an image or even hide it behind an image if the situation requires it. The element with the higher stack order will always be in front of the element with a lower stack order. This is controlled with the property values of:

  • auto – equal stack order to its parents
  • number – negative numbers are also allowed
  • initial – sets the property to default
  • inherit – sets the property to parent

The z-index will only become active on positioned elements such as relative, absolute and fixed. For the example, below we are only using numbers to control z-index with relative and absolute positioning.

To demonstrate z-index this example shows:

  • A clear background box with a grey text and a grey line border
  • A pseudo-element to place a black background before (behind) the text, but still showing some of the clear background.
  • Five colored boxes of different z-index levels including negative numbers to move behind elements.
  • Box 5 is a nested child of box 4
<!-- HTML -->

<html>  
  <div id="backgroundBox">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet., no sea takimata sanctus est Lorem ipsum dolor sit amet., no sea takimata sanctus est Lorem ipsum dolor sit, no sea takimata sanctus 
  </div>
  <div id="box1">Red Box 1</div>
  
  <div id="box2">Blue Box 2</div>
  
  <div id="box3">Green Box 3</div>

  <div id="box4"> <!-- parent/child scenario with box 4 and 5 -->
    Yellow Box 4 <!-- yellow box 4 text is a sibling of orange box 5 div -->
    <div id="box5">Orange Box 5</div> <!-- child of box 4 div -->
  </div> 
</html>   

/* CSS */

* {
  padding: 0;
  margin: 0;
}

#backgroundBox {
  width: 400px;
  height: 400px;
  color: grey;
  position: relative;
  border: 1px solid grey;
  margin: 2px
}

#backgroundBox:before {
  position: absolute;
  display: block;
  width: 95%;
  height: 95%;
  top: 0;
  left: 0;
  content: "";
  background: black;
  z-index: -2;
}

#box1 {
  height: 100px;
  width: 100px;
  background-color: red;
  text-align: center;
  vertical-align: middle;
  line-height: 100px; 
  display: inline-block;
  position: absolute;
  top:7px;
  left: 10px;
  z-index: -1;
}

#box2 {
  height: 100px;
  width: 100px;
  background-color: blue;
  text-align: center;
  vertical-align: middle;
  line-height: 100px; 
  display: inline-block;
  position: absolute;
  top: 80px;
  left: 50px;
  z-index: 1;
}

#box3 {
  height: 100px;
  width: 100px;
  background-color: green;
  text-align: center;
  vertical-align: middle;
  line-height: 100px;  
  display: inline-block;
  position: absolute;
  top: 160px;
  left: 100px;
  z-index: 2; 
}

#box4 {
  height: 100px;
  width: 100px;
  background-color: yellow;
  text-align: center;
  vertical-align: middle;
  line-height: 100px;  
  display: inline-block;
  position: absolute;
  top:240px;
  left:150px;
  z-index: 3;
}

#box5 {
  height: 100px;
  width: 100px;
  background-color: orange;
  text-align: center;
  vertical-align: middle;
  line-height: 100px;  
  display: inline-block;
  position: absolute;
  top: 30px;
  left:53px;
  z-index: -1; 
}

As you can see from the code, the parent box is the clear background box. This is given no z-index but is given a position of relative. This, however, defaults to a z-index of 0. All elements within here will be given z-index and absolute positioning. On the face of it, this seems fairly straight forward, which it is mostly.

  • The black pseudo-element has been set at a z-index of -2 so that it sits behind the text and the red box.
  • The red box is set to -1 so that it sits behind the text but in front of the black background.
  • Boxes two, three and four go up the stacking order with z-indexes of 1, 2 and 3

There is a caveat worth mentioning with z-index and that is to do with the stacking context. This is where a new stacking order can be created outside of the original stacking order. This can get a little confusing and will definitely become clearer with experience, however, the orange box 5 shows a very basic example of this.

While box 4 is still in the original stacking order, box 5 is a nested child of box 4. Box 5 can never go behind its parent, but the parent’s text of ‘yellow box 4’ is in fact classed as a sibling to box 5 and this allows box 5 to sit under the parent’s text with a z-index of -1, but never behind the yellow box itself.

Conclusion

As you can see, z-index is a very useful feature of CSS. It allows you to be more versatile with your code and you will find yourself using it a lot as your CSS becomes more advanced. Beware of how it can get confusing with the stacking context, but this will definitely become more clear with experience.

I hope you enjoyed this simple example of z-index. Please feel free to leave any comments below.

What are HTML Semantic Elements?

by Leave a Comment

Have you noticed that since the introduction of HTML5 the use of the plain old div has become less common?. There was a time when a div was used for everything, however, these days it is far more important to give your tags specific meanings to describe what you are doing with your code.
Before you would probably code your header or nav bar using:

<div id="nav"> 
Or
<div id="header">

Now there are specific semantic tags in HTML5 that you can use to make your code a lot easier to read and organise. I am not saying to stop using divs because I still use them when there is no semantic value to the line of code I am writing. I have made the transition to using the main semantic tags available to HTML5. Here they are: 

<header>  - place your header code here
<nav> - for use with navigation menus
<section> - break up your page into sections such as 'about me' or 'contact'
<aside> - primarily used for sidebars
<main> - used to separate the main content of the page
<article> - Just as it describes, put this tag around your articles
<footer> - place all your footer code here

There are some other semantic tags that I use less. They include: 

<details> - additional details to view or hide
<summary> - Heading for <details> element
<figcaption> - caption for the <figure> element
<figure> - used for photos and images
<mark> - for highlighted text
<time> - for time and date

As you can see, these elements are very clear to understand and follow and make perfect sense to use when you think about it. Even though it is still easy to grab a generic div, take a moment to think whether it would be better to use an HTML5 semantic tag instead.

Web Developer Leicester

wordpress developer leicester

Categories

Recommended Products