Problema con slideshow para validación W3C

Neilprydehack · 25 Enero 2011, 14:26 PM

Hola a todos,

Estoy intentando validar de una vez por todas mi web y entre otros errores me aparece este:

# Error Line 223, Column 35: document type does not allow element "div" here

var markup = '<div id="slideshow">'

The element named above was found in a context where it is not allowed. This could mean that you have incorrectly nested elements -- such as a "style" element in the "body" section instead of inside "head" -- or two elements that overlap (which is not allowed).

One common cause for this error is the use of XHTML syntax in HTML documents. Due to HTML's rules of implicitly closed elements, this error can create cascading effects. For instance, using XHTML's "self-closing" tags for "meta" and "link" in the "head" section of a HTML document may cause the parser to infer the end of the "head" section and the beginning of the "body" section (where "link" and "meta" are not allowed; hence the reported error).
# Error Line 276, Column 43: an attribute value specification must be an attribute value literal unless SHORTTAG YES is specified

<input type="hidden" name="Itemid" value=93 />

# Error Line 287, Column 62: ID "slideshow" already defined

<div style="overflow: hidden; position: relative;" id="slideshow">

An "id" is a unique identifier. Each time this attribute is used in a document it must have a different value. If you are using this attribute as a hook for style sheets it may be more appropriate to use classes (which group elements) than id (which are used to identify exactly one element).

# Info Line 223, Column 25: ID "slideshow" first defined here

var markup = '<div id="slideshow">'

Algo tengo que tener mal, a simple vista el firebug no me da nada mal pero con el w3c validator me da esos errores.

Alguna idea?

Muchas gracias

Un saludo a todos

#!drvy · 25 Enero 2011, 15:03 PM

# Error Line 223
Significa que no te permite que pongas ese div en la variable xD. Osease que no te permitira insertar ninguna etiqueta html en una variable. Si quieres pasar de ello, separa el javascript del html.

# Error Line 276
El value debe ir entre comillas.

# Error Line 287
Significa que en algun momento ya has definido el ID para" slideshow" y no puedes volver a usar dicho id en otro div.

# Info Line 223
Te muestra donde has definido por primera vez el id "slideshow".

Saludos

Neilprydehack · 25 Enero 2011, 17:12 PM

Muchas gracias por tu respuesta drvy,

Pienso que es mejor como tu dices si separo el javascript del html, te voy a decir como lo haría a ver si es correcto por si a alguien más le surge el problema.
este es el código a separar dentro del header gallery:

<script type="text/javascript">
var $j = jQuery.noConflict();
$j('img').src = '<?php echo $templateurl; ?>/images/header/1.jpg';
$j('img').src = '<?php echo $templateurl; ?>/images/header/2.jpg';
$j('img').src = '<?php echo $templateurl; ?>/images/header/3.jpg';
$j('img').src = '<?php echo $templateurl; ?>/images/header/4.jpg';

$j(function() {
   var fx,   cbox = 1;//$('input:checkbox').click(start)[0];
   //cbox.checked = true;

   var markup = '<div id="slideshow">'
      + '<img src="<?php echo $templateurl; ?>/images/header/1.jpg" alt=""/><img src="<?php echo $templateurl; ?>/images/header/2.jpg" alt=""/><img src="<?php echo $templateurl; ?>/images/header/3.jpg" alt=""/><img src="<?php echo $templateurl; ?>/images/header/4.jpg" alt=""/>'
      + '</div>';

   function start() {
      $j('#slideshow').cycle('stop').remove();
$j('#show').append(markup);
      $j('#effect').html(fx);
      $j('#slideshow').cycle({
         fx: fx,
         timeout: 5000,
         delay: -1000,
         after: onAfter,
         sync: 1
      });
   }

   function onAfter(curr,next,opts) {
      var msg = 'Slide ' + (opts.currSlide + 1) + ' of ' + opts.slideCount;
      $j('#caption').html(msg);
   };

   fx = $j.trim("zoom");
   start();
});
</script>
                     

Cogería el código entero sin incluir lo de Header gallery, y lo guardaría en un archivo .js
Despues entre el header gallery y header gallery end escribría: <script src="http://mipagina/miarchivo.js"></script>

Sería correcto?

Muchas gracias

Un saludo

#!drvy · 25 Enero 2011, 18:53 PM

quitando estos 2: <script type="text/javascript"> y </script> del archivo .js todo lo demas queda bien (creo xD).

Saludos

Neilprydehack · 25 Enero 2011, 20:42 PM

Hola de nuevo,

