How to Limit Text Length to X Lines Using CSS

In this tutorial, we are going to show you how you can limit text length to the number of lines you would like to use with CSS.

Is it possible to limit a text length to “X” amount of lines using CSS? The answer is yes.

There is a way, but it is webkit-only. However, when you combine this with line-height: X, and max-height: X*N, it will also work in other browsers, just without ellipses.

Let’s take the following HTML:-


<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam consectetur venenatis blandit. Praesent vehicula, libero non pretium vulputate, lacus arcu facilisis lectus, sed feugiat tellus nulla eu dolor. Nulla porta bibendum lectus quis euismod. Aliquam volutpat ultricies porttitor. Cras risus nisi, accumsan vel cursus ut, sollicitudin vitae dolor. Fusce scelerisque eleifend lectus in bibendum. Suspendisse lacinia egestas felis a volutpat.
</div>

If we want to limit this so it only shows the first two lines of text we can do so by using the following CSS:-


.text {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   line-height: 16px;     /* fallback */
   max-height: 32px;      /* fallback */
   -webkit-line-clamp: 2; /* number of lines to show */
   -webkit-box-orient: vertical;
}

And there you have it, the text will now only show 2 lines of text regardless of how many lines it contains.

Where is this useful? Well, we recently used this when we had 3 columns displaying news posts and the heights of the boxes were varying heights because of the length of the title. In fact, we actually use this same method on our blog page.

We hope this helps, happy coding everyone!

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

How to Display Related Posts in WordPress

In this tutorial, we are going to show you two ways to display related posts on your WordPress website.

If you know a bit about bounce rate, you are probably already showing related posts on your website. Essentially, the bounce rate is a metric that measures the percentage of people who land on your website and do completely nothing on the page they entered. So they don’t click on a menu item, a ‘read more’ link or any other internal links on the page. This can have an effect on things such as your AdSense earnings. By following this tutorial and adding Related Posts to your WordPress; you are killing three birds with one stone. You are decreasing your bounce rate, increasing your AdSense income, and lastly, you are increasing your page views. As always, we will show you two methods in which you can add related posts to your WordPress website.

How to Display Related Posts in WordPress without a Plugin

As always, we start with our preferred method of adding this without a plugin. In our example, we are going to display two related posts which link to the post. We are adding the featured image, the category, the date, the title and a read more button.

The code can simply be pasted into your single.php file in a position in which you want to display your related posts.


// Related Posts
$tags = wp_get_post_tags($post->ID);
if ($tags) {
	echo '<h3>Related Posts</h3>';
	$first_tag = $tags[0]->term_id;

	$args=array(
		'tag__in' => array($first_tag),
		'post__not_in' => array($post->ID),
		'posts_per_page' => 2, // How many Posts to display
		'caller_get_posts' => 1 // A way to turn sticky posts off in a query.
	);
	$my_query = new WP_Query($args);
	if( $my_query->have_posts() ) {
		while ($my_query->have_posts()) : $my_query->the_post(); ?>										
			<a href="<?php the_permalink(); ?>">
				<?php if(get_the_post_thumbnail_url()) { ?>
    				<img alt="Related - <?php the_title(); ?>" src="<?php echo get_the_post_thumbnail_url(); ?>" />
    			<?php } else { ?>
    				<div class="img-holder"></div>
    			<?php } ?>	
			</a>												
			<?php $category = get_the_category(); ?>
			<p><?php echo $category[0]->cat_name; ?> / <?php echo get_the_date(); ?></p>													
			<a href="<?php the_permalink() ?>" rel="bookmark"><h4><?php the_title(); ?></h4></a>
			<a class="btn" href="<?php the_permalink(); ?>">Read More</a>
	<?php
	endwhile;
	}
wp_reset_query();
}

How to Display Related Posts in WordPress with a Plugin

A plugin can be used instead to do a similar thing. We used Yet Another Related Posts Plugin (YARPP) which gives a list of posts or pages related to the current blog post.

The key features of this plugin are:

  • You can use thumbnail or list view for your related content.
  • It will display related posts, pages, and custom post types.
  • It has a templating system which gives you advanced control of how your results are displayed.
  • It has an advanced and versatile algorithm. This is a fully customisable algorithm which considers post titles, content, tags, categories, and custom taxonomies. A very great feature to ensure your posts are accurately related to the post.
  • It includes an option to display related posts in RSS feeds with custom display options.
  • It includes REST API support which enables you to embed related posts in your web or JavaScript-driven app!
  • It includes shortcode support. So you can simply add the [yarpp] shortcode to place related posts anywhere you like.
  • It supports HTTPS and WordPress Multisite
  • And it's a plugin that is maintained with regular updates

Sounds good right? Download YARPP.

Conclusion

We now know of two methods on how we can add Related Posts to our WordPress website. We also now know the importance of how this can improve our bounce rate. So, which method did you prefer? Let us know in the comments below!

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

How To Prevent Pasting Into Input Fields

In this tutorial, we are going to show you how you can prevent users from being able to copy and paste input values into certain fields. This can be especially useful when you have repeating fields for verification. For example, you may want to prevent users from copying the password into the repeat password input field, or you may want to do the same thing if you wish to include a repeat email address field. This is useful as it ensures the password the user is entering is correct, and it also ensures users receive email from your website. Let’s say you input the incorrect email address and then you copy this to the repeat email box, the user could end up not receiving the two-step certification email and in turn, this could lead to customers no longer using your website. You don’t want this to happen so sometimes this can be really effective to have in place.

So, how is this functionality achieved? How can we stop your users from pasting content into an HTML input field?

Well, we can use JavaScript to target an input field’s paste event and change how it works like so:


<input type="text" id="no-paste" />

<script>
if ( $('#no-paste').length > 0 ) {  
  const pasteBox = document.getElementById('no-paste');
  pasteBox.onpaste = e => {
    e.preventDefault();
    return false;
  };
}
</script>

What this code does is cancels the default behaviour of the paste event (i.e. pasting the contents of the clipboard into the input element). When the user tries to paste the content into the field, using either a keyboard shortcut or context menu, nothing will happen. We also wrapped this with if ( $('#no-paste').length > 0 ) {   }, so that the script will only running on pages where it contains the #no-paste element, otherwise you will get an error.

If you want to check out a working CodePen of this in action, you can do so here.

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

How to Create A Simple Looping Background Colour Animation With CSS

In this tutorial, we are going to create a simple animated background colour animation which loops with pure CSS using keyframes along with various CSS animation properties.

In our example, we are going to set this to the body element. However, you can apply the code to any HTML element of your choice either with an id or class. You can check out the CodePen here if you prefer.

Before we begin, let’s understand the looping animation and how we want the end result to appear:

  • How many background colours do we want to use?
  • How long should total animation duration last?
  • What type of animation type should we use?

In this tutorial, we are going to keep things simple and use:

  • Five different background colours
  • A duration of ten seconds (each color gets displayed two seconds)
  • A linear animation curve (the animation has the same speed from start to end)

We used Coolers.co to generate a nice colour palette for our example:

If you want to use the same colour palette then visit this link.

These are the hex colours for the background animation we used in our example:

  • Sunset Orange: #EE6055;
  • Medium Aquamarine: #60D394;
  • Pale Green: #AAF683;
  • Mellow Yellow: #FFD97D;
  • Vivid Tangerine: #FF9B85;

Right, so lets now dig into it!

How to Create the looping CSS animation

The CSS animations keyframes work in percentages from 0% to 100%. So let’s start by adding the following CSS code:


@keyframes backgroundColorPalette {
  0% {
    background: #ee6055;
  }
  25% {
    background: #60d394;
  }
  50% {
    background: #aaf683;
  }
  75% {
    background: #ffd97d;
  }
  100% {
    background: #ff9b85;
  }
}

We have now created the keyframe property called backgroundColorPalette with five separate intervals; these have been dividing evenly between 0% and 100%.

With this part done, now we can create the CSS rules to animate the body and put our backgroundColorPalette keyframes to action.

Now, let’s add the following CSS animation properties inside your body selector:


body {
  animation-name: backgroundColorPalette;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: linear;
}

If you’ve done everything correctly, you will now have a background colour animating evenly between five different colours with a linear animation. Pretty cool aye?

