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
-
Economics & Finance
Articles by David Meador
Page 9 of 12
What is the difference between jQuery.hide() and jQuery.remove() methods in jQuery?
jQuery.hide()If you want to hide an element, then use the hide() method to hide the selected element.ExampleYou can try to run the following code to learn how to work with jQuery.hide() method using jQuery: $(document).ready(function(){ $(".button1").click(function(){ $("p").hide(); }); $(".button2").click(function(){ $("p").show(); }); }); Hide the element Show the element This is demo text. jQuery.remove()The remove() method will remove the selected elements, but it also includes the text and child nodes.ExampleYou can try to run the ...
Read MoreWhat is the difference between jQuery.empty() and jQuery.remove() methods in jQuery?
jQuery.empty()The empty() method removes all child nodes from the set of matched elements.ExampleYou can try to run the following code to learn how to work with jQuery empty() method: jQuery empty() method $(document).ready(function() { $("div").click(function () { $(this).empty(); }); }); ...
Read MoreExplain jQuery.append(), jQuery.prepend(), jQuery.after() and jQuery.before() methods.
jQuery.append()The append( content ) method appends content to the inside of every matched element. Here is the description of all the parameters used by this method −content − Content to insert after each target. This could be HTML or Text contentExampleYou can try to run the following code to learn how to work with jQuery.append() method: jQuery append() method $(document).ready(function() { $("div").click(function () { $(this).append('' ); ...
Read MoreBootstrap .modal("toggle") method
Use the .modal(“toggle”) method in Bootstrap to toggle the modal.As shown below, the modal generates on the click of a button −$(document).ready(function(){ $("#button1").click(function(){ $("#newModal").modal("toggle"); }); });Here is the button used above − Modal One You can try to run the following code to implement the modal(“toggle”) method −Example Bootstrap Example Sample Modal One × Sample Modal Click outside to close it. Close $(document).ready(function(){ $("#button1").click(function(){ $("#newModal").modal("toggle"); }); });
Read MoreContainer to create a grid of Bootstrap 4 cards like a group
To set a container for Bootstrap card and set it like a group, use the card-group class.Use it and create a grid like the following with two Bootstrap cards − Demo Text! Warning! The following is an example to create a grid (group of cards) in Bootstrap −Example Bootstrap Example Group of Messages Demo Text! Warning! Well done! Selected!
Read MoreSet a dark border to an element in Bootstrap
If you want to set a dark border to an element, use the border-dark class.Spot the difference between a normal border and dark border −To add a dark border, you need to simply add it like any other class in div as shown below − Dark Border Above, the test is the CSS style, I have used to style my rectangle (div) −.myclass { width: 150px; height: 150px; margin: 35px; }Let us see how to work with the border-dark class in Bootstrap 4 −Example Bootstrap Example ...
Read Moreborder-info class in Bootstrap 4
Use the border-info class in Bootstrap, to set a border that indicates information. Set the class as if you use any other class in Bootstrap: Details Above, we added border-info class. Another class, “one” is used to give shape to the div element −.one { width: 180px; height: 180px; margin: 55px; }You can try to run the following code to implement the border-info class on a rectangle −Example Bootstrap Example .one { width: 180px; height: 180px; margin: 55px; } Rectangle with a border to set information: Details
Read MoreAlign an element with the bottom of the parent element's font in Bootstrap 4
Use align-text-bottom class to align an element with the bottom of the parent element's font.You need to set the align-text-bottom class as shown below − Bottom Text You can try to run the following code to implement the align-text-bottom class in Bootstrap 4 −Example Bootstrap Example Example This is demo text Demo Baseline Top Alignment Top Text Bottom Text
Read MoreAlign gathered items "around" in Bootstrap 4
Use .align-content-around class to align gathered items "around" in Bootstrap 4.The align-content-around class is set like the below code snippet −After that add the flex items − One Two Three Four Let us see an example to align gathered items around −Example Bootstrap Example Example This is demo text One Two Three Four Five Six Seven Eight Nine Ten Eleven Twleve Thirteen Fourteen
Read MoreDisplay flex items vertically on different screen sizes in Bootstrap 4
To show flex items vertically on different screen sizes, use the flex-*- column class. For small, medium and large screen sizes, use it as −For Small screen size −For Medium screen size −For Large screen size −Let us see an example to learn how to set flex items vertically on different screen sizes −Example Bootstrap Example Example Note: Change the browser size to see the effect. Default One Two Three Flex on differet screen size (Medium) One Two Three Flex on differet screen size (Large) One Two Three
Read More