Hello.

What I am planning to do for User registration in regards to agreeing to the EULA:

1)For example, there will be three conditions the User must agree to by selecting checkboxes - Only one condition displayed at a time.

2)Upon checking the first condition checkbox, the second condition appears onscreen, smoothly - The first disappearing; This would be a sort of animation. When this second checkbox is selected, this condition disappears, the third and final condition gliding into its place. (I do not want page refreshes or anything of that nature).

I hope I explained this clearly.

From my research, it appears to be JavaScript I should be using to build this. Possibly jQuery (Which I am totally unfamiliar with).

I don't think this should be too difficult to build, but any advice would be greatly appreciated.

Thank you in advance!
Matthew

Recommended Answers

jQuery will make this animation a lot easier. It has a fade function that will do what you need. Check the jQuery manual for an example on fade.

Jump to Post

All 3 Replies

Re: A Brief Question - General Advice 80 80

jQuery will make this animation a lot easier. It has a fade function that will do what you need. Check the jQuery manual for an example on fade.

commented: Thank you - Advice followed! +0
Re: A Brief Question - General Advice 80 80

I simply take this example from w3school and made some changes hope this will help you

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#Button1").click(function(){
      $("#div1").fadeOut();
        $("#div2").fadeIn();
    });
    $("#Button2").click(function () {
        $("#div2").fadeOut();
        $("#div3").fadeIn();
    });
    $("#Button3").click(function () {
        $("#div3").fadeOut();
    });
});
</script>
</head>

<body>
<div id="div1" style="height:80px;background-color:red;"><input id="Button1" type="button" value="button" /></div><br>
<div id="div2" style="height:80px;display:none;background-color:green;">  <input id="Button2" type="button" value="button" /></div><br>
<div id="div3" style="height:80px;display:none;background-color:blue;">  <input id="Button3" type="button" value="button" /></div>

</body>
</html>
commented: Thank you +7
Re: A Brief Question - General Advice 80 80

Thank you, both.

Matthew

Be a part of the DaniWeb community

We're a friendly, industry-focused community of 1.19 million developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.