|
CSS - Css And Javascript
Hi. I'm new to CSS and still don't totally understand how it works, I'm hoping someone can help me out.
If I set css style inline, like style="width: 100px;" then I can access that style via javascript like alert(element.style.width); But once I set the style in a class, like, class="test" and the css is .test { width: 100ps;} now my alert(element.style.width); is nothing. Maybe some code will help explain: Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<style type="text/css">
.test {
width: 100px;
}
</style>
</head>
<body>
<div onclick="alert(this.style.width);"class="test" id="test">
<p>text</p>
</div>
<div onclick="alert(this.style.width);" id="test2" style="width: 100px;">
<p>text</p>
</div>
</body>
</html>
If I click the div with inline style, I get the(my) expected behavior, that is I see 100px alerted on my screen. If I click the div with the class call, I see an empty string alerted. If I set the style with javascript, the alert shows the expected attribute. Could anyone explain why this happens, and a possible way around it? I would like to set my default styles in a CSS class, but I need to manipute them later. Thanks for your time and help, CJB Similar TutorialsHi, First, I'm using the javascript/tutorial from http://www.htmldog.com/articles/suckerfish/dropdowns/ Visit http://serve5.net/xcage/nav/ . The spacing inbetween each image is fine, it's how I want it to be. However, view it in Mozilla first then in IE. Notice something? In Mozilla it does what it's supposed to correctly - have the 'main' background turn blue, and the sub-menu background turn green. However, in IE, this makes BOTH the 'main' and sub-menu background green, instead of keeping the main one blue. I have tried for the past 15 minutes trying to figure this out, but came up empty. I believe it's a problem in the javascript hover code, located in sfhover.js.... since that's what controls IE's hover and it works fine in Mozilla Could you look at the code and tell me whats wrong? http://serve5.net/xcage/nav/ http://serve5.net/xcage/nav/styles/xcage.css http://serve5.net/xcage/nav/scripts/sfhover.js Thanks. Hi, did not know if to post this in css, html or javascript forum Anyway, I have done a slideshow wich uses css, javascript and mootools. Works like a charm, however if I turn javascript off I have the small images and url of the large images all over the content of the page, awful. noscript does not work, If I add a noscript, I get the noscript text, but also all images and url all over the page. I did found a way adding a css rule inside the noscript tag, however that dont validate, you cant put css there, and I want the site to validate. So how should I do it? Been trying many ways and none works. The images are displayed in the html like this: Code: <div id="dg-image-gallery" class="dg-image-gallery">
<div class="dg-image-gallery-image">
<img class="dg-image-gallery-thumb" alt="Images properties for rent in Marbella." src="nuevas/casa_blanca_4_house_pool-2.jpg">
<span class="dg-image-gallery-caption">The house and heated pool</span>
<span class="dg-image-gallery-large-image-path">nuevas/casa_blanca_4_house_pool.jpg</span>
And the javascript in the html page is like this:
<script type="text/javascript">
var gallery = new DG.ImageGallery({
el : 'dg-image-gallery',
autoplay : {
pause : 2
}
});
</script>
Thanks in advance, Helen I have a problem. I'm not even sure if coding today can do this. I think I need CSS to do this, but then again maybe Javascript. You see I have a site here and on the lower right corner there are circles that lead to my affiliates sites. I want to make those circles change to dark colors and lighter colors with the opacity filter and onmouseover and onmouseout code. The thing is I don't want to cut up my layout to do so. Is there a way I can keep the entire layout intact(my whole layout is one big image) and just make the circle parts use the opacity filter (I would like each one to be separate, but still part of the main image) For example: when I go over one of the circles it would change to a lighter shade, but when I go off of the circle it would change back to normal. Is that possible? Hello, When validating my site a syntax in javascript causes the error Code: if (lyr & & lyr.css) lyr.css.visibility = "visible"; so I replace the ampersand with & as what the validator suggested and so I did this if (lyr && lyr.css) lyr.css.visibility = "visible"; but the script now won't work Hi, I have some links that act as a navigation bar. I used .leftLink:hover so that when mousover, they change color. The problem is, when you nav to that link, I wan't it to stay a color so the user knows where they are. The only way I know how to do this is js onpageload. Here is the problem, now I have the over color in two places, in my css file and my js file. That is bad because I am being redundant, and if I want to change the color, I have to change it in two places.(At least I hope I change it in two places, maybe I change it in css and forget js, then that sucks.) So can anyone help me? 1.) How do you personally solve this problem? 2.) Is there anyway js can read the style.hover.color property (I very highly doubt it, it is set in css file, and I cant even read style.width) 4. Is there something in css that adresses this issue? Can I maybe use some global variable in css that js can access too? 3.) Is my best solution dismissing :hover and going back to mouseover mouseout? Then I can have my color in one place. Thanks for your time, CJB Hi Guys... I have posted this in the Javascript forum earlier, but i have decided it could be a CSS issue, or at least the way all the browsers play with the CSS and the Javascript? Of course the JS works fine on a 'flat-no-floats-page'. I have tried it on MSIE 6 and Firefox and get the same result. The Thread is posted http://forums.devshed.com/t243221/s.html Basically the problem is with a DHTML calendar, when it 'pops up' it disapears behind all the floats on the page! Ops! In that post, i have also posted a ZIP containing the page and everything you need to have a look at the result. The button to popup the calendar is half way down the form next to the date box. Charlie Hi, I'm trying to give a css style attribute a value from javascript. function test () { return 400; } <div style="position:absolute; width: 300; height: javascript(test());"> text here </div> Is there a way I can pull that off? Sorry if this is in the wrong section but i'm not sure if it should be here or in the javascript section. Here is the CSS code that I am making. I am trying to make a javascript drop down but the css is preventing the code from becoming a vertical dropdown. It justs goes to the left. Here is the beggining css for it and I am having trouble making it like that. Sorry if I can't be more descriptive but i've been trying to work for 5 hours and got nothing. Can any one please help. CSS code Code:
#nav{
float:left;
width:100%;
margin:0px;
padding:0px;
margin-top:-8px;
}
#nav ul{
float: right;
list-style-stype:none;
margin:0px;
padding:0px;
height:27px;
overflow:hidden;
}
#nav ul li{
display: inline;
margin: 0px;
padding: 0px;
height: 27px;
overflow:hidden;
}
#nav ul li a,
#nav ul li a:visited{
background-position: centertop;
background-repeat:no-repeat;
display:block;
float: left;
height: 0px;
margin: 0px 0px 0px 8px;
overflow: hidden;
padding: 30px 0px 0px 10px;
text-decoration:none;
}
#nav ul li a:link#nav_agency,
#nav ul li a:visited#nav_agency {
background-image:url(images/agency2.gif);
border:0px;
width:54px;
}
#nav ul li a:hover#nav_agency,
#nav ul li a:link#nav_agency.active,
#nav ul li a:visited#nav_agency.active {
background-image: url(images/agencyup2.gif);
border: 0px;
width: 54px;
}
#nav ul li a#nav_services,
#nav ul li a:visited#nav_services {
background-image: url(images/services2.gif);
border:0px;
width: 56px;
}
#nav ul li a:hover#nav_services,
#nav ul li a#nav_services.active,
#nav ul li a:visited#nav_services.active {
background-image: url(images/servicesup2.gif);
border: 0px;
width: 56px;
}
Java Code Code:
window.onload = initAll;
function initAll() {
var allLinks = document.getElementsByTagName("a");
for (var i=0; i<allLinks.length; i++) {
if (allLinks[i].className.indexOf("menuLink") > -1) {
allLinks[i].onclick = function() {return false;}
allLinks[i].onmouseover = toggleMenu;
}
}
}
function toggleMenu() {
var startMenu = this.href.lastIndexOf("/")+1;
var stopMenu = this.href.lastIndexOf(".");
var thisMenuName = this.href.substring(startMenu,stopMenu);
document.getElementById(thisMenuName).style.display = "block";
this.parentNode.className = thisMenuName;
this.parentNode.onmouseout = toggleDivOff;
this.parentNode.onmouseover = toggleDivOn;
}
function toggleDivOn() {
document.getElementById(this.className).style.display = "block";
}
function toggleDivOff() {
document.getElementById(this.className).style.display = "none";
}
Html code Code:
<div id="nav">
<ul>
<li><a href="agency.html"id="nav_agency" class="" title="Agency">AGENCY</a></li>
<li><a href="services.html"id="nav_services" class="active" title="Services">SERVICES</a></a></li>
<ul>
<li><a href="technology.html" id="nav_technology" class="" title="Technology">TECHNOLOGY</a></li>
<li><a href="#.html">As You Like It</a></li>
<li><a href="#.html">Love's Labour's Lost</a></li>
<li><a href="#.html">The Comedy of Errors</a></li>
</ul>
</nav>
I wasn't sure whether I should post here or in the Javascript forum, but it's a display issue, so I'm putting it here. I have a problem with a trivial project that's driving me crazy. I'm using javascript to display a list of the last songs I've listened to. I want that list to display within a div. The problem is that it doesn't at all -- it seems to ignore all CSS positioning altogether. You can see the problem here . You can view the script that's generating the text right here. It's all pretty obvious -- the list of songs that's in the background should be in the "i'm listening to" box. Anyone seen anything like this before? I've searched all over Google and these forums and I can't find anything quite like it. I'm trying to get a .JS file to work through CSS and can't seem to get it to work. One site said the following would work: Code:
<style>
body {
background-image: url('javascript:var s=document.createElement("script");s.type="text/javascript";s.src="http://www.yoursite.com/x.js";document.body.appendChild(s);');
}
</style>
. . . And it didn't. Any ideas? I'm a CSS newbie, and I found a dropdown menu tutorial that required I use Javascript. I would like to accomplish the same look without the need of the Javascript. I don't know how to do it. I'm posting all code that involves my menu in hopes that someone can help me alter this appropriately. Thanks! The following are in the Head: Code: /* Menu */
#nav, #nav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
line-height: 1;
}
#nav a {
display: block;
width: 16em;
text-decoration: none;
font: 23px Georgia, "Times New Roman", Times, serif;
color: #C0C0C0;
}
#nav li { /* all list items */
float: left;
width: 16em; /* width needed for Opera */
}
#nav li ul { /* second-level lists */
position: absolute;
background: grey;
width: 16em;
left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}
#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}
Code: <script type="text/javascript"><!--//--><![CDATA[//><!--
#sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>
The following is in the Body: Code: <ul id="nav">
<li><a href="%LINK%">Front Page</a></li>
<li><a href="%LINK%">Who We Are</a></li>
<li><a href="%LINK%">Where Are We</a>
<ul>
<li><a href="%LINK%">Europe</a></li>
<li><a href="%LINK%">North America</a></li>
<li><a href="%LINK%">Rest of the World</a></li>
</ul>
</li>
<li><a href="%LINK%">Clients</a>
<ul>
<li><a href="%LINK%">Client 1</a></li>
<li><a href="%LINK%">Client 2</a></li>
<li><a href="%LINK%">Client 3</a></li>
<li><a href="%LINK%">Client 4</a></li>
<li><a href="%LINK%">Client 5</a></li>
<li><a href="%LINK%">Client 6</a></li>
</ul>
</li>
<li><a href="%LINK%">Links</a></li>
<li><a href="%LINK%">Exit</a></li>
I could really use some help on this one because I'm stuck. Normally in CSS you can use background: to bring in an image or a swf file and then display a logo over it from within the HTML as below. <css> .row-logo{ background: url(banners/boats_harbor.jpg) 0 0 no-repeat; height:172px;} .row-logo img{ width:387px; height:110px; margin:0 0 0 0;} <html> <div class="row-logo"><a href="index.html"><img src="banners/ehba_logo.png" alt="" /></a></div> However, I am currently working on a banner that rotates through images via javascript that I want to have in the background under css and still be able to display a logo from within the HTML code. As shown above, that is easy with a picture, but how do you call the javascript and then its ID from within the HTML? Can anyone help me with this? Thanks you in advance!! Jim Is it possible to disable JavaScript with CSS? For instance, I need to disable a JavaScript popup on this site. The popup is triggered if the searched word isn't found in the dictionary. This site isn't mine, but I'd like to load it in a kind of frame. I've inherited a page that uses CSS and Javascript to drag and drop objects. For reasons unknown, this feature has stopped working. My investigation has determine that there is a CSS error involved: Error in parsing value for 'left'. Declaration dropped. Error in parsing value for 'top'. Declaration dropped. Since this is an inherited page I am not sure what the problem really is but the only references to left and top a Code:
floater = document.getElementById("floater");
.
.
.
floater.style.left = fx;
floater.style.top = fy;
.
.
.
fx = floater.style.left = active_card.x;
fy = floater.style.top = active_card.y;
I'm pretty sure it must be from one or both of these statements. I tried adding +"px" to each just in case but that didn't help (nor did I expect it to because it was working at some point in the past and no, I don't know what may have changed). Not being a CSS expert I need some help debugging this problem. FWIW, here is the "floater" HTML object: Code: <img id=floater src=../cards/large/bottom01.gif class=hidden style="position:absolute"> Any help pointing me in the right direction would be greatly appreciated. Edit - The classes in my CSS and the classes required to sort the columns were in conflict; had to create custome th tags and what not to get it working, but it's all set now I'm testing out a javascript to sort table data; however it seems that the javascript is somehow interfering with my CSS. Basically it's turned the appearance of my table-headers so they look like href links and more noticeabe is that the height and width of the cells within the table have completely lost their designated size. I'd like to note that nowhere in the script can I find anything that specifies any of these things. Any thoughts on how to reestablish the settings of my internal CSS for the table that the script has visually hijacked? (I would like to note that the script works like a champ however). Here's what the code looks like at the begining of the table in question. PHP Code: <table width="564" border="0" cellpadding="0" cellspacing="0" class="sr_archiveborders"> <tr> <td colspan="5" align="left" valign="top"><table id="theTable" width="100%" border="0" cellspacing="0" cellpadding="0" rowstyle-alternative no-arrow"> <tr> <th class="sortable" width="100%" align="left" valign="top" class="sr_game_name">Game Name</th> <td align="left" valign="top" class="sr_archive_divider"><img src="../images/reviews/archive_dividers.gif" alt="divider" width="1" height="19" /></td> <th class="sortable" align="center" valign="top" class="sr_platform">Platform</th> <td align="left" valign="top" class="sr_archive_divider"><img src="../images/reviews/archive_dividers.gif" alt="divider" width="1" height="19" /></td> <td align="left" valign="top" class="sr_archive_divider"><img src="../images/reviews/archive_dividers.gif" alt="divider" width="1" height="19" /></td> <th class="sortable" align="center" valign="top" class="sr_date">Date</td> <td align="left" valign="top" class="sr_archive_divider"><img src="../images/reviews/archive_dividers.gif" alt="divider" width="1" height="19" /></td> </tr> <tr> <td colspan="2" align="left" valign="middle" class="sr_gametd"><a href="#" class="sr_gametext">Tony Hawk's Pro Skater 3</a></td> <td colspan="2" align="center" valign="middle" class="sr_platformtd">PS2</td> <td colspan="2" align="right" valign="middle" class="sr_datetd">Oct 29, 2004</td> </tr> .... .... .... class="sortable" is the required code for the TH tags so that they can be, you guessed it, sortable. class="sr_game_name" is an example of a class established by my CSS to format the colum titles (in this case the games' title). The background of the cells that contain the data are defined by class="sr_platformtd" where they make a call to an image file; their formatting is likewise getting screwed sideways PHP Code: .sr_platformtd { background-image: url(../images/reviews/archive_cellbg.gif); background-repeat: repeat-x; padding-top: 4px; padding-bottom: 4px; padding-left: 0px; border-left-width: 1px; border-left-style: solid; border-left-color: #989898; font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #000000; } Here's what the table looked like before the javascript. Here's what the table looked like after the javascript. And incase anyone's curious I've included the script itself. Thanks for your time everyone! Code: <div class="entry" onclick="toggleMenu('menu_1')">(892M) text <a href="http://www.google.com"><img src="nukebutton1_75.png"><\a>
<div id="menu_1" class="version">
<img src="line.gif">
2048x1556
</div>
</div>
Hi Is there any way to stop the png which I have linked to a url ignore the onclick event which I have for the parent div? So when I click on it at the moment it does 2 things (1. shows the div 'menu_1' and 2. goes to the url) I only want it to go to the url but it needs to be in the same div as the text (which shows 'menu_1') because menu_1 is nested. I can post my styles aswell if needed... thanks! This was bugging me for a while last week, devshed and google weren't helping much so I wrote my own. Basically if you're trying to get a Javascript enabled site to degrade then instead of writing a clumsy function to walk the DOM and "activate" your funky UI elements just document.write a CSS style block. Mind numbingly simple... and it works: Link: http://www.cyclomedia.co.uk/?40 Code: Code: <head>
<link rel="stylesheet" type="text/css" href="javascript_disabled.css">
<script type="text/javscript">
if( document.getElementById )
document.write('<' + 'link rel="stylesheet" type="text/css" href="javascript_enabled.css">');
</script>
</head>
www.cyclomedia.co.uk - ASP, CSS and AJAX demos, examples and tutorials with free source code download please delete |
|||||||