slicer123
asked on
Crafting Web Page layout in HTML (div), CSS, and Javascript
Need to create a web page that has a layout as displayed in attached image. The actual text comes from a instant message chat conversation, and is stored as XML, with a undisplayed time sequence. The text needs to scroll based on an initial count down (measured in seconds). Ideally the Javascript would take the chat XML and create the output, with a scrollbar. Also it should be viewable in IE and Mozilla. Any suggestions?
<chat>
<entry>
<date>1238783001.229522</date>
<fromjid>piggy@chatty.com/Jeti-Small</fromjid>
<body>Donec molestie...</body>
</entry>
<entry>
<date>1238783007.601145</date>
<fromjid>quiggy@chatty.com/Miranda</fromjid>
<body>Curabitur leo ... </body>
</entry>
<entry>
<date>1238783009.7440219</date>
<fromjid>piggy@chatty.com//Jeti-Small</fromjid>
<body>Sed nec risus ...</body>
</entry>
</chat>
demo.jpg
ASKER
OK, this was useful, but I am seeing in IE that it added the horizontal scrollbar.
Re: Javascript, instead of AJAX, I would like to have all the text stored in the page, but Javascript interpret and scroll the record accordingly using a scrollToElementById function as below.
function scrollToElementById(id)
{
return scrollToElement(document.g etElementB yId(id));
}
Thanks
Re: Javascript, instead of AJAX, I would like to have all the text stored in the page, but Javascript interpret and scroll the record accordingly using a scrollToElementById function as below.
function scrollToElementById(id)
{
return scrollToElement(document.g
}
Thanks
<html>
<head>
<title></title>
<style type="text/css">
div.chat {
width:400px;
height:75px;
background-color:#f8f8f8;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 0px;
border-color: #6699CC;
border-width: 1px;
border-style: solid;
float: left;
overflow: auto;
}
div.fromjid {
width:75px;
float:left;
text-align:left;
vertical-align:top;
}
div.body {
width:300px;
float:left;
text-align:left;
}
hr.entry {
clear:both;
display:block;
visibility:hidden;
}
</style>
</head>
<body>
<div class="chat">
<div class="fromjid">piggy:</div>
<div class="body">Donec molestie Donec aliquam malesuada odio. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur leo. Aliquam non nisi ut nuc tincidunt convallis.</div>
<hr class="entry"></hr>
<div class="fromjid">quiggy:</div>
<div class="body">Curabitur leo. Aliquam non nisi ut nuc tincidunt convallis.</div>
<hr class="entry"></hr>
<div class="fromjid">piggy:</div>
<div class="body">Sed nec risus en massa facilisis placerat. Phasellus tincidunt malesuada turpis. Aliquam euismod urna id nisi molestie laoreet.</div>
<hr class="entry"></hr>
</div>
</body>
</html>
It will only show the horizontal bar if the content goes beyond the boundaries of the div. You should design the contents so that it will not go beyond the boundaries.
I think I understand what you're doing now, but just to make sure - the site is not to be updated as a new message is "received," but to act as a viewer of the nonchanging content?
If you set the id of each the fromjid elements to a number higher than the last when creating the divs (id="1" id="2" etc.), you can use this:
function scrollToElementById(id)
{
window.location.href = '#' + num;
num++;
}
You just have to set num = 1 when the page loads.
As far as retrieving the xml data, I cannot help you at the moment. If you give me some time I may be able to help you else someone else can.
I think I understand what you're doing now, but just to make sure - the site is not to be updated as a new message is "received," but to act as a viewer of the nonchanging content?
If you set the id of each the fromjid elements to a number higher than the last when creating the divs (id="1" id="2" etc.), you can use this:
function scrollToElementById(id)
{
window.location.href = '#' + num;
num++;
}
You just have to set num = 1 when the page loads.
As far as retrieving the xml data, I cannot help you at the moment. If you give me some time I may be able to help you else someone else can.
ASKER
The result should act as a viewer of non-changing content, that is correct.
I can modify the XML to add an ID field, but still need to scoll the record in time sequence as provided by the tags. Does it make sense to use JS to parse the static XML and create the div effects, or is there an easier way?
Thanks
I can modify the XML to add an ID field, but still need to scoll the record in time sequence as provided by the tags. Does it make sense to use JS to parse the static XML and create the div effects, or is there an easier way?
Thanks
I think I understand you now. If the xml data is local, you could use javascript to parse it. Then, use Javascript to calculate the difference in timeof the next and the last message, and using setTimeout('window.locatio n='#' + nextTime, timeInms) where nextTime is the time value of the next message to be shown which you will have set as the message div's id, and timinms is the difference of the times calculated earlier. Either that or use the method in my last post with an increasing integer as the id. This would be faster and easier javascript-wise. This method won't perfectly match the actual values of the time sequence, though, as the funtion will take a small amount of time to complete.
I guess I would store the timestamp of the messages into an array and use a for loop to go through the array one timestamp at a time.
I guess I would store the timestamp of the messages into an array and use a for loop to go through the array one timestamp at a time.
ASKER
Apologies for a terrible problem statement. I'm actually pulling that XML from a db, with Tomcat running a jsp to display the data. Turns out that if I add an XSL, the jsp can then generate the proper div tags as above. Still there is a question of how to scroll using JS the text.
Well, I've finished a somewhat useless example of what I was talking about. A few problems remain that I can try to help with, but I need to know a) if you need the help and b) what your expectations are and more specifically what exact effect you're trying to achieve. As you might have already realized, the content is already displayed when the page loads, and is scrollable selectable etc. Also, using the mehtod below the next chat may be partially displayed if there is enough room to display both the current message and the next. Another issue with the code is that there might not be an obvious change from the second-to-last to the last message as it the scroll-bar is at the bottom of the div at that time.
Let me know what you think and if you need further help.
Let me know what you think and if you need further help.
<html>
<head>
<script type="application/javascript" language="javascript">
function run(){
times = new Array();
//You'll have to create these lines using server side
times[0] = 1238783001.229522;
times[1] = 1238783007.601145;
times[2] = 1238783009.7440219;
for(var i=1; i<times.length; i++){
var divHREF = "'#" + i + "'"; //Location to go to
var code = "window.location.href= " + divHREF; //code for use in Timeout
var time = (times[i] - times[i-1])*1000; //Calculate the time to wait
setTimeout(code, time); //Start the timer and wait
}
}
</script>
<title></title>
<style type="text/css">
div.chat {
width:400px;
height:75px;
background-color:#f8f8f8;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 0px;
border-color: #6699CC;
border-width: 1px;
border-style: solid;
float: left;
overflow: auto;
}
div.fromjid {
width:75px;
float:left;
text-align:left;
vertical-align:top;
}
div.body {
width:300px;
float:left;
text-align:left;
}
hr.entry {
clear:both;
display:block;
visibility:hidden;
}
</style>
</head>
<body>
<div class="chat">
<div class="fromjid" id="0">piggy:</div>
<div class="body">Donec molestie Donec aliquam malesuada odio. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur leo. Aliquam non nisi ut nuc tincidunt convallis.</div>
<hr class="entry"></hr>
<div class="fromjid" id="1">quiggy:</div>
<div class="body">Curabitur leo. Aliquam non nisi ut nuc tincidunt convallis.</div>
<hr class="entry"></hr>
<div class="fromjid" id="2">piggy:</div>
<div class="body">Sed nec risus en massa facilisis placerat. Phasellus tincidunt malesuada turpis. Aliquam euismod urna id nisi molestie laoreet.</div>
<hr class="entry"></hr>
</div>
<br />
<a href="javascript:run()">Run the Chat.</a>
</body>
</html>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thank you
Use a container div with scroll set to auto, create a class for the container of the chat responses, for the name, and for the message itself. As shown below.
As far as the JS goes - use an "AJAX" request to retrieve a row of the chat every so often and append the information to the chat_container using appendChild(). Sort the information into the strings required for each div using a callback function. Does that make sense or do you need me to give you an example?
Open in new window