homepage Welcome to WebmasterWorld Guest from 54.242.200.172
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Add Current Element's Class To Another Element
$('header').addClass($(this).attr('class')
doubleJ




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

 

JAB Creations




msg:4364025
 4:52 pm on Sep 18, 2011 (gmt 0)

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

daveVk




msg:4364136
 6:20 am on Sep 19, 2011 (gmt 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" >

doubleJ




msg:4364262
 2:50 pm on Sep 19, 2011 (gmt 0)

It's valid html5.
JJ

daveVk




msg:4364654
 6:25 am on Sep 20, 2011 (gmt 0)

Ok if all your users are using IE 9 or similar. Otherwise stick to html4.

doubleJ




msg:4364766
 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)}
)
})

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved