sito responsive - calcolare l'altezza document di 2 php

ans66 · 18 Ott 2015

Ciao a tutti sto cercando di modificare il mio sito in modo "Responsive".

Per calcolare l'altezza per pagine con larghezza differente utilizzo il seguente script:

Codice:

function calcHeight(e)
   {
   
    //find the height of the internal page
    var the_height=
    e.contentWindow.document.body.scrollHeight;
    document.body.scrollHeight;
    
    the_height+=10;

    e.height=the_height;
        
   }

l'obiettivo era quello di calcolare l'altezza quando la larghezza della pagina cambia (simulando i diversi dispositivi). Tutto bene fino al punto in cui debbo calcolare l'altezza di due file php:

Nome: supporticol.php

HTML:

  <HTML>
<HEAD>
   
</HEAD>
<body>
<?php 

echo '
            <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" bgcolor="" height="onload="calcHeight(this);">
              <tr>
                  <td width="82" align="center" height="74" bgcolor="#6FCDE6" valign="middle">
    <a target="I3" href="principale.htm">
    <img border="0" src="t-p.jpg" width="64" height="70"></a>
                  </td>
    <td width="82" align="center" height="74" bgcolor="#6FCDE6">
    <a target="I3" href="transfr.htm">
    <img border="0" src="t-o.jpg" width="64" height="70"></a>
</td>
    <td width="85" align="center" height="74" bgcolor="#6FCDE6">
    <a target="I3" href="transfl.htm">
    <img border="0" src="t-f.jpg" width="69" height="70"></a>
</td>
    <td width="85" align="center" height="74" bgcolor="#6FCDE6">
    <a target="I3" href="transmk.htm">
    <img border="0" src="mark.jpg" width="69" height="70" title="Supporto per Collettività Serie Market" class="tooltip_explode" > 
</td> 
    <td width="85" align="center" height="74" bgcolor="#6FCDE6">
    <a target="I3" href="transtd.htm">
    <img border="0" src="trtd.jpg" width="69" height="70"><a href="supporti transport zn.pdf" download="supporti transport zn.pdf"><img border="0" src="pdf.gif"></a>
</td> 
    <td width="92" align="center" height="74" bgcolor="#6FCDE6">
    <a target="I3" href="transpginox.htm">
    <img border="0" src="t-p-i.jpg" width="74" height="70"></a>
</td>
    <td width="92" align="center" height="74" bgcolor="#6FCDE6">
    <a target="I3" href="transfrinox.htm">
    <img border="0" src="t-o-i.jpg" width="74" height="70">
</td>
    <td width="92" align="center" height="74" bgcolor="#6FCDE6">
    <a target="I3" href="transtdinox.htm">
    <img border="0" src="trtdinox.jpg" width="74" height="70"><a href="supporti transport inox.pdf" download="supporti transport inox.pdf"><img border="0" src="pdf.gif"></a>
</td>
    <td width="140" align="center" height="74" bgcolor="">
    &nbsp;</td>
    <td width="110" align="center" height="74" bgcolor="">
    &nbsp;</td>
              </tr>
            </table> ';
?>
            </BODY>


			
			
</HTML>

a cui segue sotto l'immagine (che cambia a seconda del tasto premuto - vedi tabella sopra). Da qui l'esigenza di dividere in due php:

frame:

nome: primaimg.php

PHP:

<?php

echo'<iframe name="I3" src="principale.htm" width="100%" height="auto" scrolling="no" 
frameborder="0" "></iframe>'; 

?>

immagine jpg 700x1220px

HTML:

<body>


    <img  border="0" src="transpg.jpg" width="100%"" height="auto"></td>


</body>

ed infine il php che unisce i due precedenti:

PHP:

include "supporticol.php";
include "primaimg.php";

Ho incontrato i seguenti due problemi:

- Non riesco ad avere un'altezza responsive dei due file php
-nel file supporticol.php non riesco a creare un resize immagini in modo tale da ottenere width="100% (l'immagine che segue indica come dovrebbe essere) mentre il mio tentativo di imputare alle immagine una valore percentuale width non ha avuto successo.

la guida relativa alla creazione di un sito responsive mi è stata di ispirazione.

Grazie per l'aiuto

ans66 · 18 Ott 2015

