Advanced Search

Results 1 to 4 of 4

Thread: Change Javascript to react to class="active"

  1. #1
    Join Date
    Oct 2013
    Location
    nyc
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Change Javascript to react to class="active"

    I have some javascript that I'm using to highlight my menu items.
    I have included a bit of php so that I'll have an active class for when a menu item is selected (and is on the corresponding page).
    Since my Javascript uses a background image and an img tag in the foreground, I would like my Javascript to permanently show only the background image when it is class="active"

    Here is my HTML markup:
    HTML Code:
    			<a href="about.php" class="<?php echo is_current('about.php','active'); ?>">
                	<img class="fade" src="menu/images/menu_01.gif" width="170" height="40" style="background: url(menu/replacement/menu_01.png);"  alt="falls" />
                </a>
    Here is my Javascript:
    Code:
        <script type="text/javascript" src="js/jquery.js"></script>    
        <script type="text/javascript">
    
        (function ($) {
            $.fn.cross = function (options) {
                return this.each(function (i) { 
    
                    var $$ = $(this);
                    
    
                    var target = $$.css('backgroundImage').replace(/^url|[\(\)'"]/g, '');
    
    
                    $$.wrap('<span style="position: relative;"></span>')
    
                        .parent()
     
                        .prepend('<img>')
    
                        .find(':first-child')
    
                        .attr('src', target);
    
    
                    if ($.browser.msie || $.browser.mozilla) {
                        $$.css({
                            'position' : 'absolute', 
                            'left' : 0,
                            'background' : '',
                            'top' : this.offsetTop
                        });
                    } else if ($.browser.opera && $.browser.version < 9.5) {
                                            
                        $$.css({
                            'position' : 'absolute', 
                            'left' : 0,
                            'background' : '',
                            'top' : "0"
                        });
                    } else { 
                        $$.css({
                            'position' : 'absolute', 
                            'left' : 0,
                            'background' : ''
                        });
                    }
    
    
                    $$.hover(function () {
                        $$.stop().animate({
                            opacity: 0
                        }, 250);
                    }, function () {
                        $$.stop().animate({
                            opacity: 1
                        }, 250);
                    });
                });
            };
            
        })(jQuery);
    
        $(window).bind('load', function () {
            $('img.fade').cross();
        });
    </script>

  2. #2
    Join Date
    Oct 2013
    Location
    nyc
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    So... obviously I have never learned Javascript, and I am really trying to learn the syntax...
    Tell me if I'm on the right track with this, but I found this question http://jsfiddle.net/Vvg5F/4/

    I'm wondering if I can modify it.

    This is the original:
    Code:
    // Remove background image if #two clicked
    $('#two a').click(function(){
       // Remove background image if #two has class of .active
        if ( $("#two").hasClass("active") ) {
          $("#contentWrap").css("background","none")
        };
    });
    I'm not trying to remove the background image, but the foreground image. I also don't care about the "click" function, so would it be safe to add a bit of text that would be something like:
    Code:
        if ( $("a").hasClass("active") ) {
          $("#contentWrap").css("img","none")
        };
    });
    LAST, if I DID get the syntax right (doubtful) where would I put it within my original bit of Javascript code.

    Basically, with Javascript, I have no idea what the dollar signs mean or why they go where they do. I do alright with PHP because it's straight conditional statements and therefore just a matter of logic.
    Here, I'm lost... HELP!

  3. #3
    Join Date
    Oct 2013
    Location
    nyc
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    I posted a reply putting an extra snippet of code up, but I don't see it here. Does anyone have any good ideas? I can post again with my little guess but as I am NOT good with Javascript and don't really understand the syntax all that well, I thought someone here might be able to help. I don't know why my posts aren't going up.

    Question, again is --> I want the FOREGROUND image to NOT appear when the class is active.

  4. #4
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    275
    Thanks
    3
    Thanked 17 Times in 17 Posts

    Default

    I will get back to you on this unless someone else fixes your problem. Im currently at work.
    -DW [Deadweight]
    Resolving your thread: First Post: => EDIT => Lower right: => GO ADVANCED => Top Advance Editor drop down: => PREFIX:Resolved

Similar Threads

  1. Featured Content Glider - change "glide" to "fade" ?
    By dannyboy83 in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 03-10-2010, 05:18 PM
  2. javascript event alt tag change from &quot; to ""
    By rich1234 in forum JavaScript
    Replies: 1
    Last Post: 09-06-2009, 08:45 AM
  3. Replies: 1
    Last Post: 06-09-2009, 05:38 AM
  4. Retracting sidebars - need to change images for "on" and "off"
    By LaipplyQuickprint in forum Looking for such a script or service
    Replies: 0
    Last Post: 10-22-2007, 12:31 PM
  5. Dynamic Ajax Content Class="current" change
    By Monclee in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 09-06-2007, 04:55 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •