رفتن به مطلب

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

سلام

من یک سایت خبری دارم.

میخوام اخبار را به صورت زنده و لحظه ای نشون بدم.

تو اینترنت جستجو کردم و بالاخره تونستم این کار را بکنم.

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

من میخوام وقتی خبر جدیدی اضافه میشه اول background خبر مثلا قرمز باشه و بعد از چند ثانیه به سفید تغییر کنه.

این بخش اخبار زنده سایت منه : http://khabargir.ir/live_news.html

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

http://www.khabarpu.com/pu/zendeh-pu

http://tnews.ir

اگر کسی بتونه کمکی کنه یا بگه حداقل در اینترنت چی باید جستجو کنم ممنون میشم.

التماس دعا

لینک به ارسال

مشکلتون فقط اختصاص یک پس زمینه خاص و بعد تغییر اون هست؟

لینک به ارسال

مشکلتون فقط اختصاص یک پس زمینه خاص و بعد تغییر اون هست؟

فعلا بله ....

لینک به ارسال

ببینید شما نیاز دارید که با ایجاکس (یا موارد مشابه) کار کنید

که وقتی آدرس جدید اضافه شده در استایل بهش یک رنگ بدید

بعدمثلا با تابع setinterval بعد چند ثانیه بهش رنگ معمولی بدید

لینک به ارسال

یعنی باید وقتی لینک ساخته میشه بهش یک id یا کلاس با رنگی که میخوام بدم.

و بعد با تابع

setinterval رنگ اون id یا class را تغیییر بدم.

اینو امتحان کردم. رنگ زمینه سریع عوض میشه.

این یک نمونه است که با جاوا اسکریبت توسط مدیر سایت

وبگو برای من ساخته شده است :


<style type="text/css">
.new{
height:30px;
margin:4px;
background:#FFF;
background:
}
.old{
height:30px;
margin:4px;
background:#CCC;
}
</style>
<script type="text/javascript">
function ChangeColor(id, frame){
var color = '#CCC';
switch(frame){
case 1:
color = "#FFECEC";
break;
case 2:
color = "#FDD";
break;
case 3:
color = "#FFC6C6";
break;
case 4:
color = "#FFB3B3";
break;
case 5:
color = "#FF9F9F";
break;
case 6:
color = "#FF9393";
break;
case 7:
color = "#FF8282";
break;
case 8:
color = "#FF6F6F";
break;
case 9:
color = "#F55";
break;
case 10:
color = "#FF2F2F";
break;
}
if(frame <= 10){
frame++;
document.getElementById(id).style.backgroundColor = color;
setTimeout("ChangeColor('" + id + "', " + frame + ");", 100);
}
if(frame == 11){
setTimeout("ChangeColor('" + id + "', " + 12 + ");", 1000);
}
if(frame == 12){
document.getElementById(id).style.backgroundColor = color;
}
}
</script>
<div class="old" id="new">خبر جدید</div>
<div class="old">خبر قدیمی</div>
<div class="old">خبر قدیمی</div>
<div class="old">خبر قدیمی</div>
<script type="text/javascript">
ChangeColor('new', 0);
</script>[/right]

