Importing a feature of phpFox to SocialEngine

Question

phpFox has released a theme named "Nebula" with the version 3.5.0. On this theme, there is button on the Header and the menu slides down when the user clicks the button. (Actually not a button, but a div)

I want to add this feature to SocialEngine. But JavaScript Code contains a phpFox variable and I don't know what it refers to. I am not so good at JavaScript.

HTML:

<div id="nb_features">
  <a href="#" id="nb_features_link">Features</a>
  <div id="nb_features_holder">
    Menu widget code will be added here...
  </div>                                
</div>

JavaScript:

$Behavior.customNebula = function(){

    $('#nb_features_link').click(function(){

        if ($(this).hasClass('nb_is_clicked')) {
            $(this).removeClass('nb_is_clicked');
            $('#nb_features_holder').slideUp('fast');
        } else {
            $(this).addClass('nb_is_clicked');
            $('#nb_features_holder').slideDown('fast');
        }

        return false;
    });
};

CSS:

#nb_features {
    position:absolute;
    top:0px;
    right:0px;
}

#nb_features_link,
#nb_features_link:hover {
    display:block;
    width:40px;
    height:40px;
    line-height:40px;   
    text-indent:-1000px;
    overflow:hidden;
    background:url(~/application/modules/Wonder/externals/images/nb_features_link.png') no-repeat;
    margin-top:-7px;
    margin-right:20px;
}

#nb_features_link:hover {
    background:#334d83 url(~/application/modules/Wonder/externals/images/nb_features_link.png') no-repeat;
}

#nb_features a.nb_is_clicked,
#nb_features a.nb_is_clicked:hover {
    background:#334d83 url(~/application/modules/Wonder/externals/images/nb_features_link.png') no-repeat;
}

#nb_features_holder {
    position:absolute;
    background:#4f4f4f;
    right:0px;
    width:980px;    
    border:1px #304779 solid;
    border-top:0px;
    display:none;
    margin-top:20px;
}

#nb_features_holder ul li a,
#nb_features_holder ul li a:hover {
    float:left;
    color:#fff;
    height:30px;
    line-height:30px;
    padding:0px 10px 0px 10px;
    text-decoration:none;
}

#nb_features_holder ul li a.menu_is_selected,
#nb_features_holder ul li a.menu_is_selected:hover {
    background:#009AEF;
    color:#fff;
}

#nb_features_holder ul li a:hover {
    background:#2F2F2F;
    -webkit-transition: all 0.50s ease;
    -moz-transition: all 0.50s ease;
    -o-transition: all 0.50s ease;      
}

What should I do to make this code work with SocialEngine?

score 0 · Accepted Answer · answered Mar 28 '13 at 23:26

0

Well the $Behavior namespace is a wrapper for the onLoad event, is this the js variable you were talking about? If it is you can replace it for the more conventional jquery/mootools/etc way and it would probably work although you would have to match the selectors properly, dont know if the code you posted is everything you need

answered Mar 28 '13 at 23:26

Purefan

1,498
24
44

This is the code that works on phpFox. I just need to know what changes should be done to make this code work on SocialEngine. When I apply this as a widget, I get this error on Chrome Debug: Uncaught ReferenceError: $Behavior is not defined – Hüseyin Dursun Mar 29 '13 at 06:02
Yes, that is what I was talking about, try replacing $Behavior with the normal document.ready handler, I dont know if Social Engine uses JQuery but if it does this should help http://api.jquery.com/ready/ – Purefan Mar 29 '13 at 07:51

Importing a feature of phpFox to SocialEngine

1 Answers1