Showing Previous and Next Tab Divs with JavaScript and jQuery

Here is another example and tutorial how we can do a show and hide previous and next HTML5 divs/tabs based on it’s id’s and classes…

The idea is simple, we must store a value of a number of current tab that we are seeing right now in a variable, then by clicking next button we show the next tab with that value+1, and if we click previous button we show the tab with that stored value-1, also with hiding the rest unnecessary tabs.

Check out thsi code:

<!DOCTYPE html>
<html>
    <head>
        <title>Tabs</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="X-UA-compatible" content="ie=edge">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <style>
            .tabcontent { display: none;}
            .tabcontent .active{display: block; display: show ;}
        </style>
    </head>
    <body>
        <div class="container text-center">
            <h1>Tabs with buttons</h1>
            <button class="float-left btn bg-primary" onclick="prev()">Previous </button>
            <button class="btn btn-primary float-right" onclick="next()">Next</button>
            <nav class="multiTabs">
                <a class="btn btn-danger mr-2" href="javascript:void(0)" data-trigger='content1'>Tab1</a>
                <a class="btn btn-danger mr-2" href="javascript:void(0)" data-trigger='content2'>Tab2</a>
                <a class="btn btn-danger mr-2" href="javascript:void(0)" data-trigger='content3'>Tab3</a>
                <a class="btn btn-danger mr-2" href="javascript:void(0)" data-trigger='content4'>Tab4</a>
                <a class="btn btn-danger mr-2" href="javascript:void(0)" data-trigger='content5'>Tab5</a>
            </nav>
            
            
            <!-- content  -->
            <div class="tabcontent active bg-light" id="content1">
                <h1>Tab1</h1>
                <p>This is some text about tab1</p>
            </div>
            <div class="tabcontent bg-light" id="content2">
                <h1>Tab2</h1>
                <p>This is some text about tab2</p>
            </div>
            <div class="tabcontent  bg-light" id="content3">
                <h1>Tab3</h1>
                <p>This is some text about tab3</p>
            </div>
            <div class="tabcontent  bg-light" id="content4">
                <h1>Tab4</h1>
                <p>This is some text about tab4</p>
            </div>
            <div class="tabcontent bg-light" id="content5">
                <h1>Tab5</h1>
                <p>This is some text about tab5</p>
            </div>
        </div>
        <script>
			var currentTab = 1;
			$("#contetn1").show();
		
            $(document).on('click', 'nav.multiTabs>a',
			function(){
				var TabId = $(this).attr('data-trigger');
				$('div#'+TabId+' ').show();
				
				console.log("Current Tab: " + TabId);
				currentTab = parseInt(TabId.replace("content", ""));

				$('.tabcontent:not(#'+TabId+')').hide()

            });
			
			function next(){
				if(currentTab < 5){
					$(".tabcontent").hide();
					currentTab++;
					$("#content"+(currentTab)).show();
				}
			}
			
			function prev(){
				if(currentTab > 1){
					$(".tabcontent").hide();
					currentTab--;
					$("#content" + (currentTab)).show();
				}
			}
        </script>
    </body>
</html>
        

To see the details please watch this video and leave your comments 😀

Generating random a mix of random letters and numbers

By calling str_shuffle method in PHP, we can generate a random mix of latters and numbers.

For example, if we want to fill $bookid string variable with 10 letters and numbers (mixed of them), we can do it this way:

$bookid = substr(str_shuffle(str_repeat("0123456789abcdefghijklmnopqrstuvwxyz", 5)), 0, 10);

And the result is this: nzm5gnde9i

You can modify the content of allowed characters and numbers, maybe you want to limit it to numbers only, simply change it to only contains 0 to 9 numbers.

Or if you wish to mix between uppercase and lowercase letters, simply add A to Z in capital. That will work.

That’s all.

Checking uploaded file extension with PHP before storing it on our server

We often allow our users to upload files to our server. It is important to limit file extensions that we accept.

For example, we need to only accept .pdf and .txt files from our users, we don’t want them to send us any other files instead of pdf and txt. Then this snippet is useful to check their file extension before accepting it:

<!DOCTYPE html>
<html>
	<head>
		<title>File Extension Check</title>
	</head>
	<body>
		<?php 
		if(isset($_POST["extcheck"])){
			$acceptedext = array("pdf", "txt");
			$uploadedfile = $_FILES["myfile"]["name"];
			$extension = pathinfo($uploadedfile, PATHINFO_EXTENSION);
			if(!in_array($extension, $acceptedext)){
				echo "The file is not accepted.";
			}else{
				echo "The file is uploaded.";
			}
		}else{
			?>
			<form method="post" enctype="multipart/form-data">
				<input type="file" name="myfile" accept=".pdf"><br>
				<input type="submit" value="Submit" name="extcheck">
			</form>
			<?php
		}
		?>
	</body>
</html>

Watch the video here:

How to create a simple moving train locomotive and wagons in Unity3D

In this tutorial you will see how to easily create a moving locomotive and wagons along the spline track in Unity3D.

Here is the package used in this tutorial: https://zk.ciihuy.com/wp-content/uploads/2019/10/Spline-Walker-Train.zip

Please note that this package and scripts are downloded from https://catlikecoding.com (a good Unity tutorials website) and I modified some files.

For security reason I cannot upload a file with .unitypackage extension to my website, so I compressed it int a zip file. You need to extract it before importing to Unity.

How to create simple menu navigation and switch between menu screens in Unity

I’ve made a step by step video tutorial to create a basic menu and navigation script in Unity3D.

So basically you can see the Main Menu with two buttons to navigate to its sub menus, and in each sub menus you have a back button to go back to Main Menu.

In this video you will see how to switch between menu screens in one single Unity scene.

Enemy Patrol Starting from the Nearest and Closest Waypoint in Unity3D

I’ve created a simple C# script for Unity game that allows you to create a patrolling enemy around multiple waypoints (check points). It will start patrolling from the nearest / closest waypoint available around the patrolling object, then it continues to check the next waypoint incrementally.

Watch the tutorial video on my YouTube channel and please subscribe to support me 😀

How to add a Virtual Joystick in your Unity game easily

In this video I’m showing how to add a virtual joystick in your Unity by importing this package called MyJoystick.

See how to use this package in this video and have fun.

Here is the link to download the package, it’s from my Google Drive: https://drive.google.com/open?id=1KPUvXeJQw_XATMTY0QmF_4JE0-05sHQy

That is a Unity package. Drag and drop it to your Unity project to import MyJoystick. Find a sample test scene to see how it works. Everything is explained in above video.

Simple JavaScript function to capitalize first letter of a word

Hi! Previously I was searching for a way to capitalize the first letter of a word in JavaScript. I thought there is built in function/method in JavaScript to do that, but I didn’t find it.

So, here is a simple function that I’ve made.

function capFirstLetter(txt){
	return txt.charAt(0).toUpperCase() + txt.slice(1)
}

To use this function, just call the function with any word as its parameter that you want to capitalize its first letter. For example:

capFirstLetter("hello")

Then it will return “Hello” instead of “hello”.

How to generate random sentence consisted of random words with PHP

In this post I’m going to share a simple PHP script to generate random sentence consisted of random pre-defined words.

For example I want to show a text saying: “Hi, thank you for visiting my website” several times, but I don’t want repetitively saying exactly that sentence. Then the solution is this program, which can randomize some of words in this sentence so somehow it uniquely showing different sentences with same meaning.

To see the example please watch this video: