Solved

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

Posted on 2009-04-13
9
338 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
Is Your AD Toolbox Looking More Like a Toybox?

Managing Active Directory can get complicated.  Often, the native tools for managing AD are just not up to the task.  The largest Active Directory installations in the world have relied on one tool to manage their day-to-day administration tasks: Hyena. Start your trial today.

 
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

ScreenConnect 6.0 Free Trial

Explore all the enhancements in one game-changing release, ScreenConnect 6.0, based on partner feedback. New features include a redesigned UI, app configurations and chat acknowledgement to improve customer engagement!

Question has a verified solution.

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

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

803 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