Solved

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

Posted on 2009-04-13
9
333 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
 
LVL 2

Author Comment

by:slicer123
Comment Utility
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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 4

Expert Comment

by:khsater
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
Thank you
0

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

763 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now