stavo cercando una soluzione alternativa:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
  </head>
  <body>
   <table width="100%" height="10%" border="1">
    <tr>
       <td width="12%" bgcolor="#6FCDE6" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
       <a href="#" onclick="vai();" >
       <img border="0" src="t-p.jpg" width="64" height="auto"></a>
       </td>
       <td width="12%" bgcolor="#6FCDE6" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
       <a target="I3" href="transfr.htm">
       <img border="0" src="t-o.jpg" width="64" height="auto"></a>
       </td>
       <td width="12%" bgcolor="#6FCDE6" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
       <a target="I3" href="transfl.htm">
       <img border="0" src="t-f.jpg" width="69" height="70"></a>
       </td>
       <td width="12%" bgcolor="#6FCDE6" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
       <a target="I3" href="transmk.htm">
    <img border="0" src="mark.jpg" width="69" height="70" title="Supporto per Collettività Serie Market" class="tooltip_explode" >
       </td>
       <td width="12%" bgcolor="#6FCDE6" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
       <a target="I3" href="transtd.htm">
       <img border="0" src="trtd.jpg" width="69" height="70"><a href="supporti transport zn.pdf" download="supporti transport zn.pdf">
        <img border="0" src="pdf.gif"></a>
       </td>
       
       <td width="12%" bgcolor="#6FCDE6" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
       <a target="I3" href="transpginox.htm">
       <img border="0" src="t-p-i.jpg" width="74" height="70"></a>
       </td>
       <td width="12%" bgcolor="#6FCDE6" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
       <a target="I3" href="transfrinox.htm">
       <img border="0" src="t-o-i.jpg" width="74" height="70">
       </td>
       <td width="12%" bgcolor="#6FCDE6" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
       <a target="I3" href="transtdinox.htm">
       <img border="0" src="trtdinox.jpg" width="74" height="70"><a href="supporti transport inox.pdf" download="supporti transport inox.pdf"><img border="0" src="pdf.gif"></a>
       </td>
       
   </tr>
 
   
</table>
<table width="100%" height="90%" border="1">
   <tr>
      <td width="100%" colspan="10">
      <img  border="0" src="transpg.jpg" width="100%"" height="auto">
      </td>
      
   </tr>
</table>
  </body>
</html>

rimane il problema delle immagini che non riesco a rendere responsive

ans66 · 19 Ott 2015

ho risolto anche il problema della modifica dell'immagine nella seconda tabella tramite il seguente script:

Codice:

$(document).ready(function(){

$("td").click(function(){

    event.preventDefault();
    var cid = $(this).attr('id');
    
    if(cid=='one')  
    {
     $("#im").attr("src", "transpg.jpg");  // change image back when ajax request is complete
    } else if (cid=='two')
    {
     $("#im").attr("src", "transfr.jpg");  // change image back when ajax request is complete
    } else if (cid=='three')
    {
     $("#im").attr("src", "transfl.jpg");  // change image back when ajax request is complete
    } else if (cid=='four')
    {
     $("#im").attr("src", "transmk.jpg");  // change image back when ajax request is complete
    }else if (cid=='five')
    {
     $("#im").attr("src", "transtd.jpg");  // change image back when ajax request is complete
    }else if (cid=='six')
    {
     $("#im").attr("src", "transpginox.jpg");  // change image back when ajax request is complete
    }else if (cid=='seven')
    {
     $("#im").attr("src", "transfrinox.jpg");  // change image back when ajax request is complete
    }else if (cid=='eight')
    {
     $("#im").attr("src", "transtdinox.jpg");  // change image back when ajax request is complete
    }
});

});

rimane solo il problema del resize delle immagini piccole nella prima tabella (es: t-p.jpg). Ringrazio chiunque possa darmi un'idea

ans66 · 21 Ott 2015

risolto problema resize immagini nella prima tabella:

CSS

Codice:

.one {
  background-image: url(t-p.jpg);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  height: 100%;
  width: 100%;
  cursor: hand;
}

HTML:

<td id="one" align="center" width="12%" bgcolor="#6FCDE6" >
       <div class="one" >
       
       </div>
</td>

e così per tutti gli altri TD.

Con questo, stravolgendo tutto da quanto indicato all'inizio, sono riuscito a risolvere

MarcoGrazia · 22 Nov 2015

Scusa ma visto che usi i fogli di stile non ti conveniva dare td {width: 12%; background:#6fcde6;text-align:center;} così evitavi di scriverlo ovunque?
Eventualmente la prossima volta prova a studiarti le griglie, sono più facili da usarsi e fai prima.
:byebye:

Cerca

Cerca

sito responsive - calcolare l'altezza document di 2 php

ans66

Utente Attivo

ans66

Utente Attivo

ans66

Utente Attivo

ans66

Utente Attivo

MarcoGrazia

Utente Attivo

Discussioni simili