Visualizzazione dei risultati da 1 a 4 su 4

Discussione: Eliminare opacity da div

  1. #1

    Eliminare opacity da div

    Salve raga, dovrei eliminare opacity da un div da un sito in cui mi è stata chiesta questa correzione,
    Il sito è: http://www.atelierfabiogritti.it/. Dovrei eliminare il lampeggio dal primo box ("Atelier") e renderlo come gli altri box.
    Il codice è un misto tra PHP ed HTML in cui è presente la proprietà opacity

    codice:
        <div id="fasciaContent">
            <div class="centerBoxes">
                <?php 
                
                    $first= " first";
                    $args = array( 'child_of' => '12' );
                    $postslist = get_pages( $args );
                    foreach ($postslist as $post) :  setup_postdata($post);
                ?>
                <div class="boxino<?=$first?>">
                    <?php
                        $first = ''; 
                        if ( has_post_thumbnail()) {
                        $theImg = get_the_post_thumbnail($page->ID,'imgshome');
                        ?>
                        <a href='<?php the_permalink(); ?>' title='<?php the_title(); ?>'><?=$theImg?></a>
                    <?php   
                    } 
                    ?>
                    <div>
                        <h4><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" ><?php the_title();?></a></h4>
                        <?php the_excerpt(); ?>
                    </div>          
                </div>
                <?php 
                    endforeach;
                ?>
            </div>  
        </div>
        
    
    Chi mi da una mano? Chiaramente potete controllare con ispeziona elemento

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,116
    Ciao, quell'effetto è creato con JavaScript, non è un'animazione creata dal solo CSS. Lo si deduce dal fatto che viene modificato runtime il valore dell'attributo style, e poi dal fatto che ispezionando il CSS di quell'elemento non c'è alcuna animazione impostata direttamente dal CSS. Dentro l'attributo style chiaramente viene modificato il valore della proprietà opacity che crea l'effetto ma di fatto, tale modifica runtime, avviene tramite JavaScript.

    In effetti mi chiedo perché invece non sia stata usata una semplice animazione CSS

    Puoi risolvere in due modi:

    1) Forzare il valore di opacity per tale elemento, impostandolo via CSS con la clausola !important. Tale clausola è necessaria per attribuire un valore superiore di specificità rispetto alla proprietà definita nell'attributo style (quindi, css in linea, cioè definito nel tag), che normalmente avrebbe una maggiore priorità rispetto al CSS incluso nella pagina.

    Può essere una cosa del genere:
    codice:
    .boxino.first > div {
        opacity: 1 !important;
    }
    Ovviamente dovrai inserire questo CSS da qualche parte a seconda di come è gestita la cosa sul tuo sito; che so, magari ci sarà la possibilità di aggiungere del CSS personalizzato in qualche modo, diversamente puoi buttarlo dentro uno dei file .css inclusi in quella pagina.

    Tieni conto che questo metodo non interviene su ciò che sta avvenendo via JavaScript, tant'è che lo style continuerà a subire la modifica runtime (con relativo, seppur minimo, spreco di risorse di sistema), ma semplicemente il valore della proprietà opacity sarà sovrascritto dal CSS (incluso nella pagina) per via del suo maggiore livello di specificità dettato da !important.

    2) Modificare i file sorgenti in modo da eliminare il codice JavaScript che applica quell'effetto su tale elemento.
    Per intervenire bisogna capire come sono strutturati i file sorgenti (php) per trovare quello in cui viene inserito tale script; potrebbe essere semplicemente un file del tipo index.php. Ciò che hai postato non è comunque utile.

    Ad ogni modo considera che lato client vedo lo script in questione, che si trova prima della chiusura di <head>, esattamente questo:
    codice:
    <script>
       jQuery(document).ready(function(){
          jQuery('#fasciaSpot .centerBoxes').hover(
             function(){jQuery("#fasciaSpot .centerBoxes div").stop(true,true).fadeTo('slow',0.7);}, 
             function(){jQuery("#fasciaSpot .centerBoxes div").stop(true,true).fadeTo('slow',0.9);}
          );
          
          jQuery('.first .attachment-imgshome').css({'border':'4px solid #FFF'}).everyTime(10, function(){
         jQuery('.first div').animate({opacity:'0.7'},700).animate({opacity:'1'},0);
         });
          });
    </script>
    Eventualmente fai qualche ricerca tra i tuoi file per rintracciarlo.

    Dovrai eliminare l'intero blocco relativo a quell'ultimo metodo everyTime(); puoi eliminarlo del tutto o magari commentarlo:
    codice:
    <script>
       jQuery(document).ready(function(){
          jQuery('#fasciaSpot .centerBoxes').hover(
             function(){jQuery("#fasciaSpot .centerBoxes div").stop(true,true).fadeTo('slow',0.7);}, 
             function(){jQuery("#fasciaSpot .centerBoxes div").stop(true,true).fadeTo('slow',0.9);}
          );
          
          jQuery('.first .attachment-imgshome').css({'border':'4px solid #FFF'})/*.everyTime(10, function(){
         jQuery('.first div').animate({opacity:'0.7'},700).animate({opacity:'1'},0);
         })*/;
          });
    </script>
    Questo chiaramente risolve il problema alla radice (escluse le eventuali altre menate del cliente)

    Buon proseguimento.
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 15% tra i post del forum; il 9% sul web.
    Ti resta l’1% ... usalo bene!

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

  3. #3
    Quote Originariamente inviata da KillerWorm Visualizza il messaggio
    Ciao, quell'effetto è creato con JavaScript, non è un'animazione creata dal solo CSS. Lo si deduce dal fatto che viene modificato runtime il valore dell'attributo style, e poi dal fatto che ispezionando il CSS di quell'elemento non c'è alcuna animazione impostata direttamente dal CSS. Dentro l'attributo style chiaramente viene modificato il valore della proprietà opacity che crea l'effetto ma di fatto, tale modifica runtime, avviene tramite JavaScript.

    In effetti mi chiedo perché invece non sia stata usata una semplice animazione CSS

    Puoi risolvere in due modi:

    1) Forzare il valore di opacity per tale elemento, impostandolo via CSS con la clausola !important. Tale clausola è necessaria per attribuire un valore superiore di specificità rispetto alla proprietà definita nell'attributo style (quindi, css in linea, cioè definito nel tag), che normalmente avrebbe una maggiore priorità rispetto al CSS incluso nella pagina.

    Può essere una cosa del genere:
    codice:
    .boxino.first > div {
        opacity: 1 !important;
    }
    Ovviamente dovrai inserire questo CSS da qualche parte a seconda di come è gestita la cosa sul tuo sito; che so, magari ci sarà la possibilità di aggiungere del CSS personalizzato in qualche modo, diversamente puoi buttarlo dentro uno dei file .css inclusi in quella pagina.

    Tieni conto che questo metodo non interviene su ciò che sta avvenendo via JavaScript, tant'è che lo style continuerà a subire la modifica runtime (con relativo, seppur minimo, spreco di risorse di sistema), ma semplicemente il valore della proprietà opacity sarà sovrascritto dal CSS (incluso nella pagina) per via del suo maggiore livello di specificità dettato da !important.

    2) Modificare i file sorgenti in modo da eliminare il codice JavaScript che applica quell'effetto su tale elemento.
    Per intervenire bisogna capire come sono strutturati i file sorgenti (php) per trovare quello in cui viene inserito tale script; potrebbe essere semplicemente un file del tipo index.php. Ciò che hai postato non è comunque utile.

    Ad ogni modo considera che lato client vedo lo script in questione, che si trova prima della chiusura di <head>, esattamente questo:
    codice:
    <script>
       jQuery(document).ready(function(){
          jQuery('#fasciaSpot .centerBoxes').hover(
             function(){jQuery("#fasciaSpot .centerBoxes div").stop(true,true).fadeTo('slow',0.7);}, 
             function(){jQuery("#fasciaSpot .centerBoxes div").stop(true,true).fadeTo('slow',0.9);}
          );
          
          jQuery('.first .attachment-imgshome').css({'border':'4px solid #FFF'}).everyTime(10, function(){
         jQuery('.first div').animate({opacity:'0.7'},700).animate({opacity:'1'},0);
         });
          });
    </script>
    Eventualmente fai qualche ricerca tra i tuoi file per rintracciarlo.

    Dovrai eliminare l'intero blocco relativo a quell'ultimo metodo everyTime(); puoi eliminarlo del tutto o magari commentarlo:
    codice:
    <script>
       jQuery(document).ready(function(){
          jQuery('#fasciaSpot .centerBoxes').hover(
             function(){jQuery("#fasciaSpot .centerBoxes div").stop(true,true).fadeTo('slow',0.7);}, 
             function(){jQuery("#fasciaSpot .centerBoxes div").stop(true,true).fadeTo('slow',0.9);}
          );
          
          jQuery('.first .attachment-imgshome').css({'border':'4px solid #FFF'})/*.everyTime(10, function(){
         jQuery('.first div').animate({opacity:'0.7'},700).animate({opacity:'1'},0);
         })*/;
          });
    </script>
    Questo chiaramente risolve il problema alla radice (escluse le eventuali altre menate del cliente)

    Buon proseguimento.
    Ok.. Ho risolto con il primo metodo grazie al tuo blocco CSS.

  4. #4
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,116
    Perfetto, mi fa piacere. Buon proseguimento
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 15% tra i post del forum; il 9% sul web.
    Ti resta l’1% ... usalo bene!

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2018 vBulletin Solutions, Inc. All rights reserved.