So how does the CSS work exactly?

  • First of all, we added the animation-name property and set the value to backgroundColorPalette. Now the background colour keyframes we previously created were then assigned to the body element.
  • We used the animation-duration property and gave it a value of 10s – This sets the total duration time to ten seconds to process the keyframes we defined.
  • We used the animation-iteration-count property and set the value to infinite. This is so the animation can run in a constant loop and run indefinately.
  • We used the animation-direction property and give it a value of alternate. What this does is it makes the animation play from beginning to end, and from the end to the beginning. We use this property value to avoid an not so attractive jump which happens if you use the normal animation direction value.

And there you have it, liked our tutorial? Then drop us a comment below. If you need any help or further explanation then get in touch!

Live Example

So we decided to create this animation below so you could see how it looks like. We added this HTML; <div id="background-transition"><h3>ANIMATED BACKGROUND</h3></div> then simply replaced body with the ID of the DIV element which in our example is; #background-transition

ANIMATED BACKGROUND

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

How To Create A Modern Scroll Down Animation Icon With CSS

In this tutorial, we are going to show you how to create a modern scroll down animation which you can easily add to any website.

These types of animations are typically used on websites that have a full-screen header in which you add an animated element to demonstrate that there is more content on the website if you scroll down.

You can have a look at how this animation works on this CodePen we created.

In a previous article, we created a different type of animation, if you want to check that one out then click here.

So let’s begin with this tutorial; for this we just need to add the following HTML and CSS code:


<div id="scroll-wrapper">
  <div id="scroll-wrapper-inner">
    <div id="scroll-title">Scroll</div>
    <div id="scroll-down"></div>
  </div>
</div>

body {
  background: #20232c;
}

#scroll-wrapper {
    position: absolute;
    display: table;
    width: 100%;
    height: 100%;
    z-index: 9;
    pointer-events: none;
    left: -30%;
}

#scroll-wrapper-inner {
    display: table-cell;
    vertical-align: bottom;
    width: 100%;
    height: 100%;
}

#scroll-down {
    display: block;
    position: relative;
    padding-top: 79px;
    text-align: center;
}

#scroll-title {
    display: block;
    text-transform: uppercase;
    color: #FFF;
    font-family: "Courier-Prime", sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.4em;
    text-align: center;
    transform: rotate(90deg);
    margin-bottom: 45px;
}
#scroll-down::before {
    -webkit-animation: elasticus 2.9s cubic-bezier(1, 0, 0, 1) infinite;
    -moz-animation: elasticus 2.9s cubic-bezier(1, 0, 0, 1) infinite;
    -o-animation: elasticus 2.9s cubic-bezier(1, 0, 0, 1) infinite;
    animation: elasticus 2.9s cubic-bezier(1, 0, 0, 1) infinite;
    position: absolute;
    top: 0px;
    left: 50%;
    margin-left: -1px;
    width: 2px;
    height: 90px;
    background: #FFF;
    content: ' ';
}
@-webkit-keyframes elasticus {
    0% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
    50% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    50.1% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    100% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
}
@-moz-keyframes elasticus {
    0% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
    50% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    50.1% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    100% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
}
@-o-keyframes elasticus {
    0% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
    50% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    50.1% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    100% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
}
@keyframes elasticus {
    0% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
    50% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    50.1% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    100% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
}

And it’s as simple as that!

With this example, we are centring the scroll down animation. If you want to quickly move the position of this we can add left positioning to the #scroll-wrapper element with either a negative or positive percentage value (depending on where you want this displaying).

We hope you enjoyed this tutorial if you need any help implementing; drop us a comment below!

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

CSS – Indenting the second line of LI (List Items)

Have you ever wanted to indent the second line of a list item instead of it appearing directly beneath the bullet point? This is probably why you are here and below is probably the result you are looking for:

Today we are going to show you an easy way to do this.

The reason this is happening is that the tick is inline content so when the text wraps it will continue to flow as usual.

You can stop this behaviour by taking advantage of text-indent:

The text-indent property specifies how much horizontal space should be left before the beginning of the first line of the text content of an element.

By supplying a negative text-indent you can tell the first line to shift a desired amount to the left. If you then specify a positive padding-left you can cancel this offset out.

In the following example a value of 20px:-


ul {  
    list-style: none; 
    width: 200px; 
    text-indent: -20px; /* key property */
    margin-left: 20px; /* key property */
    
}
li { margin-bottom: 10px; }

