Tag: jQuery
MarkItUp set em português (pt-br)
by z3n on Jul.10, 2010, under Coding, Tips & Hints
Variáveis de markitup em português com youtube
markitup_bbcode = {
nameSpace: "bbcode", // Useful to prevent multi-instances CSS conflict
previewParserPath: "~/sets/bbcode/preview.php",
markupSet: [
{name:'Negrito', key:'B', openWith:'[b]', closeWith:'[/b]'},
{name:'Italico', key:'I', openWith:'[i]', closeWith:'[/i]'},
{name:'Sublinhado', key:'U', openWith:'[u]', closeWith:'[/u]'},
{separator:'---------------' },
{name:'Imagem', key:'P', replaceWith:'[img][![Url]!][/img]'},
{name:'YouTube', key:'Y', openWith:'[youtube]', closeWith:'[/youtube]', placeHolder:'[![Url do YouTube]!]'},
{name:'Link', key:'L', openWith:'[url=[![Url]!]]', closeWith:'[/url]', placeHolder:'Coloque o texto do link aqui...'},
{separator:'---------------' },
{name:'Cores', openWith:'[color=[![Cor]!]]', closeWith:'[/color]', dropMenu: [
{name:'Amarelo', openWith:'[color=yellow]', closeWith:'[/color]', className:"col1-1" },
{name:'Laranja', openWith:'[color=orange]', closeWith:'[/color]', className:"col1-2" },
{name:'Vermelho', openWith:'[color=red]', closeWith:'[/color]', className:"col1-3" },
{name:'Azul', openWith:'[color=blue]', closeWith:'[/color]', className:"col2-1" },
{name:'Roxo', openWith:'[color=purple]', closeWith:'[/color]', className:"col2-2" },
{name:'Verde', openWith:'[color=green]', closeWith:'[/color]', className:"col2-3" },
{name:'Branco', openWith:'[color=white]', closeWith:'[/color]', className:"col3-1" },
{name:'Cinza', openWith:'[color=gray]', closeWith:'[/color]', className:"col3-2" },
{name:'Preto', openWith:'[color=black]', closeWith:'[/color]', className:"col3-3" }
]},
{name:'Tamanho', key:'S', openWith:'[size=[![Tamanho do texto]!]]', closeWith:'[/size]', dropMenu :[
{name:'Grande', openWith:'[size=200]', closeWith:'[/size]' },
{name:'Normal', openWith:'[size=100]', closeWith:'[/size]' },
{name:'Pequeno', openWith:'[size=50]', closeWith:'[/size]' }
]},
{separator:'---------------' },
{name:'Quotes', openWith:'[quote]', closeWith:'[/quote]'},
{separator:'---------------' },
{name:'Limpar', className:"clean", replaceWith:function(h) { return h.selection.replace(/\[(.*?)\]/g, "") } }
]
};
JQuery validator method for twitter
by z3n on Jul.07, 2010, under Coding, Tips & Hints
Problem:
How to validate twitter @your_crap_name using jQuery’s validator plugin?
Solution:
jQuery.validator.addMethod("twitter", function(twitter, element) {
return this.optional(element) || twitter.match(/^@+\b[A-Z0-9._%-]+\b/i);
}, "Twitter inválido");
jQuery validator validate a single field
by z3n on Jul.06, 2010, under Coding, Tips & Hints
Problem:
How to programatically validade a single non keyup field with jquery validator?
Solution:
$("input[name=YOUR_FIELD_NAME]").valid()
How to abort ajax requests gracefully
by z3n on Jun.28, 2010, under Coding, Tips & Hints
Problem:
Ajax is great, everyone knows, but sometimes for network issues, server slowdowns or simply users issues request fails or keep loading for a long time. How to abort a request or all of them without needing to reload the whole page?
Solution:
First you need to throw all your ajax requests into a array, that way you can use it as api, so you can abort any “slow” requests, in my case i have a complex admin interface which sometimes bugs or get swamped with lots of requests at same time, usually due user related issues, so i added this “cancel” button which clears up all pending ajax requests, making the system more realiable. Before developing it i did a test on how it works, here’s the source:
<?php
// (c) z3n - R1V1@100628 - www.overflow.biz - rodrigo.orph@gmail.com
if (isset($_REQUEST['q'])) {
header('Content-Type: application/json; charset=utf-8'); // mandatory for jquery compatibility
if (!isset($_REQUEST['a']))
sleep(20);
echo json_encode(array("r" => 1));
die;
} else {
?>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var _ajax=[];
function do_dbg(msg) {
$("#dbg").prepend(msg+"<BR>");
}
function do_ajax() {
do_dbg("do ajax");
_ajax[_ajax.length] = $.ajax({data:"q=something",success:function(r,s) {
do_dbg("do ajax reply");
return;
}});
}
function do_ajax_fast() {
do_dbg("do ajax_fast");
_ajax[_ajax.length] = $.ajax({data:"q=something&a=other_thing",success:function(r,s) {
do_dbg("do ajax fast reply");
return;
}});
}
function kill_ajax() {
do_dbg("aborting all ajax");
for (var i in _ajax)
_ajax[i].abort();
}
$(document).ready(function(){
$.ajaxSetup({
url:"<?=$_SERVER['PHP_SELF']?>",
global:true,
type:"POST",
dataType:'json',
cache:false,
async:true,
timeout:12000000,
scriptCharset:"UTF-8"
});
});
</script>
</head>
<body>
<input type="button" onClick="do_ajax();" value="do ajax">
<input type="button" onClick="kill_ajax();" value="kill ajax">
<input type="button" onClick="do_ajax_fast();" value="do ajax fast">
<BR><BR>
<span id="dbg"></span>
</body>
</html>
<?php
}
?>
Have fun!
jQuery validator special highlights for radio and checkbox
by z3n on Jun.17, 2010, under Coding, Tips & Hints
Problem:
Highlighting a checkbox or radio button on error with jquery’s validator plugin is not a good idea, specially if you’re adding borders , backgrounds or something like, since it’s NOT supported over all browsers. I have a little bar around them that goes red if something is wrong, however, it’s not possible to add it if there’s many elements, so it’s better add a wrapper element and style it, in my case i added an element which ID is the same of input NAME, a little change on the plugin make things automatic.
Solution:
highlight: function( element, errorClass, validClass ) {
$(element).addClass(errorClass).removeClass(validClass);
if (($(element).attr("type") == "radio" || $(element).attr("type") == "checkbox") && $("#"+$(element).attr("name")).length > 0)
$("#"+$(element).attr("name")).addClass(errorClass).removeClass(validClass);
},
unhighlight: function( element, errorClass, validClass ) {
$(element).removeClass(errorClass).addClass(validClass);
if (($(element).attr("type") == "radio" || $(element).attr("type") == "checkbox") && $("#"+$(element).attr("name")).length > 0)
$("#"+$(element).attr("name")).removeClass(errorClass).addClass(validClass);
}
Dynamic width / height jQuery tools overlay content
by z3n on Jun.17, 2010, under Coding, Tips & Hints
Problem:
I have a form where user sends a image and, if needed, he will select an area of the image for cropping. Everything is loaded by AJAX and image size is dynamic, nothing wrong with Jcrop but overlay is not able to work right if there’s no width set the div floats at wrong position.
The setup of the form is quite complex (uploadify + jQuery tools overlay + Jcrop + AJAX), so it was complicated isolating the issue.
Solution:
By adding a image height / width reply to the ajax after image upload, setting the overlay container css width with it and reloading the overlay call fixed the issue.
Here’s a snippet:
$("#crop_container").css({
height:"auto",
width: r.w+"px"
}).overlay({
speed: 500,
fixed:false,
closeOnClick: false,
closeOnEsc: false,
oneInstance: true,
mask: {
color: '#fff',
opacity: 0.5
}
});
$("#crop_container > span").html("<img height="+r.h+" width="+r.w+" src='"+img+"?"+Math.random()+"' id='crop_img'>");
packable qTip
by z3n on Mar.19, 2010, under Coding, Tips & Hints
Problem:
I was looking around and found this great jQuery plugin, qTip, i added to my auto packer javascript script and then it didn’t worked at all.
Reading further on their site i found out that they have a YUI compressed version which is not what i need.
Solution:
After hunting a lot of missing ; and extra ;, i’ve got a working packable version.
Gracefully overriding fixed width/height divs
by z3n on Feb.25, 2010, under Coding, Tips & Hints
Problem:
It’s like a industry standard now having everthing tableless, although i still thinking that EVERYTHING is too much, this been like the motto of many programmers around. But let’s skip the blablaing about this and go straight to the point:
You have 2 fixed width div/li `rows` on a site, they are nested and inside the content, due the complex nature of the layout, there’s some other complications. All of sudden the client decides that he wants to ruin your layout adding a long, waaaaaaaaay long, horizontal listing, which not also overlapps the width of your left column but mostly like will make user’s screen to horizontally scroll.
Solution:
As much i like to discuss with client, it’s useless and i will be just wasting my time. This is also a tricky thing to fix since the column sizes are fixed, i would need to make the whole content column bigger, ruining the rest of the top elements. Let’s take a look on the example:
<div style=”width:600px”>
content div header code here
<div style=”width:2000px”>
way long client designed div to ruin layouts
</div>
</div>
(styles are just to simplifly)
so the solution (1) would be something like this:
<div style=”width:600px”>
content div header code here
<div style=”width:2000px;position:absolute;“>
way long client designed div to ruin layouts
</div>
<img src=”blank_image.gif” width=1 height=same height as the long width div>
</div>
solution (2), if your abomination div is also height dynamic:
<div style=”width:600px” id=”container”>
content div header code here
<div style=”width:2000px;position:absolute;” id=”abomination”>
way long client designed div to ruin layouts
</div>
</div>
<script type=”text/javascript”>
// after loading all the content of the abomination div, also assuming that you’re using jquery
$(“#container”).height(parseFloat($(“#abomination”).height()+50)+”px”);
</script>
Bad Coders United
by z3n on Jan.31, 2010, under lol
Problem:
So I have this joint work where I do the frontend and another company does the backend and CRM integration of the system, I basically wrote a frontend and examples of all XMLs that backend should send to the system in order to have it working. After a week things were ready and i sent it to the backend team, and look how good they manipulate arrays:
$listai = str_replace(‘Ar’,” , $listai);
$listai = str_replace(‘Array’,” , $listai);
$listai = str_replace(‘ray’,” , $listai);
another example…
function datadma($dataz){
$dia = substr($dataz, -2);
$mess = substr($dataz, -5,2);
$ano = substr($dataz, -10,4);
return $dataz= $dia.”/”.$mess.”/”.$ano;
}
Oh man, wait, they DON’T KNOW what is an array!
How is that possible? Array is one of the first things a decent programmer is supposed to learn.
And the best, how is it possible for a company to build up a CRM system without the use of a single array? That’s like a coding challenge, specially when manipulating multiple fields and so on. And that’s not the only issue, after stating, in front of the client, that they weren’t able to work with jQuery + Ajax using XML (which they previously stated that could be worked without problems) they asked me to teach them … for free!!!!
ahahahah
Solution:
just sharing the story, there’s no solution for this 
Reset jwysiwyg
by z3n on Jan.15, 2010, under Coding, Games and Gaming
Problem:
jquery’s extension jwysiwyg can’t be reseted on fly, calling the function again will just append another editor.
Solution:
You will need to do a workaround by adding the jwysiwyg object inside a container then resetting it using this little function:
-
function _reset_jwysiwyg(h,x,j){ // html, first id, second id
-
h=str_replace("\\","",h); // this requires php.js to work, can be removed if you don't add slashes on your vars
-
$("#cf"+x+""+j).html("<textarea id='#f"+x+""+j+"' class='jwysiwyg' name='jwysiwyg' cols=94 rows=30>"+h+"</textarea>");
-
$(".jwysiwyg").wysiwyg({
-
html: h
-
// you may want to add other control options here
-
});
-
}
this will work for this setup:
<span id=’c12′><textarea id=’f12′ class=’jwysiwyg’ name=’jwysiwyg’ cols=94 rows=30></textarea></span>
on this example it will be called as:
_reset_jwysiwyg(“”,1,2);
Note
this function is a snippet from my code, you might not want the identifiers just the div name, that makes it less complicated.
