• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 444
  • Last Modified:

Javascript jquery code explained

I need someone to comment this code for me. It is a piece of code I copied from the net and I am trying to decipher it as part of my self training.

 
   <script type="text/javascript" language="javascript">
        function Func() {
            alert("hello!")
        }
    </script>

    <script type="text/javascript" src="jquery-1.7.2.min.js" ></script>
    <script type="text/javascript">
        $(document).ready(function () {
        $("#divGrid").width($(window).width());
        ShowHideActions();
      });

      function ShowHideActions() {
        if ($('#ddlReportType').val() == 'Report3')
            $('#divButtons').css('display', 'none');
        else
            $('#divButtons').css('display', '');
      }
    </script>


<script src="/path/to/jquery.js"></script>
<script>
  jQuery(function($) {
         function callback() { alert("div resized and opacity changed!"); };
         $("#my_div_ID").animate({height:10, opacity:.5}, callback);
  });
</script>

Open in new window

0
Idarac
Asked:
Idarac
2 Solutions
 
Alexandre SimõesManager / Technology SpecialistCommented:
function Func() {
    alert("hello!")
}

Open in new window

It's just a function that shows an alert but it's never called.

$(document).ready(function () {
    $("#divGrid").width($(window).width());
    ShowHideActions();
});

Open in new window

Executes the content of the function when the whole document is read.
In the function, line 1: set the width of a div as the same width of the browser window.
line2: calls ShowHideActions function.

function ShowHideActions() {
    if ($('#ddlReportType').val() == 'Report3') $('#divButtons').css('display', 'none');
    else $('#divButtons').css('display', '');
}

Open in new window

Evaluates the selected value of a dropdown. If it's 'Report 3' hides a div with id="divButtons" else shows it (in an uncommon way).

jQuery(function ($) {
    function callback() {
        alert("div resized and opacity changed!");
    };
    $("#my_div_ID").animate({
        height: 10,
        opacity: .5
    }, callback);
});

Open in new window

Another way to execute code after the whole document have been read.
In this case we have a function called callback (really bad name choice) that just displays an alert.
Then we and an animate function that is part of jQuery that will... animate... the vertical resize of that div from 0 to 10px and set if opacity (transparency percentage) to 0.5
When the animation is complete, the callback function is called.
0
 
leakim971PluritechnicianCommented:
<script type="text/javascript" language="javascript">
	// CREATE A BASIC FUNCTION
	// WHEN CALLED JUST DISPLAY A BOX WITH "hello!" inside
	function Func() {
		// ALERT "hello!"
		alert("hello!")
	}
</script>
<!-- ADD THE jQuery PLUGIN -->
<script type="text/javascript" src="jquery-1.7.2.min.js" ></script>
<script type="text/javascript">
	// WAIT FOR THE SKELETTON OF THE PAGE TO BE LOADED
	// THIS DOESN'T WAIT FOR THE COMPLETE LOADING OF IMAGES FOR EXAMPLE
	$(document).ready(function () {
		// SET WIDTH OF A DIV WITH THE WINDOW/PAGE WIDTH
		$("#divGrid").width($(window).width());
		// CALL THE FUNCTION "ShowHideActions"
		ShowHideActions();
	});
	// DECLARE THE FUNCTION "ShowHideActions"
	function ShowHideActions() {
		// IF THE CURRENT VALUE OF THE DROPDOWN BOX WITH THE ID "ddlReportType" IS "Report3" 
		if($('#ddlReportType').val() == 'Report3') {
			// HIDE THE SET OF BUTTONS IN A DIV WITH ID "divButtons"
			$('#divButtons').css('display', 'none');
		}
		// ELSE IF THE CURRENT VALUE OF THE DROPDOWN BOX WITH THE ID "ddlReportType" IS NOT "Report3"
		else {
			// DISPLAY THE SET OF BUTTONS IN A DIV WITH ID "divButtons"
			$('#divButtons').css('display', '');
		}
	}
</script>
<script src="/path/to/jquery.js"></script>
<script>
	jQuery(function($) {
		// DECLARE A FUNCTION "callback" WHICH BASICALLY ONLY DISPLAY AN ALERT BOX WITH "div resized and opacity changed!"
		function callback() { 
			// ALERT "div resized and opacity changed!"
			alert("div resized and opacity changed!"); 
		};
		// CREATE AN ANIMATION OF THE DIV WITH ID "my_div_ID"
		// THIS ANIMATION CHANGE THE HEIGHT AND OPACITY IN 400ms 
		// https://api.jquery.com/animate/
		// ONCE THE ANIMATON IS ENDED RUN THE "callback" FUNCTION
		$("#my_div_ID").animate({height:10, opacity:.5}, callback);
	});
</script>

Open in new window

0
 
IdaracAuthor Commented:
You both put in a great explanation. I had to flip coin for best solution.
0

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now