کد رفتن به مطلب قبلی و بعدی با لمس صفحه موبایل و اسکرول موس

کد رفتن به مطلب قبلی و بعدی برای سایت هایی مورد استفاده قرار میگیرد که تمایل دارند در گوشی های همراه (موبایل) با لمس دست به سمت بالا یا پایین به پست قبلی و بعدی حرکت نماید و اقدام به نمایش مطلب مورد نظر شود. و در دسکتاپ ها با اسکرول موس جهت نمایش مطلب قبلی و بعدی مقدور شود. البته در نظر بگیرید این کد زمانی کاربرد دار که سایت شما قابلیت اسکرول خوردن را نداشته باشد یعنی کل صفحه ای که نمایش میدهید همان میزان صفحه نمایش است. در نظر بگیرید که معمولا این کد را بیشتر در سینگل سایت قرار میدهند یعنی زمانی که در حال نمایش نوشته ای از سایتتان به مخاطب می باشید.

این موضوعی است که برخی از مشتریان درخواست اعمال این واکنش در زمان طراحی وب سایت خودشان هستند که طراح مستلزم به انجام آن خواهد شد. امروز ما این کد را در اختیار شما قرار داده ایم تا نگران این موضوع نباشید.

این موضوع در زمان طراحی قالب سایت تاثیر زیادی دارد.

کد رفتن به مطلب قبلی و بعدی

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

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

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

کد مورد استفاده در موبایل با لمس صفحه

همانطور که میدانید موبایل از زبان Java پیروی می کنند و کدها باید مطابق با برنامه نویسی تحت جاوا اجرا شود.

کافیست کد زیر را در صفحه single سایت خود قرار دهید.

<script language="javascript">
window.onload = function()
{

    //adding the event listerner for Mozilla
    if(window.addEventListener)
        document.addEventListener('DOMMouseScroll', moveObject, false);

    //for IE/OPERA etc
    document.onmousewheel = moveObject;
}
function moveObject(event)
{

    var delta = 0;

    if (!event) event = window.event;

    // normalize the delta
    if (event.wheelDelta) {

        // IE and Opera
        delta = event.wheelDelta / 60;
        if (delta== "-2"){
            next_link = /*next_link*/;
            if (next_link != ""){
                window.open(next_link,"_self");
            }
        }else if(delta== "2"){
            previous_link = /*previous_link*/;
            if (previous_link != ""){
                window.open(previous_link,"_self");
            }
        }

    } else if (event.detail) {
        if (event.detail== "3"){
            next_link = /*next_link*/;
            if (next_link != ""){
                window.open(next_link,"_self");
            }
        }else if(event.detail== "-3"){
            previous_link = /*previous_link*/;
            if (previous_link != ""){
                window.open(previous_link,"_self");
            }
        }

    }
}
</script>

در این کد به دو صورت با توجه به نوع مرورگر چک می نماید که کاربر با استفاده از انگشت صفحه را به سمت بالا لمس کرده است یا به سمت پایین.

در این قسمت چهار جای قرار دادن لینک صفحه قبلی و صفحه بعدی را دارد که باید جایگزین کنید.

• /next_link/ لینک مطلب بعدی
• /previous_link/ لینک مطلب قبلی

تحلیل کد

هر لمسی که بروی صفحه نمایش انجام شود ، یک رخدادی روی خواهد داد که در برنامه نویسی به نام event یاد میشود.

این رخداد ها می تواند کلیک بروی یک برنامه یا کشیدن دست به سمت بالا و پایین باشد. که با توجه به آن envent می توان تشخیص که داد که باید چه کدی اجرا شود.

ما در این قسمت از خاصیت detail استفاده نموده ایم و در صورتی که صفحه ای که کدها را درون آن قرار داده اید باز باشد و کاربر اقدام به کشیدن دست به سمت بالا یا پایین شود.

مقداری درون event.detail قرار میگیرد که این می تواند عدد 3 یا 3- باشد.

• 3 یعنی لمس به سمت بالا رخ داده است.
• 3- یعنی لمس به سمت پایین کشیده شده است.

پس می توان سایر کدها برای باز شدن مقاله قبلی و بعدی را بنویسیم.

کد مورد استفاده در دسکتاپ با اسکرول

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

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

در این قسمت قصد داریم که با استفاده از کدهای جاوا در سیستم وردپرس پیاده سازی نماییم.

<script>
    function NextPreviousPost(id_post_current){
        var a;

        if(window.XMLHttpRequest){a=new XMLHttpRequest()}
        else{a=new ActiveXObject("Microsoft.XMLHTTP")}
        a.onreadystatechange=function(){
            if(a.readyState==4&&a.status==200){
                document.getElementById("div_name").innerHTML=a.responseText;
            }
        };
        a.open("POST","url_page",true);
        a.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        a.send("sendidpostcurrent="+id_post_current)
    }
</script>

چون کدهای وردپرس برای نمایش دادن یک مطلب از php باید استفاده نماییم. در این کد آیدی مطلب جاری را دریافت می کنیم و توسط کد جاوا فوق به پیج دیگری ارسال می کنیم.

در پیج مقصد آیدی مقاله بعدی و قبلی را دریافت و کل کدهای یک صفحه جدید با آیدی جدید را چاپ می کنیم.

این موضوع باعث چاپ صفحه جدید درخواستی خواهد شد.

نمونه آنلاین

در صورتی که سوال یا راهنمایی خواستید، می توانید از قسمت نظرات همین بخش با ما در ارتباط باشید.