FORSE O.T.: Headers

Ciao Ragazzi scusate una domanda forse un pò OT.

Non capisco come mai una semplice pagina .htm si comporta diversamente in base all'header impostato anche se identiche.

Se nel codice io elimino l'header in basso funziona correttamente, ma purtroppo devo tenerlo se no le impostazioni non vanno più!

<!DOCTYPE html PUBLIC "-//W3C//HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Vi scrivo il codice:

<!DOCTYPE html PUBLIC "-//W3C//HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<script type="text/javascript" src="ratercontrol.js"></script>
</head>
<body>
<div align="right" class="ratercontrol" id="rater_1"></div>
<script type="text/javascript">
   var raterStrings = new Object();
   raterStrings["ThankYou"] = "Grazie.";
   raterStrings["RateThisTool"] = "Ti piace la nuova interfaccia grafica?";
   raterStrings["Cancel"] = "Cancella";
   raterStrings["value_1"] = "Completamente inutile.";
   raterStrings["value_2"] = "Utile, ma va migliorato.";
   raterStrings["value_3"] = "Mi Piace.";
   var promptbox = new RaterControl("rater_1", raterStrings, 1, "");
</script>

</body>
</html>

ratercontrol.js:

/**
 * Remove trailing and preceding whitespace in strings.  Modifies String
 * prototype.
 * @public
 * @addon
 */
String.prototype.trim = function() {
  return this.replace(/^\s*|\s*$/g, "");
}

/**
 * Reduce newlines, tabs, multiple spaces to a single space.  Modifies String
 * prototype.
 * @public
 * @addon
 */
String.prototype.normalizeSpace = function() {
  return this.replace(/^\s*|\s(?=\s)|\s*$/g, "");
}



/**
 * Obtain the absolute position of a given element.
 * @public
 * @param obj reference to a page HTML element.
 */
function getPos(obj) {
  var coord = new Object();
  o = obj;
  coord.left = o.offsetLeft;
  coord.top = o.offsetTop;
  while(o.offsetParent != null) {
    oParent = o.offsetParent;
    coord.left += oParent.offsetLeft;
    coord.top += oParent.offsetTop;
    o = oParent;
  }
  return coord;
}


/**
 * Constructor: Performs all the event handling functionality for a
 * "smiley" rater
 *
 * @public
 * @constructor
 * @param promptBoxId Id of a container div or similar element in which to
 * render the rater control.
 * @param strings an associative array of strings to use (see usage).
 * @questionId Id of the question.  This will get sent to the server.
 * @responseUri URI for the servlet to handle the response.
 *
 */

function RaterControl(promptBoxId, strings, questionId, responseUri) {
  var imagePath = "images/ratercontrol/";
  var promptBox = document.getElementById(promptBoxId);

  if (!promptBox) return;

  var promptDiv = document.createElement("div");
  var thanksDiv = document.createElement("div");
  var raterDiv = document.createElement("div");

  promptDiv.className = "raterPrompt";
  thanksDiv.className = "ratherThanks";

  var this_ = this;

  // create the thank you
  thanksDiv.style.display = "none";
  thanksDiv.className = "raterThanks";
  thanksDiv.innerHTML = strings["ThankYou"];
  promptBox.appendChild(thanksDiv);

  // create the rater
  raterDiv.style.display = "block";
  raterDiv.innerHTML = "<table cellpadding='0' cellspacing='0' border='0'>"
      + "<tr><td class='raterContent'></td></tr></table>";
  var contents = raterDiv.getElementsByTagName("td")[0];
  var span = document.createElement("span");

  span.innerHTML = strings["RateThisTool"] + ":&nbsp;";

  /**
   * Creates an image object
   * @private
   */
  function createImage(uri){
    var img = document.createElement("img");
    img.src = uri;
    img.align = "absmiddle";
    return img;
  }

  faces = new Array();
  faces[0] = createImage(imagePath + 'sad.gif');
  faces[1] = createImage(imagePath + 'normal.gif');
  faces[2] = createImage(imagePath + 'happy.gif');

  for (var i=0; i< faces.length; i++){
    var face = faces[i];
    face.submitValue = i+1;
    face.rater = this;
    face.onclick = function(){
      this.rater.submitResponse(this.submitValue);
    }
    face.descText = strings["value_" + face.submitValue];
    face.onmouseover = function(){
      this.className = "faceOver";
      var coord = getPos(this);
      Bubble.show(this.descText, coord.left, coord.top);
    }
    face.onmouseout = function(){
      this.className = "";
      Bubble.hide();
    }
    face.style.cursor = "pointer";
    span.appendChild(face);
  }

  contents.appendChild(span);
  promptBox.appendChild(raterDiv);

  /**
   * Hides the rater control
   * @public
   */
  this.hide = function(opt_didSubmit){
    raterDiv.style.display = "none";
    Bubble.hide();
    if (opt_didSubmit) {
      thanksDiv.style.display = "block";
      window.setTimeout(this_.hide, 2500);
    } else {
      promptBox.style.display = "none";
    }
  }

  /**
   * Submits a response to the servlet URI using GET, and hides the
   * prompt box.  Does not check to make sure the data was sent without
   * error.
   * @param value numerical response value.
   * @param handler handler to invoke once the request is complete.
   */
  this.submitResponse = function(value) {
    var url = "batch/rater.php";
    try {
        var pars = 'question=' + escape(questionId) + '&response=' + escape(value);
        var target = 'rater_' + questionId;
        var myAjax = new Ajax.Updater(target, url, {method: 'post', parameters: pars});
    } catch (e) {
      var imgSubmit = new Image();
      //imgSubmit.src = submitUri;
    }
    this_.hide(true);
  }
}

