|
CSS - Jscript Css Class Swap Buggy ?
Hi -
I have the following classes defined in a a linked stylesheet... .side{background-image: url(images/wds_side_panel.jpg); background-position: bottom; background-repeat: no-repeat; padding-left:65px; padding-top: 20px; padding-right:24px; padding-bottom:29px; } .side_over{background-image: url(images/wds_side_panel_over.jpg); background-position: bottom; background-repeat: no-repeat; padding-left:65px; padding-top: 20px; padding-right:24px; padding-bottom:29px; } and am swapping them with an 'onMouseOver' that is within a TD I have on my page, thusly: <td class="side" onMouseDown="window.location='news.html';" onMouseOver="document.body.style.cursor='pointer'; this.className='side_over';" onMouseOut="document.body.style.cursor='default'; this.className='side';" > <a href="news.html">News</a></td> The client has reported that when putting the mouse over the td, the page behaves erratically, and the roll-over background image doesnt always appear.. Is this the best way to achieve what I want here ? Might I need to preload the image in the 2nd class? an example page of the above is: http://www.rc23.com/wds_beta/aboutwds.html Any help would be greatly appreciated. Thank you all . Mike. Similar TutorialsHi all, Just a quicky, you can view at: http://www.wellandpower.net The problem is it doesnt all display in IE. it DOES display in IE when if you shrink the IE window or your screen is at low res. It ALWAYS displays in FF.07 ok. Charlie I'm having problems with a navigation system I'm trying to build, it is fairly simple, Mouse over, menu drops down. right side of drop down there are several categories. hover over them and 4 options show up on the left side, and image updates to the correct image. works great, problem is when you try to roll back over to another option on the right, it stays where it was, there is no update for your mouse actions. Does anyone have an idea how this could be fixed? Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function showElement(aaa)
{
document.getElementById(aaa).style.display="block";
}
function hideElement(aaa)
{
document.getElementById(aaa).style.display="none";
}
function showDDBoat(aaa)
{
document.getElementById(aaa).style.zIndex="100";
}
function hideDDBoat(aaa)
{
document.getElementById(aaa).style.zIndex="90";
}
</script>
<style type="text/css">
#dd1 { position:absolute; top:70px; left:15px; display:none; }
#dd2 { position:absolute; top:70px; left:100px; display:none; }
/* -------------------------------------------------------------------------
*/
#boatsNav {position:absolute; top:45px; left:220px;}
#boatsNav a.bnav,
#boatsNav a.bnav:link,
#boatsNav a.bnav:visited,
#boatsNav .chosen { display:block; width:100px; height:25px;
background:none;
text-align:center;
text-decoration:none;
font-family:verdana, arial, sans-serif;
font-size:12px;
color:#fff;
line-height:25px;
overflow:hidden;
float:left;
}
#boatsNav a.bnav:hover {color:#fff; background:#000;}
#boatsNav a.bnav:active,
#boatsNav .chosen {color:#fff; background:#c00;}
/* -------------------------------------------------------------------------
*/
.bdd_dropdowns {background: url(http://www.dnpinteractive.com/temp/newbdd/images/dd_bg1.png) no-repeat bottom right; height:190px; width:313px; position:relative;}
/* -------------------------------------------------------------------------
*/
.bdd_boats {position:absolute; top:5px; right:0px;}
.bdd_boats a.subnav,
.bdd_boats a.subnav:link,
.bdd_boats a.subnav:visited {
display:block; width:100px; height:25px;
background:none;
border-bottom:1px solid #666;
padding:0 5px 0 0;
text-align:right;
text-decoration:none;
font-family:verdana, arial, sans-serif;
font-size:12px;
color:#fff;
line-height:25px;
overflow:hidden;
}
.bdd_boats a.subnav:hover {color:#fff; background:#000;}
/* -------------------------------------------------------------------------
*/
/* -------------------------------------------------------------------------
*/
.bdd_links {position:absolute; top:5px; left:6px; width:200px;}
.bdd_links a.ddlink,
.bdd_links a.ddlink:link,
.bdd_links a.ddlink:visited {
width:98px; height:20px;
background:#990000;
text-align:center;
text-decoration:none;
margin: 0 2px 2px 0;
font-family:verdana, arial, sans-serif;
font-size:10px;
color:#fff;
line-height:20px;
overflow:hidden;
float:left
}
.bdd_links .ddlink_OFF {
/*visibility:hidden; */
background:#000;
width:98px;
height:20px;
text-decoration:none;
margin: 0 2px 2px 0;
font-family:verdana, arial, sans-serif;
font-size:10px;
color:#000;
line-height:20px;
overflow:hidden;
float:left
}
.bdd_links a.ddlink:hover {color:#fff; background:#000;}
/* -------------------------------------------------------------------------
*/
</style>
</head>
<body>
<div id="boatsNav">
<a class="bnav" href="#" title="page 1" onmouseover="showElement('dd1')" onmouseout="hideElement('dd1')" onmouseover="showDDBoat('boat1')">MONTAUK</a>
<a class="bnav" href="#" title="page 2" onmouseover="showElement('dd2')" onmouseout="hideElement('dd2')">OUTRAGE</a>
<a class="bnav" href="#" title="page 3" onmouseover="showElement('dd3')" onmouseout="hideElement('dd3')">VENTURA</a>
</div>
<div class="bdd_dropdowns" id="dd1" onmouseover="showElement('dd1')" onmouseout="hideElement('dd1')" onmouseover="showDDBoat('boat1')">
<div class="bdd_links" id="boat1" onmouseover="showDDBoat('boat1')" >
<a class="ddlink" href="#">Custom Shop</a>
<a class="ddlink" href="#">Build Mine</a>
<a class="ddlink" href="#">Learn More</a>
<a class="ddlink" href="#">Deckplan</a>
<img src="http://www.dnpinteractive.com/temp/newbdd/images/dd_boat1.jpg" width="197" height="131" alt="boat1" />
</div>
<div class="bdd_links" id="boat2" onmouseover="showDDBoat('boat2')" >
<a class="ddlink" href="#">Custom Shop</a>
<a class="ddlink" href="#">Build Mine</a>
<a class="ddlink" href="#">Learn More</a>
<a class="ddlink" href="#">Deckplan</a>
<img src="http://www.dnpinteractive.com/temp/newbdd/images/dd_boat2.jpg" width="197" height="131" alt="boat2" />
</div>
<div class="bdd_links" id="boat3" onmouseover="showDDBoat('boat3')" >
<a class="ddlink" href="#">Custom Shop</a>
<a class="ddlink" href="#">Build Mine</a>
<a class="ddlink" href="#">Learn More</a>
<a class="ddlink" href="#">Deckplan</a>
<img src="http://www.dnpinteractive.com/temp/newbdd/images/dd_boat3.jpg" width="197" height="131" alt="boat3" />
</div>
<div class="bdd_boats">
<a class="subnav" href="#" onmouseover="showDDBoat('boat1')" onmouseout="hideDDBoat('boat1')">150 Montauk</a>
<a class="subnav" href="#" onmouseover="showDDBoat('boat2')" onmouseout="hideDDBoat('boat2')">160 Montauk</a>
<a class="subnav" href="#" onmouseover="showDDBoat('boat3')" onmouseout="hideDDBoat('boat3')">170 Montauk</a>
</div>
</div><!-- CLOSE class="dd1" -->
<div class="bdd_dropdowns" id="dd2" onmouseover="showElement('dd2')" onmouseout="hideElement('dd2')" onmouseover="showDDBoat('2boat1')">
<div class="bdd_links" id="2boat1" onmouseover="showDDBoat('2boat1')" >
<a class="ddlink" href="#">Custom Shop</a>
<a class="ddlink" href="#">Build Mine</a>
<a class="ddlink" href="#">Learn More</a>
<a class="ddlink" href="#">Deckplan</a>
<img src="http://www.dnpinteractive.com/temp/newbdd/images/dd_boat1.jpg" width="197" height="131" alt="boat1" />
</div>
<div class="bdd_links" id="2boat2" onmouseover="showDDBoat('2boat2')" >
<a class="ddlink" href="#">Custom Shop</a>
<a class="ddlink" href="#">Build Mine</a>
<a class="ddlink" href="#">Learn More</a>
<a class="ddlink" href="#">Deckplan</a>
<img src="http://www.dnpinteractive.com/temp/newbdd/images/dd_boat2.jpg" width="197" height="131" alt="2boat2" />
</div>
<div class="bdd_links" id="2boat3" onmouseover="showDDBoat('2boat3')" >
<a class="ddlink" href="#">Custom Shop</a>
<a class="ddlink" href="#">Build Mine</a>
<a class="ddlink" href="#">Learn More</a>
<a class="ddlink" href="#">Deckplan</a>
<img src="http://www.dnpinteractive.com/temp/newbdd/images/dd_boat3.jpg" width="197" height="131" alt="boat3" />
</div>
<div class="bdd_boats">
<a class="subnav" href="#" onmouseover="showDDBoat('2boat1')" onmouseout="hideDDBoat('2boat1')">150 Montauk</a>
<a class="subnav" href="#" onmouseover="showDDBoat('2boat2')" onmouseout="hideDDBoat('2boat2')">160 Montauk</a>
<a class="subnav" href="#" onmouseover="showDDBoat('2boat3')" onmouseout="hideDDBoat('2boat3')">170 Montauk</a>
</div>
</div><!-- CLOSE class="dd2" -->
<img id="placeholder_bg" src="http://www.dnpinteractive.com/temp/newbdd/images/placeholder_bg.jpg" height="424px" width="943px" alt="placeholder bg" />
</body>
</html>
I tried everything I can think of in Opera, and no matter what I try, when I focus on a link I get selected highlight on the text. Is there some CSS way of hiding the highlight? I've also posted in the JavaScript forum. Real odd one here. Take a look at http://www.moxiegirlz.com/?section=moxiegirlz Note that you can click on one of the characters at the bottom to see their info. But when you do so, the characters no longer get the "hand" pointer icon (in FF and Safari, haven't tested IE). I've tried applying cursor:pointer directly to the a tags, though one shouldn't need to, and still nada. Somehow, calling a jscript in the href is killing the hand pointer. Anyone know why? hey, I got a table, every <td> in the table got the css class .regular. (<td class='regular'>). When the user moves their mouse over a row, that row should change color. This works with the following code: <tr onmouseover='this.className=\"hoverRow\"'> However, this only works if the td's in that row have no class set yet. And since all td's in my table have a class set allready, i cant use this. How can i overwrite the class of the td's by the class for the whole row? thanks in advance Using the following example: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">
a
{
display: block;
}
a.one.on, a:hover.one, a:hover.one.on
{
color: red;
}
a.two.on, a:hover.two, a:hover.two.on
{
color: orange;
}
a.three.on, a:hover.three, a:hover.three.on
{
color: green;
}
</style>
</head>
<body>
<a href="#" class="one">one</a>
<a href="#" class="two">two</a>
<a href="#" class="three">three</a>
<p> </p>
<a href="#" class="one on">one</a>
<a href="#" class="two on">two</a>
<a href="#" class="three on">three</a>
</body>
</html>
Notice how, in IE6 (works fine in FF), when the secondary style named 'on' is added, all 3 links in the 2nd set display the properties of the style: Code: a.three.on, a:hover.three, a:hover.three.on
{
color: green;
}
(since it is last in the list) rather than the style specified by their respective numbers (i.e. 'one', 'two' or 'three'). Is there a way to overcome this in IE. Hi, I'm just learning CSS, so I'm not sure if it's possilble to do what I want. I have a menu created from a stylesheet. I'd like to have an image on the page (not on the menu bar) change when a menu item is hovered over. Is this possible? Thanks! Morning guys and girls, I am getting a headache trying to straighten this bug out and could really do with a fresh pair of eyes. The page is he www.BeeBee-Design.co.uk/dev. It works fine in IE6 ( ) but not FF ( ). The relevant piece of HTML is: Code:
<div class="navigation">
<ul>
<li class="navigation">
<a class="nav" href="index.html#">HOME</a></li>
<li class="navigation">
<a class="nav" href="index.html#">SERVICES</a></li>
<li class="navigation">
<a class="nav" href="index.html#">HOTELS</a></li>
<li class="navigation">
<a class="nav" href="index.html#">QUOTE</a></li>
<li class="navigation">
<a class="nav" href="index.html#">BOOK</a></li>
<li class="navigation">
<a class="nav" href="index.html#">CONTACT</a></li>
</ul>
</div>
And the CSS: Code:
div.navigation {
font-family: Arial;
font-weight: normal;
word-spacing: 10px;
padding: 0 40px 0 0;
margin-top: 120px;
line-height: 30px;
background-color: #9A9FBA;
text-align: center;
}
* html div.navigation {
word-spacing: -6px;
}
a.nav:link {color: #FFFFFF; text-decoration: none; background-image: url(images/navback.jpg); width: 117px; height: 30px;}
a.nav:visited {color: #FFFFFF; text-decoration: none; background-image: url(images/navback.jpg); width: 117px; height: 30px;}
a.nav:hover {color: #FFFFFF; text-decoration: none; background-image: url(images/rollover.jpg); width: 117px; height: 30px;}
li.navigation {
display: inline;
font-size: 18px;
font-weight: normal;
color: #FFFFFF;
}
The problem seems to be something to do with the way that IE will stretch the block to the width and height settings in the CSS and FF will not. Any suggestions greatly appreciated and will be rewarded with a packet of the finest Chocolate Digestives known to mankind. I thank you......... Hey everyone, I am wondering how Lufthansa http://www.lufthansa.com/ Put a mouseover table thingy on their page. On the top roll your mouse over "worldwide sites" and a little thing drops down. Does anyone have a script like that? Thanks for your help! Here is the webpage 1) Each of the globes as well as the text below is a link to other sites. Using css to change the image to the same globe - but not faded - do I have to have both images be a background image?? Currently the image is in the html. 2) Since each globe is different, then do I need to create a class for each one?? Thanks! I've read several forums and know that the technique I'm trying to achieve is possible, however I can't seem to get it to work. Basically I'm trying to shift the background positions of both the list item I'm hovering over and the next list item. I'm sure its just a syntax error and not a logic error, anyways the code is below - any help would be greatly appreciated! Code:
HTML Code
<div class="menu">
<ul>
<li><a href="#" class="search"></a></li>
<li><a href="#" class="battery"></a></li>
<li><a href="#" class="cart"></a></li>
<li><a href="#" class="contact"></a></li>
</ul>
</div>
CSS
.search, .contact, .cart, .battery
{
width:100px;
height:30px;
margin-left:-1px;
display:block;
}
.search
{
background-image:url(Images/search.png);
}
.contact
{
background-image:url(Images/contact.png);
}
.cart
{
background-image:url(Images/cart.png);
}
.battery
{
background-image:url(Images/battery.png);
}
ul li a.search:hover
{
background-position:0px 60px;
}
ul li a.search:hover ul li a[class=battery]
{
background-position:0px 60px;
}
Hey everyone. I'm trying to create a cool menu system for my site and I wanted it to be images only. Its he - http://www.how-to-pass.info/topf2.html I wanted this to have cool mouse over images, as well as displaying drop down menus. Unfortunately, there are two problems: 1. Mouseover images don't display 2. Drop down menu disapears when you move over the menus. Can anyone tell me how I can get this to work in a simple way? I dont much hardly anything about style sheets and javascript etc. Many Thanks. i have a rollover menu that i made with image in a row absolutly positioned. for each button the html code is <div class="art"> <a href="#"> <span class="marginoffset"> Link text here (end tags) and the css is .art {z-index:2;position: absolute; left: 55px; top:0px; display:block; width:600px; height:70px; background: no-repeat 0px 0px; text-indent: -55px; line-height: 14.5em; text-decoration:none; color:#000; font-size:11px; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: normal;} .art a {position: absolute;display:block; background:url(menuimg/btn.art_repro.jpg) no-repeat 0px 0px;line-height: 16.5em; text-align:left; text-decoration:none; text-wrapping: no-wrap; color:#999; font-size:0.7em;font-family: Verdana, Arial, Helvetica, sans-serif;} .art a:hover {position: absolute; background: url(menuimg/btn.art_repro_f2.jpg) no-repeat 0px 0px; line-height: 14.5em; text-align:left; text-decoration:none; color:#000; font-size:11px;font-family: Verdana, Arial, Helvetica, sans-serif;} .art a:active {position: absolute; background: url(menuimg/btn.art_repro_f3.jpg) no-repeat 0px 0px; line-height: 14.5em; text-align:left; text-decoration:none; color:#000; font-size:11px;font-family: Verdana, Arial, Helvetica, sans-serif;} . marginoffset ( position: relative; left: 0px; top:0px; Sorry for the lousy title, can't come up with better wording.... What I'm trying to say is can someone give me an example code of a css syntax that accept one css classname and add a few more properties to it under a different class name. Sort of like merging two classname into one. Thanks... So I want to create a really simple css file that uses a lot of the same styles. For example I may create a box that takes up two fifths of the page, and is floated left or right, similarly I may have a box that takes up three fifths, or four fifths etc. The main thing here is that I'm thinking the specifics will be placed inside an ID like so: Code:
#twoFifths {width:275px; padding: 0px 12px 0px 50px;}
#threeFifths {width:375px; padding: 0px 50px 0px 12px;}
And then to handle the float I'd use a class like so: Code:
.floatRight{float:right;}
.floatLeft{float:left;}
Is this considered good practice? Obviously as I generate layouts I may want to float either right or left so having an ID for every single thing I may want to use would be a little overwhelming. The problem with this of course is that I can't call an ID twice in a page, and I can't have more than one class... so for example: Code: <div id="templateBlueBox" class="floatRight"> <h2>Six free lessons</h2> <p>These free Lessons are great to read online or print out and carry with you.</p> </div> <div id="templateGreenBox" class="floatRight"> <h2>New Features</h2> <p>Some fun, helpful study tools to help you get more out of every Lesson. Check them out!</p> </div> <div id="templateOrangeBox" class="floatRight"> <h2>Sign up for email updates</h2> <p>So we can let you know when you can subscribe to get it every week.</p> </div> <div id="templatePinkBox" class="floatleft"> <h2>Send us feedback</h2> <p>Is it the coolest thing ever (or is it just okay)? Tell us what you think!</p> </div> <div id="templateBlueBox" class="floatLeft"> <h2>Submit photos</h2> <p> You can be part it..</p> </div> So as you can see I'm having to repeat the id templateBlueBox. Is there a better approach for accomplishing this? When defining css in a webpage, it can be done using either a class or id. My understanding is that css uses . notation with classes and # notation with id's, regardless of whether the actual css is in the webpage itself of linked externally. Please correct me in error. My css uses classes and external . notation. When I use id's only and # notation exernally, I lose all my styling. Its only when I use the # notation internally that the styling works. In order to use external css I need to declare both a class and id and dot notation. Internally only an id. Is this correct behaviour? In CSS, which would be more appropriate (or I suppose semantically correct) to use, p.text or .text p ? P representing the <p> tag, and "text" representing the class "text". Any info or links to pages with info on this matter would be greatly appreciated! Problem solved. Which is better to use id (#) in CSS or to use class (.) ?? does it affect website rank? I am new to CSS and confused about when to use id # and when to use class . Some enlightenment on the benefits/purpose of each would be helpful. I have read several tutorials - but the same pretty much the same to me so I must be missing something Thanks! |
|||||||