Lo he hecho de esa forma pero entonces no me aparecen las imagenes, debe de ser porque hay una segunda parte en el html que está asociada pero claro como lo haces para sacarlo?, pongo todo el código referente al slide, parece complicado:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />

<?php
   global $templateurl ;
   $templateurl = $this -> baseurl . '/templates/mi template' ;
   $js = $templateurl.'/js/';
   $css = $templateurl.'/css/';
?>
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $templateurl; ?>/css/template.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $templateurl; ?>/css/style.css" type="text/css" />
<script src="<?php echo $templateurl; ?>/js/jquery-1.3.2.js" type="text/javascript"></script>
<script src="<?php echo $templateurl; ?>/js/jquery-slide.js" type="text/javascript"></script>
<script src="<?php echo $templateurl; ?>/js/ie.js" type="text/javascript"></script>

      
<script type="text/javascript">
var $j = jQuery.noConflict();
$j('img').src = '<?php echo $templateurl; ?>/images/header/1.jpg';
$j('img').src = '<?php echo $templateurl; ?>/images/header/2.jpg';
$j('img').src = '<?php echo $templateurl; ?>/images/header/3.jpg';
$j('img').src = '<?php echo $templateurl; ?>/images/header/4.jpg';

$j(function() {
   var fx,   cbox = 1;//$('input:checkbox').click(start)[0];
   //cbox.checked = true;

   var markup = '<div id="slideshow">'
      + '<img src="<?php echo $templateurl; ?>/images/header/1.jpg" alt=""/><img src="<?php echo $templateurl; ?>/images/header/2.jpg" alt=""/><img src="<?php echo $templateurl; ?>/images/header/3.jpg" alt=""/><img src="<?php echo $templateurl; ?>/images/header/4.jpg" alt=""/>'
      + '</div>';

   function start() {
      $j('#slideshow').cycle('stop').remove();
$j('#show').append(markup);
      $j('#effect').html(fx);
      $j('#slideshow').cycle({
         fx: fx,
         timeout: 5000,
         delay: -1000,
         after: onAfter,
         sync: 1
      });
   }

   function onAfter(curr,next,opts) {
      var msg = 'Slide ' + (opts.currSlide + 1) + ' of ' + opts.slideCount;
      $j('#caption').html(msg);
   };

   fx = $j.trim("zoom");
   start();
});
</script>
                     


</head>
                                                                                          <body dir="ltr">
<div id="body">
   <div class="outer">
      <div id="shopcart">
         <jdoc:include type="modules" name="user2" />
      </div>
      <div id="currency"><jdoc:include type="modules" name="user1" style="top" /></div>
      <div id="logo">
         <a href="<?php echo $mainframe -> getCfg ( 'live_site' ) ; ?>">
            <img src="<?php echo $templateurl; ?>/images/logo.jpg" alt="" />
         </a>
      </div>
      <div id="search"><jdoc:include type="modules" name="user4" /></div>
      <div id="topmenu">
         <jdoc:include type="modules" name="user3" />
      </div>
      <div class="clear"></div>

      <div id="header" class="outer">
         <div class="inner">
            <div id="shop_now">
               <div id="show">
                  <div style="overflow: hidden; position: relative;" id="slideshow">
                      <img style="position: absolute; top: 0px; left: 0px; display: none; z-index: 9; opacity: 1; width: 991px; height: 334px;" src="<?php echo $templateurl; ?>/images/header/1.jpg" alt="" />
                      <img style="position: absolute; top: 0px; left: 0px; display: none; z-index: 9; opacity: 1; width: 991px; height: 334px;" src="<?php echo $templateurl; ?>/images/header/2.jpg" alt="" />
                      <img style="position: absolute; top: 0px; left: 0px; display: none; z-index: 9; opacity: 1; width: 991px; height: 334px;" src="<?php echo $templateurl; ?>/images/header/3.jpg" alt="" />
                      <img style="position: absolute; top: 0px; left: 0px; display: none; z-index: 9; opacity: 1; width: 991px; height: 334px;" src="<?php echo $templateurl; ?>/images/header/3.jpg" alt="" />
                  </div>

La primera y la última parte esta asociada al header de las imagenes y lo del medio son posiciones de modulos, debería de llevar las dos partes a otro archivo pero la verdad nosé como podría hacerlo, he probado varias fórmulas pero nada.

Test Foro de elhacker.net SMF 2.1

Problema con slideshow para validación W3C

Neilprydehack

#!drvy

Neilprydehack

#!drvy

Neilprydehack