Develop Reference

jQuery width, outerWidth, innerWidth - return fake values

I want to absolutely position my buckles for animation and this is my html:
<div id="about">
<div id="weare">lorem.ipsum</div>
<div id="who"><span id="whospan"><B>LOREMSIT.DOLOR</B></span></div>
<div id="what"><div id="klamra_l">[</div><div id="klamra_r">]</div><span id="whatspan">Lorem ipsum dolor sit amet, consectetur.</span></div>
</div>
I am using for it jQuery:
function ustawklamry()
{
var w_what = parseInt($("#what").outerWidth(true));
var w_whatspan = parseInt($("#whatspan").outerWidth(true));
var left = parseInt((w_what - w_whatspan)/2);
var right = parseInt(left + w_whatspan);
$("#klamra_l").css("left",left);
$("#klamra_r").css("left",right);
console.log(w_what + ";" + w_whatspan + ";" + left + ";" + right);
}
ustawklamry();
And what I get is:
And in console I see:
964;596;184;780
What is more, the space between buckles is equal to #whatspan (green field).
I have no idea why it is not working. I tried width, outerWidth, innerWidth and no one is working.
Please for help, if you want any additional data - ask.

First, I will address your following problem.
Oh my god, I see it is working good on fiddle but on my website not... I thought about problem while page is loading and I used $(document).ready(function(){... but it is not working too. Where is the problem?
This is because code from other parts of the page are be interfering with your code for this part of the page. If you can't find it anywhere in your javascript, then it must be in your CSS. Try opening up the dev tools (inspecting the page) and see what CSS values that menu is inheriting from its parent element in your production page. Then, try inspecting the JSfiddle page. Finally, try to get the CSS inherited from the parent element on the production page to be the same as the CSS inherited from the parent element on the JSFiddle page. Now it should work. Also, pay very close attention to !important tags. I have a sneaking suspicion that they might be the culprit.
To the next issue: you don't actually need javascript. Also, your layout is inflexible, it will look good on some devices, and bad on others because you don't make the size adaptive to the user's screen size. Here is a demo that works in IE9 and automatically resizes based on the user's screen size by using vw units in the font size, and transform: translateY(.125em) to center the brackets. Also, you could cut down on your DOM usage. Considering all these things, I hope you find this very useful:
#about {
border: 2vw solid #FFF;
padding: 3vw;
//border-radius: 50% / 50%;
display: inline-block;
background-color: black;
max-width: 80vw;
outline: 99vh solid black;
box-shadow: 0 0 0 99vw black;
overflow: hidden;
position: fixed;
top:0;bottom:0;
left:5vw;right:5vw;
margin: auto 0;
height: 17.5vw;
}
#weare {
color: #FFF;
font-size: 3vw;
margin: 0 auto;
text-align: center
}
#who {
color: #FFF;
font-size: 9vw;
margin: 0 auto;
font-family: Oswald, sans-serif;
text-align: center;
letter-spacing: 133%;
font-weight: bold;
}
#what {
color: #FFF;
font-size: 2.5vw;
margin: 0 auto;
font-weight: 300;
text-align: center;
vertical-align: middle;
background-color: red;
}
#greenbackground::before {
direction: rtl;
}
#greenbackground::after, #greenbackground::before {
content: ']';
font-size: 2em;
transform: translateY(.125em);
background: none;
line-height: 0;
display:inline-block;
color: white;
width: 0;
}
#greenbackground {
background:green;
display:inline-block;
height: 100%;
}
<div id="about">
<div id="weare">lorem.ipsum</div>
<div id="who">LOREMSIT.DOLOR</div>
<div id="what"><span id="greenbackground">Lorem ipsum dolor sit amet, consectetur.</span></div>
</div>
JSFiddle Link
To add some snazzy roundness to it, all you need is 1 extra line of code.
#about {
border: 2vw solid #FFF;
padding: 3vw;
border-radius: 50% / 50%;
display: inline-block;
background-color: black;
max-width: 80vw;
outline: 99vh solid black;
box-shadow: 0 0 0 99vw black;
overflow: hidden;
position: fixed;
top:0;bottom:0;
left:5vw;right:5vw;
margin: auto 0;
height: 17.5vw;
}
#weare {
color: #FFF;
font-size: 3vw;
margin: 0 auto;
text-align: center
}
#who {
color: #FFF;
font-size: 9vw;
margin: 0 auto;
font-family: Oswald, sans-serif;
text-align: center;
letter-spacing: 133%;
font-weight: bold;
}
#what {
color: #FFF;
font-size: 2.5vw;
margin: 0 auto;
font-weight: 300;
text-align: center;
vertical-align: middle;
background-color: red;
}
#greenbackground::before {
direction: rtl;
}
#greenbackground::after, #greenbackground::before {
content: ']';
font-size: 2em;
transform: translateY(.125em);
background: none;
line-height: 0;
display:inline-block;
color: white;
width: 0;
}
#greenbackground {
background:green;
display:inline-block;
height: 100%;
}
<div id="about">
<div id="weare">lorem.ipsum</div>
<div id="who">LOREMSIT.DOLOR</div>
<div id="what"><span id="greenbackground">Lorem ipsum dolor sit amet, consectetur.</span></div>
</div>
JSFiddle Link

How to remove scroll bar on page

