HR width 100% issue - javascript

Could you tell me how to limit content width to the screen boundary? For the following script i always get 2px width wider than screen (allowed space) width.
document.body.scrollWidth is always 2px wider than screen
<html>
<head>
<style>
* {margin: 0; padding: 0}
</style>
<script type="text/javascript">
function test(){
alert(document.body.scrollWidth);
alert(document.getElementById("hrtest").scrollWidth);
alert(document.getElementById("divtest").scrollWidth);
alert(screen.width);
}
</script>
</head>
<body onLoad="test()">
<div id="divtest">
<hr size="2" width="100%" id="hrtest" />
</div>
</body>
</html>

hr {
border-right : 0;
border-left: 0;
}
Should do it.
You may wish to add important to the style, or iterate through all hr in document and set in-line style.

I believe that the problem is the browser is adding a 1 px border to build the hr. Inspecting the hr with chrome shows us the following styles applied by default to all hr's:
display: block;
-webkit-margin-before: 0.5em;
-webkit-margin-after: 0.5em;
-webkit-margin-start: auto;
-webkit-margin-end: auto;
border-style: inset;
border-width: 1px;
Disabling the border-width: 1px; will give the expected results, but hides the hr. Anyway, removing the hr's width works :P

The default user agent stylesheet for the (Horizontal Line) HTML
element is :
hr {
display: block;
-webkit-margin-before: 0.5em;
-webkit-margin-after: 0.5em;
-webkit-margin-start: auto;
-webkit-margin-end: auto;
border-style: inset;
border-width: 1px;
}
If you want to fix horizontal scroll across the HTML document then follow the solution:
Solution#1:
hr{
width: 100%;
box-sizing: border-box;
}
Solution#2:
hr{
width: 100%;
border-left: 0px;
border-right: 0px;
}

Setting the border width to 0 will fix this.
http://jsfiddle.net/chuckplayer/AuC8b/
* {margin: 0; padding: 0; border: 0}
<div id="divtest" width="100%">
<hr size="2" width="100%" id="hrtest" />
</div>
alert(document.body.scrollWidth);
alert(document.getElementById("hrtest").scrollWidth);
alert(document.getElementById("divtest").scrollWidth);

If you really want the <hr> to match the exact width of the body then I would recommend hiding the border style of the <hr> and using a background-color with a height: 1px. You can view the code here: http://jsfiddle.net/helpinspireme/fg6Mp/3/
CSS
hr{
border-style: none;
background: #000;
height: 1px;}
​
jQuery
var body_width = $('body').width();
var div_width = $('div').width();
var hr_width = $('hr').width();
alert(body_width);
alert(div_width);
alert(hr_width);
​
HTML
<div>
<hr/>
</div>​

Use a table as follows:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td>
<!-- your htlm block -->
</td></tr>
<tr><td style="border-bottom: 1px solid black;" height="50">
</td></tr>
</table>
You can play with the height of the row or use border-top, each time you need a hr add this row in your table

Related

Size of HTML Box in Google site

