I would like to have a site with a webgl background to a transparent site.
What would be the safest way to achieve this given the various states of browsers?
I think you just want to make a canvas and set it's CSS so fills the background
<!DOCTYPE html>
<html>
<head>
<style>
/* make the canvas fill the page and not scroll */
#c {
position: fixed;
left: 0px;
top: 0px;
z-index: -10;
width: 100vw;
height: 100vh;
}
/* remove the margin on the body so the canvas goes to the edge */
body {
margin: 0;
}
/* make a new body with standard margins */
#body {
margin: 8px;
}
</style>
</head>
<body>
<canvas id="c"></canvas>
<div id="body">
<!-- insert rest of html here -->
</div>
</body>
</html>
Then just make sure the canvas is the correct size
var canvas = document.getElementById("c");
var gl = canvas.getContext("webgl");
// make the canvas match the size it's displayed.
var resize = function() {
var width = gl.canvas.clientWidth;
var height = gl.canvas.clientHeight;
if (gl.canvas.width != width || gl.canvas.height != height) {
gl.canvas.width = width;
gl.canvas.height = height;
}
};
var render = function() {
resize();
gl.clearColor(1, Math.random() * 0.2 + 0.8, 1, 1);
gl.clear(gl.COLOR_BUFFER_BIT);
// insert rendering code here
requestAnimationFrame(render);
};
render();
This example just clears the canvas (simplest example). Here's a snippet
var canvas = document.getElementById("c");
var gl = canvas.getContext("webgl");
var resize = function() {
var width = gl.canvas.clientWidth;
var height = gl.canvas.clientHeight;
if (gl.canvas.width != width || gl.canvas.height != height) {
gl.canvas.width = width;
gl.canvas.height = height;
}
};
var render = function() {
resize();
gl.clearColor(1, Math.random() * 0.2 + 0.8, 1, 1);
gl.clear(gl.COLOR_BUFFER_BIT);
requestAnimationFrame(render);
};
render();
#c {
position: fixed;
left: 0px;
top: 0px;
z-index: -10;
width: 100vw;
height: 100vh;
}
body {
margin: 0;
}
#body {
margin: 8px;
}
<canvas id="c"></canvas>
<div id="body">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec gravida est, nec fermentum metus. Suspendisse congue ante elit, vitae accumsan quam convallis nec. Integer sodales, nibh id ultricies hendrerit, risus lacus varius ligula, quis porta nulla massa sit amet quam. Praesent posuere vulputate nunc, ac convallis nulla consectetur eget. Vestibulum eu dapibus justo. Aenean ac venenatis sem. Nullam porta, augue at egestas pretium, diam metus suscipit eros, eu eleifend quam diam in lacus. Fusce accumsan sem in placerat blandit. Nulla eget hendrerit lorem, at semper leo. Duis non commodo tellus.
</p><p>
Sed feugiat velit vel ipsum fermentum, a scelerisque dolor tincidunt. Vestibulum id odio ultrices metus consectetur vehicula. Nulla vitae metus sagittis mauris commodo euismod. In erat dui, vehicula in consectetur ut, mollis at dui. Vestibulum vulputate est eu tellus egestas ullamcorper. Aenean ut ligula lacinia, cursus est vitae, placerat nulla. Sed suscipit rutrum dolor, vitae feugiat orci eleifend in. Proin sit amet nisl purus. Curabitur eget sem nunc. Suspendisse a mattis libero, in bibendum purus. Pellentesque semper eros tincidunt libero aliquam, eget placerat dui consequat. Suspendisse potenti. Sed sed imperdiet metus, non rutrum tellus. Nunc egestas nec libero sodales interdum.
</p><p>
Quisque ultricies, enim ornare euismod vestibulum, neque velit volutpat magna, eget interdum leo nisl in leo. Cras tempor odio ut magna iaculis, at fermentum nulla semper. Etiam laoreet hendrerit gravida. Sed sit amet luctus nibh, sed sodales neque. Nunc varius fringilla nisl, sodales adipiscing sem gravida sed. Etiam ac suscipit turpis. Sed luctus adipiscing ipsum, et facilisis diam pulvinar eu. Etiam blandit id ante viverra varius. Vestibulum tincidunt nisi at velit tempor facilisis. Aenean bibendum fringilla dolor ac tincidunt. Nam facilisis vestibulum augue ut ultricies. Nam suscipit odio non orci lobortis, vitae porttitor purus ultricies. Aliquam egestas neque at lorem aliquam, ut vestibulum libero viverra.
</p><p>
Donec sed feugiat sapien. Cras vitae porta lorem. Pellentesque in enim eu elit vulputate laoreet. Sed non placerat velit. Mauris luctus est auctor, vestibulum orci a, vulputate nunc. Nunc suscipit, ante sit amet porttitor lacinia, dolor augue consectetur augue, ac auctor dui eros non est. Duis scelerisque eget sapien ac scelerisque. Aliquam et tellus ornare, facilisis sem a, luctus est. Aliquam vitae facilisis est. Ut tempor justo urna. Nam commodo eros nisl, sit amet interdum nunc ultrices vestibulum. Integer ac imperdiet purus, eu sodales massa. Donec in sollicitudin purus. Aenean at cursus nulla.
</p><p>
Integer id eleifend tortor. Maecenas id turpis vel sapien consequat blandit. Pellentesque at facilisis tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam tortor purus, sagittis ut faucibus sed, facilisis quis tortor. Aliquam tincidunt mi at ipsum congue varius.
</p>
</div>
I am using a classical website that is partially transparent and has a WebGL background, http://www.taccgl.org/. I had no real problems with various web browsers (testing myself on windows) and currently have no complaints, but of course IE<11 and various mobile browsers just don’t support WebGL. Problems are however with various devices that do not support WebGL at all or that do not provide the required performance for a full screen 3D canvas. So I found it necessary to monitor performance and to possibly disable WebGL or to resize the canvas. To keep the 3D canvas small it should cover only the visible part of the page, which means that upon scroll and resize the canvas position and size needs to be adapted. A good way in my opinion would be to use my open source library (when it is out of beta), but here I am biased of course.
Related
I'd like to use a tablesorter table inside the main (center) panel of a jquery layout panel. The width of the table works fine but getting the table to occupy the available height is not so obvious.
I have a basic example working below based on some trial and error, this is based on setting the max-height property of the tablesorter-scroller-table. It kind of works but gives unpredictable results; sometimes the table height is exactly that of the allowable height and sometimes there's a margin of up to 100 or so pixels.
Is there a more reliable and elegant way to tell the table to occupy the available vertical space?
<!DOCTYPE html>
<html>
<head>
<!--
-- Based on scroller widget demo at
-- http://mottie.github.io/tablesorter/docs/example-widget-scroller.html
--
-->
<meta charset="utf-8">
<title>Scroller Widget Test</title>
<script src="js/jquery.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/prettify.js"></script>
<script src="js/docs.js"></script>
<script src="js/jquery-layout.js"></script>
<script src="tablesorter/js/jquery.tablesorter.js"></script>
<script src="tablesorter/js/jquery.tablesorter.widgets.js"></script>
<script src="tablesorter/js/widgets/widget-scroller.min.js"></script>
<link class="ui-theme" rel="stylesheet" href="css/jquery-ui.css">
<link rel="stylesheet" href="css/jq.css">
<link href="css/prettify.css" rel="stylesheet">
<link href="css/layout-default-latest.css" rel="stylesheet">
<link class="theme blue" rel="stylesheet" href="tablesorter/css/theme.blue.min.css">
<style id="css">
#fixed-columns-table tbody td {
/* force "Notes" column to not wrap, so we get a horizontal scrolling demo! (optional css) */
white-space: nowrap;
/* Add min column width, or "Index" column filter gets too narrow to use (optional css) */
min-width: 60px;
}
</style>
<script id="js">
$(function(){
$('#fixed-columns-table').tablesorter({
theme: 'blue',
widgets: ['scroller', 'zebra'],
widgetOptions : {
scroller_height : 200,
scroller_fixedColumns : 2
}
});
$('body').layout({
applyDefaultStyles: false,
north: {
resizable: false
},
south: {
resizable: false
}
});
adjustHeight();
});
function adjustHeight() {
var h = $("#mainAppArea").height();
var heightOffset = 150; // Trial and error
var newHeight = parseInt(h)-heightOffset;
$(".tablesorter-scroller-table").css({
height: '',
'max-height': newHeight + 'px'
});
$("#feedback").text("Got app height: " + h + ", set max-height to " + newHeight + "px");
}
</script>
</head>
<body onresize="adjustHeight()">
<div class="ui-layout-north no-print">
The Header
</div>
<div class="ui-layout-west no-print" style="padding: 0;">
The side menu
</div>
<div class="ui-layout-center" id="mainAppArea" style="overflow: hidden;">
<table id="fixed-columns-table">
<thead>
<tr>
<th>Index</th>
<th>First Name</th>
<th>Last Name</th>
<th>ID</th>
<th>Address</th>
<th>State</th>
<th>Zip</th>
<th>Telephone</th>
<th>Email</th>
<th>Notes</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Index</th>
<th>First Name</th>
<th>Last Name</th>
<th>ID</th>
<th>Address</th>
<th>State</th>
<th>Zip</th>
<th>Telephone</th>
<th>Email</th>
<th>Notes</th>
</tr>
</tfoot>
<tbody>
<tr><td>1</td><td>Sherry</td><td>Mills</td><td>223</td><td>3792 Sit Rd</td><td>NE</td><td>69836</td><td>(627) 124-8760</td><td>DRamirez#massa.ly</td><td>sagittis amet mattis facilisis vitae molestie nec dolor id sed</td></tr>
<tr><td>2</td><td>Markella</td><td>Lessenberry</td><td>895</td><td>5979 Sit Ln</td><td>VA</td><td>97761</td><td>(768) 233-5399</td><td>SPeltier#pulvinar.net</td><td>elementum nullam lacus elit magna libero sed dolor pulvinar orci</td></tr>
<tr><td>3</td><td>Lee</td><td>Trenkelbach</td><td>719</td><td>5656 Adipiscing Ave</td><td>ID</td><td>30972</td><td>(149) 293-0691</td><td>LSheppard#lectus.net</td><td>vestibulum at rutrum molestie convallis vestibulum nec egestas consequat vitae</td></tr>
<tr><td>4</td><td>Sherrye</td><td>Llc</td><td>908</td><td>2348 Pharetra St</td><td>UT</td><td>50740</td><td>(772) 682-4268</td><td>MAltar#turpis.io</td><td>sit elit consequat amet elit consectetur vestibulum vel quis consequat</td></tr>
<tr><td>5</td><td>Juanito</td><td>Lindall</td><td>534</td><td>5181 Lacus Ln</td><td>ID</td><td>71689</td><td>(528) 174-6999</td><td>CKeen#augue.ly</td><td>dui porttitor vestibulum mattis ipsum nunc et morbi dolor ipsum</td></tr>
<tr><td>6</td><td>Andre</td><td>Fuller</td><td>716</td><td>8224 Pulvinar Ave</td><td>WY</td><td>12382</td><td>(654) 593-0007</td><td>AMelvin#sed.net</td><td>dolor curabitur nec molestie lacus odio id velit sed neque</td></tr>
<tr><td>7</td><td>Sajid</td><td>Cattanach</td><td>997</td><td>3762 Ac Rd</td><td>WA</td><td>16719</td><td>(425) 909-2771</td><td>BMaas#ac.org</td><td>morbi tincidunt ac sollicitudin nec ac orci vitae donec non</td></tr>
<tr><td>8</td><td>Heidi</td><td>Rush</td><td>738</td><td>1425 Porta Rd</td><td>SD</td><td>14708</td><td>(341) 095-7183</td><td>DSchrag#sapien.net</td><td>nullam sed aliquam turpis et sagittis libero sed tellus dui</td></tr>
<tr><td>9</td><td>Ganesh</td><td>Comeau</td><td>385</td><td>2641 Hendrerit Dr</td><td>MT</td><td>66612</td><td>(201) 977-9765</td><td>SBurks#ipsum.ly</td><td>sit vestibulum ac pretium eget augue sit augue sagittis tellus</td></tr>
<tr><td>10</td><td>Regine</td><td>Marina</td><td>479</td><td>6204 Ac Rd</td><td>WI</td><td>55667</td><td>(824) 223-9924</td><td>VPeschke#pharetra.org</td><td>amet fringilla vitae tortor vestibulum egestas eget eget amet sed</td></tr>
<tr><td>11</td><td>Wichaya</td><td>Thomas</td><td>487</td><td>861 Risus Dr</td><td>KY</td><td>63224</td><td>(599) 823-8970</td><td>BMohamed#adipiscing.ly</td><td>placerat dolor pulvinar nec morbi amet porta sagittis lacus magna</td></tr>
<tr><td>12</td><td>Douglass</td><td>Holliday</td><td>488</td><td>8829 Sit Ave</td><td>IA</td><td>86970</td><td>(113) 897-8276</td><td>CLieb#convallis.io</td><td>dolor magna id amet lorem eros ipsum magna non aliquam</td></tr>
<tr><td>13</td><td>Prince</td><td>Schwartzberg</td><td>790</td><td>1757 Sit Ct</td><td>IL</td><td>94739</td><td>(299) 471-3039</td><td>DFavus#quis.org</td><td>magna tincidunt ipsum hendrerit ac vitae tortor consequat magna elit</td></tr>
<tr><td>14</td><td>Lola</td><td>Hensley</td><td>486</td><td>8159 Dui Rd</td><td>MN</td><td>88877</td><td>(788) 031-7392</td><td>MBradley#scelerisque.org</td><td>suspendisse donec placerat nec suspendisse lacus ipsum elementum at lorem</td></tr>
<tr><td>15</td><td>Dainius</td><td>Finn</td><td>355</td><td>6072 Massa Dr</td><td>VT</td><td>75787</td><td>(638) 345-2650</td><td>MWilcox#velit.ly</td><td>morbi pretium dui dolor elit sed non vestibulum sit dui</td></tr>
<tr><td>16</td><td>Aisha</td><td>Schuhmann</td><td>328</td><td>9709 Sagittis Ln</td><td>ND</td><td>44161</td><td>(147) 281-5251</td><td>GDech#mi.com</td><td>massa sed placerat libero egestas at massa sagittis libero orci</td></tr>
<tr><td>17</td><td>Maria</td><td>Peacock</td><td>269</td><td>2241 Amet Ave</td><td>MO</td><td>81339</td><td>(656) 079-5964</td><td>POliva#tincidunt.org</td><td>ac hendrerit molestie ipsum facilisis massa odio fringilla hendrerit neque</td></tr>
<tr><td>18</td><td>Otilia</td><td>Denbesten</td><td>778</td><td>1965 Nunc Ct</td><td>SC</td><td>98692</td><td>(985) 745-0452</td><td>SWieber#porttitor.net</td><td>aliquam orci odio id ac magna magna aenean sagittis lectus</td></tr>
<tr><td>19</td><td>Jian</td><td>Sanchez</td><td>796</td><td>6439 Sit Ln</td><td>OR</td><td>24879</td><td>(168) 754-6725</td><td>AVrtis#porttitor.net</td><td>sapien ipsum nullam pretium quis tincidunt tincidunt sit mattis porttitor</td></tr>
<tr><td>20</td><td>Tanny</td><td>Wieland</td><td>814</td><td>7331 Et Rd</td><td>SD</td><td>65216</td><td>(414) 322-1606</td><td>ACasariego#et.org</td><td>odio augue in id lacus tincidunt morbi tempor orci tincidunt</td></tr>
<tr><td>21</td><td>Alejandro</td><td>Sidaway</td><td>995</td><td>8125 Placerat Rd</td><td>VA</td><td>98301</td><td>(202) 112-1194</td><td>RHaag#nullam.ly</td><td>lacus aliquam et sagittis etiam aenean lorem ipsum non facilisis</td></tr>
<tr><td>22</td><td>Yolanda</td><td>Swanson</td><td>530</td><td>276 Amet Ct</td><td>VT</td><td>42999</td><td>(621) 796-4436</td><td>TDenard#lectus.gov</td><td>lacus vitae quis dui orci ipsum odio pulvinar et nunc</td></tr>
<tr><td>23</td><td>Azra</td><td>Filleul</td><td>443</td><td>499 Sagittis Dr</td><td>OK</td><td>59700</td><td>(485) 530-0532</td><td>LSwetland#consectetur.net</td><td>magna mattis sollicitudin placerat vel facilisis sed ac non et</td></tr>
<tr><td>24</td><td>Cassandra</td><td>Labrucherie</td><td>606</td><td>6849 Tellus Ct</td><td>SC</td><td>44245</td><td>(960) 044-9381</td><td>WLafave#lectus.io</td><td>ac nullam magna ante sapien tellus tincidunt eros magna sagittis</td></tr>
<tr><td>25</td><td>Theodore</td><td>Saver</td><td>150</td><td>5 Tincidunt Ave</td><td>IL</td><td>58210</td><td>(152) 001-4978</td><td>KTorres#sed.io</td><td>ac tincidunt nec rutrum pulvinar id aliquam placerat pharetra placerat</td></tr>
<tr><td>26</td><td>Susi</td><td>Murphy</td><td>900</td><td>1614 Hendrerit St</td><td>AZ</td><td>80212</td><td>(532) 030-5050</td><td>ZRingling#sit.io</td><td>quis odio et sapien sit amet eros et augue turpis</td></tr>
<tr><td>27</td><td>Corazon</td><td>Lawrence</td><td>577</td><td>3571 Facilisis Rd</td><td>CA</td><td>35195</td><td>(318) 200-2692</td><td>REckhart#scelerisque.io</td><td>tincidunt sit dolor mi donec magna massa vel suspendisse placerat</td></tr>
<tr><td>28</td><td>Khosrow</td><td>Fisher</td><td>802</td><td>4323 Tortor Ln</td><td>AK</td><td>38949</td><td>(493) 277-9670</td><td>FHarmati#magna.ly</td><td>lectus tortor ac ipsum sagittis lacus dolor ac fringilla nec</td></tr>
<tr><td>29</td><td>Melgema</td><td>Lopez</td><td>893</td><td>1738 Vestibulum Ln</td><td>MS</td><td>32638</td><td>(953) 255-2707</td><td>ABurgin#tortor.ly</td><td>molestie at vel at placerat pharetra consequat dolor nunc placerat</td></tr>
<tr><td>30</td><td>Chun</td><td>Lester</td><td>928</td><td>9681 Vestibulum Ct</td><td>ND</td><td>21333</td><td>(474) 719-0476</td><td>ETierney#pulvinar.gov</td><td>vestibulum ipsum tincidunt placerat eros turpis morbi ipsum sit malesuada</td></tr>
<tr><td>31</td><td>Dwayne</td><td>Balasubramanian</td><td>418</td><td>3129 Pharetra Dr</td><td>SD</td><td>57558</td><td>(457) 589-4620</td><td>ESyner#aenean.com</td><td>amet sit nec amet lectus augue consequat consectetur vel sed</td></tr>
<tr><td>32</td><td>Joshua</td><td>Williamson</td><td>702</td><td>6313 Vestibulum St</td><td>NJ</td><td>39057</td><td>(346) 084-7444</td><td>VFeldman#elit.ly</td><td>sit tempor at lacus libero lorem sit nullam tempor aliquam</td></tr>
<tr><td>33</td><td>Shawn</td><td>Dartmann</td><td>124</td><td>4892 Aliquam Rd</td><td>IA</td><td>17745</td><td>(500) 390-3779</td><td>RNesbitt#massa.net</td><td>sit sapien magna libero augue consectetur fringilla orci ac tortor</td></tr>
<tr><td>34</td><td>Rupa</td><td>Helgren</td><td>594</td><td>5944 Sed Ave</td><td>CO</td><td>96680</td><td>(174) 841-4348</td><td>FShebish#morbi.net</td><td>at elementum neque ac in consequat elementum magna vitae mattis</td></tr>
<tr><td>35</td><td>Gia</td><td>Marks</td><td>635</td><td>2519 Convallis Dr</td><td>GA</td><td>66324</td><td>(188) 657-9140</td><td>SForsyth#adipiscing.gov</td><td>pharetra pulvinar amet dui elementum suspendisse et odio tellus amet</td></tr>
<tr><td>36</td><td>Tyetha</td><td>Ahn</td><td>543</td><td>9900 Eros Ct</td><td>PA</td><td>53390</td><td>(482) 686-6141</td><td>LHobbs#non.io</td><td>pulvinar lorem quis fringilla eget velit sed augue rutrum augue</td></tr>
<tr><td>37</td><td>Gregory</td><td>Christine</td><td>527</td><td>751 Ipsum Rd</td><td>AK</td><td>44543</td><td>(258) 666-2073</td><td>HCrooker#donec.com</td><td>massa vitae dolor sollicitudin consectetur sollicitudin malesuada massa velit egestas</td></tr>
<tr><td>38</td><td>Yelena</td><td>Shanoski</td><td>646</td><td>1612 Donec Ave</td><td>KY</td><td>30729</td><td>(905) 301-3407</td><td>JMcmenamin#massa.gov</td><td>sapien rutrum adipiscing et sed sollicitudin vestibulum pharetra at neque</td></tr>
<tr><td>39</td><td>Thursday</td><td>Helm</td><td>666</td><td>5568 Nec Rd</td><td>NE</td><td>94390</td><td>(487) 403-7019</td><td>RMorin#sed.org</td><td>risus hendrerit sollicitudin vestibulum placerat lorem eros consequat lorem magna</td></tr>
<tr><td>40</td><td>Melinda</td><td>Oliva</td><td>525</td><td>6973 Rutrum Ct</td><td>IA</td><td>38519</td><td>(964) 234-5172</td><td>FStephens#in.com</td><td>dolor lacus nec odio in etiam facilisis lorem ipsum et</td></tr>
<tr><td>41</td><td>Latasha</td><td>Slocum</td><td>210</td><td>8374 Fringilla St</td><td>NV</td><td>23913</td><td>(678) 453-4263</td><td>JWelchert#id.gov</td><td>donec massa dolor elementum scelerisque risus lacus id lorem in</td></tr>
<tr><td>42</td><td>Kenneth</td><td>Zazzara</td><td>269</td><td>3364 Tempor Dr</td><td>MO</td><td>30642</td><td>(874) 633-3017</td><td>TGarayan#tincidunt.ly</td><td>sollicitudin nullam egestas aenean molestie velit nec sed tincidunt scelerisque</td></tr>
<tr><td>43</td><td>Francine</td><td>Daniels</td><td>366</td><td>2141 Amet Rd</td><td>OH</td><td>90786</td><td>(856) 781-7309</td><td>SIngham#pretium.ly</td><td>egestas amet vel ac pretium lacus nec tortor facilisis et</td></tr>
<tr><td>44</td><td>Marie</td><td>Krebs</td><td>124</td><td>4229 Sit Ln</td><td>DE</td><td>41786</td><td>(572) 023-1295</td><td>EClagg#curabitur.io</td><td>lacus elit sagittis quis nec vestibulum malesuada mattis morbi etiam</td></tr>
<tr><td>45</td><td>Stanley</td><td>Zehnacker</td><td>456</td><td>4610 Odio St</td><td>VT</td><td>70223</td><td>(257) 234-6755</td><td>HPennell#morbi.gov</td><td>vel aliquam mattis libero sed pharetra donec malesuada pharetra lectus</td></tr>
<tr><td>46</td><td>Furdella</td><td>Toffoli</td><td>951</td><td>8366 Placerat Rd</td><td>AZ</td><td>20381</td><td>(740) 422-8726</td><td>YEarls#morbi.net</td><td>non aliquam neque tortor egestas pulvinar tempor amet molestie lorem</td></tr>
<tr><td>47</td><td>Talatha</td><td>Nye</td><td>808</td><td>6884 Dolor Dr</td><td>MS</td><td>97282</td><td>(589) 157-7730</td><td>DAcosta#rutrum.gov</td><td>ipsum turpis vestibulum at convallis sit neque elementum sed adipiscing</td></tr>
<tr><td>48</td><td>Brent</td><td>Vollrath</td><td>479</td><td>5362 Eget Dr</td><td>MO</td><td>74989</td><td>(664) 642-4525</td><td>YMarina#sollicitudin.net</td><td>massa elementum elit pretium malesuada mi vestibulum non aliquam neque</td></tr>
<tr><td>49</td><td>Melissa</td><td>Quintana</td><td>405</td><td>1302 Lacus Dr</td><td>PA</td><td>38853</td><td>(354) 903-9363</td><td>AMarrinson#lacus.io</td><td>morbi quis neque placerat malesuada tincidunt morbi risus at tortor</td></tr>
<tr><td>50</td><td>Guadalupe</td><td>Eseltine</td><td>206</td><td>5495 Rutrum Ct</td><td>AR</td><td>37546</td><td>(540) 500-5816</td><td>TLester#morbi.com</td><td>porttitor sit massa ipsum ac massa ac hendrerit vitae malesuada</td></tr>
<tr><td>1</td><td>Sherry</td><td>Mills</td><td>223</td><td>3792 Sit Rd</td><td>NE</td><td>69836</td><td>(627) 124-8760</td><td>DRamirez#massa.ly</td><td>sagittis amet mattis facilisis vitae molestie nec dolor id sed</td></tr>
<tr><td>2</td><td>Markella</td><td>Lessenberry</td><td>895</td><td>5979 Sit Ln</td><td>VA</td><td>97761</td><td>(768) 233-5399</td><td>SPeltier#pulvinar.net</td><td>elementum nullam lacus elit magna libero sed dolor pulvinar orci</td></tr>
<tr><td>3</td><td>Lee</td><td>Trenkelbach</td><td>719</td><td>5656 Adipiscing Ave</td><td>ID</td><td>30972</td><td>(149) 293-0691</td><td>LSheppard#lectus.net</td><td>vestibulum at rutrum molestie convallis vestibulum nec egestas consequat vitae</td></tr>
<tr><td>4</td><td>Sherrye</td><td>Llc</td><td>908</td><td>2348 Pharetra St</td><td>UT</td><td>50740</td><td>(772) 682-4268</td><td>MAltar#turpis.io</td><td>sit elit consequat amet elit consectetur vestibulum vel quis consequat</td></tr>
<tr><td>5</td><td>Juanito</td><td>Lindall</td><td>534</td><td>5181 Lacus Ln</td><td>ID</td><td>71689</td><td>(528) 174-6999</td><td>CKeen#augue.ly</td><td>dui porttitor vestibulum mattis ipsum nunc et morbi dolor ipsum</td></tr>
<tr><td>6</td><td>Andre</td><td>Fuller</td><td>716</td><td>8224 Pulvinar Ave</td><td>WY</td><td>12382</td><td>(654) 593-0007</td><td>AMelvin#sed.net</td><td>dolor curabitur nec molestie lacus odio id velit sed neque</td></tr>
<tr><td>7</td><td>Sajid</td><td>Cattanach</td><td>997</td><td>3762 Ac Rd</td><td>WA</td><td>16719</td><td>(425) 909-2771</td><td>BMaas#ac.org</td><td>morbi tincidunt ac sollicitudin nec ac orci vitae donec non</td></tr>
<tr><td>8</td><td>Heidi</td><td>Rush</td><td>738</td><td>1425 Porta Rd</td><td>SD</td><td>14708</td><td>(341) 095-7183</td><td>DSchrag#sapien.net</td><td>nullam sed aliquam turpis et sagittis libero sed tellus dui</td></tr>
<tr><td>9</td><td>Ganesh</td><td>Comeau</td><td>385</td><td>2641 Hendrerit Dr</td><td>MT</td><td>66612</td><td>(201) 977-9765</td><td>SBurks#ipsum.ly</td><td>sit vestibulum ac pretium eget augue sit augue sagittis tellus</td></tr>
<tr><td>10</td><td>Regine</td><td>Marina</td><td>479</td><td>6204 Ac Rd</td><td>WI</td><td>55667</td><td>(824) 223-9924</td><td>VPeschke#pharetra.org</td><td>amet fringilla vitae tortor vestibulum egestas eget eget amet sed</td></tr>
<tr><td>11</td><td>Wichaya</td><td>Thomas</td><td>487</td><td>861 Risus Dr</td><td>KY</td><td>63224</td><td>(599) 823-8970</td><td>BMohamed#adipiscing.ly</td><td>placerat dolor pulvinar nec morbi amet porta sagittis lacus magna</td></tr>
<tr><td>12</td><td>Douglass</td><td>Holliday</td><td>488</td><td>8829 Sit Ave</td><td>IA</td><td>86970</td><td>(113) 897-8276</td><td>CLieb#convallis.io</td><td>dolor magna id amet lorem eros ipsum magna non aliquam</td></tr>
<tr><td>13</td><td>Prince</td><td>Schwartzberg</td><td>790</td><td>1757 Sit Ct</td><td>IL</td><td>94739</td><td>(299) 471-3039</td><td>DFavus#quis.org</td><td>magna tincidunt ipsum hendrerit ac vitae tortor consequat magna elit</td></tr>
<tr><td>14</td><td>Lola</td><td>Hensley</td><td>486</td><td>8159 Dui Rd</td><td>MN</td><td>88877</td><td>(788) 031-7392</td><td>MBradley#scelerisque.org</td><td>suspendisse donec placerat nec suspendisse lacus ipsum elementum at lorem</td></tr>
<tr><td>15</td><td>Dainius</td><td>Finn</td><td>355</td><td>6072 Massa Dr</td><td>VT</td><td>75787</td><td>(638) 345-2650</td><td>MWilcox#velit.ly</td><td>morbi pretium dui dolor elit sed non vestibulum sit dui</td></tr>
<tr><td>16</td><td>Aisha</td><td>Schuhmann</td><td>328</td><td>9709 Sagittis Ln</td><td>ND</td><td>44161</td><td>(147) 281-5251</td><td>GDech#mi.com</td><td>massa sed placerat libero egestas at massa sagittis libero orci</td></tr>
<tr><td>17</td><td>Maria</td><td>Peacock</td><td>269</td><td>2241 Amet Ave</td><td>MO</td><td>81339</td><td>(656) 079-5964</td><td>POliva#tincidunt.org</td><td>ac hendrerit molestie ipsum facilisis massa odio fringilla hendrerit neque</td></tr>
<tr><td>18</td><td>Otilia</td><td>Denbesten</td><td>778</td><td>1965 Nunc Ct</td><td>SC</td><td>98692</td><td>(985) 745-0452</td><td>SWieber#porttitor.net</td><td>aliquam orci odio id ac magna magna aenean sagittis lectus</td></tr>
<tr><td>19</td><td>Jian</td><td>Sanchez</td><td>796</td><td>6439 Sit Ln</td><td>OR</td><td>24879</td><td>(168) 754-6725</td><td>AVrtis#porttitor.net</td><td>sapien ipsum nullam pretium quis tincidunt tincidunt sit mattis porttitor</td></tr>
<tr><td>20</td><td>Tanny</td><td>Wieland</td><td>814</td><td>7331 Et Rd</td><td>SD</td><td>65216</td><td>(414) 322-1606</td><td>ACasariego#et.org</td><td>odio augue in id lacus tincidunt morbi tempor orci tincidunt</td></tr>
<tr><td>21</td><td>Alejandro</td><td>Sidaway</td><td>995</td><td>8125 Placerat Rd</td><td>VA</td><td>98301</td><td>(202) 112-1194</td><td>RHaag#nullam.ly</td><td>lacus aliquam et sagittis etiam aenean lorem ipsum non facilisis</td></tr>
<tr><td>22</td><td>Yolanda</td><td>Swanson</td><td>530</td><td>276 Amet Ct</td><td>VT</td><td>42999</td><td>(621) 796-4436</td><td>TDenard#lectus.gov</td><td>lacus vitae quis dui orci ipsum odio pulvinar et nunc</td></tr>
<tr><td>23</td><td>Azra</td><td>Filleul</td><td>443</td><td>499 Sagittis Dr</td><td>OK</td><td>59700</td><td>(485) 530-0532</td><td>LSwetland#consectetur.net</td><td>magna mattis sollicitudin placerat vel facilisis sed ac non et</td></tr>
<tr><td>24</td><td>Cassandra</td><td>Labrucherie</td><td>606</td><td>6849 Tellus Ct</td><td>SC</td><td>44245</td><td>(960) 044-9381</td><td>WLafave#lectus.io</td><td>ac nullam magna ante sapien tellus tincidunt eros magna sagittis</td></tr>
<tr><td>25</td><td>Theodore</td><td>Saver</td><td>150</td><td>5 Tincidunt Ave</td><td>IL</td><td>58210</td><td>(152) 001-4978</td><td>KTorres#sed.io</td><td>ac tincidunt nec rutrum pulvinar id aliquam placerat pharetra placerat</td></tr>
<tr><td>26</td><td>Susi</td><td>Murphy</td><td>900</td><td>1614 Hendrerit St</td><td>AZ</td><td>80212</td><td>(532) 030-5050</td><td>ZRingling#sit.io</td><td>quis odio et sapien sit amet eros et augue turpis</td></tr>
<tr><td>27</td><td>Corazon</td><td>Lawrence</td><td>577</td><td>3571 Facilisis Rd</td><td>CA</td><td>35195</td><td>(318) 200-2692</td><td>REckhart#scelerisque.io</td><td>tincidunt sit dolor mi donec magna massa vel suspendisse placerat</td></tr>
<tr><td>28</td><td>Khosrow</td><td>Fisher</td><td>802</td><td>4323 Tortor Ln</td><td>AK</td><td>38949</td><td>(493) 277-9670</td><td>FHarmati#magna.ly</td><td>lectus tortor ac ipsum sagittis lacus dolor ac fringilla nec</td></tr>
<tr><td>29</td><td>Melgema</td><td>Lopez</td><td>893</td><td>1738 Vestibulum Ln</td><td>MS</td><td>32638</td><td>(953) 255-2707</td><td>ABurgin#tortor.ly</td><td>molestie at vel at placerat pharetra consequat dolor nunc placerat</td></tr>
<tr><td>30</td><td>Chun</td><td>Lester</td><td>928</td><td>9681 Vestibulum Ct</td><td>ND</td><td>21333</td><td>(474) 719-0476</td><td>ETierney#pulvinar.gov</td><td>vestibulum ipsum tincidunt placerat eros turpis morbi ipsum sit malesuada</td></tr>
<tr><td>31</td><td>Dwayne</td><td>Balasubramanian</td><td>418</td><td>3129 Pharetra Dr</td><td>SD</td><td>57558</td><td>(457) 589-4620</td><td>ESyner#aenean.com</td><td>amet sit nec amet lectus augue consequat consectetur vel sed</td></tr>
<tr><td>32</td><td>Joshua</td><td>Williamson</td><td>702</td><td>6313 Vestibulum St</td><td>NJ</td><td>39057</td><td>(346) 084-7444</td><td>VFeldman#elit.ly</td><td>sit tempor at lacus libero lorem sit nullam tempor aliquam</td></tr>
<tr><td>33</td><td>Shawn</td><td>Dartmann</td><td>124</td><td>4892 Aliquam Rd</td><td>IA</td><td>17745</td><td>(500) 390-3779</td><td>RNesbitt#massa.net</td><td>sit sapien magna libero augue consectetur fringilla orci ac tortor</td></tr>
<tr><td>34</td><td>Rupa</td><td>Helgren</td><td>594</td><td>5944 Sed Ave</td><td>CO</td><td>96680</td><td>(174) 841-4348</td><td>FShebish#morbi.net</td><td>at elementum neque ac in consequat elementum magna vitae mattis</td></tr>
<tr><td>35</td><td>Gia</td><td>Marks</td><td>635</td><td>2519 Convallis Dr</td><td>GA</td><td>66324</td><td>(188) 657-9140</td><td>SForsyth#adipiscing.gov</td><td>pharetra pulvinar amet dui elementum suspendisse et odio tellus amet</td></tr>
<tr><td>36</td><td>Tyetha</td><td>Ahn</td><td>543</td><td>9900 Eros Ct</td><td>PA</td><td>53390</td><td>(482) 686-6141</td><td>LHobbs#non.io</td><td>pulvinar lorem quis fringilla eget velit sed augue rutrum augue</td></tr>
<tr><td>37</td><td>Gregory</td><td>Christine</td><td>527</td><td>751 Ipsum Rd</td><td>AK</td><td>44543</td><td>(258) 666-2073</td><td>HCrooker#donec.com</td><td>massa vitae dolor sollicitudin consectetur sollicitudin malesuada massa velit egestas</td></tr>
<tr><td>38</td><td>Yelena</td><td>Shanoski</td><td>646</td><td>1612 Donec Ave</td><td>KY</td><td>30729</td><td>(905) 301-3407</td><td>JMcmenamin#massa.gov</td><td>sapien rutrum adipiscing et sed sollicitudin vestibulum pharetra at neque</td></tr>
<tr><td>39</td><td>Thursday</td><td>Helm</td><td>666</td><td>5568 Nec Rd</td><td>NE</td><td>94390</td><td>(487) 403-7019</td><td>RMorin#sed.org</td><td>risus hendrerit sollicitudin vestibulum placerat lorem eros consequat lorem magna</td></tr>
<tr><td>40</td><td>Melinda</td><td>Oliva</td><td>525</td><td>6973 Rutrum Ct</td><td>IA</td><td>38519</td><td>(964) 234-5172</td><td>FStephens#in.com</td><td>dolor lacus nec odio in etiam facilisis lorem ipsum et</td></tr>
<tr><td>41</td><td>Latasha</td><td>Slocum</td><td>210</td><td>8374 Fringilla St</td><td>NV</td><td>23913</td><td>(678) 453-4263</td><td>JWelchert#id.gov</td><td>donec massa dolor elementum scelerisque risus lacus id lorem in</td></tr>
<tr><td>42</td><td>Kenneth</td><td>Zazzara</td><td>269</td><td>3364 Tempor Dr</td><td>MO</td><td>30642</td><td>(874) 633-3017</td><td>TGarayan#tincidunt.ly</td><td>sollicitudin nullam egestas aenean molestie velit nec sed tincidunt scelerisque</td></tr>
<tr><td>43</td><td>Francine</td><td>Daniels</td><td>366</td><td>2141 Amet Rd</td><td>OH</td><td>90786</td><td>(856) 781-7309</td><td>SIngham#pretium.ly</td><td>egestas amet vel ac pretium lacus nec tortor facilisis et</td></tr>
<tr><td>44</td><td>Marie</td><td>Krebs</td><td>124</td><td>4229 Sit Ln</td><td>DE</td><td>41786</td><td>(572) 023-1295</td><td>EClagg#curabitur.io</td><td>lacus elit sagittis quis nec vestibulum malesuada mattis morbi etiam</td></tr>
<tr><td>45</td><td>Stanley</td><td>Zehnacker</td><td>456</td><td>4610 Odio St</td><td>VT</td><td>70223</td><td>(257) 234-6755</td><td>HPennell#morbi.gov</td><td>vel aliquam mattis libero sed pharetra donec malesuada pharetra lectus</td></tr>
<tr><td>46</td><td>Furdella</td><td>Toffoli</td><td>951</td><td>8366 Placerat Rd</td><td>AZ</td><td>20381</td><td>(740) 422-8726</td><td>YEarls#morbi.net</td><td>non aliquam neque tortor egestas pulvinar tempor amet molestie lorem</td></tr>
<tr><td>47</td><td>Talatha</td><td>Nye</td><td>808</td><td>6884 Dolor Dr</td><td>MS</td><td>97282</td><td>(589) 157-7730</td><td>DAcosta#rutrum.gov</td><td>ipsum turpis vestibulum at convallis sit neque elementum sed adipiscing</td></tr>
<tr><td>48</td><td>Brent</td><td>Vollrath</td><td>479</td><td>5362 Eget Dr</td><td>MO</td><td>74989</td><td>(664) 642-4525</td><td>YMarina#sollicitudin.net</td><td>massa elementum elit pretium malesuada mi vestibulum non aliquam neque</td></tr>
<tr><td>49</td><td>Melissa</td><td>Quintana</td><td>405</td><td>1302 Lacus Dr</td><td>PA</td><td>38853</td><td>(354) 903-9363</td><td>AMarrinson#lacus.io</td><td>morbi quis neque placerat malesuada tincidunt morbi risus at tortor</td></tr>
<tr><td>50</td><td>Guadalupe</td><td>Eseltine</td><td>206</td><td>5495 Rutrum Ct</td><td>AR</td><td>37546</td><td>(540) 500-5816</td><td>TLester#morbi.com</td><td>porttitor sit massa ipsum ac massa ac hendrerit vitae malesuada</td></tr>
</tbody>
</table>
</div>
<div class="ui-layout-south no-print" style="text-align: center;">
<span id="feedback" style="float: right;"></span>
The footer
</div>
</body>
</html>
Try something like this (untested):
$(function(){
var $table = $('#fixed-columns-table'),
scrollerHeight = $table.parent().innerHeight() -
$table.children('thead').outerHeight() +
$table.children('tfoot').outerHeight();
$('#fixed-columns-table').tablesorter({
theme: 'blue',
widgets: ['scroller', 'zebra'],
widgetOptions : {
scroller_height : scrollerHeight,
scroller_fixedColumns : 2
}
});
});
The code basically sets the scroller_height to fill the available space of the element wrapping the table.
I have a blue box. I want to place a gradient overlay that fades from transparent to blue at the bottom of this blue box, so that overflowing text gradually fades out at the bottom.
Here's what it should look like (and does look like on most browsers):
Here's what it looks like on iOS Safari:
I've created a fiddle to demonstrate this issue: https://jsfiddle.net/cy89ocrs/11/
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(100%, #034b81));
background-image: -moz-linear-gradient(rgba(0, 0, 0, 0), #034b81);
background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), #034b81);
background-image: linear-gradient(rgba(0, 0, 0, 0), #034b81);
As you can see the color that is being faded to in Safari is darker, even though it is the same color. So when there's not enough text the fader is still awkwardly visible. Is there any way to fix this so Safari displays gradients like other browsers?
Safari is rendering correctly.
With linear-gradient you can define:
linear-gradient(
[ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )
\---------------------------------/ \----------------------------/
Definition of the gradient line List of color stops
where <side-or-corner> = [left | right] || [top | bottom]
and <color-stop> = <color> [ <percentage> | <length> ]?
So your gradient goes from black with zero opacity (rgba(0,0,0,0)) to your desired color (#034b81).
See: rgba(red,green,blue,opacity)
That's why you see that black line in Safari.
To achieve your desired appearance, just change the rgba value to the value of your color. so your code should look like:
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(3, 75, 129, 0)), color-stop(100%, #034b81));
background-image: -moz-linear-gradient(rgba(3, 75, 129, 0), #034b81);
background-image: -webkit-linear-gradient(rgba(3, 75, 129, 0), #034b81);
background-image: linear-gradient(rgba(3, 75, 129, 0), #034b81);
Demo
div {
position: relative;
width: 100%;
height: 300px;
background-color: #034b81;
color: white;
overflow: hidden;
}
div:after {
content: ' ';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 25px;
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(3, 75, 129, 0)), color-stop(100%, #034b81));
background-image: -moz-linear-gradient(rgba(3, 75, 129, 0), #034b81);
background-image: -webkit-linear-gradient(rgba(3, 75, 129, 0), #034b81);
background-image: linear-gradient(rgba(3, 75, 129, 0), #034b81);
}
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies eget quam sit amet eleifend. Sed luctus risus justo, ut finibus metus commodo ut. Curabitur sit amet lobortis mi. Curabitur vel felis id ante accumsan imperdiet. Etiam at ornare ligula.
Morbi consequat fermentum eros nec fermentum. Donec sodales molestie odio sollicitudin bibendum. Morbi semper ac nisl mattis semper. Donec sed lacus viverra, congue massa at, accumsan orci. Mauris et condimentum quam. Etiam imperdiet tempor quam non
aliquam. Integer et pharetra metus, et porttitor velit. Mauris at turpis dui. Etiam odio felis, placerat sit amet massa et, suscipit pretium eros. Nulla iaculis elit id turpis dictum, id scelerisque est eleifend. Quisque in ex tincidunt, bibendum nisl
non, tristique ligula. Curabitur venenatis purus nec sem placerat, sed sollicitudin libero tincidunt. Etiam ac turpis mattis, lobortis quam quis, sagittis nisi. Vivamus eget nisl commodo, vestibulum augue varius, pretium augue. Cras ultricies, velit
nec ultrices commodo, leo enim dignissim odio, vitae aliquam nibh ex nec elit. Duis egestas faucibus turpis, nec tristique nisl accumsan nec. Phasellus lacus massa, vulputate sed nisl lacinia, pretium vestibulum mi. In tincidunt luctus dictum. Praesent
elementum lorem eu erat mattis, quis convallis massa tristique. Cras rhoncus gravida dolor et rhoncus. Etiam et malesuada dolor. Sed in eros magna. Duis faucibus, ipsum eget ultrices dignissim, ipsum nunc consectetur nulla, in egestas nibh eros eget
turpis. Phasellus vestibulum mollis ullamcorper. Maecenas lectus mi, hendrerit vel justo at, dictum varius lectus. Cras ac libero vehicula, interdum eros sagittis, tristique tellus. Mauris tincidunt porttitor nisl, nec aliquam velit egestas nec. Mauris
nec gravida ipsum. Curabitur tempor velit nulla, sit amet laoreet elit euismod ac. Ut eros metus, consectetur sit amet purus eget, semper cursus nibh. In dolor nisl, vulputate ac augue et, luctus faucibus mauris. Donec eu ex ex. Donec ut elementum ligula.
Donec nisl justo, pharetra eget quam id, commodo lobortis augue. Suspendisse sit amet tellus interdum, tempor odio nec, iaculis sapien. Praesent maximus quis lacus a condimentum. Morbi convallis sem metus, vitae lacinia dui interdum sed. Proin eget
volutpat ex. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut molestie consectetur sem, at venenatis justo volutpat in. Sed lobortis dui vitae quam facilisis, gravida mattis justo volutpat. Aliquam elementum
non nunc consequat elementum. Vestibulum vitae sodales nulla, a iaculis tellus. Nullam tincidunt, dui sed elementum dapibus, mauris turpis aliquam odio, id laoreet nisl sapien a metus. Suspendisse potenti. Integer viverra fermentum nulla at sodales.
Proin viverra nulla eu felis tempus, vitae lacinia velit commodo. Phasellus eu nulla elementum, consequat orci eu, interdum metus. Nunc in tellus sed arcu egestas ullamcorper fringilla non purus. Nunc efficitur elementum sapien, in mollis diam volutpat
at. Suspendisse non luctus risus. Nam rutrum est ligula, vel scelerisque felis volutpat id. Maecenas ornare molestie dui sed varius. Praesent vulputate dui purus, sed venenatis purus pellentesque ac. Etiam neque arcu, imperdiet sed enim in, laoreet
ultrices nisl. Phasellus rhoncus lobortis ipsum, viverra accumsan eros feugiat id. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris eget commodo risus. Donec tellus elit, imperdiet a fermentum eget,
lobortis ac diam. Nulla dictum eros at neque tincidunt, at commodo tortor ultrices. In dapibus risus at tellus lobortis condimentum. In hendrerit et erat sit amet scelerisque. Vestibulum ultricies egestas efficitur. Ut finibus dolor et leo lobortis
egestas. Nulla aliquam quam ut metus molestie tincidunt. Aenean ac commodo mauris. Nullam ultrices urna nisi, vitae commodo quam viverra pulvinar.</div>
I am trying to use jQuery tabs with cookies. I got it working but the CSS to style the tabs isn't working and I need some help to get it working. I downloaded jQuery and extratced it into a folder called development-bundle
Here is my link to the css but it's not working.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Sticky Tab</title>
<link rel="stylesheet" href="development-bundle/externals/css/jquery-ui/ui-lightness/1.7.2/jquery-ui-lightness.css" media="screen" />
</head>
<body>
<div id="tabs">
<ul>
<li>Nunc tincidunt</li>
<li>Proin dolor</li>
<li>Aenean lacinia</li>
</ul>
<div id="tabs-1">
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
</div>
<div id="tabs-2">
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
</div>
<div id="tabs-3">
<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
</div>
</div>
<script type="text/javascript" src="development-bundle/externals/jquery/core/1.4.1/jquery.js"></script>
<script type="text/javascript" src="development-bundle/externals/jquery/ui/1.7.2/jquery-ui.js"></script>
<script type="text/javascript" src="development-bundle/cookies/jquery.cookies.js"></script>
<script type="text/javascript">
$( function()
{
var cookieName, $tabs, stickyTab;
cookieName = 'stickyTab';
$tabs = $( '#tabs' );
$tabs.tabs( {
select: function( e, ui )
{
$.cookies.set( cookieName, ui.index );
}
} );
stickyTab = $.cookies.get( cookieName );
if( ! isNaN( stickyTab ) )
{
$tabs.tabs( 'select', stickyTab );
}
} );
</script>
</body>
This is what am getting
But this is what am trying to achieve
Any suggestions on what am doing wrong here with my css link ??
You are not adding CSS classes to your markup.
http://jqueryui.com/tabs/
See the source for this example. Make sure your browser isn't reporting any errors.
Is it possible to make a Primefaces Layout Scrollable? I dont want to make my layoutUnits scrollable as I dont really want multiple scrollable elements on the pages. I would prefer for the page & content panels to resize according to the content, so the user can view the data in a linear fashion. I am currently using a full page primefaces layout:
<p:layout fullPage="true">
If this isnt possible then what is my best alternatives as I quite like the primefaces components but could live without its layout features.
Cheers
You can create a layoutUnit for center, then provide a style class in it, where in your css you can provide scrollable along to x and y position.
<p:layoutUnit position="center">
<div id="myScreen" class="right col scroll-x scroll-y">
<ui:insert name="content">My Screen Content Goes Here</ui:insert>
</div>
</p:layoutUnit>
And in cc file --
.col {
top: 0; bottom: 0;
}
.scroll-x {
overflow-x: auto;
}
.scroll-y {
overflow-y: auto;
}
Hope this would help.
as far as i can tell it cannot be done! I dumped the primefaces layout and went with a generic web layout...
Just put everything in a <p:scrollPanel> component inside the <p:layoutunit>, that will work (now that it's 2015 and we are on Primefaces v5.1.x!). Make sure you add absolute positioning and height to stretch the <p:scrollPanel> to the innards of the <p:layoutunit> - see below.
http://www.primefaces.org/showcase/ui/panel/scrollPanel.xhtml
<p:scrollPanel mode="native" style="position: absolute; height: 100%;">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean blandit tortor a ipsum vehicula, in semper sapien auctor. Nulla tempor eget est non consequat. Nulla sit amet lorem justo. Cras non tellus eros. Sed ultricies orci ut quam interdum fringilla. Nam vitae massa ac mi elementum mattis vel vitae sem. Ut eros ipsum, scelerisque a erat a, eleifend luctus nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus.
</p>
<p>
Vivamus ac ullamcorper magna. Aenean felis ante, elementum sit amet urna at, eleifend aliquet velit. Morbi a convallis magna. In nec leo vel dolor hendrerit pharetra. Cras in iaculis enim. Aenean porta sapien dignissim turpis dapibus, eu dictum velit elementum. Aliquam sollicitudin gravida luctus.
</p>
<p>
Ut vel nulla sit amet erat laoreet eleifend nec sed lacus. Quisque placerat diam vitae justo eleifend, rutrum mollis mauris fringilla. Curabitur turpis odio, euismod id lorem a, ultricies suscipit ligula. Pellentesque ut erat a leo rhoncus porta ac sed velit. Nunc at erat ligula. Fusce vehicula posuere interdum. Curabitur tempus, tortor at sollicitudin dapibus, erat ante varius nisl, id dictum erat ipsum porttitor ipsum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla id varius enim, sed rutrum orci.
</p>
<p>
Sed tincidunt urna quis metus lacinia commodo. Praesent convallis eros vel quam scelerisque bibendum. Mauris eget dignissim libero. Pellentesque sagittis sem quis ipsum viverra, sed consequat mi consectetur. Donec facilisis dapibus ultrices. Donec luctus auctor lacus, at congue nisi aliquet eu. Praesent in justo at risus faucibus ultricies. Fusce et libero lectus. Donec elementum pharetra sapien, at placerat purus sodales et. Vivamus iaculis lacus sed placerat rhoncus. Mauris iaculis sit amet nunc at placerat. Donec consequat euismod lacinia. Etiam nec quam vehicula, cursus massa in, ullamcorper erat.
</p>
<p>
Praesent volutpat scelerisque vestibulum. In eu massa non neque rutrum commodo. Nunc vel enim nisi. Aenean leo ipsum, molestie vel justo nec, pharetra luctus dui. Nunc rhoncus turpis id lorem luctus consequat. Nulla condimentum adipiscing turpis consequat semper. Etiam ullamcorper velit nec hendrerit malesuada. Praesent venenatis leo sit amet arcu commodo, sit amet porta tellus suscipit. Quisque mi tortor, vestibulum in arcu non, pretium auctor libero. In commodo luctus placerat.
</p>
</p:scrollPanel>
I don't believe that layouts are right for what you want to do here. This is good for enabling templating on a single page and the such. You might be able to however put an iframe within a layoutUnit to emulate the same effect though I have never tried this personally and couldn't tell you if it will work or not.
This should be any easy one for you. I have an accordion that I'd like to be a fixed height. Each pane should be the same size, if there is any overflow on a pane a scroll bar should appear. In the code below the scroll bars appear on load for the first pane, but after the first pane change, the accordion expands it's height, so scroll bars are no longer needed.
What am I doing wrong?
<head>
<script type="text/javascript">
jQuery(document).ready(function(){
$('#accordion').accordion({autoHeight: false, clearStyle: true});
});
</script>
</head>
<body>
<div id="accordion">
<h3>First Section</h3>
<div style="height:50px; overflow:auto">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut venenatis vehicula dui, quis volutpat odio bibendum a. Proin posuere convallis lorem id mattis. Vestibulum lacinia lacinia enim ut euismod. Aenean sit amet tincidunt nunc. Vestibulum gravida, ipsum in tempor dictum, diam nulla auctor purus, a vehicula ante odio quis massa. Pellentesque imperdiet urna ut elit adipiscing ac gravida lectus facilisis. Curabitur laoreet, justo vel dapibus auctor, enim sem dapibus nulla, sed lacinia felis felis sit amet dolor. Nulla lacus dolor, tincidunt convallis sodales vitae, interdum a sapien. Cras ut iaculis orci. Mauris vel nisl vel leo venenatis hendrerit. Duis aliquet lobortis purus, non malesuada lorem sagittis quis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc sit amet posuere eros. Nam vel turpis at sem adipiscing scelerisque a ac dolor. Morbi lobortis tristique felis, at aliquam libero suscipit sed. Aliquam erat volutpat. Donec porta lorem sed nisl fermentum pulvinar vehicula risus tempus. Integer ultricies dignissim vehicula. Morbi non dolor a arcu rutrum congue. Fusce non urna vitae eros blandit vehicula quis vel ligula.
</div>
<h3>Second Section</h3>
<div style="height:50px; overflow:auto">
Etiam varius, orci sit amet pharetra laoreet, diam augue dictum justo, et aliquam enim leo ut nulla. Quisque mi nunc, sagittis at euismod vel, feugiat a erat. In a metus quam. Pellentesque ullamcorper volutpat congue. Nunc facilisis varius velit eu lacinia. Quisque est nulla, tempus commodo gravida quis, consequat ut felis. Donec mattis, neque sagittis feugiat sollicitudin, augue lectus vulputate ligula, eget interdum nulla massa at nunc. Proin rhoncus nunc non felis mattis accumsan. Aliquam metus ligula, adipiscing ac ullamcorper vel, lobortis non erat. Aenean placerat libero porta enim dictum malesuada molestie sapien ultricies. Nullam ac commodo ligula.
</div>
<h3>Third Section</h3>
<div style="height:50px; overflow:auto">
Morbi nec risus velit, eget ornare nibh. Duis semper elementum erat, ac egestas purus congue et. Sed commodo lacinia lorem, ac semper risus dapibus mattis. Aliquam quam quam, ultrices quis luctus sit amet, cursus vitae dolor. Nam id lectus justo. Pellentesque in leo sit amet metus eleifend lobortis eget nec turpis. Praesent vitae magna eget mauris cursus tempus vel at mi. Nulla vitae leo accumsan magna mollis luctus. Curabitur viverra nisi ac nisl pulvinar gravida. Curabitur consectetur, diam non placerat sagittis, velit nunc porttitor quam, vel interdum lorem est ut arcu. Suspendisse potenti. Pellentesque vitae leo nunc.
</div>
</div>
</body>
</html>
I appears that the height property is being animated as the accordion opens and closes. So once the top panel has been closed one time, it's height has been changed from the one specified in the inline style and is 'lost'.
I found when I factor the style out into the header the accordion works as desired:
<head>
<style type="text/css">
#accordion>div{
height:50px;
overflow:auto;
}
</style>
</head>