PDA

View Full Version : Change Javascript to react to class="active"



rekkette
11-13-2013, 06:18 AM
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:

<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:


<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>

rekkette
11-13-2013, 03:33 PM
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:

// 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:


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!

rekkette
11-14-2013, 01:48 AM
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.

Deadweight
11-14-2013, 11:59 AM
I will get back to you on this unless someone else fixes your problem. Im currently at work.