[/color]
[color=#282828]

[right]

اگر اینو به jquery تبدیل کنید ممنون میشم.

لینک به ارسال

شما مگه نمی خواهی هر مطلبی منتشر شد بعد ازچند ثانیه تغییر استایل بده اینهمه کد نمی خواد که

این را داخل حلقه بگذار


function myFunction()
{
setTimeout(function(){document.getElementById('post<?php the_id();?>').className='class2'},5000);
}
myFunction()

و به لایه مطلب هم آی دی


post<?php the_id(); ?>

بده

دمو

http://jsfiddle.net/bUFCR/

لینک به ارسال

سلام

این درسته و کار میکنه.

مشکل اینجاست که یک دفعه تغییر رنگ میدهد.

من میخوام از مثلا قرمز پررنگ به سفید به اهستگی تغییر رنگ بدهد.

لینک به ارسال


.class1,.class2 {
-moz-transition: all 1.5s linear .2ms;
-o-transition:all 15s linear .2ms;
-webkit-transition: all 1.5s linear .2ms;
transition: all 1.5s linear .2ms;
}

با تغییر 1.5s زمان تغییر رنگ و با تغییر .2ms زمان توقف قبل از اجرای دستور کم و زیاد می شند (کد css)

اگر منظورتون اینه که 5 ثانیه قرمز باشه 5 ثانیه آبی باشه 5 ثانیه سبز همون کد js را برای سه زمان مورد نظر و سه کلاس متفاوت قرار بدید

لینک به ارسال

خیلی ممنون.

فعالا سایت بهم ریخته.

بعد از رفع مشکل امتحان میکنم و نتیجه را اطلاع میدهم.

لینک به ارسال

امتحان کردم ... نشد !!!

css


<style>
.new {
background:#FF0000;
}
.old {
background:#fff;
}
.new,.old {
-moz-transition: all 1.5s linear .2ms;
-o-transition:all 15s linear .2ms;
-webkit-transition: all 1.5s linear .2ms;
transition: all 1.5s linear .2ms;
}
</style>

کد php که با آجاکس رفرش میشود :


<?php
require_once('core/connect.php');
$cvw=mysql_query("select * from post order by id DESC limit 100");
while($raw=mysql_fetch_array($cvw))
{
$id=$raw['id'];
$d=$raw['date'];
echo '<li><i class="icon"></i><a id="news'.$id.'" class="new" href="http://khabargir.ir/'.$raw['surl'].'" title="'.$raw['title'].' | '."خبرگیر".'">'.make_safe(max_title_lenght($raw['title'])).'</a>';
echo '<span>'.publish_date($d).'</span></li>'."\n";
}
?>
<script>
function myFunction()
{
setTimeout(function(){document.getElementById('news<?php $id;?>').className='old'},5000);
}
myFunction()
</script>

لینک به ارسال

تو صفحه ی آژاکسی باید کدjs رو هم به آژاکس بدید

یا کد اسکریپت را به صورت زمینه دلخواه در مطالب بگذارید که همزمان با اجرای آژاکس اونها هم اجرا بشند

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

سرویس های عادی که با منابع معمول وردپرس مشکل دارند در این مواقع منفجر می شند

لینک به ارسال

سلام

الان با راهنمایی های که کردین درست شد.

فقط یک مشکل داره و اون اینه که فقط برای لینک آخر کار میکنه ....

مثلا اگر 4 تا لینک جدید ارسال شود ، فقط آخرین لینک تغییر رنگ میدهد.

لطفا راهنمایی کنید ؟

http://khabargir.ir/live_news.html

لینک به ارسال

لطفا اسپم نکنید

صبر کنید اگز جناب فخار وقت داشتن پاسختون رو بدن

لینک به ارسال

این کد باید داخل حلقه باشه


<script>
function myFunction()
{
setTimeout(function(){document.getElementById('news<?php $id;?>').className='old'},5000);
}
myFunction()
</script>

یعنی بعد از


while()

و قبل از


endwhile;

لینک به ارسال

سلام

این کار رو امتحان کردم.

فرقی نکرد.

من تقریبا میدونم باید چیکار کنم اما برنامه نویسی jquery زیاد بلد نیستم.

مشکل اینجاست که کوئری select که اخبار رو نشون میده داخل یک فایل ریختم و با آژاکس هر چند ثانیه فایل رو لود میکنم.

هر بار که فایل لود میشه تمام استایل ها به حالت اول برمیگردند.

باید جوری باشه که محتوای فایل را بخونه و خبرهای جدید را به صفحه اضافه کنه و قابل تغییر نباشه.

فکر کنم با تابع append یا html بشه این کار را کرد.

اما کار با این 2 تابع رو بلد نیستم.

اگر میشه راهنمایی کنید ....

لینک به ارسال

با تابع addClass امتحان کنید به این صورت

لایه اصلی هر پست را تبدیل کنید به


<div class="post" data="<?php echo get_the_date('mdH');?>">

و


<script type="text/javascript">
$(".post").filter(function() {
var $data = $(this).attr("data");
if ($data==<?php Date('mdH');?>)
$(this).addClass("hilight");
else
$(this).removeClass("hilight");
});
</script>

که قاعدتا باید مطالبی که کمتر از یک ساعت از انتشارشان می گذرد را فیلتر کند و کلاس های لایت بدهد و از باقی کلاس را حذف کند

کد را تست کنید و نتیجه را بفرمایید

منظورتون رو از کاری که می خواهید با با تابعی که گفتید بکنید بفرمایید کدش را می گذارم

اینبار کد اسکریپت خارج از حلقه باید اجرا شود مثلا داخل footer.php

لینک به ارسال

سلام

این یکی هم نشد.

هر چند ثاینه یک پست ارسال میشود.

این سایت رو ببینید :

http://tnews.ir

دقیقا این کاری که من میخوام را داره انجام میدهد.

من منظورم از تابع هایی که گفتم این بود :

با جی کوئری به هر روشی که میشه به دیتابیس وصل بشیم.

برای بار اول >

100 تا رکورد آخر را واکشی کنیم.

شماره آخرین رکورد ذخیره کنیم.

رکورد های واکشی شده را با تابع

append

یا html در جی کوئری به محتوای صفحه اضافه کنیم.

برای بار دوم به بعد >

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

نمیدونم منظورم منو فهمیدید یا نه ...

اصلا به هر روشی که میشه این کار رو انجام داد و مشکلات فعلی رو نداشته باشه آموزش بدید...

تشکر

لینک به ارسال

خوب کد را برای ثانیه تنظیم کنید


<script type="text/javascript">
$(".post").filter(function() {
var $data = $(this).attr("data");if ($data==<?php Date('mdHi');?>)
$(this).addClass("hilight");
else
$(this).removeClass("hilight");
});
</script>

و


<div class="post" data="<?php echo get_the_date('mdHi');?>">

این کد برای هر یک دقیقه باید کار کنه

اگر کلیت فرم کار کرد بگید برای چند ثانیه می خواهید تا کدش را بگذارم

لینک به ارسال

چرا این یک i اضافه داره که یعنی دقیقه

سایتی که لینک دادید با این کد هر سه ثانیه رفرش می کنه و همیشه اولین پستش رنگش فرق می کنه


<script type="text/javascript">
$(document).load(function () {
window.setInterval("refresh();", 300000);
});</script>

برای تغییر استایل اولین پست هم کافیه در style.css اضافه کنید


.post
{
استایل همه مطالب
}
.post:nth-child(1) {
استایل مطلب اول
}

لینک به ارسال

سلام

اینم کار نکرد.

میخواید دسترسی بهتون بدم خودتون امتحان کنید و بعد نتیجه را اینجا بذارید ؟

لینک به ارسال

نه دسترسی ننمی خواد

شما باید تست کنید تا به کد همخون با کدهای سایتتون برسید در واقع من هم باید همین کار را بکنم چون کار کردن یا نکردن کد فقط به کد نویسی سایت شما مربوط می شه و کدها را در html قبلا تست می کنم

کد زیر در footer.php


<script type="text/javascript">
$(document).ready(function() {
setTimeout(function(){
location.reload()},10000);
});

</script>

و این کدها در css


.post {
background: #EEE;
border: 1px #aaa solid;
display: block;
width: 50%;
padding: 10px 5%;
margin: 2px 20%;
-khtml-border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-transition: all 1s linear .2s;
-o-transition: all 1s linear .2s;
-webkit-transition: all 1s linear .2s;
transition: all 1s linear .2s;
}
.post:first-child,.post:first-child a {
background:#FF3300;
color:#fff;
}

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

به header.php


<script src="http://code.jquery.com/jquery-latest.js"></script>

اضافه کنید توجه کنید کد در صورتی کار می کنه که سایت کاملا لود بشه یعنی آی فریم پلاس وان و فیس بوک نداشته باشید یا با وی پی ان چک کنید

لینک به ارسال

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

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

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

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

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

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

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

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

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