javascript, scrolling orizzontale anzi che verticale

daniess

javascript, scrolling orizzontale anzi che verticale

Ciao a tutti, spero mi possiate aiutare perche anche se il linguaggio usato è html con javascript non riguarda un sito.. io ho tre file, html il rispettivo css e lo js che mi gestiscono gli sms nel mio apparecchio.. ho costruito un sito da autodidatta ma fino a che si parla di html e css non c'e problema, riesco ad arrangiarmi leggendo le vostre discussioni e googlando un po ma qua è da mesi che provo senza alcun risultato, spero di ricevere almeno una dritta e vi ringrazio anticipamente... magari se mi potete dire almeno qual'è la parte dello javascript che riguarda lo scrolling,
vi incollo il corpo del file e spero che qualcuno abbia la volonta di aiutarmi...

/**

Globals:
@myShowTimes: Display method for time stamps, set to 'inline' to show
```
          and 'none' to hide
```

**/
var myShowTimes = "inline";
var markupTemplateSelf;
var markupTemplateOther;

/**

MessagingWidgetsSingleSMS_init:

**/
function MessagingWidgetsSingleSMS_init ()
{
if (!markupTemplateSelf)
{
markupTemplateSelf = document.getElementById("MessageContainerSelf");
markupTemplateSelf.parentNode.removeChild(markupTemplateSelf);
markupTemplateSelf.removeAttribute('id');
markupTemplateOther = document.getElementById("MessageContainerOther");
markupTemplateOther.parentNode.removeChild(markupTemplateOther);
markupTemplateOther.removeAttribute('id');
}
}

function MessagingWidgetsRenderer_avatarClicked (event)
{
alert(event.currentTarget.id);

event.returnValue = true;
event.cancelBubble = false;

}

/**

MessagingWidgetsRenderer_addMessage:
@type: Type of the message (normal/action/notice/autoreply)
@time_str: The time string to show in the screen
@delivery_str: The delivery time string to possibly show in the screen
@name_str: The name string to show in the screen
@message_str: The actual message to show
@self: TRUE if message is from self
@id_str: The ID of the message for access
@avatar: path(/url?) to avatar image
@presence: presence icon of sender
@business_icon: path to business card icon
@status_text: message status text (delivered/on the way/delivery failed)
@contact_info_str: Additional contact information
@add_to_top: unused in single SMS view
@text_dir: Text direction ("ltr" or "rtl")
Adds messages to the message area.
Note that unlike other views, message status is indicated as text,
not as an icon.
*/
function
MessagingWidgetsRenderer_addMessage (
type, time_str, delivery_str, name_str, message_str, self, id_str,
avatar, presence, business_icon, status_text, contact_info_str, add_to_top,
text_dir)
{
/ Top level items */
var new_message;

/* Avatar data */
var avatar_img;
var avatar_img_border;

/* The graphics */
var bubble_cell;

/* Presence icon and name area */
var presence_img;
var presence_box;
var name_tag;

/* Message text content */
var message_txt;

/* Time stamps and potential icons */
var time_tag;
var delivery_time_tag;
var business_img;
var status_span;

var party;
var count;

if (!markupTemplateSelf)
{
markupTemplateSelf = document.getElementById("MessageContainerSelf");
markupTemplateSelf.parentNode.removeChild(markupTemplateSelf);
markupTemplateSelf.removeAttribute('id');
markupTemplateOther = document.getElementById("MessageContainerOther");
markupTemplateOther.parentNode.removeChild(markupTemplateOther);
markupTemplateOther.removeAttribute('id');
}

if (type != 0) {
alert("Only type 0 is allowed");
return;
}

if (self == true) {
party = "Self";
new_message = markupTemplateSelf.cloneNode(true);
```
 /* Finally, append the whole message to the document */
 new_message.id = "Message" + id_str;
 document.getElementById("MessagingArea").appendChild (new_message);

 /* Retrieve the elements to update */
 bubble_cell = document.getElementById ("Message" + party);
 name_tag = document.getElementById ("MessageSenderName" + party);
 business_img = document.getElementById ("MessageBusinessCardImg" + party);
 message_txt = document.getElementById ("MessageText" + party);
 time_tag = document.getElementById ("MessageTimeStamp" + party);
 delivery_time_tag = document.getElementById ("MessageDeliveryTimeStamp" + party);
 status_span = document.getElementById ("MessageStatus" + party);
```
} else {
party = "Other";
new_message = markupTemplateOther.cloneNode(true);
```
 /* Finally, append the whole message to the document */
 new_message.id = "Message" + id_str;
 document.getElementById("MessagingArea").appendChild (new_message);

 /* Retrieve the elements to update */
 avatar_img = document.getElementById ("AvatarImg" + party);
 avatar_img_border = document.getElementById ("AvatarImgBorder" + party);
 bubble_cell = document.getElementById ("Message" + party);
 presence_img = document.getElementById ("MessagePresence" + party);
 presence_box = document.getElementById ("MessagePresenceBox" + party);
 name_tag = document.getElementById ("MessageSenderName" + party);
 business_img = document.getElementById ("MessageBusinessCardImg" + party);
 message_txt = document.getElementById ("MessageText" + party);
 time_tag = document.getElementById ("MessageTimeStamp" + party);
 delivery_time_tag = document.getElementById ("MessageDeliveryTimeStamp" + party);
 status_span = document.getElementById ("MessageStatus" + party);

 avatar_img_border.id = "avatar:" + contact_info_str;
 presence_img.id = "PresenceImg" + contact_info_str;
 presence_box.id = "PresenceBox" + contact_info_str;
```
}
bubble_cell.id = id_str;
message_txt.id = "MessageText" + id_str;
name_tag.id = "MessageSenderName" + id_str;
business_img.id = "MessageBusinessCardImg" + id_str;
time_tag.id = "MessageTimeStamp" + id_str;
delivery_time_tag.id = "MessageDeliveryTimeStamp" + id_str;
status_span.id = "MessageStatus" + id_str;
message_txt.setAttribute("dir", text_dir);

/* Creation of an avatar image */
if (self == false) {
if (avatar != "") {
avatar_img.src = avatar;
}
avatar_img_border.onclick = MessagingWidgetsRenderer_avatarClicked;
}

if (self == false) {
if (presence != "") {
presence_img.src = presence;
presence_box.style.display = "inline-block";
}
else {
presence_box.style.display = "none";
}
}

message_str=message_str.replace(/\t/g, " ");

name_tag.textContent = name_str;
message_txt.innerHTML = message_str;

if (business_icon != "") {
business_img.src = business_icon;
}

time_str=time_str.replace(/|/,"");
delivery_str=delivery_str.replace(/|/,"");

time_tag.style.display = myShowTimes;
time_tag.textContent = time_str;

delivery_time_tag.style.display = myShowTimes;

if(delivery_str != "") {
delivery_time_tag.textContent = "| "+delivery_str;
}

if (status_text != "") {
status_span.textContent = status_text;
}

/* Show the new message */
new_message.style.display = "block";

/* scroll message area to the top */
window.scrollTo(0,0);

return;
}

