Too much jQuery causes Problems

Started by PS4DEV, January 15, 2012, 10:21:04 AM

Previous topic - Next topic

PS4DEV

Well , this is just more like a general Question about jQuery.
I want to create a theme that consists of a lot of jQuery Features - And heres the Problem:
Some previous used jQuery Features won´t work anymore, if i create new of them.
I know that you have to write the Functions at the bottom.. but that doesn´t solve the problem anyway

please help
thanks a alot

NanoSector

We can't help you without the needed info:

SMF version?
What's your code?
What did you do, before this started happening?
My Mods / Mod Builder - A tool to easily create mods / Blog
"I've heard from a reliable source that the Answer is 42. But, still no word on what the question is."

PS4DEV

SMF Version 2.0.2

In the Index.template.php
i created 2 functions with a jquery script: function template_bubbles() , function RecentPostBox()
and for the function template_menu() i used some jQuery too.

That worked fine for me, until i installed the mod "FancyBox for SMF" to have a nice jQuery effect for images.
Since that time the function template_bubbles() didn´t work anymore..


function template_menu()
{
   global $context, $settings, $options, $scripturl, $txt;

   echo '
       
      <div id="navigation-block">
      <h2>Menu</h2>
         <ul id="sliding-navigation">
         <div class="left_divider">';

   foreach ($context['menu_buttons'] as $act => $button)
   {
      echo '
            <li class="sliding-element" id="button_', $act, '">
               <a class="', $button['active_button'] ? 'active ' : '', 'firstlevel" href="', $button['href'], '"', isset($button['target']) ? ' target="' . $button['target'] . '"' : '', '>
                  <span class="', isset($button['is_last']) ? 'last ' : '', 'firstlevel">', $button['title'], '</span>
               </a>';

      echo '
            </li>';
   }

   echo '
         </ul>
      </div>
   </div>
   <script type="text/javascript" src="', $settings['default_theme_url'], '/scripts/sliding_effect.js"></script>';
}



function RecentPostBox()
{
global $context, $settings, $options, $txt, $scripturl, $modSettings, $event, $childbutton, $button, $sourcedir;

echo'
<!-- Recent Topics-->
    <div id="navigation-block-posts"><h2>Recent Posts</h2>';

echo'
    <div id="scroller_container" class="toggle">
        <div id="scroller">';

/*
Block: Recent posts with post preview
*/
if (file_exists($sourcedir .'/LGFBlocks.php')){

require_once($sourcedir .'/LGFBlocks.php');
recent_posts();

} elseif ($context['user']['is_admin'])  {
echo '';
}

echo '</div></div></div>
<script type="text/javascript" src="', $settings['default_theme_url'], '/scripts/jscroller-0.4.js" type="text/javascript"></script>
<script type="text/javascript">
     $(document).ready(function(){
     // Add Scroller Object
     $jScroller.add("#navigation-block","#scroller","up",3);
     // Start Autoscroller
     $jScroller.start();
     });
    </script>';

}



function template_bubbles()
{
global $settings, $scripturl, $modSettings, $context, $user, $txt;
echo '
    <div class="navigation" id="nav">';
               
if ($context['user']['is_logged'])
{
echo '
<div class="item user">
                    <img src="', $settings['default_images_url'], '/darkbubbles/bg_user.png" alt="" width="199" height="199" class="circle"/>
                    <a href="', $scripturl, '?action=profile;u=', $user['member']['id'], '" class="icon"></a>
                    <h2><span>', $context['user']['name'], '</span></h2>
                    <ul>
                        <li><a href="', $scripturl, '?action=profile;u=', $user['member']['id'], '">Profile</a></li>
                        <li><a href="', $scripturl, '?action=pm">', $txt['pm_short'] ,'</a></li>
                        <li><a href="', $scripturl, '?action=profile;area=forumprofile">',$txt['forumprofile'],'</a></li>
                    </ul>
                </div>';
}

                echo '
<div class="item home">
                    <img src="', $settings['default_images_url'], '/darkbubbles/bg_home.png" alt="" width="199" height="199" class="circle"/>
                    <a href="', $scripturl, '" class="icon"></a>
                    <h2>Home</h2>
                    <ul>
                        <li><a href="#">Portfolio</a></li>
                        <li><a href="#">Services</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </div>
                <div class="item shop">
                    <img src="', $settings['default_images_url'], '/darkbubbles/bg_shop.png" alt="" width="199" height="199" class="circle"/>
                    <a href="#" class="icon"></a>
                    <h2>Shop</h2>
                    <ul>
                        <li><a href="#">Catalogue</a></li>
                        <li><a href="#">Orders</a></li>
                        <li><a href="#">Offers</a></li>
                    </ul>
                </div>
                <div class="item camera">
                    <img src="', $settings['default_images_url'], '/darkbubbles/bg_camera.png" alt="" width="199" height="199" class="circle"/>
                    <a href="#" class="icon"></a>
                    <h2>Media</h2>
                    <ul>
                        <li><a href="#">Gallery</a></li>
                        <li><a href="#">Prints</a></li>
                        <li><a href="#">Submit</a></li>
                    </ul>
                </div>
                <div class="item fav">
                    <img src="', $settings['default_images_url'], '/darkbubbles/bg_fav.png" alt="" width="199" height="199" class="circle"/>
                    <a href="#" class="icon"></a>
                    <h2>Friends</h2>
                    <ul>
                        <li><a href="#">Social</a></li>
                        <li><a href="#">Support</a></li>
                        <li><a href="#">Comments</a></li>

                    </ul>
                </div>
            </div>';


echo '
<!-- The JavaScript -->
        <script type="text/javascript" src="', $settings['default_theme_url'], '/scripts/jquery.min.js"></script>
    <script type="text/javascript" src="', $settings['default_theme_url'], '/scripts/jquery.easing.1.3.js"></script>
        <script type="text/javascript">
            $(function() {
                $("#nav > div").hover(
                function () {
                    var $this = $(this);
                    $this.find("img").stop().animate({
                        "width"     :"199px",
                        "height"    :"199px",
                        "top"       :"-25px",
                        "left"      :"-25px",
                        "opacity"   :"1.0"
                    },500,"easeOutBack",function(){
                        $(this).parent().find("ul").fadeIn(700);
                    });

                    $this.find("a:first,h2").addClass("active");
                },
                function () {
                    var $this = $(this);
                    $this.find("ul").fadeOut(500);
                    $this.find("img").stop().animate({
                        "width"     :"52px",
                        "height"    :"52px",
                        "top"       :"0px",
                        "left"      :"0px",
                        "opacity"   :"0.1"
                    },5000,"easeOutBack");

                    $this.find("a:first,h2").removeClass("active");
                }
            );
            });
        </script>';
}

NanoSector

Quote from: PS4DEV on January 15, 2012, 10:47:25 AM
SMF Version 2.0.2

In the Index.template.php
i created 2 functions with a jquery script: function template_bubbles() , function RecentPostBox()
and for the function template_menu() i used some jQuery too.

That worked fine for me, until i installed the mod "FancyBox for SMF" to have a nice jQuery effect for images.
Since that time the function template_bubbles() didn´t work anymore..


function template_menu()
{
   global $context, $settings, $options, $scripturl, $txt;

   echo '
       
      <div id="navigation-block">
      <h2>Menu</h2>
         <ul id="sliding-navigation">
         <div class="left_divider">';

   foreach ($context['menu_buttons'] as $act => $button)
   {
      echo '
            <li class="sliding-element" id="button_', $act, '">
               <a class="', $button['active_button'] ? 'active ' : '', 'firstlevel" href="', $button['href'], '"', isset($button['target']) ? ' target="' . $button['target'] . '"' : '', '>
                  <span class="', isset($button['is_last']) ? 'last ' : '', 'firstlevel">', $button['title'], '</span>
               </a>';

      echo '
            </li>';
   }

   echo '
         </ul>
      </div>
   </div>
   <script type="text/javascript" src="', $settings['default_theme_url'], '/scripts/sliding_effect.js"></script>';
}



function RecentPostBox()
{
global $context, $settings, $options, $txt, $scripturl, $modSettings, $event, $childbutton, $button, $sourcedir;

echo'
<!-- Recent Topics-->
    <div id="navigation-block-posts"><h2>Recent Posts</h2>';

echo'
    <div id="scroller_container" class="toggle">
        <div id="scroller">';

/*
Block: Recent posts with post preview
*/
if (file_exists($sourcedir .'/LGFBlocks.php')){

require_once($sourcedir .'/LGFBlocks.php');
recent_posts();

} elseif ($context['user']['is_admin'])  {
echo '';
}

echo '</div></div></div>
<script type="text/javascript" src="', $settings['default_theme_url'], '/scripts/jscroller-0.4.js" type="text/javascript"></script>
<script type="text/javascript">
     $(document).ready(function(){
     // Add Scroller Object
     $jScroller.add("#navigation-block","#scroller","up",3);
     // Start Autoscroller
     $jScroller.start();
     });
    </script>';

}



