Category Archives: javascript

Rate this with jQuery.

The main index.html file come with this source code:

<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title>Emoticons – rate this …</title>
<link href=”ratethis.css” rel=”stylesheet” type=”text/css” />
<script src=”jquery-2.2.0.js”></script>
<script src=”ratethis.js”></script>
</head>
<body>
<br/>
<br/>
<br/>
<br/>
<br/>
<input type=”hidden” value=”amo” class=”rate_it”/>
<script>
$(‘.rate_it’).ratethis(); </script>
</body>
</html>

The ratethis.css come with this source code:

.ratethis  { display: none;padding-bottom:8px;padding-top:8px;padding-right: 8px;
padding-left: 0px;box-sizing: border-box;background: white;color: white;position: absolute;
width: auto;height: 65px;line-height: 25px;border-radius: 50px;transition: .25sease-in-out;color:black;
border: 1px solid #eee;
-webkit-box-shadow: 4px 4px 21px -9px rgba(0,0,0,0.75);
-moz-box-shadow: 4px 4px 21px -9px rgba(0,0,0,0.75);
box-shadow: 4px 4px 21px -9px rgba(0,0,0,0.75);}

.ratethis  div{margin-left: 8px;float: left;width: 48px; height: 48px; cursor: pointer; transition: all 0.2s ease;}
.selectorFace{margin-left: 8px;float: left;width: 48px; height: 48px; cursor: pointer; transition: all 0.2s ease;}
.ratethis  div:hover{ -webkit-transform:scale(1.25);-moz-transform:scale(1.25);-ms-transform:scale(1.25);-o-transform:scale(1.25);transform:scale(1.25);}

.molesto{ margin-left: 8px;float: left;width: 48px; height: 48px; background: url(test.png) 0 0; }
.asusta{background: url(test.png) 0 -48px; }
.divierte{background: url(test.png) 0 -96px; }
.gusta{background: url(test.png) 0 -144px; }
.amo{background: url(test.png) 0 -192px; }
.triste{background: url(test.png) 0 -240px; }
.asombro{background: url(test.png) 0 -288px; }
.alegre{background: url(test.png) 0 -336px; }

