Div flotante con comportamiento

Div flotante :

Un div flotante se logra mediante los siguientes atributos:

position: fixed;

Ahora si deseas que se muestre a una altura en particular:

bottom: 100px; right: 5%;

Si quieres darle un comportamiento por ejemplo, que no se muestre el div al menos que el scroll este en altura en particular o que cierto elemento sea visible en la pantalla, se debe de realizar lo siguiente:

Primero añadir el atributo display:none al Div.

Usar una funcion para conocer si el elemento de referencia esta en la pantalla:

$.fn.extend({
// Devuelve true si el elemento está en window
isInScene : function(arg)
{
// Fuerza que arg sea un objeto
arg = arg || {};
// Valor por defecto de desfase
arg.desfase = arg.desfase || 0;
// Fuerza a que desfase sea númerico
arg.desfase = parseInt(arg.desfase,10);

// Posición vertical del elemento respecto al principio del documento
var pos_container = $(this).offset().top;

// Altura del elemento
var container_height = $(this).outerHeight();

// Posición vertical de document
var pos_document = $(document).scrollTop();

// Alto ventana
var window_height = $(window).height();

return (pos_document+window_height > pos_container+arg.desfase && pos_container+container_height > pos_document+arg.desfase);
}
});


Aqui se va a invocar a la funcion

$(document).scroll(function(e)
{
if( $("#form_registrazione").isInScene()) // esto nos indica que en patanlla el elemento form_registrazione y no queremos mostrar muestro div en este caso
{
$('#id_div_float_form').css('display', 'none');
}
else
{ // De lo contrario 
if ($(document).scrollTop() > (parseInt($("#id_div_show_float_form").position().top)+parseInt($("#id_div_float_form").height()))){ // aqui nos indica en que posicion debe estar el scroll para mostrarlo

$("#id_div_float_form").css('display', 'block');
}

if ($(document).scrollTop() < (parseInt($("#id_div_show_float_form").position().top)+parseInt($("#id_div_float_form").height()))){ // Con este indicamos que el scroll en esta posicion va a ocultar nuestro div

$("#id_div_float_form").css('display', 'none');
}

}
});

Css gradient con imagen

Imagen con gradiente.

Para colocarle gradiente a una imagen se debe colocar el siguiente estilo:

element.style {
background-image: linear-gradient(to left, rgba(20, 19, 19, 0.13), rgb(255, 253, 253)) , url(images/banners/image_default.jpg); 
 position: absolute;
 right: 0; 
 top: 0; 
 width: 70%;
 height: 460px; 
 z-index: -1; 
 background-repeat: no-repeat; 
 background-position: center 10%; 
}

Con esto podremo obtener una imagen degradada de izquierda a derecha, comenzando del blanco hasta la imagen. 

Div con Sonido

Para añadir un sonido a un div que aparece luego de cierto tiempo en la página debes de:

agregar la etiqueta audio dentro de tu div 
<audio id="audio" src="assets/music/sound_file.mp3"></audio>

e

Invocar la llamada con el tiempo en que deseas que muestre:

<script>
   setTimeout(function(){
    var audio = document.getElementsByTagName('audio')[0];
 audio.play();
      $('#testo_div').addClass('offcanvas_form__opened');
   }, 3000);
   
</script>

Raking en tu pagina web. PHP

Para hacer el Raking utilice el puglin de rateyo

Luego cree un div en mi pagina y con el id del div, invoque las funciones que ofrece rateyo:

<div id="ratediv" style="float: left;"></div>

<?if ($row_votes['vote']==''){?> // Si el usuario no ha votado 

<span id="des_rating"><strong>  User Rating </strong></span></div>

<?}else{?> // Si el usuario ya voto

<span id="des_rating"><em><strong>  Your Rating </strong></em></span></div>

<?}?>

Luego

<script type="text/javascript">

   jQuery( document ).ready( function() {

<? if ($row_votes['vote']==''){?> // Si esta Ip no ha votado

 $("#ratediv").rateYo({

rating: <? echo $row_r2['raking'];?>, // Mostrar el total hasta ahora 

halfStar: true,

starWidth: "20px"

 });

 

$("#ratediv").rateYo().on("rateyo.set", function (e, data) {

$("#des_rating").html("<strong>Thank you!<strong>");

$("#rateEdilnet").rateYo("option", "readOnly", true); //returns a jQuery Element

$.ajax({

            url: "/get_votes.php", // Crear este archivo PHP

            type: "GET",

            data: {rate: data.rating},

        });

       });

<?}else{?>

$("#ratediv").rateYo({

rating: <? echo $row_votes['vote'];?>, // Mostrar el voto de este usuario

starWidth: "20px",

readOnly: true

}); 

<?}?>

 });

</script>

El Archivo get_votes.php, es un archivo que insertara en dos tablas:

Una tabla guarda el valor del voto y la ip que lo hizo

La otra tabla, guarda cuanto han votado y la suma de esos valores votados entre la cantidad de votantes.

$query_v1 = "INSERT INTO votes_daily (`vote`, `ip`) VALUES ('".$_GET['rate']."','".getRealIP()."')";

mysql_query($query_v1, $sql) or die("Errore MySQL $query_v1: (" . mysql_errno() . ") " . mysql_error());

$query_v2 = "SELECT * FROM raking";

$result = @mysql_query($query_v2, $sql) or die("Errore MySQL: $query_v2 (".mysql_errno().") ".mysql_error());

$row_v2= @mysql_fetch_array($result);

$v = round((($row_v2['raking']+$_GET['rate'])/($row_v2['n_users']+1)),2);

echo $query_v3 = "UPDATE tb_raking SET raking =". $v .", n_users=". ($row_v2['n_users']+1);

mysql_query($query_v3, $sql) or die("Errore MySQL $query_v3: (" . mysql_errno() . ") " . mysql_error());

La tabla 1, puede ser eliminada diariamente o anual, dependiendo de lo que se necesite para tu site