Develop Reference

Chrome replaces main window when loading iframe

I wrote a simple viewer for Greek syntax trees:
http://ibiblio.org/bgreek/resources/syntax-trees/reader/
On Chrome, when I am not running this locally, the main window is replaced when the iframe is loaded. See below. How can I fix this so that the main window remains on all browsers?
The main page has an iframe into which I load an XML file that is formatted with its own CSS stylesheet:
<iframe id="display" src=""></iframe>
The code loads the file into this iframe when the button is clicked:
function loadPassage() {
var passage = document.getElementById("passage").value;
document.getElementById("display").src = treeFile(passage, "nestle1904");
}
The body hides the scrollbar, the iframe does not:
body {
background-color: antiquewhite;
overflow: hidden;
}
iframe {
overflow: scroll;
background-color: antiquewhite;
width: 100%;
height: 100em;
}

Remove the attribute overflow: hidden from the element body and add overflow: hidden to the element html
html {overflow: hidden}
body {background-color: antiquewhite; margin: 8px;}
so you will have no scrollbar in your browser, but there will be in iFrame.

Here's what I learned: when the iframe is loaded, some browsers scroll past the area of the parent window to make room for the iframe, some do not. If I enable the scrollbar in the parent window, it is easy to see this happening. If I disable it, it looks like the parent window disappears, but it is merely scrolling past the top part of the window without providing a way to scroll back to it.
I can get rid of this problem by reducing the size of the iframe. That gives me a simpler problem to solve: how can I create the child window to take up all the remaining space beneath it in a device independent manner.
And someone provided a nice answer here:
How do I make an iframe fill the rest of the page?
So it works now, using this CSS:
html {
overflow: hidden;
background-color: antiquewhite;
}
html, body, iframe {height: 100%}
#top {
height: 120px;
}
form {
font-size: large;
font-weight: bold;
color: blue;
}
form input {
background-color: white;
}
iframe {
overflow: scroll;
background-color: antiquewhite;
width: 100%;
height: calc(100% - 120px);
}

Dropdown centered underneath parent with overflow: hidden

I have a nav bar which has a string of text for a link that opens a dropdown. The parent of this link has overflow: hidden to allow me to truncate the string incase it gets too long. However, I want the dropdown to be positioned absolutely underneath and centered regardless of the width of the parent. Since I'm using overflow: hidden, the dropdown gets cutoff. I want to keep the positioning of the dropdown as well as the overflow properties.
Is there a CSS fix for this? I know I can't ignore the parent's overflow property, but I'd rather not use position: fixed and manipulate margins with JavaScript if possible.
I've made a simple fiddle here
Thanks in advance!

Unfortunately there is no way in CSS to make a child of an overflow: hidden element show its contents outside the parent borders, you must change the hierarchy.
If that is not possible, you could add padding at the bottom to .nav-pull-left that is the size of your dropdown, although that's a rubbish solution..
.nav_pull_left {
width:auto;
height:50px;
padding-bottom: 80px;
overflow:hidden;
float: none;
border: 1px solid black;
white-space: nowrap;
}
You could also use JavaScript to dynamically update the height of your parent container when the dropdown shows but once again, reordering the hierarchy is best and cleanest.
If that is the way you want to go, let me know and I can help :)

May I suggest the following, where you change your css as follows.
.nav_pull_right {
min-height:50px; /* changed height to min-height */
...
}
.nav_pull_left {
min-height:50px; /* changed height to min-height */
...
}
.my_dropdown {
position: relative; /* changed absolute to relative */
margin: 0;
margin-left:-87px;
/* top: 2em; */ /* removed top */
left: 50%;
width: 170px;
z-index: 99999;
border:2px solid #929292;
}
With this your container overflow is kept and gets pushed down, the drop down menu is centered.
Is this something you could use?
Here is a fiddle demo

Removing vertical white space between divs, especially after hitting a breakpoint

