Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Categories

help on creating spillover control

First, Let me explain what I am trying to do. When you use IE, In any bar...If you reduce the size of the browser or the bar has more elements, It will show up ">>" when you click on it, it will show you the excess elements in the browser. I am trying to do the exactly same in the webpage.

I have created necessary items. I do some math to calculate the width of the browser and width of the bar. I made it work may be 30%. It can add to the spillover when the browser got reduced. Now I want to make the reverse action. When the browser grows, I want the elements to be back in bar(Whatever can fit in). I hope this explanation is enough. Thanks a lot for stopping by. Please help.





body
{
margin: 0;
overflow:hidden;
}
table
{ margin: 0px;
padding: 0px;
border-collapse: collapse;
}
td
{
padding: 0px;
}
.FavBar
{
height: 14px;
overflow:hidden;
}

#FavBarLeftEndcap{
width:15px;
}

.FavBar td
{
font-family:Tahoma;
font-size:9px;
color: #43494E;
}

.FavBar td a
{
margin-left: 10px;
margin-right: 10px;
}



var m_newDiv = document.createElement('div');

function FindWidth()
{
var SpanWidth = document.getElementById("FavoritesArea");
var FavLeftEnd = document.getElementById("FavbarLeftEndcap");
var windowWidth = document.body.clientWidth;
var FavBarOverflow = document.getElementById("FavOverflow");
var DivLength = m_newDiv.children.length;
if(SpanWidth)
{
for(i=SpanWidth.children.length-1;i>=0;i--)
{
var currentNode = SpanWidth.children[i];
var getChildrenWidth =currentNode.offsetLeft+currentNode.offsetWidth+FavLeftEnd.offsetWidth;
if(getChildrenWidth > windowWidth)
{
SpanWidth.removeChild(currentNode);
m_newDiv.appendChild(currentNode);
}
}
if(getChildrenWidth < windowWidth)
{
if(DivLength!=0)
{
for(j=DivLength-1;j>=0;j--)
{
var DivNode = m_newDiv.children[j];
var totalWidth = DivNode.offsetWidth+getChildrenWidth;
if(totalWidth > windowWidth)
{
alert(totalWidth+" totalwidth");
SpanWidth.appendChild(DivNode);
}
}
}
}
if(DivLength!=0)
{
if(FavBarOverflow)
{
FavBarOverflow.style.display="block";
FavBarOverflow.onclick=FavSpillOver;
}
}
}
}
function FavSpillOver()
{
Show(m_newDiv.outerHTML);
function Show(strHTML)
{
var DisplayDiv=document.getElementById("SpillOverDiv");
if(DisplayDiv)
{
sList = '
'+ strHTML + '
';
DisplayDiv.innerHTML = sList;
DisplayDiv.style.display = "block";
}
}
}
function AddTo()
{
var txtBox = document.getElementById("Fav");
var spanBar = document.getElementById("FavoritesArea");
if(txtBox)
{
if((txtBox.value !="") || (txtBox.value!=null))
{
sList = ""+txtBox.value+"  ";
if(spanBar)
{
spanBar.innerHTML+=sList;
txtBox.value="";
}
}
}
}





image
Loading...





>">








Sign In or Register to comment.