I am trying to insert a collapsible table with HTML Box in a Google site. The code of the collapsible table is from http://tutorials.seowebpower.com/google-sites-advanced/collapsible-table. The code is
<html>
<head>
<style>
.container {
background-color:deepskyblue;
width: 600px;
height:50px;
position: relative;
}
.title {
font-size: 16pt;
font-weight: bold;
color: aliceblue;
position: absolute;
left: 20px;
top:25%;
}
#opened {
display: none;
}
.arrow-up {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid white;
}
.arrow-down {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid white;
}
.arrow-up, .arrow-down {
position: absolute;
top: 40%;
right:15px;
}
.hidden-content {
margin:0 0 20px 0;
padding: 10px 20px 10px 20px;
border: 1px solid deepskyblue;
border-top: none;
background-color: aliceblue;
}
</style>
<script>
var collapse;
var uncollapse;
var turnOn = true;
// Chrome Sites Fix
var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
function tempChromefix() {
// To turn off set true to false
if (turnOn == false && is_chrome) {
document.getElementById("opened").style.display = "block";
document.getElementById("closed").style.display = "none";
} else {
return false;
}
}
function uncollapse() {
document.getElementById("closed").style.display = "block";
document.getElementById("opened").style.display = "none";
}
function collapse() {
document.getElementById("opened").style.display = "block";
document.getElementById("closed").style.display = "none";
}
</script>
</head>
<body onLoad="tempChromefix()">
<table id="closed">
<tr>
<td>
<div class="container" onclick="collapse()">
<div class="title">Click to open drop-down</div>
<div class="arrow-down"></div>
</div>
</td>
</tr>
</table>
<table id="opened">
<tr>
<td>
<div class="container" onclick="uncollapse();">
<div class="title">Click to close drop-down</div>
<div class="arrow-up"></div>
</div>
<div class="hidden-content">
<h3>It works!</h3>
<p>This content is to be hidden from the user until clicked. </p>
</div>
</td>
</tr>
</table>
</body>
</html>
The problem I am facing is with width of the table. I would like it to have maximum possible width depending on the screen size. For example, I would like to have the table expand to the screen size in my MacBook as well as in iMac.
The logical way is to use the width: 100% so that the table inherits its parent's screen size. However it seems that inside an HTML Box the different categories does not inherit parent's attribute.
For example in the .container section, if I use width: 100%, it collapses to zero width instead of full size of the screen.
Would appreciate any help!
--- Madhur
I had this issue also, and eventually figured out (the very un-intuitive) way is to hover over the HTML box, and then click on the "Align center" icon. When you save, elements will be the full width (my div's were at least).

How to force DIV inside an LI (with overflow hidden styling) still show

I've got 3 LI with class=box and they are styled with overflow hidden. I need to create a DIV with class=badge inside one box (in this case the 3rd/blue box).
My objective is:
1. that this badge DIV (set as position absolute) follows or can use as reference the relative position of that particular box.
2. that this yellow badge DIV can be displayed outside of the blue box.
I have been trying a lot of things to make this mission impossible code, but I was wondering if anybody here has already done this before.
Preferred solution: Javascript or jQuery and workable in IE8 if possible if not at least IE9.
HTML:
<div class="container">
<li class="box" style="background-color: red;">
red
</li>
<li class="box" style="background-color: green;">
green
</li>
<li class="box" style="background-color: blue;">
<div style="background-color: #ff0;" class="badge">badge</div>
blue
</li>
</div>
css:
.container {
border:1px solid black;
width: 500px;
height: 120px;
margin: 20px auto 0px;
background-color: grey;
}
.badge {
position: absolute;
width:100px;
height: 100px;
border: 1px solid black;
text-align: center;
vertical-align: middle;
bottom: -55px;
}
.box {
float: left;
width:100px;
height: 100px;
border: 1px solid black;
margin: 10px; 5px;
text-align: center;
vertical-align: middle;
position: relative;
/*overflow: hidden;*/
}
NOTE: overflow hidden code is commented, for you to see the output I need to have.
I have a jsfiddle here for quick reference: http://jsfiddle.net/philcyb/1m73qewm/
You could try something like this:
var $badge = $('div.badge'),
xOffset = $badge.offset();
$badge.appendTo('body').css({
top: xOffset.top,
left: xOffset.left
});
You probably need to add scrollTop() and the like too.
So the simplest solution that is supported by what you require would be to add another parent that does your clipping for you.
Simple have the structure such as .box > .box-inner > text + badge
An example of how that would look for your blue box would be.
<li class="box" style="background-color: blue;">
<div class="box-inner">
Blue
</div>
<div style="background-color: #ff0;" class="badge">badge</div>
</li>
The CSS for the inner box would be
.box-inner {
width:100%;
height:100%;
overflow:hidden;
}
I have updated your fiddle with what that would look like.
FIDDLE
http://jsfiddle.net/1m73qewm/12/
HTML:
<li class="box" style="background-color: blue;">
<div style="background-color: #ff0;" class="box">badge</div>
blue
</li>
CSS:
.box {
float: left;
width:100px;
height: 100px;
border: 1px solid black;
margin: 10px; 5px;
text-align: center;
vertical-align: middle;
position: relative;
overflow: hidden;
}
I presume this is what you mean't ! Just see the changes in the above code.

Create a table dynamically with fixed col width in IE7

I create a table dynamically by JS with table-layout and width both fixed. And also set the columns' width to a fixed value in pixels. But the created table is not rendered according to the intention in IE7.It seems width property in col doesn't work. But it works both in FF and Chrome.
The created table with following dom structure:
<table id="dynamicTable" cellspacing="0" width="282px" style="table-layout: fixed; overflow: hidden;">
<colgroup>
<col width="129px">
<col width="76px">
<col width="76px">
</colgroup>
<tbody>
<tr><td>head1-1</td><td>head1-2</td><td>head1-3</td></tr>
<tr><td colspan="2">head2-1,2</td><td>head2-3</td></tr>
<tr><td>head3-1</td><td>head3-2</td><td>head3-3</td></tr>
</tbody>
</table>
and css:
table {
border-style: solid solid none none;
border-width: 1px;
border-color: #c0c0c0;
}
td {
border-style: none none solid solid;
border-width: 0 0 5px 5px;
border-color: #000 #000 #c0c0c0 #c0c0c0;
padding: 10px;
margin: 0;
}
#dynamicTable {
background-color: #eee;
}
DEMO
html in jsbin
Can anybody explain the behavior in IE7?

