martes, 15 de noviembre de 2016

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');
}

}
});



martes, 8 de noviembre de 2016

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. 
Resultado de imagen de imagen gradiente left

viernes, 28 de octubre de 2016

Div con Sonido


Resultado de imagen de 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>

Resultado de imagen de rateyo

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


miércoles, 5 de junio de 2013

CKEditor editor Wysiwyg o RTF 

Súper útil en nuestras aplicaciones web cuando necesitamos contenido esructurado por el usuario.este editor lo podemos descargar en la siguiente ruta:                                                                                                  

 http://ckeditor.com/download

tiene las opción paga y la opción free. La manera de integrarlo a nuestra pagina html es sencilla:


incluye los siguientes script a tu pagina
<script src="ckeditor/ckeditor.js"></script>
<script src="ckeditor/adapters/jquery.js"></script>
crea un textarea de la siguiente forma
<textarea id="my-textarea"></textarea>
Y no olvides la función para cargar el ckeditor dentro del textarea
$(function () {
$('#my-textarea').ckeditor();
});

martes, 7 de mayo de 2013

Consulta SQL con CASE en caso de campo NULL


Es simple, quieres evaluar un campo que contiene valores NULL? entonces el select a realizar es el siguiente:

SELECT x,
CASE isnull(x, 'yes') WHEN 'yes' THEN 'yes' ELSE 'no' END AS result



Truncar String en SQL SERVER (TRUNCANTE) 


Utilice la sentencia LEFT. Ejemplo:
Select Left(Campo, 15) 
donde 15 indica la cantidad de caracteres que desea mostrar en la consulta






viernes, 3 de mayo de 2013

Obtener Usuario Active Directory C# 

Sencillo: 


DirectoryContext dc = new DirectoryContext(DirectoryContextType.Domain, Environment.UserDomainName);
Domain domain = Domain.GetDomain(dc);
DirectoryEntry de = domain.GetDirectoryEntry();
string un = Environment.UserName;

DirectorySearcher deSearch = new DirectorySearcher(de);
deSearch.Filter = string.Format("(SAMAccountName={0}", un + ")");
SearchResult result = deSearch.FindOne();

DirectoryEntry deUser = result.GetDirectoryEntry();


 Y Wuala deUser es nuestro usuario de active Directory con todas sus propiedades