Creating a dynamically expanding div tag
-
Hi I need to create a dynamically expanding div tag, and I am not too sure how to go about it. Basically, I have a bulleted list control, which will be inserted inside a div tag. The div tag's height is set to about 70px. When more than 5 list items are added to the bulleted list control, I want the div tag's height to expand to show the rest of the items. What I was thinking is when there are more than 5 list items, to have a little linkbutton with the word more, and to click on this button, which will then expand on the div tag. Does anyone have any ideas as to how to do this?
-
Hi I need to create a dynamically expanding div tag, and I am not too sure how to go about it. Basically, I have a bulleted list control, which will be inserted inside a div tag. The div tag's height is set to about 70px. When more than 5 list items are added to the bulleted list control, I want the div tag's height to expand to show the rest of the items. What I was thinking is when there are more than 5 list items, to have a little linkbutton with the word more, and to click on this button, which will then expand on the div tag. Does anyone have any ideas as to how to do this?
Yes you could do a client side button with some javascript. On clicking the button a function is fired up that gets the element ID of your div box and then increases it's height via CSS. The function would invoke something like: function myfunction(){ document.getElementById('idofyourdivbox').style.height = "120px"; }
-
Yes you could do a client side button with some javascript. On clicking the button a function is fired up that gets the element ID of your div box and then increases it's height via CSS. The function would invoke something like: function myfunction(){ document.getElementById('idofyourdivbox').style.height = "120px"; }
The only problem that I need to overcome is that whilst my div tag shows 5 list items, what I need to achieve is to expand the div tag just enough to show the other list items. For instance if I need to show 7 list items, I need to expand the div tag height just to show 7 items, and equally to expand the height if there are 12 items. Therefore, how I can I dynamically increase the height to fit the number of items I want to show without showing too little or too height?
-
The only problem that I need to overcome is that whilst my div tag shows 5 list items, what I need to achieve is to expand the div tag just enough to show the other list items. For instance if I need to show 7 list items, I need to expand the div tag height just to show 7 items, and equally to expand the height if there are 12 items. Therefore, how I can I dynamically increase the height to fit the number of items I want to show without showing too little or too height?
I see what you're saying. My method would just resize your div box to z set size no matter how many items need to be listed. I think you need to count the number of items there are in the list when the page loads. This is something probably best doing server side in whatever language you're using. Then pass the number to client side in a hidden field. eg <asp:Label runat="server" id="myhiddennumber" visible="false"/> Use this number to set the height of the div box in javascript. This function needs to execute after the hidden field has been populated. eg function mylistboxsize(){ var getthelist = document.getElementById("myhiddennumber"); // multiply the number in the hidden field to get a height value for the div box. Here we're saying each item is worth 10px var heightfordiv = getthelist.innerText * 10; // set the height document.getElementById('divboxid').style.height = heightfordiv + 'px'; } The above javascript may need a bit of syntax correction however I think the 'method idea' would work.
-
Hi I need to create a dynamically expanding div tag, and I am not too sure how to go about it. Basically, I have a bulleted list control, which will be inserted inside a div tag. The div tag's height is set to about 70px. When more than 5 list items are added to the bulleted list control, I want the div tag's height to expand to show the rest of the items. What I was thinking is when there are more than 5 list items, to have a little linkbutton with the word more, and to click on this button, which will then expand on the div tag. Does anyone have any ideas as to how to do this?
Hi, you can put the items in another div(for example: id="divMoreItems") which is hidden first and which follows the first five items and is contained in your div. When you click the linkbutton, you can set divMoreItems's display="block" or "". When you click the linkbutton again, set divMoreItems's display="none".