What neralex didn't tell u about jquery

Posted: Thu Nov 06, 2014 6:18 am

Actually I didn't want to bring this up like this way but I must do it because I'm tired of secrets and hiding what it should be on the table for others to learn. Here we go!!!

Yesterday! I've been working on my website for hours. Cleaning old codes, creating some modules, addons but suddenly I went deep into the questions I had for weeks ago which were bothering me, because I wanted to speed up my website the way neralex did it! but he didn't want to share it. If something like this happens, believe me. Your curiosity will wake u up and u will start looking for the answer. To tell u the truth, it took me some hours searching on Ravennuke's main files like blocks, modules and addons. Reading my old stuff and compare it with what I had before. Because of this I fixed and cleaned other things I had in mind but that wasn't the main goal. I needed to load jquery.js at the bottom of my website so when I enter to my website it has to load quick and in seconds. Well! Actually this trick is not a secret for bootstraap( How much I love this system), wordpress or any other new modern script nowadays.

All started here with this post. Neralex showed us a picture where he called first jquery.js by the old fashion way creating a folder in includes/custom_files/custom_head.php blablabla. Anyway, do not worry! That was confused because worked for one particular trick but it didn't work for the entire website and I wasn't happy with the result so I started again from the beginning. I don't know why he removed the picture. Very Happy

I guess he didn't want me to see it but it was too late.
[ Only registered users can see links on this board! Get registered or login! ]

Do not get distracted but my comments above. Just follow these steps.

Step#1 Open FTP and go to this place

includes/addons/ in this folder u will start doing your modifications.

If you open any file and u find this

Code:

addCSSToHead('themes/infoblock.css', 'file');//

Correct and do not touch!!!

U can not do this

addCSSToBody('themes/infoblock.css', 'file');// This is incorrect

but if you find this line

Code:

addJSToHead('includes/jquery/jquery.cookie.js', 'file');

// This is correct! U can still use it

but if you want to load all your .js javascript u must change Head for Body.

Code:




addJSToBody('includes/jquery/jquery.cookie.js', 'file');

// This is correct.

Yes u will think. Oh! That is easy. I can find anything line like this and change it that way. NO! NO! If u do that u have 15% of your work done and u will get frustrated because lots of things won't work properly. Do not scary! Keep on going!

Go to includes/ and open javascript.php and do these changes

Code:

addJSToBody('includes/rn.js', 'file');

Code:




   $inlineJS .= "'$nukeurl".'/modules/Forums/images/avatars/gallery/\' + document.Register.user_avatar.options[document.Register.user_avatar.selectedIndex].value'."\n";


   $inlineJS .= "}\n";


   $inlineJS .= '//-->'."\n";


   $inlineJS .= '</script>'."\n\n";


   addJSToBody($inlineJS, 'inline');


}

but at the bottom let the copyright function the way it is. This one u shouldn't change it.

Code:




'/copyright.php\',\'Copyright\',\'toolbar=no,location=no,directories=no,status=no,scrollbars=yes,resizable=no,copyhistory=no,width=400,height=200\');'."\n";


   $inlineJS .= "}\n";


   $inlineJS .= '//-->'."\n";


   $inlineJS .= '</script>'."\n\n";


   addJSToHead($inlineJS, 'inline');


}

Go to includes/jquery/ here in this folder u must do lots of modifications.

Here I found the first struggle!! If you open includes/tabcontent/tabcontent.php

Code:

if (defined('YA_ADMIN')) {


    addCSSToHead('includes/tabcontent/tabcontent.css','file');


   addJSToHead('includes/tabcontent/tabcontent.js','file');


}

I changed it like

Code:

if (defined('YA_ADMIN')) {


    addCSSToHead('includes/tabcontent/tabcontent.css','file');


   addJSToBody('includes/tabcontent/tabcontent.js','file');


}

That was easy right? Yes it was but if you go to your administration/users config Then everything there won't work. U will find a mess! Javascript conflict and everything has been broken!!

Very Happy

I don't want to make this post too long. It is almost finished and based on this example u will figure it out yourself after starting it to do it.

Open modules/Your_Account/admin/user.php and find

