sito responsive - calcolare l'altezza document di 2 php

ans66

Utente Attivo
27 Ago 2011
158
0
16
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 Collettività 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.

img.jpg

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

Grazie per l'aiuto
 

ans66

Utente Attivo
27 Ago 2011
158
0
16
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 Collettività 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

Utente Attivo
27 Ago 2011
158
0
16
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

Utente Attivo
27 Ago 2011
158
0
16
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

Utente Attivo
15 Dic 2009
852
20
28
62
Udine
www.stilisticamente.com
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:
 
Discussioni simili
Autore Titolo Forum Risposte Data
A Progetto Sito web responsive HTML e CSS 2
C [ OFFRO ] Realizzazione Sito Web Responsive design e Ottimizzato Offerte e Richieste di Lavoro e/o Collaborazione 1
L PHP 7.X e sito responsive CMS o altro PHP 13
T [HTML] [Prestashop] Problemino grafico su versione Responsive del sito CMS (Content Management System) 9
E [HTML] Sito responsive non visualizzato su Samsung HTML e CSS 1
W [HTML] problemi con sito responsive CMS (Content Management System) 1
StePunk [HTML] sito responsive / zoom automatico / risoluzione HTML e CSS 2
RoVo sito responsive in Adobe Muse Windows e Software 2
F aiuto per funzionamento sito responsive e form contatti HTML e CSS 29
D problema sovrapposizione div in sito responsive HTML e CSS 4
R come visualizzare un sito responsive in desktop su smarthphone? HTML e CSS 3
filippino Sito mobile: responsive VS adaptive Webdesign e Grafica 3
P Problema icona app in sito responsive jQuery 0
P Tema responsive per sito HTML e CSS 4
glm2006ITALY Guida Il proprio sito WordPress è professionale? WordPress 0
shelbystudio cliente moroso: posso disattivare email e sito in attesa del pagamento? Leggi, Normative e Fisco 3
R Messaggio apertura sito WordPress 4
E Benvenuti sul Nuovo Sito: Explore Como Lake! Presenta il tuo Sito 0
R Aiuto ripristino sito web Presentati al Forum 0
A Vendo sito web news economia, finanza, immobiliare online da pochi mesi Compravendita siti e domini 0
D [COMPRO/CERCO] GUEST POST o scambio link per sito di Spiritualità ed Esoterismo. Vendere e Acquistare pubblicita' online 0
M Vendo il mio sito web teknosurfng.com, che trasmette nel campo della tecnologia Compravendita siti e domini 0
G Perché il mio sito su Google news fa vedere le immagini degli articoli la mia foto profilo? WordPress 1
D protezione cartelle: blocco visualizzazione/scaricamento contenuto, ma abilitazione utilizzo dati da parte di file .php presenti sul sito Web Server 1
M Analisi sito per pulire codice inutile HTML e CSS 1
C iscrizioni malevole su sito off-line WordPress 6
M [cerco webmaster] sito web da modificare Offerte e Richieste di Lavoro e/o Collaborazione 0
F Animazione testo sito web diminuire grandezza di un testo allo scroll Javascript 0
N Vendo sito web di casino online con 1000 giochi Compravendita siti e domini 0
R Recupero di permalink di un sito che è stato eliminato per errore WordPress 5
A Web master per semplice sito web Offerte e Richieste di Lavoro e/o Collaborazione 2
G VENDO sito completo Compravendita siti e domini 0
N Creazione sito web senza Partita IVA (Era: mettersi in regola) Leggi, Normative e Fisco 1
V dati scomparsi dal sito HTML e CSS 3
E Sito violato, file modificati, cartelle create WordPress 1
A [Cerco][Retribuito] Correzioni errori sito web Offerte e Richieste di Lavoro e/o Collaborazione 3
G Il mio sito dopo aver abilitato l'ssl non visualizza le immagini con indirizzi senza ssl HTML e CSS 0
M Memorizzazione temi per le diverse pagine del sito Javascript 1
MarcoGrazia Sistema di news interno al sito PHP 3
M Non ho rinnovato il mio sito su Aruba... Domini 1
G Vi presento il mio sito: Globalmeteo Presenta il tuo Sito 0
F Cerco fotografo per sito abiti da sposa Discussioni Varie 2
Shyson Google search non trova il mio sito SEO e Posizionamento 1
S Sito Wordpress creato in localhost PHP 1
N Consigli SEO per il mio sito di web design SEO e Posizionamento 0
M Normativa sito di rubriche: blog o magazine o altro? Leggi, Normative e Fisco 0
L PHP motore di ricerca nel sito PHP 1
MarcoGrazia Rifacimento sito de Genealogia italiana Presenta il tuo Sito 4
Z Hacker sito ARUBA Sicurezza e Virus 0
Shyson Non mi fa accedere al sito WordPress 12

Discussioni simili