Toggle navigation
Home
Tools
Online URL Slug Generator
Online Text Case Converter
Online Encrypt & Decrypt
Encode & Decode HTML Entities Online
Try It Editor for HTML, CSS and Javascript
About
Contact
x
This domain is for sale. If you intrested, Please contact : webspeckle@gmail.com
Expand div to full screen
Here we are showing how to expand a div to full screen. See the demo and do it.
Sample code and demo is here
<!DOCTYPE html><html><head><title>Online HTML Editor - webspeckle.com</title><style>#div-to-expand.fullscreen { z-index: 9999; width: 100%; height: 100%; position: fixed; top: 0; left: 0; } #div-to-expand { background:#666666; width:500px; height:400px; } button { float:right; } </style><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script></head><body><h4>Expand div to full screen</h4><div id="div-to-expand"><button>Maximize</button></div><script>$('button').click(function(e) { $('#div-to-expand').toggleClass('fullscreen'); $('#div-to-expand').hasClass("fullscreen") ? $(this).text("Minimize") : $(this).text("Maximize"); }); </script></body></html>
Demo
Related Posts
What are the removed elements in HTML5?
How to download file when clicking on the link?
Bootstrap model with jquery ui dialog occur a max callstack size exceeded error
Search and get the postion of an element in jquery
Load a JavaScript file dynamically
Encode a set of form elements as a string for submission
How to create a modal dialog in bootstrap?
How to add required indication(*) in bootstrap form?
Email This
BlogThis!
Share to X
Share to Facebook
Share to Pinterest
No comments:
Post a Comment
Newer Post
Home
Older Post
Subscribe to:
Post Comments (Atom)
Try It Editor for HTML, CSS & JS
Blog Archive
▼
2018
(10)
►
August
(2)
▼
June
(3)
Laravel ClassLoader trying to load an old version ...
Expand div to full screen
Bootstrap model with jquery ui dialog occur a max ...
►
May
(2)
►
April
(3)
►
2017
(102)
►
August
(16)
►
July
(34)
►
June
(27)
►
May
(25)
Tags
JavaScript
(47)
jQuery
(27)
Definition
(10)
HTML
(9)
Qt
(8)
Bootstrap
(7)
PHP
(7)
Java
(6)
Blogger
(5)
Laravel
(5)
jQuery UI
(5)
Spring Boot
(4)
C
(2)
C++
(2)
CSRF
(2)
CSS
(2)
Chart
(2)
GIMP
(2)
Google Map
(2)
Spring Security
(2)
Youtube
(2)
Adsense
(1)
Ajax
(1)
Comparison
(1)
Electronics
(1)
WebSocket
(1)
Popular Posts
Search a string in JavaScript
The indexOf() method returns the position of the first occurrence of a specified string value in a string. stringObject.indexOf(searchvalue...
How do I know if a variable is an array?
Creating a sample array. var fruits = ["Banana", "Orange", "Apple", "Mango"]; Method 1: Array.isArra...
How to create Pie chart in JavaScript?
Pie chart is a type of graph in which a circle is divided into sectors that each represent a proportion of the whole. Pie charts are very wi...
Form validation using JavaScript
Parsley is a javascript form validation library. It helps you provide your users with feedback on their form submission before sending it t...
How to change jquery ui dialog overlay style
Jquery UI dialog which is useful for displaying information. You can fully customize this dialog. Here we explain how to change the style of...
Laravel Validation Rules
Laravel provides several different approaches to validate your application's incoming data. By default, Laravel's base controller cl...
Remove all matching characters from a string using C language
Here i writing a function named void_RemoveAllChars() and is used for removing all matching characters from the given string. void RemoveAll...
Split a string into an array of strings in JavaScript
Definition and Usage The split() method is used to split a string into an array of strings. Syntax stringObject.split(separator, howmany) s...
Get value of a number rounded upwards
The ceil() method returns the value of a number rounded UPWARDS to the nearest integer. Math.ceil(x) 'x' is required and should be a...
How to add border to text in GIMP?
Contact Form
Name
Email
*
Message
*
Our website is made possible by displaying online advertisements to our visitors. Please consider supporting us by disabling your ad blocker OR whitelist
*.webspeckle.com
in your adblock settings.
No comments:
Post a Comment