Build a Content Locker with HTML and JavaScript

In this article I will build my own content locker with HTML and JavaScript it doesn’t require a lot of code and you can customize it to how you want, although you will need some experience with HTML.

HTML Code:

<div id="sociallocker">
	<div id="sociallocker-links">
		<a href="#" class="social-1 fb"><i class="fab fa-facebook-f"></i></a>
		<a href="#" class="social-1 tw"><i class="fab fa-twitter"></i></a>
		<a href="#" class="social-1 gp"><i class="fab fa-google-plus-g"></i></a>
		<a href="#" class="social-1 in"><i class="fab fa-linkedin-in"></i></a>
		<a href="#" class="social-1 pi"><i class="fab fa-pinterest-p"></i></a>
		<a href="#" class="social-1 su"><i class="fab fa-stumbleupon"></i></a>
	</div>
	<div id="sociallocker-content">
		<a href="http://google.com">Download Now</a>
	</div>
	<div id="sociallocker-overlay"><i class="fas fa-lock"></i>Unlock content with a social share.</div>
</div>

For this content locker we will be using social buttons, these buttons will share the content when the visitor clicks one of them and then unlock the Download Now button when the window closes, just remember to change the link’s href attribute value to your social share link.

We’re using Font Awesome for the social icons.

CSS Code:

@import "https://use.fontawesome.com/releases/v5.0.10/css/all.css";
#sociallocker {
	background-color: #EEEEEE;
	text-align: center;
	position: relative;
	max-width: 500px;
	height: 120px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border-radius:10px;
}
#sociallocker-overlay {
	background-color: rgba(0,0,0,0.6);
	font-size: 20px;
	font-weight: bold;
	color: #ffffff;
	transition: all 0.2s ease;
}
#sociallocker-overlay i {
	margin-right: 10px;
}
#sociallocker:hover #sociallocker-overlay {
	top: -100%;
	transition: all 0.2s linear;
}
#sociallocker:hover #sociallocker-content {
	top: 100%;
	transition: all 0.2s linear;
}
#sociallocker-content a {
	display: inline-block;
	text-decoration: none;
	padding: 10px 20px;
	background-color: #777777;
	color: #f9f9f9;
	border-radius: 4px;
	font-weight: bold;
}
#sociallocker-overlay,
#sociallocker-content,
#sociallocker-links {
	position: absolute;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	top: 0;
	left: 0;
}
#sociallocker-content {
	background-color: #ccc;
	transition: all 0.2s ease;
}
.social-1 {
	text-decoration: none;
    color: #ffffff;
    display: inline-block;
    width: 60px;
    height: 60px;
    overflow: hidden;
	margin-right: 5px;
}
.social-1 i {
	display: flex;
  	align-items: center;
  	justify-content: center;
    height: 100%;
}
.social-1:hover i {
	background-color: rgba(0,0,0,0.1);
    transform: scale(1.2);
    transition: all 0.2s;
}
.fb { background-color: #4561A8; }
.tw { background-color: #17ADEA; }
.gp { background-color: #BF3B28; }
.in { background-color: #1679B1; }
.pi { background-color: #D9303C; }
.su { background-color: #E84930; }

If you have already included Font Awesome into your website you can remove the @import… at the top of the above code.

We have 3 containers in our #sociallocker element, these are:

#sociallocker-links - this container will contain all our social share links, for example, Facebook, Twitter, and so on, you can customize it to your liking, add more social links or add custom links, just remember when the visitor clicks one of them the content will only unlock when the new window closes.
#sociallocker-content - this is the unlocked content, don’t worry about the visitors clicking the button before sharing, we will use JavaScript to temporarily remove the link from the download button.
#sociallocker-overlay - this is the first thing visitors will see, when the visitor hovers over it the share buttons will show.

JavaScript Code:

(function() {
	var sl = document.querySelector("#sociallocker");
	var slc = document.querySelector("#sociallocker-content");
	if (!sl) return;
	var old_slc_html = slc.innerHTML;
	slc.innerHTML = slc.innerHTML.replace(/(href=")(.*)(\")/g, "href=\"#\"");
	sl.querySelectorAll("#sociallocker-links a").forEach(function(ele) {
		ele.onclick = function(e) {
			var web_window = window.open(this.href, 'Share Link', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600,top=' + (screen.height/2 - 300) + ',left=' + (screen.width/2 - 300));
			var check_window_close = setInterval(function() { 
				if (web_window.closed) {
					clearInterval(check_window_close);
					slc.innerHTML = old_slc_html;
					document.querySelector("#sociallocker-links").style.display = "none";
					document.querySelector("#sociallocker-overlay").style.display = "none"; 
					document.querySelector("#sociallocker-content").style.top = "0";
				}
			}, 1000);
			e.preventDefault();
		};
	});
})();

The above JavaScript code will open a new window when the visitor clicks one of the share buttons, and on close (normally happens after you share) the locked content will be unlocked.

Conclusion

This is probably the easiest way you can create a social content locker for your website, blog, posts, articles, etc.

The only problem with this method is you cannot use social page likes (unless you open in new window) to unlock the content because you need to use third-party tools (such as the Facebook SDK), it’s the only way to determine if the visitor likes the page or not, however, you can still integrate it, just include the third-party code and add the events in the JavaScript code above.

#html #css #javascript

What is GEEK

Buddha Community

Build a Content Locker with HTML and JavaScript

Lyda White

1628189100

How to Image Uploader with Preview || Html CSS JavaScript

Image Uploader with Preview || Html CSS JavaScript || #html #css #javascript #coding

#html #css #javascript

Ava Watson

1595318322

Know Everything About HTML With HTML Experts

HTML stands for a hypertext markup language. For the designs to be displayed in web browser HTML is the markup language. Technologies like Cascading style sheets (CSS) and scripting languages such as JavaScript assist HTML. With the help of HTML websites and the web, designs are created. Html has a wide range of academic applications. HTML has a series of elements. HTML helps to display web content. Its elements tell the web how to display the contents.

The document component of HTML is known as an HTML element. HTML element helps in displaying the web pages. An HTML document is a mixture of text nodes and HTML elements.

Basics of HTML are-

The simple fundamental components oh HTML is

Head- the setup information for the program and web pages is carried in the head
Body- the actual substance that is to be shown on the web page is carried in the body
HTML- information starts and ends with and labels.
Comments- come up in between

Html versions timeline

HTML was created in 1990. Html is a program that is updated regularly. the timeline for the HTML versions is
HTML 2- November, 1995
HTML 3- January, 1997
HTML 4- December, 1997; April, 1998; December, 1999; May, 2000
HTML 5- October, 2014; November, 2016; December, 2017

HTML draft version timelines are

October 1991
June 1992
November 1992
June 1993
November 1993
November 1994
April 1995
January 2008
HTML 5-
2011, last call
2012 candidate recommendation
2014 proposed recommendation and recommendation

HTML helps in creating web pages. In web pages, there are texts, pictures, colouring schemes, tables, and a variety of other things. HTML allows all these on a web page.
There are a lot of attributes in HTML. It may get difficult to memorize these attributes. HTML is a tricky concept. Sometimes it gets difficult to find a single mistake that doesn’t let the web page function properly.

Many minor things are to be kept in mind in HTML. To complete an HTML assignment, it is always advisable to seek help from online experts. These experts are well trained and acknowledged with the subject. They provide quality content within the prescribed deadline. With several positive reviews, the online expert help for HTML assignment is highly recommended.

#html assignment help #html assignment writing help #online html assignment writing help #html assignment help service online #what is html #about html

code savvy

1630506330

Product landing page using HTML CSS & JavaScript | web design

Knowledge

This video is about the product landing page using HTML CSS And JavaScript, in which we created a simple product landing page using HTML CSS and in order to perform those powerful animations we use the GSAP a JavaScript animation library for work done.

In this video we broadly cover the concepts of CSS Flex box and CSS Grid system and Some CSS Properties such as nth child selector, ::before & ::after much more.

Don't forget to join the channel for more videos like this. Code Savvy

📁 Assets
Icons : https://fontawesome.com/
Fonts : https://fonts.google.com/
GitHub : https://github.com/ananikets18
GSAP : https://greensock.com/gsap/

Outline ⏱

0:00 - Intro
0:10 - Result
0:38 - Project Setup
01:35 – Reset HTML
02:21 – Left Container HTML
03:41 – Wrapper
14:58 – Bottom Shoe Nav
26:23 – Right Container HTML
33:10 – Product Size
35:49 – Reviews
41:11 – GSAP Animations

Click to Watch Full tutorial on YOUTUBE

#html #css #javascript #web-development #html5

#html #css #tailwindcss #javascript

code savvy

1629473371

Web Design Speed Code | HTML, CSS, JavaScript (GSAP) | Portfolio Design

Portfolio Website Design with HTML, CSS & Javascript

Hello Everyone, In this video we'll create a Portfolio Page design using HTML, CSS & JavaScript (GSAP) 📁

🧠 Knowledge :

Html, CSS (Flexbox), JavaScript DOM, Javascript Animations.

Anyway, you can learn everything mentioned. Follow the tutorial.

⏱ Outline

0:00 - Intro
0:34 - Structure
4:21 - Setting CSS
4:48 - Wrapper
5:05 - Left Menu
5:20 - Logo
6:04 - Social Icons
7:34 - Nav
8:58 - Large Text
9:36 - Red Box
10:27 - See Photos
11:01 - Desc Content
13:08 - Slide
13:30 - Overlay
14:26 - Navbar Links JS
15:11 - TweenMax (GSAP) Animations

#css #javascript #JavaScript #HTML #html

Click to Watch Full Tutorial

Alisha Larkin

1617789060

HTML Tutorial For Beginners

The prospect of learning HTML can seem confusing at first: where to begin, what to learn, the best ways to learn — it can be difficult to get started. In this article, we’ll explore the best ways for learning HTML to assist you on your programming journey.

What is HTML?

Hypertext Markup Language (HTML) is the standard markup language for documents meant to be displayed in a web browser. Along with Cascading Style Sheets (CSS) and JavaScript, HTML completes the trio of essential tools used in creating modern web documents.

HTML provides the structure of a webpage, from the header and footer sections to paragraphs of text, videos, and images. CSS allows you to set the visual properties of different HTML elements, like changing colors, setting the order of blocks on the screen, and defining which elements to display. JavaScript automates changes to HTML and CSS, for example, making the font larger in a paragraph when a user clicks a button on the page.

#html #html-css #html-fundamentals #learning-html #html-css-basics #html-templates