.MessageText{display:none;position:absolute;border:1px solid #333;background-color:#161616;
border-radius:5px;padding:3px;color:#fff;font-family: sans-serif;font-size: 12px;}

.IconoPequenio{width: 24px;height: 24px; background-size: 24px; background-repeat: no-repeat;}

The javascript file ratethis.js come with this source code:

$.fn.extend({ratethis: function(options) {

var ratethis=this;
var varSelect=”Selector”;
var icon_description=”–“;
defaults = { allicons:[
{“emocion”:”amo”,”TextIcon”:”I love him”},
{“emocion”:”molesto”,”TextIcon”:”It bothers me”},
{“emocion”:”asusta”,”TextIcon”:”It scares me”},
{“emocion”:”divierte”,”TextIcon”:”I enjoy”},
{“emocion”:”gusta”,”TextIcon”:”I like it”},
{“emocion”:”triste”,”TextIcon”:”It saddens me”},
{“emocion”:”asombro”,”TextIcon”:”It amazes me”},
{“emocion”:”alegre”,”TextIcon”:”I am glad”}
]};
var options = $.extend({}, defaults, options);

$(ratethis).each(function( index ) {
var UnicoID = Date.now();
$(this).attr(“class”,$(ratethis).attr(“class”)+” “+UnicoID);
var FirstSelect=”alegre”;
if($(this).val()!=””){
FirstSelect=$(this).val();
}else{
$(this).val(‘alegre’);
}
icon_description=FirstSelect;
FirstElement=”;
FirstElement=FirstElement+'<div data_info=”‘+icon_description+'” ‘;
FirstElement=FirstElement+’ref_id=”‘+UnicoID;
FirstElement=FirstElement+'”  class=”‘+varSelect;
FirstElement=FirstElement+’ selectorFace ‘+FirstSelect+'”></div>’;
$(this).before(FirstElement);
});

$(document).ready(function() {
All_Icons='<div class=”ratethis”>’;
$.each(options.allicons, function(index,emo ){
All_Icons=All_Icons+'<div data_info=”‘+emo.TextIcon;
All_Icons=All_Icons+'” class=”‘+emo.emocion+'”></div>’;
});
All_Icons=All_Icons+'</div>’;
$(document.body).append(All_Icons);
$(‘.ratethis div’).hover(function(){
var title = $(this).attr(‘data_info’);
$(this).data(‘tipText’, title).removeAttr(‘data_info’);
$(‘<p class=”MessageText”></p>’).text(title).appendTo(‘body’).fadeIn(‘slow’);
},function() {
$(this).attr(‘data_info’, $(this).data(‘tipText’));
$(‘.MessageText’).remove();
}).mousemove(function(e) {
var RatonX = e.pageX – 20;var RatonY = e.pageY – 60;
$(‘.MessageText’).css({ top: RatonY, left: RatonX })
});
});
$( ‘.’+varSelect ).hover(function(e) {
SelectEmoticon= $(this);
var RatonX = e.pageX – 20;var RatonY = e.pageY – 60;
$( “.ratethis” ).css({ top: RatonY, left: RatonX });
$( “.ratethis” ).show();
$( “.ratethis div” ).click(function() {

SelectEmoticon.attr(“class”,varSelect+” selectorFace  “+$(this).attr(‘class’));

InputSelect=SelectEmoticon.attr(“ref_id”);
$(“.”+InputSelect).val($(this).attr(‘class’));

});
});
$(document).mouseup(function (e){  $( “.ratethis” ).hide();});
$(ratethis).hide();

}
});

You will need also one test.png image width / height = 48 x 384 with 8 emoticons.

All of this file and jquery-2.2.0.js will be into your folder project.

About how is made is one selection over icons with one id.

You will see also text for each emoticon and the result will be show on your project webpage.

rate
NOTE: This example is a fork for code by oscaruhp.
I make some changes to see how you can used.
You can see all project on this:

# FaceMocion
Demo:
http://oscaruhp.github.io/FaceMocion/

Posted in All, HTML 5, javascript, Programming. Tagged with , , , .

Simple shadow text with CSS with webkit-filter.

This simple example will put one shadow to the text.

The source code is simple and the goal come with filter and webkit-filter: drop-shadow.

<!DOCTYPE html>
<html>
<head>
<title>Exemple text shadow.</title>
<style>
.element{
width: 300px;
height: 300px;
float: left;
}

.element:hover{
-webkit-filter: drop-shadow(5px 5px 5px black);
filter: drop-shadow(5px 5px 5px black);
}
</style>
</head>
<body>

<div class=”element”>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer feugiat lectus placerat sem tincidunt consequat. Nullam euismod enim vel ante cursus accumsan. Fusce pulvinar rhoncus luctus.</div>
</body>
</html>

Posted in All, HTML 5, javascript, Programming. Tagged with , , , .

Flash example with jQuery.

Just created a box with colors and also put the text into it.

This example will flash your eyes but also you can used with any effects.

<!DOCTYPE html>
<html>
<head>
<title>Flash example</title>
<script src=”jquery-2.2.0.js”></script>
<style type=”text/css”>
#canvas_id {
position: fixed;
left: 0px;
top: 0px;
z-index: -10;
width: 100%;
height: 100%;
}
html, body {
margin: 0px;
}
#body {
margin: 8px;
}
</style>
</head>
<body>
<canvas id=”canvas_id”></canvas>
<div id=”body”>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec gravida est, nec fermentum metus. Suspendisse congue ante elit, vitae accumsan quam convallis nec. Integer sodales, nibh id ultricies hendrerit, risus lacus varius ligula, quis porta nulla massa sit amet quam. Praesent posuere vulputate nunc, ac convallis nulla consectetur eget. Vestibulum eu dapibus justo. Aenean ac venenatis sem. Nullam porta, augue at egestas pretium, diam metus suscipit eros, eu eleifend quam diam in lacus. Fusce accumsan sem in placerat blandit. Nulla eget hendrerit lorem, at semper leo. Duis non commodo tellus.
</p>
</div>
<script type=”text/javascript”>
var canvas = document.getElementById(“canvas_id”);
var gl = canvas.getContext(“experimental-webgl”);
var resize = function() {
var width = gl.canvas.clientWidth;
var height = gl.canvas.clientHeight;
if (gl.canvas.width != width || gl.canvas.height != height) {
gl.canvas.width = width;
gl.canvas.height = height;
console.log(“new size: ” + width + “, ” + height);
}
};
var render = function() {
resize();
gl.clearColor(1, Math.random() * 0.2 +0.5, 1, 1);
gl.clear(gl.COLOR_BUFFER_BIT);
requestAnimationFrame(render);
};
render();
</script>
</body>
</html>