Working on a webpage that has one "div" which is aligned as center. I went through a bunch of methods to try and get it working the way that I want it to, and finally found the closest one. I have a working demo over here
FIDDLE
My only problem with it right now is that even when the content doesn't take up the whole content of the page, it still adds a scroll bar. I'm wondering if there's anyway to remove that? I believe it has to do with the jQuery method of centering the "div".
Javascript:
$(function() {
jQuery.fn.center = function() {
this.css("position", "fixed");
this.css("top", ($(window).height() / 2) - (this.outerHeight() / 2));
this.css("left", ($(window).width() / 2) - (this.outerWidth() / 2));
return this;
}
$('#myDiv').center();
$(window).resize(function() {
$('#myDiv').center();
});
});
CSS
* {
margin: 0;
padding: 10px;
}
html,
body {
height: 100%;
}
body {
font-family: 'Josefin Sans';
text-align: center;
}
p {
font-size: 18px;
margin: 0 0 0.5em;
}
.centered-wrapper {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 100%;
}
.centered {
background: #ccc;
border-radius: 8px;
margin: 0 auto;
padding: 20px;
width: 85%;
}

body{
overflow: hidden;
}
Vertical only:
body{
overflow-y: hidden;
}
Horizontal only:
body{
overflow-x: hidden;
}
Possible duplicate: Hiding the scrollbar on an HTML page

Setting overflow to hidden may solve the scrollbar not appear but in that case it may not be fully vertically centered.
Instead you can not set padding on all elements, like you do with
* {
margin: 0;
padding: 10px;
}
It makes your body element and .content-wrapper to have extra padding of 10px that adds to its height and makes the scrollbar appear, if you set this padding to 0 the scrollbar disapears, check on your fiddle.
So for your example you could set your css like
body, html {
margin: 0;
padding: 0;
}
p, h1, h2, h3, h4, span, br, hr {
margin: 0px;
padding: 10px;
}
html,
body {
height: 100%;
margin: 0;
}
body {
font-family: 'Josefin Sans';
text-align: center;
}
p {
font-size: 18px;
margin: 0 0 0.5em;
}
.centered-wrapper {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 100%;
}
.centered {
background: #ccc;
border-radius: 8px;
margin: 0 auto;
padding: 20px;
width: 85%;
}
/*
Button
*/
.btn {
-webkit-border-radius: 8;
-moz-border-radius: 8;
border-radius: 8px;
font-family: Arial;
color: black;
font-size: 18px;
background: #ccc;
padding: 10px 20px 10px 20px;
text-decoration: none;
outline: none;
}
.btn:hover {
background: #bbb;
text-decoration: none;
}
In that case scrollbar won't appear.
Instead of setting margins and paddings on all elements with * use something like css style reset. Google for it. Then apply padding only on those elements you really need.

html,
body {
position: fixed;
top:00;
left:0;
bottom:0;
right:0;
}
Here is your updated demo

set overflow to hidden; this may solve it.

toggleClass and slideToggle bug

The main question I have concerns toggleClass(). Since I'm not the greatest with jQuery, I'm not sure what to search for. Here is my code:
JS
jQuery.noConflict();
jQuery(document).ready(function() {
jQuery('.quickLinks').click(function() {
var options = {direction: 'right'};
var duration = 400;
jQuery('#quickLinks').slideToggle(options, duration);
jQuery('.quickLinks').toggleClass('sidebar-blue');
});
jQuery('.quickLinks').hover(function() {
jQuery(this).css({
'border-top-color': '#1C8BE6',
'color': '#1C8BE6'
});
}, function() {
jQuery(this).css({
'border-top-color': '#003663',
'color': '#fff'
});
});
});
CSS
/** Style for the button & div **/
.sidebar {
position: fixed;
bottom: 0;
z-index: 100;
width: 100%;
display: block;
}
.quickLinks, #quickLinks {
float: right;
margin-left: 100%;
width: 230px;
}
.quickLinks {
cursor: pointer;
padding: 10px 0px 5px;
background-color: #003663;
white-space: nowrap;
text-align: center;
font-family: 'Just Another Hand', Arial, Helvetica, sans-serif;
font-weight: 400;
font-size: 26px;
line-height: 26px;
color: #fff;
border-top: 3px solid #003663;
border-radius: 5px 5px 0px 0px;
}
.quickLinks.sidebar-blue {
line-height: 20px;
color: #1C8BE6 !important;
border-top: 3px solid #1C8BE6 !important;
}
#quickLinks {
position: relative;
display: none;
background-color: #003663;
right: 0px;
z-index: 100;
}
#quickLinks > ul {
list-style-type: none;
float: right;
margin: 5px 10px;
padding-left: 0px;
}
#quickLinks > ul > a > li {
color: #fff;
white-space: nowrap;
}
#quickLinks > ul > a > li:hover {
color: #1C8BE6;
}
When I expand the menu, the head text is blue. After clicking it again to slide down the menu, the "Quick Links" text remains blue until you move the mouse. I'd like it to change either right when it's clicked again or once the sliding transition is complete.
The other question I have is whenever clicking the second time, the menu jumps. It goes up a few pixels before returning down. It doesn't happen on the actual site I'm using this for, but it does in jsfiddle. I'd just like to know why.
Here's where I'm at so far :
Fiddle

Div start scrolling when the header reaches its top and stop from scrolling when the its bottom reaches the footer

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 :)

dataTables header alignment issues

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.