I'm using dataTables for my application and its awesome, but I do have a small problem: fnAdjustColumnSizing function only works when I resize the browser. Lets say I don't resize the browser and any additional scroll bars (i.e body scroll) bar pops up or any additional scroll bar pops up because I have the overflow set as auto for some within my page the header does not align with the columns. I'm including the image so you can see whats going on.
As you see in the image above, the scroll bar on the right causes the alignment issues. I have to re size the window to fix this problem every time its not doing it automatically how it works when I re size the the browser. Any suggestions?
Javascript:
$(document).ready(function() {
var oTable = $('#myTable').dataTable({
"sScrollY" : "400px",
"bPaginate" : false,
"aaSorting": []
});
$(window).bind('resize', function () {
oTable.fnAdjustColumnSizing();
} );
});
CSS:
#summary{
overflow-y: auto;
overflow-x: auto;
}
table.display {
font-family:arial;
background-color: #FFFFFF;
margin:0px 0pt 0px;
text-align: left;
position: relative;
border: 2px #808080;
border-style: outset;
}
table.display thead th {
background-color: #FFFFFF;
border: 1px #808080;
border-style: groove;
font-size: 14px;
font-family: Arial;
font-weight: normal;
text-align: center;
background-position: center bottom;
cursor: hand;
position: relative;
}
table.display tbody {
color: #3d3d3d;
font-size: 12px;
font-weight: normal;
vertical-align: center;
text-align:left;
font-family: Arial;
}
#export{
cursor: hand;
}
.highlight td {background: #FFFFFF;}
.cbx{
width: 13px;
height: 13px;
}
#table1{
height:600px;
overflow:auto;
}
After adding "sScrollX" : "100%", to my javascript it works fine for me now!.
Updating this in dataTables.fixedHeader.js from fixed to auto worked for me.
Note: It is probably not a good idea to update the dataTables.fixedHeader.js directly as I have for this example.
Related
I'm trying to build a Unicode table which can compare glyph blackspace between fonts.
My intention is for user-selected fonts on the table; Obviously, fonts have different (unknown) metrics. So—as per the following example—is it possible to align the children's font to the parents' font's baseline after absolutely positioning the child glyph objects?
#box{
display: flex;
justify-content: center;
align-items: center;
font-size: 72pt;
/* dimension ref */
border: 1px solid blue;
}
#box > span {
display: inline-flex;
justify-content: center;
font-family: serif;
border: 1px solid #F0F;
}
#box > span > span {
position: absolute;
mix-blend-mode: difference;
font-family: cursive;
color: red;
/* alignment ref */
outline: 1px solid #0F0;
}
<div id="box">
<span>x<span>x</span></span>
<span>y<span>y</span></span>
<span>z<span>z</span></span>
<span>!<span>!</span></span>
</div>
My preferred solution would be pure CSS, but a scan of the available resources indicates that's unlikely. Are font metrics exposed at all to JavaScript, such that I could just calculate a top or bottom margin and shove it in as a CSS variable?
Otherwise, I'm left pulling relative child glyph objects left (read as: towards flex "start") by half their width plus half the parent width? And that gets messy because I'll need per-character adjustments and that's a time-consuming calculation when I'm displaying 10K+ glyphs and the user changes fonts…
EDIT: As reference, my system uses "Georgia" as serif and "Comic Sans MS" as cursive. I also am testing initial resulting in Gecko/Firefox, then aligning them to Chromium. Normally this might not matter, but these are areas where different browsers/engines may render with subtle differences. For the above fonts, default baselines in Word align as follows:
"Comic Sans" 'z' and '!' should bleed under the baseline, as does right side of the 'x'.
'y' actually connects above the baseline
All glyphs both ascend higher and descend lower than their respective "Georgia" glyph.
Maybe you can do something like this. I've wrapped each "letter" into their own div. Then set both the first span and the child span to position: absolute; and set both of them to bottom: 0; giving them the same baseline.
I also gave the new dives a margin in order to space the letters out a bit. Check out what I did here:
#box{
display: inline-block;
justify-content: center;
align-items: center;
font-size: 72pt;
/* dimension ref */
border: 1px solid blue;
}
#box > div {
position: relative;
height: 100px;
display: inline-block;
margin: 30px;
}
#box > div > span {
display: inline-flex;
justify-content: center;
font-family: serif;
border: 1px solid #F0F;
position: absolute;
bottom: 0;
}
#box > div > span > span {
position: absolute;
mix-blend-mode: difference;
font-family: cursive;
color: red;
/* alignment ref */
outline: 1px solid #0F0;
bottom:0;
}
<div id="box">
<div><span>x<span>x</span></span></div>
<div><span>y<span>y</span></span></div>
<div><span>z<span>z</span></span></div>
<div><span>!<span>!</span></span></div>
</div>
Well, I may have lost the forest for the trees: letter-spacing at -1em for the parent glyph seems to avoid the need for absolute positioning of the child glyph while maintaining the original inline baseline. Flex is also unneeded for the glyph parent.
Additional benefit is that the outlines now conform to the individual font dimensions rather than being homogenized by flex and absolute positioning.
(Of note: mix-blend-mode is imperative to what I'm trying to accomplish, but doesn't seem to be honored by the snippet console for text, only the box model. So, use your imagination or demo elsewhere. Highlighting the text in the snippet result also demos the intended effect.)
div#box {
font-size: 72pt;
letter-spacing: -1em;
/* box ref */
outline: 1px solid #F0F;
}
#box > span {
font-family: serif;
/* dim ref */
outline: 1px solid #000;
}
span > span {
mix-blend-mode: difference;
font-family: cursive;
color: #0FF;
letter-spacing: 0em;
/* dim ref */
outline: 1px solid #0FF;
}
<div id="box">
<span>x<span>x</span></span>
<span>y<span>y</span></span>
<span>z<span>z</span></span>
<span>!<span>!</span></span>
</div>
A rare example of em doing what I would expect rather than something bizarre.
Set box position to relative then control absolute children's position with px or %
#box{
display: flex;
justify-content: center;
align-items: center;
font-size: 72pt;
/* dimension ref */
border: 1px solid blue;
position: relative;
}
#box > span {
display: inline-flex;
justify-content: center;
font-family: serif;
border: 1px solid #F0F;
}
#box > span > span {
position: absolute;
mix-blend-mode: difference;
font-family: cursive;
color: red;
/* alignment ref */
outline: 1px solid #0F0;
bottom: 1%;
}
<div id="box">
<span>x<span>x</span></span>
<span>y<span>y</span></span>
<span>z<span>z</span></span>
<span>!<span>!</span></span>
</div>
put them on the side
#box{
display: flex;
justify-content: center;
align-items: center;
font-size: 72pt;
/* dimension ref */
border: 1px solid blue;
position: relative;
}
#box > span {
display: inline-flex;
justify-content: center;
font-family: serif;
border: 1px solid #F0F;
position: relative;
width: 70px;
margin-right: 50px;
}
#box > span > span {
position: absolute;
mix-blend-mode: difference;
font-family: cursive;
color: red;
/* alignment ref */
outline: 1px solid #0F0;
bottom: -1%;
left: 70px;
width: 50px;
}
<div id="box">
<span>x<span>x</span></span>
<span>y<span>y</span></span>
<span>z<span>z</span></span>
<span>!<span>!</span></span>
</div>
EDIT: regarding your comment:
for that, I think it will be better to put letters in one container, then position both of them absolute with baseline alignment. the following example shows that without any additional positioning, meaning it's the baseline of the font. and you can adjust positioning using bottom
#box{
display: flex;
justify-content: center;
align-items: baseline;
font-size: 72pt;
/* dimension ref */
border: 1px solid blue;
position: relative;
height: fit-content;
padding: 100px;
}
.black {
position: absolute;
display: flex;
text-decoration: underline;
justify-content: center;
font-family: serif;
border: 1px solid #F0F;
letter-spacing: 30px;
}
.red {
display: flex;
text-decoration: underline;
position: absolute;
mix-blend-mode: difference;
font-family: cursive;
color: red;
border: 1px solid lightgreen;
letter-spacing: 30px;
}
<div id="box">
<div class="black">XYZ!</div>
<div class="red">XYZ!</div>
</div>
I have an HTML that has a navigation bar on top, a div with some wells and then another div which is the "main page" div.
So the main page div has a table in it with several columns. This table is a form and almost all are inputs. I have tried to add one more column there and the page gives me an overflow to the right.
I want to prevent it and make the table to be able to shrink based on the screen. I have this problem on a 15'' screen. Though on a 32'' screen there is no problem and everything is ok.
My CSS code for the table and the HTML is and from what I see the inputs on the table should be able to shrink base on the default values that they get:
html, body {
height: 100%;
margin: 0;
}
#mileCtlTable{
position: relative;
vertical-align: middle;
text-align: center;
border-collapse: collapse;
margin:auto;
border: 3px solid black;
//white-space: nowrap;
width: 100%;
}
#mileCtlTable thead td{
border: 1px solid black;
font-style:oblique;
text-align:center;
//white-space: nowrap;
margin:0vw;
background-color: navy;
color:white;
}
#mileCtlTable tbody td{
border: 1px solid black;
//width:auto;
white-space: nowrap;
text-align: center;
}
#mileCtlTable td,#mileCtlTable th{
padding: 0.2vw 0.5vw;
}
#mileCtlTable input{
text-align: center;
//white-space: nowrap;
padding: 0.2vw 0.5vw;
}
I have added
input{width: 100%;}
I have a DIV with the text TRANSLATE in it and when hovered it shows a box below with some text the Google Translate plugin, where you can choose to translate to English.
Though, my problem is that after Choose language is clicked and you hover the options (only English in this case) the box with some text and the Google Translate plugin disappears (not the language options though).
Any ideas for a solution? Are there any Google id/class for their DIV of the options, so you maybe can like "when hovered" the "box" is still visable trough display :block;.
See the demonstration at JSFiddle
PS. the code in the demo and below is slightly different, colors and so, just to make it easier to see in the demo.
HTML:
<div id="translate-container">
<div id="translate-text"> TRANSLATE
<div class="translate-box">
<div class="load">Let it load...</div>
<div id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'sv', includedLanguages: 'en',
layout: google.translate.TranslateElement.InlineLayout.SIMPLE, autoDisplay: false},
'google_translate_element');
} </script>
<script type="text/javascript"
src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit">
</script>
<br /><br />
<div class="translate-info">We use Google Translate for translating. We take no
responsibility for the accuracy of the translation.</div>
</div>
</div>
</div>
There is also a meta-tag with the Google Translate "connection code" to my account, but it's not necessary post it here.
CSS:
#translate-container {
background: transparent;
}
#translate-text {
padding-top: 6px;
padding-right: 5px;
text-align: right;
font-family:verdana;
font-weight: 700;
color: #9e9e9e;
}
#translate-text:hover {
color: #aeaeae;
}
#google_translate_element {
float: left;
margin-top: 0px;
z-index: 1000;
}
.translate-box {
display: none;
color: #4b4b4b;
font-size: 14px;
font-weight: 500;
position: absolute;
margin-left: -80px;
text-align:left;
background: rgba(255,255,255,0.9);
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
height: 180px;
width: 160px;
padding: 10px 10px 10px 10px;
box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.33);
border-top: 3px solid #c83232;
z-index: 100;
}
#translate-text:hover .translate-box {
display: block;
}
.load {
opacity: 1.0;
transition: 0.5s;
-webkit-transition: 0.5s; /* Safari */
transition-delay: 1s;
-webkit-transition-delay: 1s; /* Safari */
}
.translate-box:hover .load {
opacity: 0.0;
}
.translate-info {
font-size:11px;
color: #4b4b4b;
font-weight: 500;
}
Managed to do a work-around by choosing to use the Google's In text and Vertical, NOT the Only drop down menu option (Webmaster Tools for Google Translate).
In IE it's still a bit messy... You have to wait until the drop down menu has fully expanded before you move your cursor. You need to keep it absolutely still, otherwise it will disappear and the translate-box that pops up when hovering translate.
Any suggestions for that issue?
I have one more question. In what language is the Google Translate drop down in? What does it say? Is it in my native language Swedish, or is it adjusted to which country the visitors see it from?
What it looks like now: JSFiddle
HTML:
<div id="translate-container">
<div id="translate-text"> <p class="notranslate">TRANSLATE</p>
<div class="translate-box">
<div id="google_translate_element"></div><script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'sv', autoDisplay: false},
'google_translate_element');
}
</script><script type="text/javascript"
src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit">
</script>
<br /> <br />
<div class="translate-info">Use Google to translate the website. <br /><br />
<span>Note: If you are using Internet Explorer, hold your cursor still until the drop
down menu has fully expanded.</span></div>
</div>
</div>
</div>
CSS:
#translate-container {
background: #c8c8c8;
}
#translate-text {
background: #969696;
width:110px;
padding-top: 0px;
padding-bottom: 5px;
padding-right: 0px;
padding-left: 0px;
text-align: left;
font-family:verdana;
font-weight: 700;
color: #fff;
overflow: visible;
}
#translate-text:hover {
color: #000;
}
#google_translate_element {
float: left;
text-align: left;
margin-top: 0px;
z-index: 1000;
}
.translate-box {
display: none;
color: #4b4b4b;
font-size: 14px;
font-weight: 500;
position: absolute;
margin-left: 0px;
margin-top: 0px;
text-align:left;
background: rgba(255,255,255,0.9);
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
width: 220px;
padding: 15px 15px 25px 15px;
box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.33);
border-top: 3px solid #000;
z-index: 100;
overflow:hidden;
}
#translate-text:hover .translate-box {
display: block;
height: auto;
}
.translate-info {
font-size:11px;
color: #4b4b4b;
font-weight: 500;
}
.translate-info span {
font-size:9px;
color: #4b4b4b;
font-weight: 500;
}
I would recommend posting your questions in your self-answer to a separate question. I will address the original question about the disappearing box.
The selection box is made visible when the cursor hovers over the div with id="translate-text". The contents are then hidden again when no longer hovering over said box.
The panel of languages to select that appears when clicking the drop-down is rendered in its own iframe above the underlying content. This iframe is outside the translate-text div with the :hover CSS rule. Thus, when hovering over the iframe contents, browser treats this as no longer hovering over the translate-text div. This is why the box contents are being concealed.
To have the box remain, you would need the language selection iframe to be contained within the translate-text div so the :hover rule would still apply. In order to do that, you'd have to get a reference to the iframe when its created/loaded to insert it at the appropriate position in the DOM hierarchy.
Have a problem with the navigation when scrolling down. It puts itself behind the .post class.
Scrolled down:
Not Scrolled down:
jQuery:
var num = $('.header').height();
$(window).bind('scroll', function () {
if ($(window).scrollTop() > num) {
$('.menu').addClass('fixed-nav');
$('.wrapper').before($('.menu'));
} else {
$('.menu').removeClass('fixed-nav');
$('.menu-menu-container').prepend($('.menu'));
}
});
CSS:
.post {
background: #fff;
border: 1px solid #ddd;
font-size: 16px;
}
/* Navigation style */
.nav {
margin-top: 20px;
margin: 0 auto;
width: 60%;
}
.nav ul {
margin: 0;
padding: 0;
width: 100%;
list-style: none;
font-size: 14px;
text-align: center;
background: rgba(255,255,255,0.9);
border-bottom: 1px rgba(0,0,0,0.1) solid;
font-weight: 300;
font-family: 'Open Sans', sans-serif;
line-height: 1.7;
text-transform: uppercase;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* future proofing */
-khtml-border-radius: 10px; /* for old Konqueror browsers */
}
URL:
http://www.bradlyspicer.net
Edit:
add z-index for div#header {
}
div#header {
z-index: 999;
}
Your stacking context is broken. Inside of Div#header you have nav#navigation. Outside div#header you have div#wrapper.
You can't have div#wrapper scroll below nav#navigation but above div#header. Any element outside div#wrapper is either above or below div#wrapper and its children (without some significant modifications that change the stacking context).
Stacking order isn't as simple as "Higher Z-Index = On Top". Stacking takes into account the location of the element in the element tree, opacity, positioning, and a number of other factors.
Philip Walton wrote a good article about z-index and stacking.
As for a solution, remove nav#navigation from div#header and put it inside the body, and add "position: absolute;" to the nav#navigation element. The result should look something like this.
<body>
<div id="header">...</div>
<div id="wrapper">...</div>
<nav id="navigation" style="position:absolute;">...</nav>
</body>
I have a page called project, in that page there are two grids, one called "imagesGrid" and the other one called "detailsBox", they are floating next to each other using (i.e. both has a width like 50% and display inline-block). I am trying to make the "detailsBox" to start scrolling with the page when the header reaches its top, and stop from scrolling when its bottom reaches the top of the footer. I am also trying to stop the function completely from working and set the "detailsBox" to be positioned as relative when the screen size is below 700px.
I have tried and experimented dozens of tutorials, like:
make div stick to the top of the screen and stop before hitting the footer and http://jsfiddle.net/FDv2J/3/ with no hope.
What is the best path to take to solve my problem? Here is a link to a live preview of the page: http://www.loaidesign.co.uk/portfolio ?project=Test_Project
And here is the HTML and the CSS, I don't have a working JavaScript script, and I tired the ones provided in the links above as well as many others from here, google and codepen, but can't seem to be able to make them work for me.
HTML:
<div class="wrapperB">
<div id="portfolio-projectPage" class="content">
<div class="imagesGrid">
<p>Website</p>
<img alt="Adonis Cars Rental website design" src="images/adonis-cars-website.jpg">
</div>
<div class="detailsBox">
<h3>Adonis Cars</h3>
<p>It's a luxuries cars rental agency based in Qatar</p>
<p>www.adoniscars.com
</p>
<p><strong>Skills:</strong> Web Design</p>
<p><strong>Date:</strong> 2012</p>
<p class="share icons"><strong>Share This Project On:</strong>
<br> <span>Facebook</span> <span>Twitter</span>
<!--Twitter Popup Script-->
<script type="text/javascript">
function popitup(url) {
newwindow = window.open(url, 'name', 'height=440,width=700');
if (window.focus) {
newwindow.focus();
}
return false;
}
</script>
</p>
<div> Go Back
<a class="scrollup">Scroll Up</a>
</div>
</div>
</div>
</div>
CSS:
.imagesGrid, .detailsBox {
display: inline-block;
vertical-align: top;
}
.imagesGrid {
width: 65%;
}
.imagesGrid img {
border: 1px solid #EAEAEA;
margin-bottom: 10px;
display: block;
}
.imagesGrid img:last-of-type {
margin-bottom: 0;
}
.imagesGrid p {
border-top: 1px solid #EAEAEA;
padding-top: 8px;
margin: 10px 0;
}
.imagesGrid p:first-of-type {
border-top: none;
padding: 0 0 10px 0;
margin: 0;
}
.detailsBox {
position: fixed;
top: 0;
width: 347px;
margin-top: 28px;
padding-left: 30px;
}
.detailsBox p {
border-bottom: 1px solid #EAEAEA;
padding-bottom: 10px;
margin: 10px 0;
}
.detailsBox p:first-of-type {
border-bottom: 3px solid #EAEAEA;
margin: 0;
}
.detailsBox p:last-of-type {
border-bottom: 3px solid #EAEAEA;
margin: 0;
}
.detailsBox a:hover {
color: #5575A6;
}
.detailsBox div {
background-color: #F5F5F5;
padding: 15px 0;
text-align: center;
border-radius: 0 0 3px 3px;
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
}
.detailsBox div a {
background-color: #EAEAEA;
padding: 10px 14px;
cursor: pointer;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.detailsBox div a:hover, .detailsBox div a:active {
color: #FFFFFF;
background-color: #5575A6;
}
.share.icons {
cursor: default;
}
.share.icons a {
vertical-align: middle;
background-color: #F5F5F5;
}
.share strong {
margin-right: 10px;
}
.share br {
display: none;
}
.scrollup {
display: none;
}
You might want to check out StickyFloat
It uses JS to achieve what you want. The problem you have is that you're trying to use CSS to conditionally do something, when really that's not what CSS is for
CSS "Float" VS Javascript
If you want the floated div to remain at a certain position all the time, that's okay. But CSS cannot differentiate between elements on the page. Here's the official spec:
fixed The element is positioned relative to the browser window
The problem is fixed is related to the browser window only, not other elements. JS, on the other hand, uses the DOM to create an array of elements on the page, which you can create conditions for. It'd highly recommend looking at StickyFloat, or the other "sticky" JS plugins :)