height


Script to remove element while clientHeight < “size”


i'm wondering to make a script that dynamically removes a html element while the clientHeight < 600 px but rebuild it if it's >600px.
if (document.documentElement.clientHeight < 600) {
$(".section-intro").remove();
}
this is working so far but i want it to rebuild the removed element when the clientHeight is superior to 600px.
Could i use while else instead of if ?
Using CSS3 #media Rule
<!DOCTYPE html>
<html>
<head>
<style>
#media (max-height: 600px) {
.section-intro {
display: none;
}
}
</style>
</head>
<body>
<div> Test 1 </div>
<div class="section-intro" > Test 2 </div>
<div> Test 3 </div>
</body>
</html>
Using JavaScript
First create function, that will adjust visibility of HTML element. Secondly register that function as callback function with $(document).ready( func ) and with $(window).resize( func ). This way your function will be called both when DOM is fully loaded, and when browser window is resized.
Here you have full working example of this:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script>
function recalculateVisibility(jQuery) {
if (document.documentElement.clientHeight < 600)
$(".section-intro").hide();
else
$(".section-intro").show();
}
$(document).ready(recalculateVisibility);
$(window).resize(recalculateVisibility);
</script>
</head>
<body>
<div> Test 1 </div>
<div class="section-intro" > Test 2 </div>
<div> Test 3 </div>
</body>
</html>

Related Links

FontForge how to get height of contour in script
how to set another elemtnt's height based on slider height in this context
Classic asp control character height in dropdown
Auto adjust row height to max height value
How to calculate Height of any control which is loaded in DataTemplate?
Xamarin Forms - Get the size of an AbsoluteLayout
Amcharts : small (sometimes 0px) chart height on page load (in default tab)
Spacing between 2 lines HTML/ PHP and CSS
How to change embedly height
Cell/Row heightand vertical align in PhpWord
How to make 2 divs to fill 100% viewport height
Script to remove element while clientHeight < “size”
how to auto-adjust App.js textarea height to fill the remainder of screen?
How to get my PDF with a dynamic height? Or calculate the height of contents before it is printed
Java Binary Tree Height
OpenRTB bid creative's dimensions

Categories

HOME
angular-cli
amazon-swf
rotation
angular2-routing
fparsec
formal-verification
ubuntu-12.04
apache2
recyclerview
snap.svg
bro
apiconnect
android-viewpager
wicket
xamarin-studio
wysiwyg
mod-pagespeed
aspell
yeoman-generator
device-detection
tweets
url.action
memsql
jquery-scrollify
qsub
logarithm
pdfsharp
image-quality
system.data.sqlite
google-api-dotnet-client
configure
entity-system
construct-2
hawtio
geopy
pycparser
reactivemongo
windows-10-iot-core
npm-publish
ddms
estimation
tuleap
webdatagrid
jgraph
tcserver
pagefile
build-process
inject
pdflib
c#-interactive
boost-hana
mongoskin
kendo-combobox
logcat
portfolio
geodjango
intellitest
rad
textkit
js-cookie
criteria-api
apache-mina
java-melody
cocoascript
qtestlib
google-admin-audit-api
java-collections-api
humanizer
dache
adaptive-compression
argument-passing
neoload
factors
visual-c++-2010-express
goinstant
magickwand
objcmongodb
snapjs
gdataxml
transitive-closure-table
bulbs
mvccontrib
usn
xgettext
objective-c-protocol
nsindexpath
webkit-transform
datamember
out-of-browser
svn-hooks
osx-leopard
task-management
gwt-2.2-celltable
idictionary

Resources

Mobile Apps Dev
Database Users
javascript
java
csharp
php
android
MS Developer
developer works
python
ios
c
html
jquery
RDBMS discuss
Cloud Virtualization
Database Dev&Adm
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App