Welcome to WebmasterWorld Guest from 184.72.145.109

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)

Junior Member

joined:Feb 15, 2011
posts: 53
votes: 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 Sept 18, 2011 (gmt 0)

Senior Member from US 

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

joined:Aug 26, 2004
posts:3143
votes: 12


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 Sept 19, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Nov 3, 2005
posts:1585
votes: 0


<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 Sept 19, 2011 (gmt 0)

Junior Member

joined:Feb 15, 2011
posts: 53
votes: 0


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

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Nov 3, 2005
posts:1585
votes: 0


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

Junior Member

joined:Feb 15, 2011
posts: 53
votes: 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)}
)
})
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members