www.webdeveloper.com
Results 1 to 6 of 6

Thread: Variable width div to fill available space without wrapping

  1. #1
    Join Date
    Jun 2007
    Posts
    73

    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&nbsp;&nbsp;</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&nbsp;&nbsp;</b><p>Anticipation builds</p></div>
    		<div id="0003" class="marquee" onMouseOver="scroller(this.id);" onMouseOut="broken = true;"><b>Yet Another New Xbox Dashboard&nbsp;&nbsp;</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>
    The live page can be viewed here: http://www.vouzamo.co.uk/scroller

  2. #2
    Join Date
    Jul 2009
    Posts
    62
    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.

  3. #3
    Join Date
    Jun 2007
    Posts
    73
    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.

    Thanks again,

    John

  4. #4
    Join Date
    Jun 2007
    Posts
    73
    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.

  5. #5
    Join Date
    Jul 2009
    Posts
    62
    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.

  6. #6
    Join Date
    Jun 2007
    Posts
    73
    This is good... almost perfect infact. it just needs the following minor tweaks:
    • Scroll on mouseover of container rather than <pre>
    • no border... text should be seamless with a little padding to separate from the bold text.
    • text should only scroll if overflow is detected. this can be done with the following code:

    Code:
    		if(e.clientHeight < e.scrollHeight)
    		{
    			overflow was detected;
    		}
    		else
                    {
                            overflow was not detected
                    }

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles