Solved

Javascript jquery code explained

Posted on 2014-04-09
3
429 Views
Last Modified: 2014-04-09
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
Comment
Question by:Idarac
3 Comments
 
LVL 30

Accepted Solution

by:
Alexandre Simões earned 250 total points
ID: 39988957
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
 
LVL 82

Assisted Solution

by:leakim971
leakim971 earned 250 total points
ID: 39988968
<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
 
LVL 1

Author Closing Comment

by:Idarac
ID: 39989481
You both put in a great explanation. I had to flip coin for best solution.
0

Featured Post

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now