Latest ads

Electronics
Vehicles
Property
Search

Jquery help ekak

shiran987

shiran987

Well-known member
  • Mar 29, 2008
    1,189
    114
    63
    එකක් මේන් file එක . plugin එක කියමුකෝ

    අනික script file එක .

    main file එකේ variable ටිකක් declare කරලා තියනවා.

    script file එකේ තියෙන variable වලින් ඒ main file එකේ තියන එව්වා override වෙලා function එක වැඩකරනවා .

    මට මේකේ main file එකේ තියන default variable ටික arguments වලින් dynamically වෙනස් කරන්ඩ පුළුවන්.
    එතකොට ඒ dynamically update වෙච්චි variable ටික script එකට ගෙන්න ගෙන එකේ output function එකට feed කරගන්ඩ තේරෙන්නේ නෑ .

    අදහසක් දෙමුද බලන්ඩ ?
     
    • Like
    Reactions: kinkon
    shiran987

    shiran987

    Well-known member
  • Mar 29, 2008
    1,189
    114
    63
    topkollek said:
    sample ekak dapa balanna
    Click to expand...

    Code: 
    /* ===========================================================
 * animationCounter.js v.1.0.0
 * ===========================================================
 * Copyright 2017 Micheline Pavadé
 * http://www.pixel-renaissance.com
 * https://github.com/mpavade/
 *
 * animationCounter.js is a plugin that animate a counter from one value to another value
 * or from a number to an infinite value
 *
 * License MIT
 *
 * ========================================================== */


(function($){

    $.fn.animationCounter = function(options) {
        return this.each(function() {
            try {
                var element = $(this);

                var defaults = {
                    start: 0,
                    end: null,
                    step: 1,
                    delay: 1000,
                    txt: ""
                }

                var settings = $.extend(defaults, options || {})

                var nb_start = settings.start;
                var nb_end = settings.end;

                 element.text(nb_start + settings.txt);

                var counter = function() {
                    // Definition of conditions of arrest
                    if (nb_end != null && nb_start >= nb_end) {
                        return;
                    }
                    // incrementation
                    nb_start = nb_start + settings.step;
                    // display
                    element.text(nb_start + settings.txt);
                }

                // Timer
                // Launches every "settings.delay"
                setInterval(counter, settings.delay);

            } catch(e){
                alert( e + ' at line ' + e.lineNumber );
            }
        });
    };

})(jQuery);
    Code: 
     $('#counter-block').ready(function(){
        $('.fb').animationCounter({
          start: 0,
          step: 1,
          delay:100
        });
});

    mata oney meke second part ekata ( e kiyanne, dewini code block ekata ) settings tika dynamic PHP code ekak haraha inject karandai.

    php form ekak haraha....
     
    kinkon

    kinkon

    Well-known member
  • Aug 5, 2007
    115,550
    2
    115,381
    113
    Kandy ♕ පතිරූප දේස වාසෝ
    shiran987 said:
    +rep 10 gaane salakuwa machanla
    Click to expand...

    11.gif
     
    chaturanga836

    chaturanga836

    Well-known member
  • Aug 12, 2015
    3,353
    1,307
    113
    Malabe
    JSON පාවිච්චි කරන්න පුළුවන්,PHP valus JSON වලට කොන්වර්ට් කරගන්න

    <script>

    var var1 = <?php json_encode($val); ?>
    </script>

    ඒක page එකේ හෙඩර් එකේ උඩම දාන්න. ඊට පස්සේ ඕයාගේ ස්ක්‍රිප්ට් ටික පහල include කරන්න
    ex:

    <html>
    <head>
    <script>

    var var1 = <?php json_encode($val); ?>;
    var var2 = <?php json_encode($va2); ?>;
    .....

    </script>

    <script src="path_to.js">
    </head>
    </html>

    දැන් ඔයාට PHP එකෙන් ගත්ත values පාවිච්චි කරන්න පුලුවන්. මොකද එව්වා දැන් global scope එකේ තියෙන්නේ

    ex.

    path_to.js

    function(window){

    window.var1;
    window.var2;
    }(window);
     
    • Like
    Reactions: shiran987
    shiran987

    shiran987

    Well-known member
  • Mar 29, 2008
    1,189
    114
    63
    chaturanga836 said:
    JSON පාවිච්චි කරන්න පුළුවන්,PHP valus JSON වලට කොන්වර්ට් කරගන්න

    <script>

    var var1 = <?php json_encode($val); ?>
    </script>

    ඒක page එකේ හෙඩර් එකේ උඩම දාන්න. ඊට පස්සේ ඕයාගේ ස්ක්‍රිප්ට් ටික පහල include කරන්න
    ex:

    <html>
    <head>
    <script>

    var var1 = <?php json_encode($val); ?>;
    var var2 = <?php json_encode($va2); ?>;
    .....

    </script>

    <script src="path_to.js">
    </head>
    </html>

    දැන් ඔයාට PHP එකෙන් ගත්ත values පාවිච්චි කරන්න පුලුවන්. මොකද එව්වා දැන් global scope එකේ තියෙන්නේ

    ex.

    path_to.js

    function(window){

    window.var1;
    window.var2;
    }(window);
    Click to expand...

    apita script eka header ekata load karanne nathuwa, data-options widihata variable tika send karandai mama try karanne. pahala widiyata data options walin, data eka send karanda puluwan.

    eth, a ena data eka function eka athulata oba ganda thamai set wenne naththe, puluwanda help ekak denda ?

    Code: 
    <[B]div [/B]class=[B]" " [/B]data-options=[B]'{"var1":"[/B]<?php echo [I]$data[/I]['var1']; ?>[B]",
