Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
Articles on Trending Technologies
Technical articles with clear explanations and examples
What is difference between innerWidth and outerWidth in jQuery?
innerWidth in jQueryThe innerWidth() returns the inner width of the first matched element. It includes padding, but not border and margin.ExampleYou can try to run the following code to get the inner width in jQuery: $(document).ready(function(){ $("button").click(function(){ alert("Inner Width of div element: " + $("div").innerWidth()); }); }); Get Inner Width of div outerWidth in jQueryThe outerWidth() returns the outer width of the first matched element. It includes padding and border.ExampleYou can try to run the following code to get ...
Read MoreWhat is the difference between width and innerWidth in jQuery?
Width in jQueryThe width is the horizontal measurement of the container, for example, width of a div. It excludes the padding, border, or margin.ExampleYou can try to run the following code to learn how to get the width of an element in jQuery: $(document).ready(function(){ $("button").click(function(){ alert("Width of div element: " + $("div").width()); }); }); Get Width of div innerWidth in jQueryThe innerWidth() returns the inner width of the first matched element. It includes padding, but not border and margin.ExampleYou can try ...
Read MoreWhat is the difference between break with a label and without a label in JavaScript?
Break without labelThe break statement is used to exit a loop early, breaking out of the enclosing curly braces. The break statement exits out of a loop. ExampleLet’s see an example of break statement in JavaScript without using label − var x = 1; document.write("Entering the loop "); while (x < 20) { if (x == 5){ break; // breaks out of ...
Read MoreWhat is the difference between jQuery.offsetParent( ) and \\\\\\\\njQuery.offset( ) in jQuery?\\\\\\\\n
jQuery.offsetParent( ) methodThe offsetParent( ) method returns a jQuery collection with the positioned parent of the first matched element.This is the first parent of the element that has position (as in relative or absolute). This method only works with visible elements.ExampleYou can try to run the following code to learn how to work with jQuery.offsetParent() and jQuery.parent() methods in jQuery − jQuery offsetParent() method $(document).ready(function() { ...
Read MoreWhat is onclick event in JavaScript?
The onClick event is the most frequently used event type, which occurs when a user clicks the left button of the mouse.ExampleYou can put your validation, warning etc., against this event type. Click the following button and see result
Read MoreHow to scroll to element in horizontal div using jQuery?
To scroll to element in horizontal div, use the scrollleft.ExampleYou can try to run the following code to learn how to scroll to element in jQuery: jQuery Scroll $(document).ready(function(){ document.addEventListener('DOMContentLoaded', function () { var frames = document.getElementById('frames'); frames.addEventListener('click', function (e) { if (e.target.classList.contains('item')) { e.target.parentNode.scrollLeft = e.target.offsetLeft; } }); }); }); .myclass { width: 300px; display: flex; position: relative; overflow-x: scroll; } .item { width: 400px; background: #FFB563; margin-right: 40px; } demo1 demo2 demo3 demo4 demo5 demo6 demo7 demo8
Read MoreHow to position horizontal scroll bar at center of DIV?
To position horizontal scroll bar at center of div, use the scrollleft. You can try to run the following code to position horizontal scroll bar in div.ExampleThe scroll bar is positioned at center of div: jQuery Scroll $(document).ready(function(){ $(document).ready(function(){ var outerContent = $('.demo'); var innerContent = $('.demo > div'); outerContent.scrollLeft( (innerContent.width() - outerContent.width()) / 2); }); }); html, body, div { margin:0; padding:0; } .demo { width:400px; overflow-x:scroll; } #viewContainer { height:120px; width:1000px; display:table; } .myclass { width:250px; height:100%; display:table-cell; border:2px solid blue; } Far left left center right Far right
Read MoreWhat is the lifetime of JavaScript variables?
The lifetime of a JavaScript variable begins when it is declared −var rank;A local variable will be visible only within a function where it is defined. Function parameters are always local to that function.The completion of a function deletes the local variable.A global variable has a global scope which means it can be defined anywhere in your JavaScript code. Global variables delete when the web browser is closed. However if a new page is loaded in the same browser window, then it remains.Here’s the usage of global variables −ExampleYou can try to run the following code to learn how to ...
Read MoreHow to animate scrollLeft using jQuery?
To animate scrollLeft using jQuery, use the animate() method with scrollLeft.ExampleYou can try to run the following code to learn how to animate scrollLeft using jQuery: $(document).ready(function(){ $('#scrollme').click(function() { $('html,body').animate({ scrollLeft: $('#demo').css('left') }, 500, function() { $('html, body').animate({ scrollLeft: 0 }, 500); }); }); }); #demo { width: 100px; height: 100px; background: green; position: relative; left: 800px; } Click to scroll left
Read MoreHow to handle jQuery AJAX success event?
To handle jQuery AJAX success event, use the ajaxSuccess() method. The ajaxSuccess( callback ) method attaches a function to be executed whenever an AJAX request completes successfully. This is an Ajax Event.Here is the description of all the parameters used by this method −callback − The function to execute. The event object, XMLHttpRequest, and settings used for that request are passed as arguments to the callback.Let’s say we have the following HTML content in result.html −THIS IS RESULT...ExampleThe following is an example showing the usage of this method −Live Demo jQuery ajaxSuccess() method ...
Read More