• User Newbie

    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;
    

    }


  • User Newbie

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


  • Super User

    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.


  • User Newbie

    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">

    <!-- messaging-widgets -->

    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="MessagingWidgetsSingleSMS.css"></link>
    <link rel="stylesheet" type="text/css" href="/etc/hildon/theme/css/colors.css" id="ThemeCSSLink"></link>
    <script type="text/javascript" src="MessagingWidgetsSingleSMS.js" charset="UTF-8"></script>
    </head>

    <!-- Preserve the tag IDs. Everything else can be changed and rearranged -->

    <body class="nodebug DefaultBackgroundColor DefaultTextColor SystemFont" onload="MessagingWidgetsSingleSMS_init()">
    <div id="MessagingArea">
    <div id="MessageContainerSelf" class="Message Self" style="display:none;">
    <div id="MessageSelf" class="BubbleSelf">
    <div class="MessageTop Self">
    <div id="MessageSenderNameSelf" class="MessageNameField SecondaryTextColor LargeSystemFont Self"></div>
    <img id="MessageBusinessCardImgSelf" class="MessageBusinessCardImg" src=""/>
    <span id="MessageTimeStampSelf" class="MessageTimeStamp SecondaryTextColor Self SmallSystemFont"></span>
    <span id="MessageDeliveryTimeStampSelf" class="MessageDeliveryTimeStamp PrimaryTextColor Self SmallSystemFont"></span>
    <span id="MessageStatusSelf" class="MessageStatus PrimaryTextColor"></span>
    </div>
    <div id="MessageTextSelf" class="MessageText Self MessagingBubbleBorderColor"></div>
    </div>
    </div>
    <div id="MessageContainerOther" class="Message Other" style="display:none;">
    <div id="MessageOther" class="BubbleOther">
    <div class="Avatar">
    <div id="AvatarImgBorderOther" class="MessageAvatarBorder Other MessagingAvatarBorderColor"></div>
    <img id="AvatarImgOther" src="" class="MessageAvatar MessagingAvatarBorderMaskColor " />
    </div>
    <div style="display:inline-block;">
    <div id="MessagePresenceBoxOther" class="MessagePresenceBox">
    <span class="MessagePresence"><img id="MessagePresenceOther" src="" class="MessagePresence"/></span>
    </div>
    <span id="MessageSenderNameOther" class="MessageNameField SecondaryTextColor LargeSystemFont Other"></span>
    <div class="MessageTop Other">
    <img id="MessageBusinessCardImgOther" class="MessageBusinessCardImg" src=""/>
    <span id="MessageTimeStampOther" class="MessageTimeStamp SecondaryTextColor Other SmallSystemFont"></span>
    <span id="MessageDeliveryTimeStampOther" class="MessageDeliveryTimeStamp PrimaryTextColor Other SmallSystemFont"></span>
    <span id="MessageStatusOther" class="MessageStatus PrimaryTextColor"></span>
    </div>
    </div>
    <div id="MessageTextOther" class="MessageText Other MessagingBubbleBorderColor"></div>
    </div>
    </div>
    </div>
    </body>
    </html>

    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?


  • User Newbie

    proprio nessuna idea???


  • User Newbie

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


  • Super User

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


  • User Newbie

    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;
    }


  • User Newbie

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


  • Super User

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


  • User Newbie

    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...


  • Super User

    L'unica cosa che indivisuo è:

    
    window.scrollTo(0,0);
    
    

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


  • User Newbie

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