Code:

    echo '<script type="text/javascript">


          var usercfg=new ddajaxtabs("usertabs", "usertabcontainer")


          usercfg.setpersist('.$persist.')


          usercfg.setselectedClassTarget("link")


          usercfg.init()


          </script>';

Replace with

Code:

$userinline_js = '<script type="text/javascript">' . PHP_EOL


            . '/* <![CDATA[ */;' . PHP_EOL


            . 'var usercfg=new ddajaxtabs(\'usertabs\', \'usertabcontainer\');' . PHP_EOL


            . 'usercfg.setpersist(\'.$persist.\');' . PHP_EOL


            . 'usercfg.setselectedClassTarget(\'link\');' . PHP_EOL


            . 'usercfg.init();' . PHP_EOL


            . '/* ]]> */;' . PHP_EOL


            . '</script>' . PHP_EOL;


addJSToBody($userinline_js, 'inline');

This piece of code above was the trick. Everytime u found an old way of javascript u must use inline otherwise none of this trick will work.

but if you use blocks/block-ForumsCollapsing.php

Then we go into a serious issue. The show/hide option won't work. Open the block and search for

Code:

$javascript_content = '


<script type="text/javascript" language="JavaScript">


    $(document).ready(function(){


        var elem;


        var topic_count;





        topic_count = $("tr.child_topic").size();


        if(topic_count >= 1) {


            $("#main_topic").siblings(".child_topic").hide();


            $("#show_hide").click(function(){


                //$("#main_topic").siblings(".child_topic").toggle();


                var elem = $(".child_topic")[0];


                if(elem.style.display == "none") {


                    $(".child_topic").show();


                } else {


                    $(".child_topic").hide();


                }


                return false;


            });


        }


    });


</script>';

Replace with

Code:

$javascript_content = '


<script type="text/javascript" language="JavaScript">


    $(document).ready(function(){


        var elem;


        var topic_count;





        topic_count = $("tr.child_topic").size();


        if(topic_count >= 1) {


            $("#main_topic").siblings(".child_topic").hide();


            $("#show_hide").click(function(){


                //$("#main_topic").siblings(".child_topic").toggle();


                var elem = $(".child_topic")[0];


                if(elem.style.display == "none") {


                    $(".child_topic").show();


                } else {


                    $(".child_topic").hide();


                }


                return false;


            });


        }


    });


</script>';


if (is_array($javascript_content) and function_exists('addJSToBody')) addJSToBody($javascript_content, 'inline');


else echo $javascript_content."\n";

Do the second one as well but not the same

Code:

if ($showTickerMessage) {


    $javascript_content .= '


    <script type="text/javascript" language="JavaScript">


        var current_topic;


        var vurrent_topic_html;


        var old_topic = -1;


        var topic_count;


        var topic_interval;





        $(document).ready(function(){


            topic_count = $("tr.child_topic").size();


            if(topic_count >= 1) {


                topic_interval = setInterval(topic_rotate,' . $tickDelay . ');


                topic_rotate();


            } else {


                $("#main_topic").remove()


            }


        });





        function topic_rotate() {


            current_topic = (old_topic + 1) % topic_count;


            current_topic_html = $("tr.child_topic:eq(" + current_topic + ")").html();


            $("tr#main_topic").html(current_topic_html);


            old_topic = current_topic;


        }


    </script>';


addJSToBody($javascript_content, 'inline');





}

I won't keep on posting more because u should understand now what is the point here. After doing all of this my website is loading in 0.45 seconds. I'm very happy with the result!

If you have any issue with navigation u must mod your nukeNAV.php and nukeNAV.css

If there is a new way to do it please let us know. I always want to learn more.

Wink

Site Admin Joined: Aug 22, 2007 Posts: 1772

If you would load a jquery code/file with JSToBody before the header is included, then you would get the next conflict. Wink

BTW the loading time of a page is everytime faster if the page is cached. I have tried to load your page with a cleared browser cache and got: Page Generation: 2.67 Seconds Wink

Its funny to read that you are typing for all, when you don't get what you want... sounds like litte bit confused for me - anyway.