[/B][B]"var2":"[/B]<?php echo [I]$data[/I]['var2']; ?>[B]"}'[/B]>
    Code: 
    $([COLOR=#e6db74]'#counter-block'[/COLOR]).ready([COLOR=#f92672]function[/COLOR]() {
$([COLOR=#e6db74]'.[/COLOR][COLOR=#a6e22e]fb[/COLOR][COLOR=#e6db74]'[/COLOR]).[COLOR=#a6e22e]animationCounter[/COLOR]({
   })[COLOR=#cc7832];
/*
variable tika genda oney methanata

item1: var1,
item2: var2,

*/
[/COLOR][COLOR=#cc7832]
[/COLOR]})[COLOR=#cc7832];
[/COLOR]
     
    chaturanga836

    chaturanga836

    Well-known member
  • Aug 12, 2015
    3,353
    1,307
    113
    Malabe
    shiran987 said:
    apita script eka header ekata load karanne nathuwa, data-options widihata variable tika send karandai mama try karanne. pahala widiyata data options walin, data eka send karanda puluwan.

    eth, a ena data eka function eka athulata oba ganda thamai set wenne naththe, puluwanda help ekak denda ?

    Code: 
    <[B]div [/B]class=[B]" " [/B]data-options=[B]'{"var1":"[/B]<?php echo [I]$data[/I]['var1']; ?>[B]",
[/B][B]"var2":"[/B]<?php echo [I]$data[/I]['var2']; ?>[B]"}'[/B]>
    Code: 
    $([COLOR=#e6db74]'#counter-block'[/COLOR]).ready([COLOR=#f92672]function[/COLOR]() {
$([COLOR=#e6db74]'.[/COLOR][COLOR=#a6e22e]fb[/COLOR][COLOR=#e6db74]'[/COLOR]).[COLOR=#a6e22e]animationCounter[/COLOR]({
   })[COLOR=#cc7832];
/*
variable tika genda oney methanata

item1: var1,
item2: var2,

*/
[/COLOR][COLOR=#cc7832]
[/COLOR]})[COLOR=#cc7832];
[/COLOR]
    Click to expand...


    puluwan

    mehema karanan

    <div id="mydta_01" class=" " data-options='{"var1":"<?php echo $data['var1']; ?>",
    "var2":"<?php echo $data['var2']; ?>"}'>

    mehema id ekk denna div eketa

    <script>

    var options = JSON.parse( $('#mydta_01').data('options') );


    $('#counter-block').ready(function(){
    $('.fb').animationCounter({
    start:options .var1 ,
    step: options .var2,
    delay:100
    });
    });

    </script>

    me widihata try karanna
     
    shiran987

    shiran987

    Well-known member
  • Mar 29, 2008
    1,189
    114
    63
    chaturanga836 said:
    puluwan

    mehema karanan

    <div id="mydta_01" class=" " data-options='{"var1":"<?php echo $data['var1']; ?>",
    "var2":"<?php echo $data['var2']; ?>"}'>

    mehema id ekk denna div eketa

    <script>

    var options = JSON.parse( $('#mydta_01').data('options') );


    $('#counter-block').ready(function(){
    $('.fb').animationCounter({
    start:options .var1 ,
    step: options .var2,
    delay:100
    });
    });

    </script>

    me widihata try karanna
    Click to expand...

    Try kara, hari yanne na. mata mokak hari miss wela athi machan

    plunker link eke damma,

    https://embed.plnkr.co/QtGj4YOlSxXWJyG3I2YB/

    poddak balanda puluwan weida , karadarayak naththam.
     
    chaturanga836

    chaturanga836

    Well-known member
  • Aug 12, 2015
    3,353
    1,307
    113
    Malabe
    shiran987 said:
    Try kara, hari yanne na. mata mokak hari miss wela athi machan

    plunker link eke damma,

    https://embed.plnkr.co/QtGj4YOlSxXWJyG3I2YB/

    poddak balanda puluwan weida , karadarayak naththam.
    Click to expand...

    $( document ).ready(function() {

    var mydata =$('#mydata').data('options');


    $('.fb').animationCounter({
    start: 0,//mydata.start
    step: 1,//mydata.step
    delay: 100////mydata.delay
    });

    });

    mama update kara link eka
    balanna
     
    shiran987

    shiran987

    Well-known member
  • Mar 29, 2008
    1,189
    114
    63
    Bad News said:
    bp
    Click to expand...
    Rep +10 gaane add kara.
    chaturanga836 said:



    $( document ).ready(function() {

    var mydata =$('#mydata').data('options');


    $('.fb').animationCounter({
    start: 0,//mydata.start
    step: 1,//mydata.step
    delay: 100////mydata.delay
    });

    });

    mama update kara link eka
    balanna
    Click to expand...

    Machan, link eke save wela na. :(

    mama me code block eka ekata add kara, eka wada karanawa, eth a mama kalin use karapu widihatamai.

    data-option walin send karana variable eka, function eke variable ekata add wenne nah machan.. ethana thama mata thiyana gataluwa... function ekata manually figures enter karapu gaman, code eka wada, a kiyanne, code eke awulak na ne.

    issue eka thiyeenne, data send and receive wenne nathi eka. :(
     
    chaturanga836

    chaturanga836

    Well-known member
  • Aug 12, 2015
    3,353
    1,307
    113
    Malabe
    shiran987 said:
    Rep +10 gaane add kara.


    Machan, link eke save wela na. :(

    mama me code block eka ekata add kara, eka wada karanawa, eth a mama kalin use karapu widihatamai.

    data-option walin send karana variable eka, function eke variable ekata add wenne nah machan.. ethana thama mata thiyana gataluwa... function ekata manually figures enter karapu gaman, code eka wada, a kiyanne, code eke awulak na ne.

    issue eka thiyeenne, data send and receive wenne nathi eka. :(
    Click to expand...


    $( document ).ready(function() {

    var mydata =$('#mydata').data('options');


    $('.fb').animationCounter({
    start: parseInt(mydata.start),
    step: parseInt(mydata.step),
    delay: 100////mydata.delay
    });

    });

    meka wada.. int walata convert karanna
     
    shiran987

    shiran987

    Well-known member
  • Mar 29, 2008
    1,189
    114
    63
    chaturanga836 said:
    $( document ).ready(function() {

    var mydata =$('#mydata').data('options');


    $('.fb').animationCounter({
    start: parseInt(mydata.start),
    step: parseInt(mydata.step),
    delay: 100////mydata.delay
    });

    });

    meka wada.. int walata convert karanna
    Click to expand...

    Thanks machan. meka hari. issella, parseInt eken int walata convert karala nathuwa data post karapu nathi nisa wenda athi wada karey naththe.

    Thawa punchi udawwak / or adahask denada puluwan weida me code eka pawichchi karala me wage wadak karanda.

    1. man default plugin ekata data feed karanawa form keepayakin,
    a, b kiyala block dekak gamuko.

    2. me data tika man array ekaka save karanawa.
    eka karama print_r eken me wage out put ekak ganda puluwan.

    Array 1
    Code: 
    Array (     [start] => 250     [end] => 1250     [delay] => 1000     [steps] => 25     [txt] => my )

    Array 2
    Code: 
    Array (     [start] => 50     [end] => 100     [delay] => 1000     [steps] => 1     [txt] => g )
    3. Dan mama me data eka post karanawa data-options haraha

    data-options{'"start:"<?php echo "$data['start']; ?>"', .... .. ' } menna me widhata

    4. dan function eka oya dunna code modification ekath ekka wada karanawa.

    5. mata dan oney meka for each loop ekak wage run karanda,

    6. array 2k thiyanawanam, me widihe counter 2k index page eke pennawa, different arguments/ attritubes walin.

    7. for each daala, me wage modification ekak kara. eken out put 2k ganda puluwan.

    Code: 
    [I]$[/I]( document ).[COLOR=#a6e22e]ready[/COLOR]([COLOR=#f92672]function[/COLOR]() {

    [COLOR=#f92672]var [/COLOR]mydata [COLOR=#f92672]=[/COLOR][I]$[/I]([COLOR=#e6db74]'#mydata'[/COLOR]).[COLOR=#a6e22e]data[/COLOR]([COLOR=#e6db74]'options'[/COLOR])[COLOR=#cc7832];
[/COLOR][COLOR=#cc7832]    [/COLOR][COLOR=#f92672]var [/COLOR]mydivs [COLOR=#f92672]=[/COLOR][I]$[/I]([COLOR=#e6db74]".[/COLOR][COLOR=#a6e22e]block-wrapper[/COLOR][COLOR=#e6db74]"[/COLOR])[COLOR=#cc7832];
[/COLOR][COLOR=#f92672]if[/COLOR](mydivs.length [COLOR=#f92672]> [/COLOR][COLOR=#ae81ff]0 [/COLOR]) {
mydivs.[COLOR=#a6e22e]each[/COLOR]([COLOR=#f92672]function [/COLOR]() {
    [I]$[/I]([COLOR=#e6db74]'.[/COLOR][COLOR=#a6e22e]fb[/COLOR][COLOR=#e6db74]'[/COLOR]).[COLOR=#a6e22e]animationCounter[/COLOR]({
        start[COLOR=#f92672]: [/COLOR][COLOR=#a6e22e]parseInt[/COLOR](mydata.start)[COLOR=#cc7832],
[/COLOR][COLOR=#cc7832]        [/COLOR]end[COLOR=#f92672]: [/COLOR][COLOR=#a6e22e]parseInt[/COLOR](mydata.end)[COLOR=#cc7832],
[/COLOR][COLOR=#cc7832]        [/COLOR]step[COLOR=#f92672]: [/COLOR][COLOR=#a6e22e]parseInt[/COLOR](mydata.step)[COLOR=#cc7832],
[/COLOR][COLOR=#cc7832]        [/COLOR]delay[COLOR=#f92672]: [/COLOR][COLOR=#ae81ff]1000[/COLOR][COLOR=#75715e]////mydata.delay
[/COLOR][COLOR=#75715e]    [/COLOR]})
})


}

})[COLOR=#cc7832];[/COLOR]

    8. eth dekema enne ekama data. arrays deke data wenama out put karandai mata ona.

    welawak thibunoth, podi sup ekak danda..... thank you again.
     
    chaturanga836

    chaturanga836

    Well-known member
  • Aug 12, 2015
    3,353
    1,307
    113
    Malabe
    shiran987 said:
    Thanks machan. meka hari. issella, parseInt eken int walata convert karala nathuwa data post karapu nathi nisa wenda athi wada karey naththe.

    Thawa punchi udawwak / or adahask denada puluwan weida me code eka pawichchi karala me wage wadak karanda.

    1. man default plugin ekata data feed karanawa form keepayakin,
    a, b kiyala block dekak gamuko.

    2. me data tika man array ekaka save karanawa.
    eka karama print_r eken me wage out put ekak ganda puluwan.

    Array 1
    Code: 
    Array (     [start] => 250     [end] => 1250     [delay] => 1000     [steps] => 25     [txt] => my )

    Array 2
    Code: 
    Array (     [start] => 50     [end] => 100     [delay] => 1000     [steps] => 1     [txt] => g )
    3. Dan mama me data eka post karanawa data-options haraha

    data-options{'"start:"<?php echo "$data['start']; ?>"', .... .. ' } menna me widhata

    4. dan function eka oya dunna code modification ekath ekka wada karanawa.

    5. mata dan oney meka for each loop ekak wage run karanda,

    6. array 2k thiyanawanam, me widihe counter 2k index page eke pennawa, different arguments/ attritubes walin.

    7. for each daala, me wage modification ekak kara. eken out put 2k ganda puluwan.

    Code: 
    [I]$[/I]( document ).[COLOR=#a6e22e]ready[/COLOR]([COLOR=#f92672]function[/COLOR]() {

    [COLOR=#f92672]var [/COLOR]mydata [COLOR=#f92672]=[/COLOR][I]$[/I]([COLOR=#e6db74]'#mydata'[/COLOR]).[COLOR=#a6e22e]data[/COLOR]([COLOR=#e6db74]'options'[/COLOR])[COLOR=#cc7832];
[/COLOR][COLOR=#cc7832]    [/COLOR][COLOR=#f92672]var [/COLOR]mydivs [COLOR=#f92672]=[/COLOR][I]$[/I]([COLOR=#e6db74]".[/COLOR][COLOR=#a6e22e]block-wrapper[/COLOR][COLOR=#e6db74]"[/COLOR])[COLOR=#cc7832];
[/COLOR][COLOR=#f92672]if[/COLOR](mydivs.length [COLOR=#f92672]> [/COLOR][COLOR=#ae81ff]0 [/COLOR]) {
mydivs.[COLOR=#a6e22e]each[/COLOR]([COLOR=#f92672]function [/COLOR]() {
    [I]$[/I]([COLOR=#e6db74]'.[/COLOR][COLOR=#a6e22e]fb[/COLOR][COLOR=#e6db74]'[/COLOR]).[COLOR=#a6e22e]animationCounter[/COLOR]({
        start[COLOR=#f92672]: [/COLOR][COLOR=#a6e22e]parseInt[/COLOR](mydata.start)[COLOR=#cc7832],
[/COLOR][COLOR=#cc7832]        [/COLOR]end[COLOR=#f92672]: [/COLOR][COLOR=#a6e22e]parseInt[/COLOR](mydata.end)[COLOR=#cc7832],
[/COLOR][COLOR=#cc7832]        [/COLOR]step[COLOR=#f92672]: [/COLOR][COLOR=#a6e22e]parseInt[/COLOR](mydata.step)[COLOR=#cc7832],
[/COLOR][COLOR=#cc7832]        [/COLOR]delay[COLOR=#f92672]: [/COLOR][COLOR=#ae81ff]1000[/COLOR][COLOR=#75715e]////mydata.delay
[/COLOR][COLOR=#75715e]    [/COLOR]})
})


}

})[COLOR=#cc7832];[/COLOR]

    8. eth dekema enne ekama data. arrays deke data wenama out put karandai mata ona.

    welawak thibunoth, podi sup ekak danda..... thank you again.
    Click to expand...

    ekata data wena wenama tiyaganna

    eg. <div data-option1=<?php echo "$data['start']; ?> data-option2=<?php echo "$data2['start']; ?>>

    nathtam hondama de script tag ekaka issella kiwwa wage seperate data tiyagena handle karana eka

    kohomath ekai
     
    shiran987

    shiran987

    Well-known member
  • Mar 29, 2008
    1,189
    114
    63
    chaturanga836 said:
    ekata data wena wenama tiyaganna

    eg. <div data-option1=<?php echo "$data['start']; ?> data-option2=<?php echo "$data2['start']; ?>>

    nathtam hondama de script tag ekaka issella kiwwa wage seperate data tiyagena handle karana eka

    kohomath ekai
    Click to expand...

    Yes, eka karanda puluwan.

    eth, mama dakka, tutorial ekaka ehema nokara same data variable haraha, multiple arguiments sent karanawa. habai eka wordpress friendly widihata liyala thiyenne, php components.


    Jquery plugin ekai script ekai thama wadey , karanne out put karana data use karala.

    me thiyenne mama examine karapu eke, git hub link eka.
    https://github.com/apurbajnu/barfiller-vc-extension

    eke script eke, me wage foreach function ekak thama multiple arrays handle karanne.

    Code: 
    (function ($) {     $(document).ready(function(){          var barfill = $(".barfill-container");         if(barfill.length>0){             barfill.each(function(){                 options = $(this).data('options');                 console.log(options);                  $(this).barfiller(options);             })         }      }); })(jQuery)
    me widihe method ekak use karala, same code repeat karana eka adu karandai baluwe.
     
    Last edited:

    Similar threads

    manarrow
    ආයෙත් හැදුව සුපිරි script එකක්.
    Replies
    8
    Views
    522
    manarrow
    manarrow
    D
    SSL wordpress and nginx ගැන දන්න කවුරු හරි ඉන්නවද?
    Replies
    8
    Views
    461
    devops
    devops
    losh_92
    WEB DL විදිහට ෆිල්ම් එකක් torrent හරහා එළියට එන විදිහ.
    Replies
    36
    Views
    1K
    Reincarnator
    Reincarnator
    losh_92
    නුවරට ආපූ JPcineplex සිනමාශාලා..
    Replies
    24
    Views
    1K
    losh_92
    losh_92
    ozykolla
    EV එකක power වෙනස් කරන එක වරුවක වැඩක්
    Replies
    2
    Views
    623
    dagayaa
    dagayaa
    Top Bottom