رفتن به مطلب

پیش نمایش دیدگاه


پست های پیشنهاد شده

سلام.اگر به آدرس زیر بروید می بینید که پس از نوشتن دیدگاه در بخش مورد نظر و فشردن کلید اینتر پیش نمایش دیدگاه نمایش داده می شود.می خواستم که اساطید بزرگوار یه لطفی کنند کد را مقداری تغییر دهند تا دیگر نیازی به فشردن کلید اینتر نباشد و پس از توقف نوشتن دیدگاه نمایش داده شود.با تشکر...#

آدرس نمونه:


http://rango.ir/blog/%D9%86%D9%85%D8%A7%DB%8C%D8%B4-placeholder-%D8%AF%D8%B1-%D9%85%D8%B1%D9%88%D8%B1%DA%AF%D8%B1%D9%87%D8%A7%DB%8C-%D9%82%D8%AF%DB%8C%D9%85%DB%8C/

کد های مربوطه:


(function($){
$.fn.shuffleLetters = function(prop){
var options = $.extend({
"step" : 8,
"fps" : 25,
"text" : "",
"callback" : function(){}
},prop)

return this.each(function(){

var el = $(this),
str = "";
if(el.data('animated')){
return true;
}
el.data('animated',true);
if(options.text) {
str = options.text.split('');
}
else {
str = el.text().split('');
}
var types = [],
letters = [];
for(var i=0;i<str.length;i++){

var ch = str[i];

if(ch == " "){
types[i] = "space";
continue;
}
else if(/[a-z]/.test(ch)){
types[i] = "lowerLetter";
}
else if(/[A-Z]/.test(ch)){
types[i] = "upperLetter";
}
else {
types[i] = "symbol";
}

letters.push(i);
}
el.html("");
(function shuffle(start){
var i,
len = letters.length,
strCopy = str.slice(0);
if(start>len){
el.data('animated',false);
options.callback(el);
return;
}
for(i=Math.max(start,0); i < len; i++){
if( i < start+options.step){
strCopy[letters[i]] = randomChar(types[letters[i]]);
}
else {
strCopy[letters[i]] = "";
}
}
el.text(strCopy.join(""));
setTimeout(function(){
shuffle(start+1);
},1000/options.fps);
})(-options.step);
});
};
function randomChar(type){
var pool = "";
if (type == "lowerLetter"){
pool = "abcdefghijklmnopqrstuvwxyz0123456789";
}
else if (type == "upperLetter"){
pool = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
}
else if (type == "symbol"){
pool = ",.?/\\(^)![]{}*&^%$#'\"";
}
var arr = pool.split('');
return arr[Math.floor(Math.random()*arr.length)];
}
})(jQuery);
$(function(){
var container = $("#cmdemo")
userText = $('#comment');
container.shuffleLetters();
userText.click(function () {
userText.val("");
}).bind('keypress',function(e){
if(e.keyCode == 13){
container.shuffleLetters({
"text": userText.val()
});
userText.val("");
}
}).hide();
setTimeout(function(){
container.shuffleLetters({
"text": "Write text below and hit enter"
});
userText.val("دیدگاه شما").fadeIn();
},1000);
});

لینک به ارسال

بخش آخر رو با کد زیر عوض کنید:

$(function(){
var container = $("#cmdemo")
userText = $('#comment');
container.shuffleLetters();
userText.click(function () {
userText.val("");
}).bind('keypress',function(e){
//if(e.keyCode == 13){
container.shuffleLetters({
"text": userText.val()
});
userText.val("");
//}
}).hide();
setTimeout(function(){
container.shuffleLetters({
"text": "Write text below and hit enter"
});
userText.val("دیدگاه شما").fadeIn();
},1000);
});

لینک به ارسال

جایگزین کردم جناب گرانسایه.عمل می کنه تنها مشکلی که وجود داره اینه که حد اکثر یک حرف قابل تایپ کردن است.خودتون بررسی کنید...#


http://rango.ir/blog/assets/js/main.js

لینک به ارسال

اگر بخواین با هر فشار کلید متن عوض بشه آخرین نوشته همیشه در کادر بالایی نمایش داده نمیشه.

من یک متن دیگه بهش اضافه کردم که با اشاره موس در هر بخش خارج از کادر دیدگاه متن داخلی نمایش داده میشه.

برای متن داخل تکست اریا هم از placeholder استفاده کنید:

http://jsfiddle.net/pWrnE/

لینک به ارسال

خیلی ممنون جناب گرانسایه.ولی چنین چیزی مد نظر من نبود.چون ممکنه کاربر ندونه که بایستی کلید اینتر و یا کلیک موس را فشار دهد تا پیش نمایش را ببیند.چیزی که مد نظر منه اینه که مثلا پس از اتمام تایپ توسط کاربر برای مثال پس از بازه 1 یا 2 ثانیه متن به طور خودکار نشان داده شود...#

لینک به ارسال

ببین تا حدودی اون چیزی که می خوای میشه


(function($) {
var container = $("#cmdemo"),
userText = $('#comment'),
$ = jQuery,
timer = 0;
container.shuffleLetters();

userText.bind('click', function() {
userText.val('')
}).live("input", function(e){
typeInput = userText.val();
setTimeout(function() {
container.shuffleLetters({
"text": typeInput
});
}, 1000);
}).hide();
setTimeout(function(){
container.shuffleLetters({
"text": "Write text below and hit enter"
});
userText.val("Your comment").fadeIn();
},1000);
})(jQuery);

لینک به ارسال

ببین تا حدودی اون چیزی که می خوای میشه


(function($) {
var container = $("#cmdemo"),
userText = $('#comment'),
$ = jQuery,
timer = 0;
container.shuffleLetters();

userText.bind('click', function() {
userText.val('')
}).live("input", function(e){
typeInput = userText.val();
setTimeout(function() {
container.shuffleLetters({
"text": typeInput
});
}, 1000);
}).hide();
setTimeout(function(){
container.shuffleLetters({
"text": "Write text below and hit enter"
});
userText.val("Your comment").fadeIn();
},1000);
})(jQuery);

ممنون.ولی با جایگزین کردن کدی که فرمودید کلا عملکرد غیر فعال شد...#

لینک به ارسال

دوست گرامی الان کار میکنه

اینم برای اینکه تصویری ببینی


http://jsfiddle.net/3pSF8/7/

لینک به ارسال

بله درسته.ولی شما یک نگاهی به کدی که در بالا فرمودید و کدی که در jsfiddle قرار داده اید نگاه کنید متوجه تفاوت ها می شوید.در هر صورت خیلی ممنونم...#

لینک به ارسال

بله درسته.ولی شما یک نگاهی به کدی که در بالا فرمودید و کدی که در jsfiddle قرار داده اید نگاه کنید متوجه تفاوت ها می شوید.در هر صورت خیلی ممنونم...#

متاسفانه یه مشکل کوچیکی توی جی کوئری ورژن 1.9 بود من برای همین مجبور بودم چندتا متغییر تعریف کنم البته توی ورژن های قبل تر نبود پس اون کدهای اضافی فقز برای اون ورژن بود که تصیحش کردم

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...