Solved

Crafting Web Page layout in HTML (div), CSS, and Javascript

Posted on 2009-04-13
9
341 Views
Last Modified: 2012-05-06
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>

Open in new window

demo.jpg
0
Comment
Question by:slicer123
  • 5
  • 4
9 Comments
 
LVL 4

Expert Comment

by:khsater
ID: 24133895
If your just looking for a layout-
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?
<div id="chat_container">
   <div class="row">
      <div class="name">
      </div>
      <div class="message">
   </div>
</div>

Open in new window

0
 
LVL 2

Author Comment

by:slicer123
ID: 24134087
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.getElementById(id));
}
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>

Open in new window

0
 
LVL 4

Expert Comment

by:khsater
ID: 24134573
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.
0
Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 2

Author Comment

by:slicer123
ID: 24138578
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
0
 
LVL 4

Expert Comment

by:khsater
ID: 24140898
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.location='#' + 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.
0
 
LVL 2

Author Comment

by:slicer123
ID: 24144193
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.
0
 
LVL 4

Expert Comment

by:khsater
ID: 24153981
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.
<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>

Open in new window

0
 
LVL 4

Accepted Solution

by:
khsater earned 500 total points
ID: 24154118
Oops.  I wasn't thinking in using the setTimeout() method.  It's been a while since I've used it.  Javascript runs asynchronously, so there setTimeout() will not pause the script.  In fact, there is no good way to pause the script on both IE and Mozilla.  Instead, we'll have to set up all delays ahead of time by adding the times up as we go.
I reworked it in the below code.
Sorry for the mistake.
<html>
<head>
<script type="application/javascript" language="javascript">
function run(){
	timestamps = new Array();
        //You'll have to create these lines using server side
	timestamps[0] = 1238783001.229522;
	timestamps[1] = 1238783007.601145;
	timestamps[2] = 1238783009.7440219;
	
	delays = new Array;
	delays[0] = 0;
	var delay = 0;
	for(var i=1; i<timestamps.length; i++){
		//calculate and set the delay
		delay += (timestamps[i]-timestamps[i-1]);
		delays[i] = delay*1000;
	}
 
	for(var i=1; i<delays.length; i++){
		var divHREF = "'#" + i + "'"; //Location to go to
		var code = "window.location.href= " + divHREF; //code for use in Timeout
		var time = delays[i]; //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>

Open in new window

0
 
LVL 2

Author Closing Comment

by:slicer123
ID: 31569708
Thank you
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Diminish Pop-up  in 3 seconds 7 49
parse url to form? 7 25
html / css issue / div issue. stuck, help needed 2 15
..ignore the Question 1 8
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

828 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question