I told it you in your many other threads with the same topic. Spasticdonkey has it also written. But i will try to tell it you again. That is not only a trick - for that is it needed to recode many things and after that is it everytime possible to get issues with it, because it will not work in each case. You would have to search and sort the best plugins for that without to get conficts. It works for me on my website but i can't make it sure, that will work for everyone. That is the reason why i don't want share it to public.

I personally like the free using of the functions JSToBody and JSToHead. That means i don't want miss the possibility to use it on every place where i want to use it. I would not let this freedom take, just to load the jquery library in the BODY instead in the HEAD. So i have tried to find a way to do this because i load prepared jquery scripts in my own modules often before the header is included. So i can write my BODY content with a clear overview for me personally.

The functions JSToBody and JSToHead are arrays and all what you call with these functions would listed successively. So you must make sure that in each case the jquery library is loaded in front of all. I believe i have told you exaclty the same in another thread. There is no secret or something like that.

If other developers will use the functions JSToBody and JSToHead in the same way as i'm doing it, then other CMS users with your "solution" would have to recode every 3rd party module and this makes really no sense. If you have found for you a way to let it work - fine! But don't forget to close out all conflicts if you share it to public.

I hope now its all clear for you and if not, please search it for you but do not expect any help from me.

Posted: Thu Nov 06, 2014 3:29 pm

Quote:

If you would load a jquery code/file with JSToBody before the header is included, then you would get the next conflict

This is not true at all and I do have proof of this fact. I willl show u with details but it is incredible how weird you are acting just because you think it won't work for others. Who cares? Like this you won't reach any goal in your life because you think u will fail. Failing is the key to success and I will keep on searching and testing. Why not? Here I show you something I would like you to test yourself.

I created a Master Clock module yesterday evening: I change in jquery.php

Code:

addJSToBody('includes/jquery/jquery.js', 'file');

If I do this I get a conflict with this module but I created another Music Module which is working properly with the same changed.

Example 1: Master Clock Module
[ Only registered users can see links on this board! Get registered or login! ]

As u see it is not working:

index.php

Code:

<?php


//module made by hicux at bestbuildpc.org


/**********************************/


/*  Module Configuration          */


/* (right side on) v3.1           */


/* Remove the following line      */


/* will remove the right side     */


/**********************************/


//define('INDEX_FILE', true);


//$index = 1;


if (!defined('MODULE_FILE')) die('You can\'t access this file directly...');


if (!defined('PHP_EOL')) define('PHP_EOL', strtoupper(substr(PHP_OS,0,3) == 'WIN') ? "\r\n" : "\n");





$module_name = 'Master_Clock';


$module_name = basename(dirname(__FILE__));


$pagetitle = '- ' . $module_name . '';





$index = 0;


if (!defined('INDEX_FILE')) define('INDEX_FILE', true); // Set to FALSE to hide right blocks


if (defined('INDEX_FILE') AND INDEX_FILE === true) {


   // auto set right blocks for pre patch 3.1 compatibility


   $index = 1;


}





$jClockcss= 'modules/' . $module_name . '/css/jClocksGMT.css';


if (function_exists('addCSSToHead')) {


   addCSSToHead($jClockcss, 'file');


} else {


   echo '<link rel="stylesheet" href="' , $jClockcss , '" type="text/css">';


}


   addJSToBody('modules/' . $module_name . '/js/jClocksGMT.js', 'file');


   addJSToBody('modules/' . $module_name . '/js/jquery.rotate.js', 'file');





$clockjs = '<script type="text/javascript">


