Welcome to WebmasterWorld Guest from 54.145.208.64

Forum Moderators: open

Message Too Old, No Replies

Add Current Element's Class To Another Element

$('header').addClass($(this).attr('class')

   
3:04 pm on Sep 17, 2011 (gmt 0)



Hello...
I'm trying to get my navigation links to change the css background of another element with jquery.
[flcbranson.org...]
html code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Faith Life Church - Branson, MO</title>
<script src="include/jquery-1.6.4.min.js"></script>
<script>
// changes <header> background when mouseover <ul class="inheader"><li>
$('.inheader li').hover(
function(){$('header').addClass($(this).attr('class'))},
function(){$('header').removeClass($(this).attr('class'))}
)
</script>
<style type="text/css" media="screen">
header {background-image:url(images/backgrounds/header-flcbranson.jpg)}
</style>
</head>
<body role="document">
<header role="banner">
<h1><a href="http://www.flcbranson.org">Faith Life Church</a></h1>
</header>
<nav role="navigation">
<h2>Main site navigation</h2>
<ul class="inheader">
<li class="joinusonline"><a href="flconlineservices.php">Join Us On-Line</a></li>
<li class="areainformation"><a href="flcareainfo.php">Area Information</a></li>
<li class="flcevents"><a href="flcevents.php"><abbr title="Faith Life Church">FLC</abbr> Events</a></li>
<li class="freedownloads"><a href="freedownloads.php">Free Downloads</a></li>
</ul>
</nav>
<section id="content" role="main">
<h1 id="title">Welcome</h1>
</section>
</body>
</html>

css code:

header {background:#003366 url() no-repeat center top;}
header.joinusonline {background-image:url(../images/backgrounds/header-joinusonline.jpg)}
header.areainformation {background-image:url(../images/backgrounds/header-areainformation.jpg)}
header.flcevents {background-image:url(../images/backgrounds/header-flcevents.jpg)}

Quite simply, mouseover <li class="joinusonline"> and <header> should become <header class="joinusonline">. Mouseout and it goes back to <header>.
JJ
4:52 pm on Sep 18, 2011 (gmt 0)

WebmasterWorld Senior Member jab_creations is a WebmasterWorld Top Contributor of All Time 10+ Year Member



You'll want to look in to classList which is intended for working with multiple classNames on the same element like items in a JavaScript array. It's support is moderately decent though of course it's not even been added to Internet Explorer 10 (yet at least). If you want really good cross-browser compatibility you'll need to reference the className property (e.g. alert(document.getElementById('my_id').className);) and use the split method on space characters to create an array of the classNames.

Also ditch jQuery (and stay away from frameworks altogether) if you want to code real JavaScript, it uses unreliable proprietary methods such as innerHTML, it adds horrible amounts of overhead, everything you code is dependent on it not being poorly written, it's not cross-browser compatible, etc.

- John
6:20 am on Sep 19, 2011 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



<header role="banner">


Is header is a valid HTML tag ? The browser may well just dump it. Try using div instead say.

<div id="myHeader" >
2:50 pm on Sep 19, 2011 (gmt 0)



It's valid html5.
JJ
6:25 am on Sep 20, 2011 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



Ok if all your users are using IE 9 or similar. Otherwise stick to html4.
1:57 pm on Sep 20, 2011 (gmt 0)



Some guys at stackoverflow helped me to realize that the only thing I was missing was...

$(document).ready(function() {

So, the complete, working, code is...

// changes <header> background when mouseover <ul class="primarynavigation"><li>
$(document).ready(function() {
$('.primarynavigation li').hover(
function(){$('header').addClass(this.className)},
function(){$('header').removeClass(this.className)}
)
})