function template_bubbles()
{
global $settings, $scripturl, $modSettings, $context, $user, $txt;
echo '
    <div class="navigation" id="nav">';
               
if ($context['user']['is_logged'])
{
echo '
<div class="item user">
                    <img src="', $settings['default_images_url'], '/darkbubbles/bg_user.png" alt="" width="199" height="199" class="circle"/>
                    <a href="', $scripturl, '?action=profile;u=', $user['member']['id'], '" class="icon"></a>
                    <h2><span>', $context['user']['name'], '</span></h2>
                    <ul>
                        <li><a href="', $scripturl, '?action=profile;u=', $user['member']['id'], '">Profile</a></li>
                        <li><a href="', $scripturl, '?action=pm">', $txt['pm_short'] ,'</a></li>
                        <li><a href="', $scripturl, '?action=profile;area=forumprofile">',$txt['forumprofile'],'</a></li>
                    </ul>
                </div>';
}

                echo '
<div class="item home">
                    <img src="', $settings['default_images_url'], '/darkbubbles/bg_home.png" alt="" width="199" height="199" class="circle"/>
                    <a href="', $scripturl, '" class="icon"></a>
                    <h2>Home</h2>
                    <ul>
                        <li><a href="#">Portfolio</a></li>
                        <li><a href="#">Services</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </div>
                <div class="item shop">
                    <img src="', $settings['default_images_url'], '/darkbubbles/bg_shop.png" alt="" width="199" height="199" class="circle"/>
                    <a href="#" class="icon"></a>
                    <h2>Shop</h2>
                    <ul>
                        <li><a href="#">Catalogue</a></li>
                        <li><a href="#">Orders</a></li>
                        <li><a href="#">Offers</a></li>
                    </ul>
                </div>
                <div class="item camera">
                    <img src="', $settings['default_images_url'], '/darkbubbles/bg_camera.png" alt="" width="199" height="199" class="circle"/>
                    <a href="#" class="icon"></a>
                    <h2>Media</h2>
                    <ul>
                        <li><a href="#">Gallery</a></li>
                        <li><a href="#">Prints</a></li>
                        <li><a href="#">Submit</a></li>
                    </ul>
                </div>
                <div class="item fav">
                    <img src="', $settings['default_images_url'], '/darkbubbles/bg_fav.png" alt="" width="199" height="199" class="circle"/>
                    <a href="#" class="icon"></a>
                    <h2>Friends</h2>
                    <ul>
                        <li><a href="#">Social</a></li>
                        <li><a href="#">Support</a></li>
                        <li><a href="#">Comments</a></li>

                    </ul>
                </div>
            </div>';


echo '
<!-- The JavaScript -->
        <script type="text/javascript" src="', $settings['default_theme_url'], '/scripts/jquery.min.js"></script>
    <script type="text/javascript" src="', $settings['default_theme_url'], '/scripts/jquery.easing.1.3.js"></script>
        <script type="text/javascript">
            $(function() {
                $("#nav > div").hover(
                function () {
                    var $this = $(this);
                    $this.find("img").stop().animate({
                        "width"     :"199px",
                        "height"    :"199px",
                        "top"       :"-25px",
                        "left"      :"-25px",
                        "opacity"   :"1.0"
                    },500,"easeOutBack",function(){
                        $(this).parent().find("ul").fadeIn(700);
                    });

                    $this.find("a:first,h2").addClass("active");
                },
                function () {
                    var $this = $(this);
                    $this.find("ul").fadeOut(500);
                    $this.find("img").stop().animate({
                        "width"     :"52px",
                        "height"    :"52px",
                        "top"       :"0px",
                        "left"      :"0px",
                        "opacity"   :"0.1"
                    },5000,"easeOutBack");

                    $this.find("a:first,h2").removeClass("active");
                }
            );
            });
        </script>';
}

Does it work when you deinstall the mod?
Do you have any errors in your error log or on the page?
Have you run the page through the  W3C validator?

I'm sorry if the questions are killing you but it's unavoidable :P
My Mods / Mod Builder - A tool to easily create mods / Blog
"I've heard from a reliable source that the Answer is 42. But, still no word on what the question is."

The Craw

If you check the javascript error log in your browser, that should narrow it down the exact problem.

PS4DEV

i testet it with firebug... here is the problem:

f.easing[i.animatedProperties[this.prop]] is not a function

NanoSector

Soo, is this solved? Or do you need help fixing the error?
My Mods / Mod Builder - A tool to easily create mods / Blog
"I've heard from a reliable source that the Answer is 42. But, still no word on what the question is."

Bugo

I don't have any problems with 20+ jQuery mods those installed on my forum.

Simple solution. Just replace all
$(document).ready(function(){
with
jQuery(document).ready(function($){

That's all.

InfoStrides

I need your here. I implemented 2 jQuery Tabs in my Simpleportal blocks as showed on the home page (http://www.theinfostrides.com) but when I click on any of the fisrt tab, second tab collapse. What can I do?

Advertisement: