La sovrapposizione di JQuery crea conflitti in WS9

[Miss. Lin]

Ok mi faccio un bel controllo ed effettuo un pò di pulizia. Cmq grazie mille per il tuo aiuto. Appena sistemo tutto ti confermo. ^__^

[Miss. Lin]

Ciao Stesil, dunque come da tuo suggerimento, ho eliminato dei file css in + e sistemato il problema della sovrapposizione di css tramite un codice inserito all'interno del css screen. Allo stato attuale va tutto abbastanza bene, c'è solo il fatto che il jcarousell nn riesce ad apparire nella homepage quando lo si guarda da google chrome a differenza degli altri browser.


Inoltre un cruccio che sto cercando di sistemare riguarda il loader dell'applicazione JQuery Max Image di sfondo, in quanto vorrei centrarlo. Ho provato con molti codici ma nn ci riesco, il codice css originario è quello allegato e dio sto cercando di creare un codice che lo riesca a fissare centralmente, ma finora ho fatto un buco nell'acqua.


Avevo provato ad inserire questo:


#loader {
position: fixed !important;
width: 100%;
height: 100%;
text-align: center;
vertical-align: middle;
}

[stesil]

Per il loader prova ad aggiungere questo:

Codice:

Only registered users can see contents. Please click here to Register or Login.
Per Chrome, ho visto ... le immagini si visualizzano in ritardo .... per ora non ho capito perchè ...... giusto per eliminare una variabile, prova ad aggiungere un contenuto, tipo un oggetto testo ... più tardi guardo con più calma.

[Miss. Lin]

Stesil, il css adesso è perfetto del loader. Per quanto riguarda la Index ho inserito un testo prova, premetto che avevo fatto anche io questa prova precedentemente. Purtroppo non và ugualmente.

[stesil]

Non va in nessuna pagina. Se fai il refresh di qualsiasi pagina, osservi lo stesso comportamento. Mi scrivi il link della fonte da cui hai scaricato il plugin?

Già che ci siamo, togliamo altre variabili, correggendo alcuni tra gli errori presenti nel codice:
togli questo dal file css/style.css: @import url('reset.css');
i nomi delle cartelle dovrebbero essere senza spazi:  "Studio In           Home_files/skin.css"

Di errori ce ne sono altri: se passi la pagina al validatore li vedi. Ma non dovrebbero incidere con l'esecuzione del codice, anche se correggerli non farebbe male.

[Miss. Lin]

In pratica i codici con i file li ho presi da questo esempio http://studioin.theme.mk/html/   mi sono salvata il tutto ed ho ripulito i file integrando così l'oggetto nel piè di pagina. Probabilmente in questo passaggio non ho ripulito bene il tutto.
Ti allego il jqueri da me sistemato.



allegato rimosso - stesil

[stesil]

No,  non è questo il modo di agire. Il link che hai postato, che cancellerò, non è un codice "sistemato", ma l'esatta copia dei file della pagina del sito che hai linkato. Spero per te che tu non abbia caricato sul server tutti quei file.

Questo è il vero link al plugin: http://sorgalla.com/projects/jcarousel/

Ci sono le istruzioni e i file che servono. Leggi e troverai il modo corretto di procedere.

[Miss. Lin]

Stesil hai pienamente ragione, solo che trovare un jcarosel con gli effetti di quella demo nn è semplice. Adesso cerco di sistemare il tutto, magari dando al jcarosel gli stessi effetti di quello da me postato nel sito.

[Miss. Lin]

Ciao Stesil,


come da tuo suggerimento scaricai il Jcarosel dal link da te indicato. Diciamo che l'ho sistemato abbastanza bene, sono riuscita a dare anche un effetto hover alle immagini, ma non riesco a fare si che le immagini scorrano di continuo a sinistra senza tornare indietro. Inoltre risulta che solo la prima immagine nn prenda l'effetto hover ed il collegamento. Ho provato a  controllare se dipendesse da qualche mio errore nel codice, ma nn ne vedo.
Potresti controllare x cortesia? Ti ringrazio.

[stesil]

Ciao,

dai file che hai allegato si vede poco, perchè manca il codice della pagina html e mi sembra che non hai aggiornato il sito online con la tua prova.

Hai inserito le opzioni di jcarousel in head? Una cosa di questo tipo, poi verifica il significato delle variabili e i valori che possono assumere sul sito di jcarousel:

Codice:

Only registered users can see contents. Please click here to Register or Login.

[Miss. Lin]

Il codice della pagina html si trova all'interno della cartella examples. Il codice html è il seguente (ho provato anche ad inserirlo nel piè di pagina inserendo il codice della Head appunto nella parte head di esperto ma nn funziona, ho cambiato la funzione last cn circula e adesso gira sempre nella stessa direzione, ma resta che al primo oggetto l'effetto hover e link nn funziona:





<head>
<title>jCarousel Examples</title>


<!--
  jQuery library
-->
<script type="text/javascript" src="../lib/jquery-1.4.2.min.js"></script>
<!--
  jCarousel library