/**
 * Object that handles hiding/showing of a message bubble.
 * @public
 */
var Bubble = {
  imagePath:  "images/ratercontrol/bubble/",

  init: function() {
    if (Bubble.bubbleDiv == null) {
      // initialize the bubble div if there isn't already one declared.
      var div = document.createElement("div");
      div.style.position = "absolute";
      div.style.top = 0;
      div.style.left = 0;

      // innerHTML building.  Multiple table wrapping for IE compatibility.
      var html = '<table cellpadding="0" cellspacing="0" border="0"><tr>'
          + '<td colspan="5"><div style="font-family:Arial;background:#fff;'
          + 'padding:6px;border-width:1px 1px 0px 1px;border-style:solid;'
          + 'border-color:#000;" id="bubble_msg"></div></td></tr>'
          + '<tr><td>'
          + '<table cellpadding="0" cellspacing="0" border="0" width="100%"><tr>'
          + '<td style="width:2px" valign="top"><img src="'
          + Bubble.imagePath + 'bubble_left.gif" height="2" width="2">'
          + '</td><td valign="top"'
          + ' style="width:*;background-repeat:repeat-x;background-image:url(\''
          + Bubble.imagePath +'bubble_bg.gif\')"><img src="'
          + Bubble.imagePath + '1.gif"></td>'
          + '<td style="width:10px" valign="top"><img src="'
          + Bubble.imagePath+ 'bubble_tail.gif" height="11" width="10">'
          + '</td><td style="width:9px" '
          + 'valign="top"><img src="'
          + Bubble.imagePath + 'bubble_bg.gif" width="9" height="2"></td>'
          + '<td style="width:2px" valign="top"><img src="'
          + Bubble.imagePath + 'bubble_right.gif" height="2" width="2">'
          + '</td></tr>'
          + '</table></td></tr></table>';

      div.innerHTML = html;

      // Add to the document, reference as necessary.
      div.style.display = "none";
      div.style.visibility = "hidden";
      document.body.appendChild(div);
      Bubble.msgBox = document.getElementById("bubble_msg");
      Bubble.bubbleDiv = div;
    }
    Bubble.msgBox.innerHML = "&nbsp;";
  },

  show: function( message, absLeft, absTop ) {
    Bubble.init();
    var imagesOffsetY = 12;
    var imagesOffsetX = 16;
    Bubble.bubbleDiv.style.display = "block";
    Bubble.msgBox.innerHTML = message;

    Bubble.bubbleDiv.style.left = absLeft - Bubble.msgBox.offsetWidth
        + imagesOffsetX;
    Bubble.bubbleDiv.style.top = absTop - Bubble.msgBox.offsetHeight
        - imagesOffsetY;
    Bubble.bubbleDiv.style.visibility = "visible";
  },

  hide: function() {
    Bubble.bubbleDiv.style.visible = "hidden";
    Bubble.bubbleDiv.style.display = "none";
    Bubble.bubbleDiv.style.top = "0px";
    Bubble.bubbleDiv.style.left = "0px";

  }
}

Grazie per l'aiuto

 :bye:

inviato 10 anni fa
ulisse
X 0 X

Quando parli di header ti riferisci alla sola riga "[tt]<!DOCTYPE html PUBLIC .....[/tt]"?

risposto 10 anni fa
Gianni Tomasicchio
X 0 X

Si Gianni.

 :bye:

risposto 10 anni fa
ulisse
X 0 X

E' un fenomeno chiamato DOCTYPE switch

http://webdesign.html.it/articoli/leggi/245/il-ed-il-switch-nei-moderni-browser/4/

In due parole il camportamento della pagina cambia perché dichiarando o meno il DOCTYPE il browser funziona in standard o quirk mode, ovvero compatibile con gli standard W3C o retrocompatibile con funzioni implementate in passato (funzioni di tipo CSS e di riflesso di DHTML).

Ad esempio IE6 con DOCTYPE interpreta correttamente il box model CSS altrimenti lo interpreta erroneamente come i predecessori

[OT]Sì sei OT[/OT]

risposto 10 anni fa
usecram
X 0 X

Ok Gianni sposta pure il mesaggio è proprio OT.

Non ho capito come risolvere il problema.

Ho fatto un giro per capire cosa e come funziona il quirk e standard mode ma non trovo una risposta al mio problema.

Grazie lo stesso.  :)

 :bye:

risposto 10 anni fa
ulisse
X 0 X

Standard mode il browser segue le specifiche di visualizzazione dettate dal DTD indicato nel tag <!DOCTYPE />. Solitamente si utilizzano i DTD creati dal w3c ma potresti anche voler creare un tuo DTD.

Quirk mode il browser fa praticamente quel che vuole, non avendo specificato un DTD quindi come deve renderizzare la pagina lui lo fa come meglio crede.

L'unico modo per risolvere il problema è scrivere codice (X)HTML compatibile con gli standard...

maggiori informazioni quì http://www.webstandards.org/about/mission/it/ e ovviamente nelle raccomandazioni del w3c http://www.w3.org/

risposto 10 anni fa
Xscratch
X 0 X

Hai provato utilizzando il transitional anzichè lo strict?

risposto 10 anni fa
LonelyWolf
X 0 X

No ora provo...grazie  :bye:

risposto 10 anni fa
ulisse
X 0 X
Effettua l'accesso o registrati per rispondere a questa domanda