I'm working on a responsive page design at the moment and I'm running into an issue with white-space between the divs, especially after hitting breakpoints.
body, html {
padding: 0;
margin: 0;
}
.header {
padding-top: 5px;
background-color: red;
width: 100%;
}
.sub-header {
padding: 5px;
margin: 0px;
background-color: yellow;
width: 100%;
}
.main-content {
padding: 5px;
background-color: blue;
width: 100%;
}
.footer {
position: absolute;
bottom: 0;
padding: 5px;
background-color: green;
width: 100%;
}
#media screen and (max-width: 320px) {
.sub-header {
display: none;
}
}
}
<div class="header">Header
<div class="sub-header">Sub-Header</div>
</div>
<div class="main-content">Auto adjust size</div>
I want to have the blue div take up the remaining space in this white space, as well as after the sub-header is removed at the break point.
<div class="footer">footer</div>
Here's a quick mock up of what I'm experiencing: http://jsfiddle.net/gaych7vp/6/
I understand what I have to do in order to make it take up the remainder of the white space before it hits a breakpoint (I'm assuming just tweaking the height values), but how would I go about making the blue div take up the remaining white space that gets created when the yellow div gets hidden after hitting the breakpoint?
I'm still really new to javascript but from other answers I've read it could be done by creation a function that finds the height of the browser and then subtracts it from the other divs. Is that possible and if so, how could I accomplish that?

Use position:absolute with different top values
.main-content {
position:absolute;
top:51px;
bottom:0px;
}
and
#media screen and (max-width: 320px) {
.main-content {
top: 23px;
}
}
fiddle
Another approach is using display:table and display:table-row
body, html{
width:100%;
height: 100%;
}
body{
display:table;
}
.main-content {
width: 100%;
height: 100%;
display:table-row;
}
fiddle
Make a div fill the height of the remaining screen space

You can use calc on the .main-content div to calculate the size, but you would need to set the heights of the header, footer, and subheader divs. Seems to me though you could just give the body a background color of blue, and achieve the same thing?

Change
#media screen and (max-width: 320px) {
.sub-header {
display: none;
}
}
to
#media screen and (max-width: 320px) {
.sub-header {
visibility: hidden;
}
}
I think this is what you meant. Fiddle.

There's no need for a JavaScript solution here.
The white area is caused because you are using position: absolute to force the footer to the bottom of the window, regardless of the content.
This isn't the normal way to achieve this, you'll run into issues later on when you do add content to your main-content div. You'll find that the footer will be positioned over this content (this will also happen if you shrink the window vertically).
I think what you'd like to do, is give the main-content div a min-height:, this way, the page won't collapse and look terrible if there is little content, but it will stretch naturally when more content is added.
You can also and remove the position: absolute from the footer div.
Here is a demonstration:
http://jsfiddle.net/t46aopas/
** UPDATE **
If you'd like a dynamic solution, I've created a heavily annotated JavaScript example here: http://jsfiddle.net/nahgdkaw/
(I included lots of comments since you said you were new to JavaScript ;) )
That should hopefully help you along the way a little.
Be aware that if the content inside the .main-content div is larger than the .main-content div area, the div will NOT expand to accommodate it.
You can however use the code provided and add in an if statement to, before resizing the .main-content div, check if the .main-content content
is larger than the available area (you may need to add a wrapper div around the .main-content content). If so, then resize the .main-content div to match the .main-content content height (otherwise, perform the resize as it currently is).
(Also, I strongly advise against using HTML tables for anything other than tabular data)

I edited my original answer but don't have the reputation points necessary to add a comment to notify you. I'll remove this answer after you've seen my updated answer above.

Change the scrollbar styles in KendoUI grid

How to change the scrollbar css in Kendo UI grid.
Is there any way (jQuery or CSS or anything) to change the styles. I wanna change the width of the scrollbar.

In webkit, you can use ::-webkit-scrollbar property to define custom scrolbar
::-webkit-scrollbar {
width: 4px;
}
::-webkit-scrollbar-button {
background: #ccc
}
::-webkit-scrollbar-track-piece {
background: #888
}
::-webkit-scrollbar-thumb {
background: #eee
}
OR
you could use Javascript plugins to customize scrollbars, like jQuery custom content scroller

Height of the slider according to the width of the screen

I just created a slider with bootstrap 3 and it works fine.
I want to like this site: i.e. the image is reduced height to the width of Register Main Menu.
How can I do this?

Taken directly out of normalize.css
CSS:
img {
/* Remove border when inside `a` element in IE 8/9. */
border: 0;
/* Improve image quality when scaled in IE 7. */
-ms-interpolation-mode: bicubic;
/* Suppress the space beneath the baseline */
/* vertical-align: bottom; */
/* Responsive images */
max-width: 100%;
height: auto;
/* Correct IE 8 not scaling image height when resized. */
width: auto;
width: auto\9;
}