Variable width div to fill available space without wrapping
Hi,
I have a container div with 2 child elements (a <b> tag and a <p> tag). The container width is 100%, the <b> tag width is unknown as is the <p> tag. I have floated both child elements to the left but when the <p> tag overflows the entire <p> tag is placed underneath the <b> tag. How can I get it to always display on the same line?
Note: this works and appears correctly in Internet Explorer. The issue is only present in Firefox.
I have coded the page to work in such a way that if the text overflows, it scrolls into view on hover.
Code:
<html>
<head>
<style type="text/css">
body
{
margin: 10px;
padding: 0px;
}
.marquee
{
margin: 0px;
padding: 0px;
width: 100%;
height: 16px;
clear: both;
cursor: pointer;
}
.marquee b
{
margin: 0px;
padding: 0px;
height: 16px;
font-family: Georgia;
font-size: 12px;
font-weight: bold;
color: #000000;
float: left;
}
.marquee p
{
margin: 0px;
padding: 0px;
height: 16px;
font-family: Georgia;
font-size: 12px;
font-weight: normal;
color: #666666;
float: left;
overflow: hidden;
}
</style>
<script type="text/javascript">
var broken = true;
var element;
var text;
var color;
function scroller(id)
{
var e = document.getElementById(id).childNodes[1];
if(e.clientHeight < e.scrollHeight)
{
broken = false;
element = e;
text = e.innerHTML;
scroll();
}
}
function scroll()
{
if(!broken)
{
if(element.innerHTML.length > 0)
{
element.innerHTML = element.innerHTML.substring(1,element.innerHTML.length);
setTimeout('scroll()',50);
}
else
{
element.style.color = '#ffffff';
element.innerHTML = text;
fade();
}
}
else
{
element.innerHTML = text;
}
}
function fade()
{
if(!broken)
{
if(element.style.color != '#666666')
{
switch(element.style.color)
{
case '#ffffff':
element.style.color = '#eeeeee';
setTimeout('fade()',100);
break;
case '#eeeeee':
element.style.color = '#dddddd';
setTimeout('fade()',100);
break;
case '#dddddd':
element.style.color = '#cccccc';
setTimeout('fade()',100);
break;
case '#cccccc':
element.style.color = '#bbbbbb';
setTimeout('fade()',100);
break;
case '#bbbbbb':
element.style.color = '#aaaaaa';
setTimeout('fade()',100);
break;
case '#aaaaaa':
element.style.color = '#999999';
setTimeout('fade()',100);
break;
case '#999999':
element.style.color = '#888888';
setTimeout('fade()',100);
break;
case '#888888':
element.style.color = '#777777';
setTimeout('fade()',100);
break;
case '#777777':
element.style.color = '#666666';
setTimeout('fade()',100);
break;
}
}
else
{
scroll();
}
}
else
{
element.style.color = '#666666';
element.innerHTML = text;
}
}
</script>
</head>
<body>
<div id="0001" class="marquee" onMouseOver="scroller(this.id);" onMouseOut="broken = true;"><b>New Xbox Dashboard </b><p>Anticipation builds as Microsoft prepare to unveil their new Xbox 360 dashboard. Anticipation builds as Microsoft prepare to unveil their new Xbox 360 dashboard. Anticipation builds as Microsoft prepare to unveil their new Xbox 360 dashboard. Anticipation builds as Microsoft prepare to unveil their new Xbox 360 dashboard.</p></div>
<div id="0002" class="marquee" onMouseOver="scroller(this.id);" onMouseOut="broken = true;"><b>Another New Xbox Dashboard </b><p>Anticipation builds</p></div>
<div id="0003" class="marquee" onMouseOver="scroller(this.id);" onMouseOut="broken = true;"><b>Yet Another New Xbox Dashboard </b><p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..." There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain...</p></div>
</body>
</html>
dont force your self too much nor javascript... Take the time to learn Jquery you will thank me after you under stand it. You will be able to this a lot smoother and easier with Jquery... dont reinvent the will... dont bother debugging this.
Thank you for the advice. I am researching how to implement a jquery solution at the moment. I generally prefer to make my own functions so that I can achieve exactly what I want with the minimal code but if you're confident that jquery can help me achieve what I want, then I am prepared to give it a bash.
Having played with jQuery, I agree that it is the better method for implementing a marquee. However, it wont help with the original issue which is that I have 2 text elements inside a container and need the one on the right to fill any available space left by the left element without wrapping onto a new line. I am hiding the overflow from the right text element which is a marquee and shall scroll on mouseover.
I dont know why you need it this... This text is not readable at all. I made a example for you, is alot smother a cleaner but still hard to read, check it out and tell me if that is what you want. Example
Here is the code:
Code:
<html>
<head>
<script src="scripts/jQuery/jquery-1.3.2.js" type="text/javascript"></script>
<script src="scripts/jQuery/jquery.scrollTo.js" ></script>
<script>
$(document).ready(function(){
$("#box").hover(
function(){
$("#box").scrollTo("#end", 15000);
},
function(){
$("#box").stop();
$("#box").scrollTo("#start", 1000);
}
);
});
</script>
<style>
#box {
border: outset 3px #ccc;
position:relative;
overflow:hidden;
padding: 2px 10px;
}
strong {
float:left;
}
</style>
</head>
<body>
<strong>New Xbox Dashboard</strong><pre id="box"><a id="start"></a> Anticipation builds as Microsoft prepare to unveil their new Xbox 360 dashboard. Anticipation builds as Microsoft prepare to unveil their new Xbox 360 dashboard. Anticipation builds as Microsoft prepare to unveil their new Xbox 360 dashboard. Anticipation builds as Microsoft prepare to unveil their new Xbox 360 dashboard<a id="end"></a></pre>
</body>
</html>
If you haven't notice i used Jquery and a ScrollTo Plug-in to achieve this. The code between the script tags is the only JavaScript that i coded my self.
You can not avoid the wrapping on a div, use the pre tag instead, that is what i used in my example.
Reply With Quote
Bookmarks