|
CSS - Calling Javascript From Css
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 Similar Tutorialsis there a way of doing something like: css Code: Original - css Code .test{ width:auto; } .test2{ margin-right: .test width; }
??? thanks in advance. Hey guys, still learning CSS here. I came across an issue and I'm sure I saw a solution somewhere before but can't for the life of me find out where it was. Basically I'm thinking of variables. I want .: Link :. but do not want to use formatting for the symbols each time, as they are a different color. Is there any way I can preset each side so I can call them into a text line? i have been using the website tonight program on godaddy.COM i would like to change the background to a personal picture i have. when i called they told me they had no idea how to do it but it might have something to do with the css and to view the advanced css option here is what i found : Code: /*----------------------------------
Theme411_Clean_Slate
Cat Generic
----------------------------------*/
body {
font-family: "Times New Roman", Times, FreeSerif, serif;
}
.sf_outer_wrapper {
}
.sf_extra1 {
}
.sf_wrapper {
}
/*--------------------------------
Top Navigation
---------------------------------*/
.sf_navigation_top {
display: none;
}
.sf_navigation_top ul{
}
.sf_navigation_top ul:after{
}
.sf_navigation_top ul li {
}
.sf_navigation_top ul li.sf_last_nav_item{
}
.sf_navigation_top ul li.sf_first_nav_item{
}
.sf_navigation_top ul li a {
}
.sf_navigation_top ul li a:visited {
}
.sf_navigation_top ul li a:hover {
}
/*--------------------------------
End Top Navigation
---------------------------------*/
.sf_extra10 {
}
/*--------------------------------
Header
---------------------------------*/
.sf_header_wrapper {
}
.sf_extra2 {
}
.sf_main_header {
}
.sf_extra3 {
}
.sf_sub_header {
}
/*--------------------------
End Header
--------------------------*/
.sf_extra4 {
}
/*--------------------------------
Bottom Navigation
---------------------------------*/
/**
* @section navigation
*/
.sf_navigation {
padding:0;
margin: 0;
}
.sf_navigation ul {
height: auto !important;
height: 9%;
list-style-type:disc;
margin:0;
padding:0 0 0 30px;
width: 900px;
}
.sf_navigation ul li {
margin:5;
padding:0;
width:200px;
}
.sf_navigation ul li a {
display:block;
margin: 0;
padding:0;
text-decoration: none;
width:175px;
}
.sf_navigation ul li a:hover {
text-decoration:underline;
}
/**
* @section subnav
*/
.sf_navigation ul.subnav {
background:#ffffff;
left: -999em;
list-style-type:none;
margin:-1.12em 0 0 160px;
padding:0;
position: absolute;
float: left;
width: 170px;
z-index:1000;
}
.sf_navigation ul.subnav li {
float: left;
width: 170px;
margin:0;
padding:3;
}
.sf_navigation ul.subnav li a {
width: 170px;
display: block;
padding:2px 0;
margin: 2;
background-image:none;
}
.sf_navigation ul.subnav li a {
text-decoration:none;
}
.sf_navigation ul.subnav li a:hover {
background:#f1f1f1;
text-decoration:underline;
}
#Nav1 li:hover ul,
#Nav1 li.sfhover ul {
left: auto;
}
#Nav1 iframe {
position: absolute;
left: 4;
top: 3;
z-index: 0;
filter: progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0);
}
#Nav1 li:hover, #Nav1 li.hover {
position: static;
}
/*--------------------------------
End Bottom Navigation
---------------------------------*/
.sf_extra5 {
clear:none !important;
clear:left;
}
/*--------------------------------
Page Title
---------------------------------*/
.sf_pagetitle {
color: 000000 ;
}
/*--------------------------------
End Page Title
---------------------------------*/
.sf_extra6 {
}
.sf_extra11 {
}
/*--------------------------
Content
--------------------------*/
.sf_content {
}
.sf_content img {
}
/*--------------------------
End Content
--------------------------*/
.sf_extra12 {
}
.sf_extra7 {
}
/*--------------------------
Footer
--------------------------*/
.sf_footer {
clear: both;
}
/*--------------------------
End Footer
--------------------------*/
.sf_extra8 {
}
.sf_extra9 {
}
/*--------------------------
Extra Stuff
--------------------------*/
a:link {
}
a:visited {
}
a:hover {
}
.sf_banner {
margin: 40px auto 0 auto;
text-align: center;
}
.sf_banner a{
}
/**
* Sticking flyout menu bug
*
* @bugfix
* @affected ie7
* @css-for ie7
* @valid yes
*/
#Nav1 li:hover, #Nav1 li.hover {
position: static;
}
PLEASE HELP ME WHAT DO I DO TO CHANGE MY BACKGROUND TO A PERSONAL PICTURE I HAVE Hi, 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 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 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? 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 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 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? 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'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>
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? Is there a way to change the value of the display property using CSS rather than JavaScript on the client side? Having read some of the posts in this forum, plus some other websites. With the over-lay capability of divisions could they be used for an expanding menu to show more links? how about positioning, would it be relative to the menu it just came from? would each menu be there but turned off by using: visability:hidden; ? would this menu be possible? Normal View:- home area 1 area 2 area 3 area 51 When Hover over area 51:- home area area2 area 3 area 51 vessel technology morgue artifacts 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. |
|||||||