How to open popup window from each of dynamically generate tr

I am trying to open a popup window from a parent window. I have two tr and each tr has a apply button and as soon as I click on the apply button it will open a popup window.
But somehow, popup window gets opened for first tr only apply button meaning as soon as I click on the Apply Button for the first tr, popup window gets opened.
But for the second tr apply button, popup window doesn't gets opened.
I am not sure why it is not working.
Below is my full code.
<html>
<head>
<style>
* { font-family: Trebuchet MS; }
#containerdiv {width:90%; height: 90%; display: none; position: fixed;margin-top: 5%; margin-left: 5%; background:#FFF; border: 1px solid #666;border: 1px solid #555;box-shadow: 2px 2px 40px #222; z-index: 999999;}
/*#containerdiv iframe {display:none; width: 100%; height: 100%; position: absolute; border: none; }*/
#blockdiv {background: #000; opacity:0.6; position: fixed; width: 100%; height: 100%; top:0; left:0; display:none;}
ul { padding:10px; background: #EEE; position: absolute; height: 200px; overflow: scroll;}
ul li {color: #222; padding: 10px; font-size: 22px; border-bottom: 1px solid #CCC; }
h3 { font-size: 26px; padding:18px; border-bottom: 1px solid #CCC; }
#close { top: 13px;position: absolute;right: 13px; padding: 10px; background: #EEE; border: 1px solid #CCC;}
#close:hover { cursor: pointer; background: #E5E5E5 }
#apply { top: 13px;position: absolute;left: 13px; padding: 10px; background: #EEE; border: 1px solid #CCC;}
#apply:hover { cursor: pointer; background: #E5E5E5 }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
function open(url) {
$('#blockdiv').fadeIn();
$('#iframe').attr('src', url);
$('#containerdiv').fadeIn();
}
function close() {
$('#blockdiv').fadeOut();
$('#containerdiv').fadeOut();
}
$(document).ready(function() {
$('ul').css({width: $('#containerdiv').width(),height: $('#containerdiv').height()})
$('#close').click( function() { close() })
$('#JN_apply').click( function() { open($(this).data('url')); })
});
</script>
</head>
<body bgcolor="#F8F8F8">
<table width="850" border="0" align="left" style="table-layout:fixed; font-family:Arial, Helvetica, sans-serif; font-size:12px;" >
<tr bgcolor = "#C4D3D9" align = "center" height = "10" style="font-size:13px">
<th width = "65%">Description</th>
<th width = "10%">Apply</th>
</tr><tr align="left" style="margin-bottom:10px;">
<td style="word-wrap: break-word; border-top:none" valign="top">
<p><span style="font-size:14px; font-weight:bold">
Field Specialist Program
</span>
<br />
</td>
<td>
<input id= "JN_apply" type=button value="Apply" data-url="http://www.yahoo.com/">
</td>
</tr>
<tr align="left" style="margin-bottom:10px;">
<td style="word-wrap: break-word; border-top:none" valign="top">
<p><span style="font-size:14px; font-weight:bold">
Field Specialist Material
</span>
<br />
</td>
<td>
<input id= "JN_apply" type=button value="Apply" data-url="http://www.google.com/">
</td>
</tr>
</table>
<div id="blockdiv"></div>
<div id="containerdiv">
<iframe id="iframe" style="width:100%; height: 100%; outline: 1px solid red;"></iframe>
<span id="close">Close</span>
</div>
</body>
</html>
This is the jsfiddle that I have created. In that you will see that if you click on first Apply button then the popup will get open, but as soon as you click on the second apply button, the popup won't get open. Can anybody explain me why this is happening? And how to resolve this?
Your html is invalid: the id attribute is supposed to be unique. When you use the selector #JN_apply" it selects just one of the buttons (in most browsers this will be the first, as you have seen).
You should change each one to use a class instead of an id:
<input class="JN_apply" type=button value="Apply" data-url="http://www.yahoo.com/">
...and then change the jQuery selector to match:
$('.JN_apply').click( function() { open($(this).data('url')); })
Updated demo: http://jsfiddle.net/p3wgm/3/
Note also that it's not a good idea to create global functions called open() and close() because there are already built-in functions open() and close() and your functions will overwrite these. Perhaps openPopup() and closePopup() or similar? Or define them inside your document ready handler so that they're not global, which would probably be better regardless of the names. Or if they're only ever called from one place (like in your example) just put that code directly in the click handlers.

Is it possible to have a non-rectangular div?

I need to shape ONE div tag in the following shape:
Is it possible to make it cross browser? I don't necessarily need rounded corners. I need it so I can change the color of the borders of the whole div on hover, so I assume it can't be achieved by using two divs.
Yeah, you can do that using HTML and CSS like this: http://jsfiddle.net/broofa/364Eq/
It's essentially using three divs to aggregate the mouse events, like so:
<div id="outer">
<div class="inner"></div>
<div class="inner"></div>
</div>
And I use a :hover rule on the outer element to affect the border colors on the inner divs:
#outer .inner {border-color: red}
#outer:hover .inner {border-color: blue}
The only quirk with this markup is that the content area - the area you drew in your image - is that it's two divs, not one. So text won't wrap and flow the way you might expect. Also, this may not work so well on older (IE6-7) browsers. But FF, Chrome, Safari, Opera should probably be okay.
A one div solution using pseudo elements:
/* relevant styles for shape */
.tab {
border-top-left-radius: 0px;
margin-left: 100px;
}
.tab:before {
content:"";
display: block;
position: relative;
height: 50px;
width: 50px;
right: 52px; /* width + border width */
top: -2px;
background-color: white;
border: inherit;
border-right-width: 0px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
/* styles to look like example */
div{
box-sizing: border-box;
background-color: white;
border: 2px solid red;
height: 100px;
width: 200px;
border-radius: 5px;
}
div:hover {
border-color: green;
}
<div class="tab"></div>
See this jsFiddle example:
<div id="main">
<div id="div1" class="border">
</div>
<div id="div2" class="border">
</div>
</div>
You can either use a map or use 2 divs and alter the borders so it looks like one shape.
two options that I can think of:
1) give the div a background image and use CSS pseudo class :hover to change the background image to one that indicates a hover state
2) put three div's inside a wrapper, and position them so so you have one in the upper left hand corner, and then two stacked on top of each other, so that you can simulate the top half of a larger div missing the upper left half border. I don't think CSS alonw can target all the divs in order to change their borders, so will probably have to use JS to execute the hover behavior, by applying an event handler to all three divs.
No. Divs are ALWAYS rectangular. You could fake it in a number of ways (using a background image would be one option).
As for using two DIVs, sure you could. The hover could be done with CSS3 and child selectors of a parent div or you could JavaScript to change the class of both divs when hovering over either one of them.
Definitely requires two or three div's unless you use a background image
Here's a three-div solution
http://jsfiddle.net/pxfunc/SUuF6/
Its cross-browser compatible. The hover won't work in IE6, but it will in IE7+. The rounded corners will show based on browser support
HTML:
<div id="fancyShape">
<div id="main"><div></div>
<div id="panHandle"></div>
</div>
CSS:
#fancyShape {position:relative;width:504px;height:304px;}
#main {
margin-left:100px;
width:400px;
height:300px;
border:solid 2px #000;
border-radius:0 15px 15px 15px;
}
#panHandle {
width:100px;
height:120px;
position:absolute;
top:0;left:0;
border-top:solid 2px #000;
border-left:solid 2px #000;
border-bottom:solid 2px #000;
border-radius:15px 0 0 15px;
}
/* hover effect */
#fancyShape div {background-color:#fff;}
#fancyShape:hover div {background-color:#ff0;border-color:red;}
Perhaps you could use Border-radius along with 2 or 3 div's to get the look you want. The only issue then is it's not supported in all browsers.
Use multiple divs, as others have suggested.
http://jsfiddle.net/thomas4g/7B5MA/14/
Keep in mind that it'll be very hard to flow content in this.
<!DOCTYPE HTML>
<html>
<head>
<style>
html{height: 100%; width: 100%;}
body{height: 100%; width: 100%;}
#wrapper{
position: relative;
top: 50px;
right: 25%;
width: 565px;
height: 440px;
margin: 0 auto;
padding: 0px;
}
#left{
position: absolute;
width: 100px;
height: 50px;
border: 2px solid black;
border-right: none;
-moz-border-radius-bottomleft: 10px;
border-bottom-left-radius: 10px;
-moz-border-radius-topleft: 10px;
border-top-left-radius: 10px;
background-color: #ffffff;
}
#right{
position: absolute;
left: 100px;
width: 440px;
height: 440px;
border: 2px solid black;
-moz-border-radius: 10px;
-moz-border-radius-topleft: 0px;
border-top-left-radius: 0px;
border-radius: 10px;
padding-left: 25px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"> </script>
<script type="text/javascript">
$(document).ready(function(){
$('#wrapper').hover(
function () {
$(this).children('#left').css({'border':'2px solid red', 'border-right':'none'});
$(this).children('#right').css({'border':'2px solid red'});
},
function () {
$(this).children('#left').css({'border':'2px solid black', 'border-right':'none'});
$(this).children('#right').css({'border':'2px solid black'});
});
});
</script>
</head>
<body>
<div id="wrapper">
<div id="right">Some content here</div>
<div id = "left"></div>
</div>
</body>
</html>
You can use CSSPIE for rounded orners for IE

Categories