Dynamic Content rendering on radio selection

dynamic content rendering on radio selection

Dynamic Content rendering on radio selection

Almost 82% of the sites are dynamic now. Static websites are started changing/converting to dynamic websites for easy maintenance and better user interactivity. Shopping websites/social network websites are loading their content dynamically on-demand to maintain their performance. Similar way we are going to see how to render the contents dynamically on change of radio selections.

 

dynamic content rendering on radio selection

Requirements & Imports:

1. jQuery:

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js”></script>

 

2. Bootstrap [CSS & JS] – include only if you need it to be responsive.

<link href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”http://getbootstrap.com/dist/js/bootstrap.min.js”></script>

 

 

demo
download

 

 

HTML Code:

All the page contents are below, but all the contents will not be displayed same time. Based on the radio selection it will render and display the respecive div’s.

 

 <div class="container" id="root1">
  <div id="SearchDiv" class="row" style="display:none;">
    <div class="col-md-12 col-xs-12 col-sm-12"><input type="radio" name="SearchTopics" value="Google" id="Google">Google[select this radio button]</div>
   <div class="col-md-12 col-xs-12 col-sm-12"><input type="radio"  name="SearchTopics" value="Yahoo" id="Yahoo">Yahoo</div>
   <div class="col-md-12 col-xs-12 col-sm-12"><input type="radio" name="SearchTopics" value="Bing" id="Bing">Bing</div>
   <div class="col-md-12 col-xs-12 col-sm-12"><input type="radio" name="SearchTopics" value="Duckduckgo" id="Duckduckgo">Duckduckgo</div>
</div>
  <div id="SocialDiv" class="row" style="display:none;">
    <div class="col-md-12 col-xs-12 col-sm-12"><input type="radio" name="SocialDiv" value="and" id="and">Facebook</div>
   <div class="col-md-12 col-xs-12 col-sm-12"><input type="radio"  name="SocialDiv" value="or" id="or">Twitter</div>
   <div class="col-md-12 col-xs-12 col-sm-12"><input type="radio" name="SocialDiv" value="bitwise" id="bitwise">Google Plus</div>
  </div>
   <div id="ShoppingDiv" class="row" style="display:none;">
    <div class="col-md-12 col-xs-12 col-sm-12"><input type="radio" name="ShoppingDiv" value="flipkart" id="flipkart">Flipkart</div>
   <div class="col-md-12 col-xs-12 col-sm-12"><input type="radio"  name="ShoppingDiv" value="amazon" id="amazon">Amazon</div>
   <div class="col-md-12 col-xs-12 col-sm-12"><input type="radio" name="ShoppingDiv" value="ebay" id="ebay">Ebay</div>
  </div>

  </div>
  <div class="container" id="root2">
  <div id="GoogleDiv" class="row" style="display:none;">
    <div class="col-md-12 col-xs-12 col-sm-12"><input type="radio" name="GoogleTopics" value="Gmail" id="Gmail">Gmail</div>
   <div class="col-md-12 col-xs-12 col-sm-12"><input type="radio"  name="GoogleTopics" value="Plus" id="Plus">Google Plus</div>
   <div class="col-md-12 col-xs-12 col-sm-12"><input type="radio"  name="GoogleTopics" value="News" id="News">Google News</div>
   <div class="col-md-12 col-xs-12 col-sm-12"><input type="radio"  name="GoogleTopics" value="Android" id="Android">Android</div>
</div>

  </div>

Javascript Source code:

Radio selection onchange example shared below, which renders the respective div’s.

We have used animate jQuery function to make it some more interactive.

	   <script type="text/javascript">
	   $(document).ready(function(){
 $('div#root1').hide();
 // called when radio button changed
 $("input[name='topics']").change(function() {
 slctdTopicsRdio = $("input[name='topics']:checked").val();
			   slctdTopicsRdioDiv = slctdTopicsRdio+'Div';
			  $('div#root1').show();
			$('#'+slctdTopicsRdioDiv).show();
            $('#root1 div').not('#'+slctdTopicsRdioDiv).hide();  // hide all but the relevant div
		$('#'+slctdTopicsRdioDiv).children().show();
			   animateMe('#'+slctdTopicsRdioDiv,"24px");
			 $(window).scrollTop($('#'+slctdTopicsRdioDiv).offset().top);
        });
		});
</script>

    <script type="text/javascript">
	$(document).ready(function(){

	$("input[name='SearchTopics']").change(function() {
 slctdTopicsRdio = $("input[name='SearchTopics']:checked").val();
			   slctdTopicsRdioDiv = slctdTopicsRdio+'Div';
			$('#'+slctdTopicsRdioDiv).show();
            $('#root2 div').not('#'+slctdTopicsRdioDiv).hide();  // hide all but the relevant div
		$('#'+slctdTopicsRdioDiv).children().show();
			   animateMe('#'+slctdTopicsRdioDiv,"30px");
			   // to scroll the content to the display part
			 $(window).scrollTop($('#'+slctdTopicsRdioDiv).offset().top);
        });
		});
</script>

 <script type="text/javascript">
 // method to animate the content after radio button change
 function animateMe(divID,fontValue){
 	   $( divID )
    .animate({
      width: "100%"
    }, {
      queue: false,
      duration: 3000
    })
    .animate({ fontSize: fontValue }, 1500 )
    .animate({ borderRightWidth: "15px" }, 1500 );
 }
 </script>

 

 

Share your comments/feedbacks/thoughts in the below comments section.

513 total views, 1 views today

Leave a Reply

Your email address will not be published. Required fields are marked *