$(document).ready(function(){


$(\'#clock_hou\').jClocksGMT({offset: \'-5\', hour24: true});


$(\'#clock_dc\').jClocksGMT({offset: \'+1\', hour24: true});


$(\'#clock_india\').jClocksGMT({offset: \'+5.5\'});


});


</script>'."\n";


if (function_exists('addJSToBody')) {


   addJSToBody($clockjs, 'inline');


} else {


   echo $clockjs;


}





include_once 'header.php';








OpenTable();





echo '<div id="clock_hou" class="clock_container">' , PHP_EOL


   , '<div class="lbl">Havana, CU, Cuba</div>' , PHP_EOL


   , '<div class="clockHolder">' , PHP_EOL


   , '<div class="rotatingWrapper"><img class="hour" src="modules/' , $module_name , '/images/clock_hour.png" alt="" /></div>' , PHP_EOL


   , '<div class="rotatingWrapper"><img class="min" src="modules/' , $module_name , '/images/clock_min.png" alt="" /></div>' , PHP_EOL


   , '<div class="rotatingWrapper"><img class="sec" src="modules/' , $module_name , '/images/clock_sec.png" alt="" /></div>' , PHP_EOL


   , '<img class="clock" src="modules/' , $module_name , '/images/clock_face.png" alt="" />' , PHP_EOL


   , '</div>' , PHP_EOL


   , '<div class="digital">' , PHP_EOL


   , '<span class="hr"></span><span class="minute"></span><span class="period"></span>' , PHP_EOL


   , '</div>' , PHP_EOL


   , '</div>' , PHP_EOL


   , '<div id="clock_dc" class="clock_container">' , PHP_EOL


   , '<div class="lbl">AMS, Amsterdam</div>' , PHP_EOL


   , '<div class="clockHolder">' , PHP_EOL


   , '<div class="rotatingWrapper"><img class="hour" src="modules/' , $module_name , '/images/clock_hour.png" alt="" /></div>' , PHP_EOL


   , '<div class="rotatingWrapper"><img class="min" src="modules/' , $module_name , '/images/clock_min.png" alt="" /></div>' , PHP_EOL


   , '<div class="rotatingWrapper"><img class="sec" src="modules/' , $module_name , '/images/clock_sec.png" alt="" /></div>' , PHP_EOL


   , '<img class="clock" src="modules/' , $module_name , '/images/clock_face.png" alt="" />' , PHP_EOL


   , '</div>' , PHP_EOL


   , '<div class="digital">' , PHP_EOL


   , '<span class="hr"></span><span class="minute"></span><span class="period"></span>' , PHP_EOL


   , '</div>' , PHP_EOL


   , '</div>' , PHP_EOL


   , '<div id="clock_india" class="clock_container">' , PHP_EOL


   , '<div class="lbl">New Delhi, India</div>' , PHP_EOL


   , '<div class="clockHolder">' , PHP_EOL


   , '<div class="rotatingWrapper"><img class="hour" src="modules/' , $module_name , '/images/clock_hour.png" alt="" /></div>' , PHP_EOL


   , '<div class="rotatingWrapper"><img class="min" src="modules/' , $module_name , '/images/clock_min.png" alt="" /></div>' , PHP_EOL


   , '<div class="rotatingWrapper"><img class="sec" src="modules/' , $module_name , '/images/clock_sec.png" alt="" /></div>' , PHP_EOL


   , '<img class="clock" src="modules/' , $module_name , '/images/clock_face.png" alt="" />' , PHP_EOL


   , '</div> ' , PHP_EOL


   , '<div class="digital">' , PHP_EOL


   , '<span class="hr"></span><span class="minute"></span><span class="period"></span>' , PHP_EOL


   , '</div>' , PHP_EOL


   , '</div>' , PHP_EOL;


CloseTable();





include_once 'footer.php';

Example: 2
[ Only registered users can see links on this board! Get registered or login! ]

This one works properly without any conflict and I am doing the same procedure.

index.php

Code:

<?php








if (!defined('MODULE_FILE')) die('You can\'t access this file directly...');


if (!defined('PHP_EOL')) define('PHP_EOL', strtoupper(substr(PHP_OS,0,3) == 'WIN') ? "\r\n" : "\n");





$module_name = 'Master_Clock';


$module_name = basename(dirname(__FILE__));


$pagetitle = '- ' . $module_name . '';





$index = 0;


if (!defined('INDEX_FILE')) define('INDEX_FILE', true); // Set to FALSE to hide right blocks


if (defined('INDEX_FILE') AND INDEX_FILE === true) {


   // auto set right blocks for pre patch 3.1 compatibility


   $index = 1;


}





$jClockcss= 'modules/' . $module_name . '/css/jClocksGMT.css';


if (function_exists('addCSSToHead')) {


   addCSSToHead($jClockcss, 'file');


} else {


   echo '<link rel="stylesheet" href="' , $jClockcss , '" type="text/css">';


}


   addJSToBody('modules/' . $module_name . '/js/jClocksGMT.js', 'file');


   addJSToBody('modules/' . $module_name . '/js/jquery.rotate.js', 'file');





$clockjs = '<script type="text/javascript">


$(document).ready(function(){


$(\'#clock_hou\').jClocksGMT({offset: \'-5\', hour24: true});


$(\'#clock_dc\').jClocksGMT({offset: \'+1\', hour24: true});


$(\'#clock_india\').jClocksGMT({offset: \'+5.5\'});


});


</script>'."\n";


if (function_exists('addJSToBody')) {


   addJSToBody($clockjs, 'inline');


} else {


   echo $clockjs;


}





include_once 'header.php';








OpenTable();





echo '<div id="clock_hou" class="clock_container">' , PHP_EOL


   , '<div class="lbl">Havana, CU, Cuba</div>' , PHP_EOL


   , '<div class="clockHolder">' , PHP_EOL


   , '<div class="rotatingWrapper"><img class="hour" src="modules/' , $module_name , '/images/clock_hour.png" alt="" /></div>' , PHP_EOL


   , '<div class="rotatingWrapper"><img class="min" src="modules/' , $module_name , '/images/clock_min.png" alt="" /></div>' , PHP_EOL


   , '<div class="rotatingWrapper"><img class="sec" src="modules/' , $module_name , '/images/clock_sec.png" alt="" /></div>' , PHP_EOL


   , '<img class="clock" src="modules/' , $module_name , '/images/clock_face.png" alt="" />' , PHP_EOL


   , '</div>' , PHP_EOL


   , '<div class="digital">' , PHP_EOL


   , '<span class="hr"></span><span class="minute"></span><span class="period"></span>' , PHP_EOL


   , '</div>' , PHP_EOL


   , '</div>' , PHP_EOL


   , '<div id="clock_dc" class="clock_container">' , PHP_EOL


   , '<div class="lbl">AMS, Amsterdam</div>' , PHP_EOL


   , '<div class="clockHolder">' , PHP_EOL


   , '<div class="rotatingWrapper"><img class="hour" src="modules/' , $module_name , '/images/clock_hour.png" alt="" /></div>' , PHP_EOL


   , '<div class="rotatingWrapper"><img class="min" src="modules/' , $module_name , '/images/clock_min.png" alt="" /></div>' , PHP_EOL


   , '<div class="rotatingWrapper"><img class="sec" src="modules/' , $module_name , '/images/clock_sec.png" alt="" /></div>' , PHP_EOL


   , '<img class="clock" src="modules/' , $module_name , '/images/clock_face.png" alt="" />' , PHP_EOL


   , '</div>' , PHP_EOL


   , '<div class="digital">' , PHP_EOL


   , '<span class="hr"></span><span class="minute"></span><span class="period"></span>' , PHP_EOL


   , '</div>' , PHP_EOL


   , '</div>' , PHP_EOL


   , '<div id="clock_india" class="clock_container">' , PHP_EOL


   , '<div class="lbl">New Delhi, India</div>' , PHP_EOL


   , '<div class="clockHolder">' , PHP_EOL


   , '<div class="rotatingWrapper"><img class="hour" src="modules/' , $module_name , '/images/clock_hour.png" alt="" /></div>' , PHP_EOL


   , '<div class="rotatingWrapper"><img class="min" src="modules/' , $module_name , '/images/clock_min.png" alt="" /></div>' , PHP_EOL


   , '<div class="rotatingWrapper"><img class="sec" src="modules/' , $module_name , '/images/clock_sec.png" alt="" /></div>' , PHP_EOL


   , '<img class="clock" src="modules/' , $module_name , '/images/clock_face.png" alt="" />' , PHP_EOL


   , '</div> ' , PHP_EOL


   , '<div class="digital">' , PHP_EOL


   , '<span class="hr"></span><span class="minute"></span><span class="period"></span>' , PHP_EOL


   , '</div>' , PHP_EOL


   , '</div>' , PHP_EOL;


CloseTable();





include_once 'footer.php';

Note: as you see it is already proof. It didn't work the first above. There is something maybe we need to change. so others can have new ideas to handle better jquery.js. I do not care people think. I care about improving and get better performance.

Posted: Thu Nov 06, 2014 4:09 pm

nothing is ok: [ Only registered users can see links on this board! Get registered or login! ]

Wink

Please note: you are trying to publish a solution that will only work for you. Stop this s**t to think that all what are you doing is the best way for all. In this case you are totally wrong and you would brick all. So do it on your page as you like please..... don't think that is a solution for all.

BTW the music on your player is very ugly. Try some good stuff from here: [ Only registered users can see links on this board! Get registered or login! ]

... and again please stop it, thanks!

ROTFL

Posted: Fri Nov 07, 2014 12:55 am

Neralex: I just put something to remember on that music module but try now again and you will see what is really a nice once. I can not dance with your boring music Confused

. Everything the same rithm.

I'm very sure u will dance with this one i put. Check this out. I'm happy this module is working fine Very Happy

[ Only registered users can see links on this board! Get registered or login! ]

Posted: Fri Nov 07, 2014 2:39 am

I don't try it, because i have a better one with real live streams, track history, current stream-title scrollers - updated all few seconds in a html5 environment.
[ Only registered users can see links on this board! Get registered or login! ]

Dance-Y

Posted: Fri Nov 07, 2014 2:45 am

Here I am again with good news for everybody. After testing so much. I got the solution with just a simple old fashion trick because we do need to load jquery.js first. Here we go!! Now any module will work properly without having any issue.

Open FTP and go to includes/custom_files/

Create a file named custom-footer.php

Code:




<?php


    global $ThemeSel, $user, $admin;


        if (file_exists('modules/' . $module_name . '/js/jquery.min.js')) {


      addJSToBody('includes/jquery/jquery.js', 'file');


   }

As you see this piece of code is easy to understand but then u need to call custom-files.php in every module. if you are gonna use jquery.

I open my module/modules/Master_Clock/index.php

Code:

   if (file_exists(NUKE_INCLUDE_DIR . 'custom_files/custom-footer.php')) {


      include_once NUKE_INCLUDE_DIR . 'custom_files/custom-footer.php';


   }

Finally everything is working now. Even the Gallery from Neralex! This issue has been solved!!! If you have any other solution then I will be happy to hear from you. Very Happy

Now I realized why neralex has been remove that picture!! lol

Posted: Fri Nov 07, 2014 2:52 am

nothing is ok: [ Only registered users can see links on this board! Get registered or login! ]

please note: i don't call a custom file in every module! why should i do this so complicated?

Posted: Fri Nov 07, 2014 2:53 am

Everything is ok neralex!!

Code:

<?php


    global $ThemeSel, $user, $admin;


//    echo '<script type="text/javascript" src="includes/jquery/browserdetect.js"></script>' . PHP_EOL;


        if (file_exists('modules/' . $module_name . '/js/jquery.min.js')) {


      addJSToBody('includes/jquery/jquery.js', 'file');


   }

Posted: Fri Nov 07, 2014 2:58 am

No isn't okay. Open the gallery and check it with the source code viewer of your browser and you will see that all the jquery code of the gallery is loaded before you are call the jquery.js. The whole gallery isn't working. No tooltips, no slider, no colorbox... nothing of all is working.
[ Only registered users can see links on this board! Get registered or login! ]

BTW i'm out here on this thread because its boring to show you everytime your fails. Good luck!

Posted: Fri Nov 07, 2014 3:09 am

GOOD NEWS!!!!

After Checking my trick above I realized I went too far trying to be focus on my modules but I corrected my mistake. Here we go!!!!

Code:




<?php


    global $ThemeSel, $user, $admin;


        if (file_exists('includes/jquery/jquery.js')) {


      addJSToBody('includes/jquery/jquery.js', 'file');


   }

As you see the slider is working fine again.The Gallery is working fine and everything works smooth again. Very Happy