/**

MessagingWidgetsRenderer_showDeliveryTimes:
@visibility: Set to 'inline' to show delivery time stamps. Set to
```
         'none' not to show them.
```
Set if delivery time stamps should be visible
**/
function MessagingWidgetsRenderer_showDeliveryTimes (visibility)
{
var times;

if (visibility != "inline" && visibility != "none") {
alert("MessagingWidgetsRenderer_showDeliveryTimes: Illegal parameter: "+ visibility);
return;
}

myShowTimes = visibility;

times = document.getElementsByTagName("span");
if (times == null) {
return;

}

for (i = 0; i < times.length; i++) {
if (times*.className == "MessageDeliveryTimeStamp") {
times*.style.display = myShowTimes;
}
}

return;
}

/**

MessagingWidgetsRenderer_setTimes:
@id_str: id of the message (ignored in case of single SMS view)
@time_str: message time stamp
@delivery_str: message delivery time stamp
@status_text: message status text
Set if delivery time stamps should be visible
**/
function MessagingWidgetsRenderer_setTimes (id_str, time_str, delivery_str,
status_text)
{
var msg;

time_str=time_str.replace(/|/,"");
delivery_str=delivery_str.replace(/|/,"");

status_span = document.getElementById("MessageStatus"+id_str);
if (status_span != null) {
status_span.textContent = status_text;
}
document.getElementById("MessageTimeStamp"+id_str).textContent = time_str;
if(delivery_str != "") {
document.getElementById("MessageDeliveryTimeStamp"+id_str).textContent =
"| "+delivery_str;
}

return;
}

/**

MessagingWidgetsRenderer_setPresence:
@contact_info: The contact info for presence icon
@presence: Presence icon path
Sets the presence icon of @contact_info to @presence
**/
function MessagingWidgetsRenderer_setPresence (contact_info, presence)
{
var presenceImg = document.getElementById ("PresenceImg" + contact_info);
var presenceBox = document.getElementById ("PresenceBox" + contact_info);
if (presenceImg != null) {
presenceImg.src = presence;
presenceBox.style.display = "inline-block";
}
else {
presenceBox.style.display = "inline-block";
}
}

/**

MessagingWidgetsRenderer_setCSS:
@file: Path of theme CSS file
Sets the theme CSS file to the current page.

**/
function MessagingWidgetsRenderer_setCSS (file)
{
document.getElementById("ThemeCSSLink").href = file;
MessagingWidgetsSMSConversation_alert("set: "+file+" as theme CSS file.");

return;

}

daniess

nessun punto di partenza??? è cosi assurda come idea?

ayrton2001

Non hai postato l'html con cui poterlo provare,
Comunque dato che non conosci javascript, ti consiglio di utilizzare jQuery con un plugin che ti interessa.
E' molto più semplice.

daniess

grazie per l'interesse... non posso usare altro perche questi file sono dentro al mio terminale installati di fabbrica e se pur ho personalizzato html non credo si possano usare altri linguaggi... ti scrivo anche html:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
".w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

