JQuery How To Create A Terms To Use Page Example Of Open Page ( Video Tutorial )

in #utopian-io8 years ago (edited)


Image Source

What Will I Learn?

I will learn how to create a terms to use page just an example to control two divs as two pages in the same page .

  • How to create the items and div with some CSS proprieties .
  • How to check if the button that you clicked equals to the class .
  • How to modify the opacity CSS propriety and use the show and hide functions .

Requirements

  • Basic knowledge of JavaScript language .
  • Knowledge of JQuery .
  • Has the min jquery file .
  • Has an editor text .

Difficulty

  • Basic

Description

  • In this video I will show you how to create a terms to use page example when I click on the button ' licence ' the page will appear how to do it ?
  • Firstly I added two divs in my HTML file , the first div is the first page it has a heading and paragraph and two buttons , the first button is ' licence ' when we click on it the second page ( div ) will appear and cancel to close it .
  • I added to it some proprieties ( width , height , padding , margin ..etc ) to be the first and the second page , also I used a ' display : none ' propriety for the second div to hide it .
  • I got the button in a variable called ' btn ' and I check if we click on the button the function will test if you clicked on ' licence ' the div with class ' .myLicence ' will appear by this function ' show() ' and the opacity of my current div will be 0.1 .
  • In the second function I test if it ' cancel-b ' of licence page will hide the page and return the opacity to 1.
  • In the third function to cancel our current page just I take the class and hide the page in 600 millisecondes .

Video Tutorial

Curriculum



Posted on Utopian.io - Rewarding Open Source Contributors

Sort:  

.

Thank you sir

Your contribution cannot be approved because it does not follow the Utopian Rules.

  • The tutorial has few to be explained about the linked project. Briefly, tutorial only covers .show() and .hide() functions of jQuery. And please consider that, only showing 2 simple functions and their usage in a tutorial is not a proper tutorial format since it's open to abuse.
  • You also included a complete specific example, but Utopian contributions should be technical about the linked project, in this case jQuery. The content which is not related with jQuery, cannot be counted as the main tutorial content. You are only responsible with explanation of the parts about the linked project and the tutorial has so little in that part.

Change of decision:

  • Also I would like to inform you about the decision change. I was requesting second thoughts from moderation about the post when fuzeh approved your contribution. With the consensus of multiple moderators and supervisors, we decided to reject this post. This is why we changed the status of your contribution.

You can contact us on Discord.
[utopian-moderator]