And there you have it, here is a CodePen of the above in action.

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

How to Change Breakpoints with Bootstrap

What is Breakpoint?

Though the Bootstrap is a complete framework and packaged with JavaScript components too but achieving effortless responsive behaviour is the major key point we can grant Bootstrap for. Responsive behaviour depends on resolutions (viewport or screen sizes).

By default, Bootstrap supports four resolutions – called Breakpoints in technical term.

< 768px Extra small devices Phones
≥ 768px Small devices Tablets
≥ 992px Medium devices Desktops
≥ 1200px Large devices Desktops

we had integrated Bootstrap Navbar for our primary navigation in a project and as you may be aware that Navbar starts collapsing with < 768px. However, when you have a project with 6 - 7+ navbar items to show, you will notice the navbar drops to a new line and it's not really feasible making the navbar look tidy on one line. So basically we needed to change the breakpoint from 768px to 992px. There are 3 ways you can change media queries breakpoints with Bootstrap:-

  • Customize Bootstrap before downloading
  • Change in CSS
  • Create a new Breakpoint

Customize Bootstrap before downloading

Bootstrap lets us change some of the preferences before downloading a ZIP. If you got the project requirement then you should select this option. Because here, you would have the freedom to change breakpoints before start working on a project. So you can plan well in advance.

Change in CSS

If you need to change the behavior of the specific component (e.g. the navbar), you can overwrite or change the breakpoint with CSS:-


@media (max-width: 992px) {
    .navbar-header {
        float: none;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
}

Create a new Breakpoint

This option requires a bit of extra work but if the above two are not the solution in your case, you need to create a new breakpoint. Below are some steps:-

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

How To Create A Scroll Down Animation Icon Using CSS with SVG

So you have seen on websites that typically have a full-screen header with an indicator to scroll down to view the rest/more of the content. We’re going to show a very nice and clean way to represent this feature. In today’s tutorial, we have a scroll down icon created as an SVG using just HTML & CSS and it looks pretty awesome if we do say so ourselves.

Here is a CodePen of what we are going to be creating.

So let’s being:-

HTML


<div class="scrolldown-wrapper">
	<div class="scrolldown">
		<svg height="30" width="10">
			<circle class="scrolldown-p1" cx="5" cy="15" r="2" />
			<circle class="scrolldown-p2" cx="5" cy="15" r="2" />
		</svg>
	</div>
</div>

CSS


body {
  background: #000;
}

/* Scroll Down */

.scrolldown-wrapper {
	left: 50%;
	position: absolute;
	text-align: center;
	bottom: 0;
	transform: translate(-50%, -50%);
}
  
.scrolldown {
	border: 2px solid #FFFFFF;
	border-radius: 30px;
	height: 46px;
	margin: 0 auto 8px;
	text-align: center;
	width: 30px;
}

.scrolldown-p1,
.scrolldown-p2 {
	animation-duration: 1.5s;
	animation-name: scrolldown;
	animation-iteration-count: infinite;
	fill: #FFFFFF;
}
  
.scrolldown-p2 {
	animation-delay: .75s;
}

@keyframes scrolldown {
	0% {
		opacity: 0;
		transform: translate(0, -8px);
	}
	50% {
		opacity: 1;
		transform: translate(0, 0);
	}
	100% {
		opacity: 0;
		transform: translate(0, 8px);
	}
}

If you want to adjust the positioning of the icon, simply edit the .scrolldown-wrapper class and adjust the bottom position (e.g. changing bottom: 10%; will move the icon 10% of the viewport height from the bottom).

You can also adjust the speed of the animation by adjusting either .scrolldown-p1 or .scrolldown-p2 classes.

Pretty simple and lightweight right?

Any questions feel free to drop us a comment.

We hope you’ve enjoyed today’s tutorial.

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]ebdesigns.com

It’s good to share

How to get the selected file name from an input type file using jQuery

Today we will show you how to get the selected file name from an input type file using jQuery. On a recent job, we were using a form where a user could add up to 3 images to upload to a contact form on CF7. We styled this to look as follows:-

So how do we get the filename on a selection of a file? The answer is jQuery’s change() method.

You can use the jQuery’s change() method to get the file name selected by the HTML form control <input type="file" />. Let’s check out an example to understand how it works:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Get Selected File Name</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
    $(document).ready(function(){
        $('input[type="file"]').change(function(e){
            var fileName = e.target.files[0].name;
            alert('The file "' + fileName +  '" has been selected.');
        });
    });
</script>
</head>
<body>
    <form>
        <input type="file">
        <p><strong>Note:</strong> Choose any file on your computer and its name will be displayed in an alert dialog box.</p>
    </form>
</body>
</html>

In our case scenario, we wanted to display the filename inside the file box, in which case we added the following to the HTML:-


    <div class="icon-add-file"></div>

So all we did was replace the alert with the following JS code:-


$('.filename').html(fileName);

// If you are using multiple file uploads, you will have to do some traversing, in our case we had to get the parent(x3) selector and find the .filename class:
$(this).parent().parent().parent().find('.filename').html(fileName);

Replacing the default file inputs

Okay, so you might have looked at the first screenshot and wondered how we replaced the default styling of the file input boxes. Don’t worry, we have you covered here as well.


.file-wrapper {
    padding: 10px 20px;
    border: solid 2px #F8F8F8;
    background: #F8F8F8;
    color: #818586;
    max-width: 100%;
    outline: none;
    height: 150px;
    width: 100%;
    display: block;    
}

div.wpcf7 input[type="file"] {
    width: 100%;
    height: 100%;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
}

.icon-add-file {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;    
    background-image: url(../img/icon-plus-symbol.png);
    display: block;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;    
}

.file-wrapper .wpcf7-form-control-wrap {
    position: relative;
    width: 100%;
    display: block;
    top: 0;
    left: 0;
    height: 150px;
    margin-top: -23px;
}

So what we did here was that we hid the original styling of the file input using opacity 0, we then added a background image which covers the grey input box so anywhere can be clicked to bring up the file upload window. In our example, we were using CF7 so the code may need to be amended to your project.

Well, we sure hope this helps, if you have any questions let us know and we’ll get back to you!

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

How to Change Ordering of Bootstrap 4 Columns on Mobile

In this article, we are going to show you how you can change the ordering of columns using Bootstrap 4. By this, we mean we can actually order the alter of the columns in which they are displayed, differently from mobile to desktop, or at a particular breakpoint for that matter.

By using .order- classes for controlling the visual order of your content. These classes are responsive, so you can set the order by breakpoint (e.g. .order-1.order-md-2). This includes support for 1 through 12 across all five grid tiers.
.
There are also responsive .order-first and .order-last classes that change the order of an element by applying order: -1 and order: 13 (order: $columns + 1), respectively. These classes can also be intermixed with the numbered .order-* classes as needed.

So, how do we do it exactly? Well, let’s start with the HTML markup, this is the part that controls it all actually: (if you prefer going straight to the CodePen, then click here)


