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
788
16
18
59
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 Content Management System (CMS) 9
E [HTML] Sito responsive non visualizzato su Samsung HTML e CSS 1
W [HTML] problemi con sito responsive Content Management System (CMS) 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 Mobile Marketing 3
P Problema icona app in sito responsive jQuery 0
P Tema responsive per sito HTML e CSS 4
S CREAZIONE DI SITO PER CORSI DI FORMAZIONE WordPress 0
M eliminare padding logo sito HTML e CSS 1
M Come individuare il link sito entrante Google Analytics 0
I PROBLEMA: Sostituzione sito XAMPP E-Commerce 0
D Progetto sito Discussioni Varie 1
M [Cerco] aiutanti per creare sito Offerte e Richieste di Lavoro e/o Collaborazione 4
R inserire video nel sito HTML e CSS 15
C Come caricare foto da google foto ad un sito? Discussioni Varie 1
G cerco: traffico sito, pubblicità condividente post su pagine gruppi Vendere e Acquistare pubblicita' online 0
R Navigare sito con cURL, mi restituisce errore PHP 0
U traffico verso sito Vendere e Acquistare pubblicita' online 3
M Come gestire aggiornamenti e modifiche di sito live Content Management System (CMS) 0
D VENDO Guest Post ZA 45 su sito dedicato agli influencer italiani Vendere e Acquistare pubblicita' online 0
D [VENDO] Guest Post/Banner su sito Offerte e Richieste di scambio links 0
U [Cerco ] incremento traffico per il mio sito Vendere e Acquistare pubblicita' online 0
C Aggiornamento automatico da un sito ad un’altro WordPress 0
P Mascheramento video youtube su sito proprio HTML e CSS 5
L titolo del sito nella pagina di ricerca di google SEO e Posizionamento 2
A Copertura: indicizzata, non inviata nella mappa del sito XML 1
C modificare sito in locale con dreamWeaver HTML e CSS 3
Tommy03 App mobile+ sito web con lo stesso database Sviluppo app per Android 4
P Lingue e Seo sito php SEO e Posizionamento 17
F Aggiungere automaticamente sito a home del telefono HTML e CSS 2
S [Vendo] Sito Wordpress Altri Annunci 0
Shyson Link social penalizzano il sito? SEO e Posizionamento 14
E Creazione di un sito di news PHP 16
S Scelta software/cms per creazione sito Webdesign e Grafica 6
S Trasferire dati sulle pagine del sito PHP 7
F Problemi di visualizzazione di un sito su più browser WordPress 0
B Sito dove vendere e comprare di tutto Offerte e Richieste di Lavoro e/o Collaborazione 1
S Problemi di visualizzazione form contatti sito web HTML e CSS 2
E Sito con procedure guidate per la scelta prodotti Content Management System (CMS) 0
T Vendo sito di E-commerce in dropshipping Compravendita siti e domini 0
R Creazione sito eccomerce privato. Offerte e Richieste di Lavoro e/o Collaborazione 2
Web93 CREARE SITO WEB COMICS CON WORDPRESS WordPress 0
M [VENDO]Sito web su misura e richiesta Compravendita siti e domini 0

Discussioni simili