-->
<script type="text/javascript" src="../lib/jquery.jcarousel.min.js"></script>
<!--
  jCarousel skin stylesheet
-->
<link rel="stylesheet" type="text/css" href="../skins/tango/skin.css" />


<script type="text/javascript">




function mycarousel_initCallback(carousel)
{
    // Pause autoscrolling if the user moves with the cursor over the clip.
    carousel.clip.hover(function() {
        carousel.stopAuto();
    }, function() {
       carousel.startAuto();
      
    });
};


jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        auto: 1,
        wrap: 'circular',
       
    });
});


</script>
</head>
<body>
<div id="wrap">


  <ul id="mycarousel" class="jcarousel-skin-tango">
    <li><img src="lube.png" width="150" height="70" alt="" /> <a href="http://www.cucinelube.it" target="_new""></li>
    <li><img src="comfort.png" width="148" height="70" alt="" /> <a href="http://www.prova.it" target="_new""></li>
    <li><img src="customhome.png" width="148" height="70" alt="" /> <a href="http://www.prova.it" target="_new""></li>
    <li><img src="decor.png" width="130" height="70" alt="" /> <a href="http://www.prova.it" target="_new""></li>
    <li><img src="finesse.png" width="160" height="70" alt="" /> <a href="http://www.prova.it" target="_new""></li>
    <li><img src="furniture.png" width="149" height="70" alt="" /> <a href="http://www.prova.it" target="_new""></li>
    <li><img src="homedesign.png" width="149" height="70" alt="" /> <a href="http://www.prova.it" target="_new""></li>
    <li><img src="interior.png" width="150" height="70" alt="" /> <a href="http://www.prova.it" target="_new""></li>
  </ul>


<>
</body>

[stesil]

E' errata la posizione dei tag a, che sono inoltre privi di chiusura. Questo è il codice corretto:
 

Codice:

Only registered users can see contents. Please click here to Register or Login.
In head togli tutta questa parte

Codice:

Only registered users can see contents. Please click here to Register or Login.
e prova a sostituirla con il codice che ti ho scritto prima:

Codice:

Only registered users can see contents. Please click here to Register or Login.

[Miss. Lin]

Stesil, ho sistemato tutto come da tuo suggerimento ed ho modificato i codici delle immagini e dei link in maniera corretta (avevo effettivamente dimenticato la chiusura </a> e non avevo inserito nella giusta posizione il codice x il link. Il prototipo adesso va bene, è in website che adesso nn và, in pratica se inserisco la parte Head in codice esperto head e la parte del body all'interno dell'oggetto html nel piè di pagina questo nn funziona, appare in pratica cm se mancasse una pagina, adesso ti  pubblico la prova on-line.


Il codice adesso è il seguente:



<head>
<title>jCarousel Examples</title>


<!--
  jQuery library
-->
<script type="text/javascript" src="../lib/jquery-1.4.2.min.js"></script>


<script type="text/javascript" src="../lib/jquery.jcarousel.min.js"></script>
<!--
  jCarousel skin stylesheet
-->
<link rel="stylesheet" type="text/css" href="../skins/tango/skin.css" />


<script type="text/javascript">
$(document).ready(function() {
$('#mycarousel').jcarousel({
scroll: 1,
wrap: 'circular',
auto: 5,
start: 0,
visible: 5
});
});
</script>


</head>
<body>
<div id="wrap">


  <ul id="mycarousel" class="jcarousel-skin-tango">
 
    <li><a href="http://www.cucinelube.it" target="_new""><img src="lube.png" width="150" height="70" alt="" /></a></li>
    <li><a href="http://www.prova.it" target="_new""><img src="comfort.png" width="148" height="70" alt="" /></a></li>
    <li><a href="http://www.prova.it" target="_new""><img src="customhome.png" width="148" height="70" alt="" /></a></li>
    <li><a href="http://www.prova.it" target="_new""><img src="decor.png" width="130" height="70" alt="" /></a></li>
    <li><a href="http://www.prova.it" target="_new""><img src="finesse.png" width="160" height="70" alt="" /></a></li>
    <li><a href="http://www.prova.it" target="_new""><img src="furniture.png" width="149" height="70" alt="" /></a></li>
    <li><a href="http://www.prova.it" target="_new""><img src="homedesign.png" width="149" height="70" alt="" /></a></li>
    <li><a href="http://www.prova.it" target="_new""><img src="interior.png" width="150" height="70" alt="" /></a></li>
  </ul>


<>
</body>

[Miss. Lin]

Stesil, ho pubblicato il sito cn tute le modifiche, ti ringrazio di cuore, sei stata un aiuto fondamentale per me. Finalmente funziona tutto bene, ci ho messo un pò di tempo a sistemare i file ma alla fine ne è valsa la pena. Puoi vedere il sito a questo indirizzo www.peppespider.it.


Adesso nn vorrei essere scocciante, ma qualcuno sa come inserire una cornice alla mappa?

[Miss. Lin]

A proposito come nn detto, ho modificato la mappa di WS9 direttamente dal codice.