<div class="container">

  <h2>Without column ordering</h2>
  <div class="row">
    <div class="col-sm-6">
      <img src="https://dummyimage.com/400x400/000/fff&text=A" alt="" class="w-100" />
    </div>
    <div class="col-sm-6">
      <img src="https://dummyimage.com/400x400/000/fff&text=B" alt="" class="w-100" />
    </div>
  </div>

  <h2>With column ordering</h2>
  <div class="row">
    <div class="col-sm-6 order-sm-12">
      <img src="https://dummyimage.com/400x400/000/fff&text=B" alt="" class="w-100" />
    </div>
    <div class="col-sm-6 order-sm-1">
      <img src="https://dummyimage.com/400x400/000/fff&text=A" alt="" class="w-100" />
    </div>
  </div>

  <h2>12 columns - Descending Order</h2>
  <div class="row">
    <div class="col-sm-6 order-12">
      <img src="https://dummyimage.com/400x400/000/fff&text=1" alt="" class="w-100" />
    </div>
    <div class="col-sm-6 order-11">
      <img src="https://dummyimage.com/400x400/000/fff&text=2" alt="" class="w-100" />
    </div>
    <div class="col-sm-6 order-10">
      <img src="https://dummyimage.com/400x400/000/fff&text=3" alt="" class="w-100" />
    </div>
    <div class="col-sm-6 order-9">
      <img src="https://dummyimage.com/400x400/000/fff&text=4" alt="" class="w-100" />
    </div>
    <div class="col-sm-6 order-8">
      <img src="https://dummyimage.com/400x400/000/fff&text=5" alt="" class="w-100" />
    </div>
    <div class="col-sm-6 order-7">
      <img src="https://dummyimage.com/400x400/000/fff&text=6" alt="" class="w-100" />
    </div>
    <div class="col-sm-6 order-6">
      <img src="https://dummyimage.com/400x400/000/fff&text=7" alt="" class="w-100" />
    </div>
    <div class="col-sm-6 order-5">
      <img src="https://dummyimage.com/400x400/000/fff&text=8" alt="" class="w-100" />
    </div>
    <div class="col-sm-6 order-4">
      <img src="https://dummyimage.com/400x400/000/fff&text=9" alt="" class="w-100" />
    </div>
    <div class="col-sm-6 order-3">
      <img src="https://dummyimage.com/400x400/000/fff&text=10" alt="" class="w-100" />
    </div>
    <div class="col-sm-6 order-2">
      <img src="https://dummyimage.com/400x400/000/fff&text=11" alt="" class="w-100" />
    </div>
    <div class="col-sm-6 order-1">
      <img src="https://dummyimage.com/400x400/000/fff&text=12" alt="" class="w-100" />
    </div>
  </div>

  <h2>12 columns - Ascending Order</h2>
  <div class="row">
    <div class="col-sm-6">
      <img src="https://dummyimage.com/400x400/000/fff&text=1" alt="" class="w-100" />
    </div>
    <div class="col-sm-6">
      <img src="https://dummyimage.com/400x400/000/fff&text=2" alt="" class="w-100" />
    </div>
    <div class="col-sm-6">
      <img src="https://dummyimage.com/400x400/000/fff&text=3" alt="" class="w-100" />
    </div>
    <div class="col-sm-6">
      <img src="https://dummyimage.com/400x400/000/fff&text=4" alt="" class="w-100" />
    </div>
    <div class="col-sm-6">
      <img src="https://dummyimage.com/400x400/000/fff&text=5" alt="" class="w-100" />
    </div>
    <div class="col-sm-6">
      <img src="https://dummyimage.com/400x400/000/fff&text=6" alt="" class="w-100" />
    </div>
    <div class="col-sm-6">
      <img src="https://dummyimage.com/400x400/000/fff&text=7" alt="" class="w-100" />
    </div>
    <div class="col-sm-6">
      <img src="https://dummyimage.com/400x400/000/fff&text=8" alt="" class="w-100" />
    </div>
    <div class="col-sm-6">
      <img src="https://dummyimage.com/400x400/000/fff&text=9" alt="" class="w-100" />
    </div>
    <div class="col-sm-6">
      <img src="https://dummyimage.com/400x400/000/fff&text=10" alt="" class="w-100" />
    </div>
    <div class="col-sm-6">
      <img src="https://dummyimage.com/400x400/000/fff&text=11" alt="" class="w-100" />
    </div>
    <div class="col-sm-6">
      <img src="https://dummyimage.com/400x400/000/fff&text=12" alt="" class="w-100" />
    </div>
  </div>
</div>

Alongside this, we added the following CSS, although this isn’t particularly required for our example:


* {
  font-family: 'Roboto', sans-serif;
}

h2 {margin-top:2em;}
.container {
  padding: 2rem;
}

.order-sm-12 img {
  border: 5px solid orange;
}

.order-sm-1 img {
  border: 5px solid blue;
}

In this example, we have demonstrated how you would display a grid ‘without column ordering’, ‘with column ordering’, ’12 columns – Descending Order’, and ’12 columns – Ascending Order’.

Okay, if you didn’t understand how the above works, it’s not a problem. The thing to remember here is that when we are using order-sm-x and order-x we are doing this using mobile-first methods. So, let’s say we wanted the first column which appears on desktop first, but then last on mobile; in our HTML markup, we would add the column that we want to display on mobile (first) above the column that we want to display on the desktop. Once you have done this, order-sm-x determines the breakpoint in which we want to change the ordering on desktop, so once -sm is triggered, the order will change based on the order-x value.

We hope we have explained this well enough to get how this works if in doubt, check out the CodePen Example, or drop us a comment below, we’ll assist if you’re in doubt, that’s just what we do 😉

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share