Posted in All, HTML 5, javascript, Programming. Tagged with , , , .

Text box example with jQuery.

I know some examples come without explanation.
Most javascript source code is the basis for both CSS and HTML.
In the next example will see one box with text and hover.
The hover effect can also done with CSS.
In this example the goal is the three and jquery libs over mouseenter and mouseleave functions.
The animation effect also use: animate effect.

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>text box example</title>
<style type=”text/css”>
.thumbbox{
    position:relative;
    width: 220px;
    height: 165px;
    margin: 0 20px 20px 0;
    float:left;
    overflow:hidden;
}
.thumb_text{
    position:absolute;
    top:0;
    left:-220px;
    width:200px;
    height:90px;
    text-align:center;
    pointer-events: none;
    padding: 65px 10px 10px 10px;
    -webkit-font-smoothing: antialiased;
    background-color:#666;
}
.thumbimg{
    width:220px;
    height:165px;
    background-color:#CCC;
}</style>
<script src=”jquery-2.2.0.js”></script>
<script src=”three.js”></script>
</head>
<body>
<div class=”thumbbox hover”>
        <div class=”thumbimg”></div>
        <div class=”thumb_text”>TEXT</div>
</div>

<script type=”text/javascript”>
    jQuery(document).ready(function($) {
        // Code that uses jQuery’s $ can follow here.
        $(document).on(‘mouseenter’, ‘.hover’, function(e) {
            var t = $(this).find(‘.thumbimg’),
                t2 = $(this).find(‘.thumb_text’).css(‘left’, -220);
            if ($(window).width() < 9999) {
                t.stop().animate({ opacity: .0 }, 200);
                t2.stop().animate({ left: 0 }, 200);
            }
            else {
                t.stop().animate({ opacity: .5 }, 200);
            };
        })
        .on(‘mouseleave’, ‘.hover’, function(e) {
            var t = $(this).find(‘.thumbimg’),
                t2 = $(this).find(‘.thumb_text’);
            if ($(window).width() < 9999) {
                t.stop().animate({ opacity: 1 }, 200);
                t2.stop().animate({ left: 220 }, 200);
            }
            else {
                t.stop().animate({ opacity: 1 }, 200);
            };
        })
    });
</script>
</body>
</html>

Posted in All, HTML 5, javascript, Programming. Tagged with , , , .

Rainbow example with jQuery.

This simple example show you how to use jquery with html tags.

<!DOCTYPE html>
<html>
<head>
<title>rainbow example</title>
<script src=”../js/jquery-2.2.0.js”></script>
</head>
<body>
<script>for(d=document,i=0;k=i>>1,k<7;setTimeout(function(w){d.getElementById(w).id=”x”+w},555*k,i++))d.write(“<b id=”+i+”><style>b{width:0;height:0;transition:width 1s,height 1s;border-radius:70ex 70ex 0 0;position:fixed;bottom:-4ex}#x”+i+”{left:”+(9+4*k)+”ex;width:”+(80-6*k)+”ex;height:”+(40-3*k)+”ex;box-shadow:”+(i%2&&”inset 0″)+” 0 6ex hsl(“+50*k+”,99%,50%)}</style>”)</script>
</body>
</html>

Posted in All, HTML 5, javascript, Programming. Tagged with , , , .