serve anche il css?? nello script ci sono anche le istruziuoni che vanno a prendere gli sms... percio non so proprio da dove iniziare, non si puo individuare le istruzioni dedllo scrolling?? Non mi sembra cosa facile...

è possibile fare cio che desidero?

daniess

proprio nessuna idea???

daniess

proprio nessuno sa da dove cominciare è... cmq immaginavo, è il terzo forum che non riesce ad aiutarmi, mannaggia... grazie lo stesso

ayrton2001

Non riesco a riprodurre la tua pagina.
Inoltre tra "terminale" e "installazioni di fabbrica" mi sono perso

daniess

non credo che tu rieca a visualizzarla in modo corretto.. cioè se ti do il css allora visualizzi le bobble che dovrebbero contenere gli sms ma non ti da l'opportunita di scorrere i messaggi visto che non c'e ne e quindi visualizza una per l'emittente e una per il mittenete... cmq ti passo anche il css:
/**

Style rules for the MessageBuffer
*/

/**

the body defaults
*/
body {
word-wrap: break-word;
margin-left: 16px;
margin-right: 16px;
vertical-align: top;
}

/**

The table column formats
*/

div.Message * {
white-space: normal;
}

#MessagingArea {
vertical-align: top;
}

div.Message {
clear: both;
white-space: nowrap;
vertical-align: middle;
}

div.Message.Self {
}

div.Message.Other {
}

div.Message:first-child {
padding-top: 0px;
}

div.Message:last-child {
padding-bottom: 0px;
}

div.BubbleSelf {
vertical-align: top;
width: 100%;
display: inline-block;
}

div.MessageContainerOther {
}

div.BubbleOther {
vertical-align: top;
width: 100%;
display: inline-block;
}

/**

Others' Avatars
This needs a "drop down" shadow, but no idea if that can be done
*Adele: please note that this drop down shadow might be subjected to change
*I've talked about it with Vilja who's in charge of address book layout
*and we might change it so that it's a double border colour to indicate
*that the avatar is clickable. drop shawdow doesn't seem to work with
*dark backgrounds unless it's a light colour drop shadow.
*PLEASE tell me if it's difficult to implement the drop shadow.
*/

div.Avatar {
margin: 0px 16px 0px 0px; /* top right bottom left */
padding: 8px 0px;
width: 80px;
display: inline-block;
vertical-align: top;
}

.MessageAvatar {
width: 80px;
height:80px;
outline-style: solid;
outline-width: 4px;
-moz-outline-radius: 8px;
}

div.MessageAvatarBorder {
z-index: 1;
width: 80px;
height: 80px;
position: absolute;
top: 15px;
left: 15px;
display: inline-block;
-moz-border-radius: 6px;
border-width: 1px;
border-style: solid;
}

div.MessagePresenceBox {
width: 24px;
padding: 8px 0px;
display: inline-block;
vertical-align: top;
}

span.MessagePresence {
width: 24px;
display: inline-block;
}

img.MessagePresence {
vertical-align: middle;
width: 16px;
height: 16px;
}

/**

the Name field
*/
span.MessageNameField {
word-wrap: break-word;
vertical-align: middle;
padding: 0px;
margin: 0px;
}

span.MessageNameField.Self {
}

span.MessageNameField.Other {
}

/**

the Text field
*/
div.MessageText {
border-top-style: solid;
border-top-width: 2;
padding-top: 8px;
margin-top: 8px;
display: block;
text-align: left;
vertical-align: middle;
word-wrap: break-word;
}

.MessageText.Other {
width: 100%;
}

.MessageText.Self {
width: 100%;
}

/**

the NameSeparator field
*/
span.MessageNameSeparator {
vertical-align: middle;
}

.MessageSeparator {
visibility: hidden;
}

/**

the TimeStamp default rules
*/
div.MessageTop {
margin-bottom: 8px;
white-space: nowrap;
}

div.MessageTop.Self {
}

div.MessageTop.Other {
display: block;
}

img.MessageBusinessCardImg {
vertical-align: middle;
padding-right: 4px;
}

span.MessageTimeStamp {
}

span.MessageDeliveryTimeStamp {
}

img.MessageStatusImg {
vertical-align: middle;
padding-right: 0px;
}

.MessagingWidgetsSmiley {
height: 24px;
width: 24px;
}

daniess

e grazie mille per l'interesse, credevo ormai di rivolgermi altrove... grazie tante!!!

ayrton2001

Credimi, anche con tutta la volontà di aiutarti, mi è impossibile se non riesco a riprodurre la pagina con lo script.

daniess

ti ringrazio molto allora... e visto che è il tuo mondo non sapresti indirizzarmi nella parte che interessa lo scorrimento?? proprio non è possibile individualizzarla?
grazie ancora per il tuo tempo...

ayrton2001

L'unica cosa che indivisuo è:


window.scrollTo(0,0);

ma non è quello che decide che sia verticale.
Mi dispiace, ma così non so aiutarti.

daniess

ok... grazie ancora, volevo contattarti su skype ma non ci sono riuscito...