- Trending Categories
- Data Structure
- Networking
- RDBMS
- Operating System
- Java
- MS Excel
- iOS
- HTML
- CSS
- Android
- Python
- C Programming
- C++
- C#
- MongoDB
- MySQL
- Javascript
- PHP
- Physics
- Chemistry
- Biology
- Mathematics
- English
- Economics
- Psychology
- Social Studies
- Fashion Studies
- Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Found 8895 Articles for Front End Technology
How to horizontally center a in another
Updated on 22-Dec-2021 06:36:55
216 Views
Here I have one html form and one css file(style.css).”o-div” is the outer div and “i-div“is the inner div class.Example
center a div
I am OUTER DIV
I am INNER DIV,
I am in Center
OutputI am OUTER DIV
I am INNER DIV, I am in CenterStyle.cssbody {
background-color:Gray;
padding:30px;
}
.o-div {
padding:50px;
background-color:Lime;
}
.i-div {
background-color:Fuchsia;
max-width:400px;
height:200px;
margin: 0 auto;
text-align:center;
}
216 Views
Here I have one html form and one css file(style.css).”o-div” is the outer div and “i-div“is the inner div class.Example center a div I am OUTER DIV I am INNER DIV, I am in Center OutputI am OUTER DIV I am INNER DIV, I am in CenterStyle.cssbody { background-color:Gray; padding:30px; } .o-div { padding:50px; background-color:Lime; } .i-div { background-color:Fuchsia; max-width:400px; height:200px; margin: 0 auto; text-align:center; }
1K+ Views
To set the content of an iframe without src, use the jQuery html() method. You can try to run the following code to learn how to set the content of an iframe without src attribute −ExampleLive Demo jQuery Selector $(document).ready(function() { var context = $('iframe')[0].contentWindow.document; var $body = $('body', context); $body.html('Hello World!'); });
88 Views
To get the children of the $(this) selector, use the jQuery find() method. You can try to run the following code to get the children of the $(this) selector −ExampleLive Demo jQuery Example $(document).ready(function(){ $('#mydiv').click(function(){ alert($(this).find('img:last-child').attr('src')); }); }); #my_div { width: 200px; height: 200px; background-color: red; }
570 Views
To center a div on the screen, use the jQuery centering function jQuery.fn.center. You can try to run the following code to learn how to center a div on the screen:ExampleLive Demo $(document).ready(function(){ jQuery.fn.center = function(parent) { if (parent) { parent = this.parent(); } else { parent = window; } this.css({ "position": "absolute", "top": ((($(parent).height() ... Read More
11K+ Views
You can use .is(‘:visible’) selects all elements that are visible.Example divvisible $(document).ready(function () { $("button").click(function () { var dim = $('#div1').is(":visible"); if (dim == false) { $('#div1').css({ "display": "block", "color": "red" }); } }); }); Div is visible Click Here
600 Views
To count number of columns in a table with jQuery, use the each() function with attr(). You can try to run the following code to learn how to count column in a table:EaxmpleLive Demo jQuery Example $(document).ready(function(){ var num = 0; $('tr:nth-child(1) td').each(function () { if ($(this).attr('colspan')) { num += +$(this).attr('colspan'); } else { num++; } }); alert("Total Columns= "+num); }); -1st column- -2nd column- -3rd column-
1K+ Views
Example Live Demo table table,th,td { border:2px solid black; margin-left:400px; } h2 { margin-left:400px; } button { margin-left:400px; } $(document).ready(function () { $("button").click(function () { var rowcount = $('table tr').length; alert("No. Of Rows ::" +rowcount); }); }); HTML TABLE NAME AGE DD 35 SB 35 AD 5 AA 5 Click Here
869 Views
To check if table row exists or not, use the is() method, with the :visible selector −if($(".row").is(":visible")) { alert("Visible!"); }You can try to run the following code to learn how to chck if a row exists or not. It even notifies when a new row is created −ExampleLive Demo jQuery - Add Table Rows table{ width: 100%; margin: 25px 0; border-collapse: collapse; } table, th, td{ border: 1px solid #6C220B; } table th, table td{ padding: 8px; text-align: left; } ... Read More
5K+ Views
To call a jQuery function after a certain delay, use the siteTimeout() method. Here, jQuery fadeOut() function is called after some seconds.You can try to run the following code to learn how to work with setTimeout() method in jQuery to call a jQuery function after a delay −ExampleLive Demo $(document).ready(function(){ $("#button1").bind("click",function() { setTimeout(function() { $('#list').fadeOut();}, 2000); }); }); Voice Speak Write The above content will fade out after 2 seconds
3K+ Views
To make a jQuery function call after “X” seconds, use the siteTimeout() method.On button click, set the following and fade out the element. Here, we have also set the milliseconds. This is the delay that would occur before fading an element:$("#button1").bind("click",function() { setTimeout(function() { $('#list').fadeOut();}, 4000); });You can try to run the following code to learn how to work with setTimeout() method in jQuery:Example Live Demo $(document).ready(function(){ $("#button1").bind("click",function() { setTimeout(function() { $('#list').fadeOut();}, 4000); }); }); India US UK The above data will fade out after 4 seconds