|
CSS - Attempt At Combobox (uses Javascript Too)
assuming it's called a combobox, one where you can type in a value or select one from a list. mostly found in MS products, the trick is to show the select box when the user clicks on the arrow and then copy the select items text into the text box. i had a much simpler version working using a select box under the text box using the z-index, but that didnt work in IE, as the IE browsers ignore z-index for the select box.
this attempt, part css, part javascript, almost works but firefox and netscape are far too eager with their onmouseout evens (i presume it counts as "leaving" a select box when the mouse "enters" an <option> block within it!) example and code here http://www.cyclomedia.co.uk/?32 so i might have to do some clever dom parsing, so that the select-box with z-index is served to non IE users and this version is served to IE users... hmm thoughts? Similar TutorialsHello, can anyone helpme ? i'm searching a command to change the combobox color... i mean, not the background or font.. something like the button (arrow button) ... does anyone know how to do it with CSS ?? thanks Hi, this is my first effort (which will be obvious when you look at it) at using divs and css instead of tables .. http: //pastie.org/935502 Two things that I have been unable to do at the moment are to make the text "Photographs by award winning film sound editor Michael Redbourn" a few pixel lower, and, I tried centering the container that holds the text, "Most pictures are available for sale as Cards, Matted Prints, Laminated Prints, Mounted Prints, Canvas Prints and Framed Prints" by using a spacer but it doesn't display correctly. The two images are here, http: //i42.tinypic.com/kb60q9.jpg and here, http: //i42.tinypic.com/20zqsmr.gif I'm sure you'll know how to replace the adsense banner with a placeholder. Any help with the above two things and also any criticm and hints would be much appreciated. Thanks, Michael 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 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. 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 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? 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 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 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>
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. 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? I need a space where the user can select from a large group of options, so I thought I'd use a <div> and have a link saying OPEN which would make the <div> visible (whereupon the user could select choices, then close the <div>) Problem is, I am not sure exactly how to do this. I can make the <div> with the id and everything, but I am not sure how to make the div visible from the initial page. Is it something like document.theDiv.style.visibility="visible"; How do I put that into a link that the user can click to show the div? I have an issue that occurs inconsistantly accross machines and is very difficult to recreate. I have a javascript flyout menu that sometimes causes various machines to hang when loading the CSS style sheet. I am open to any suggestions? lo wonder if anyone can help :S i got advice from this board on doing an iframe using javascript. but know i have a new problem: when i use the scrolling="auto" attribute you get both vertical and hrozontal scroll bars even tho only vertical are needed. i knew how to get rid of this using this inside the body tag : style="overflow-x: hidden;" and that worked but it doesnt now :S also i used this inside a css on my last website to change colours of the scroll bars : body { background-color: #666666; scrollbar-3dlight-color:#999999; scrollbar-arrow-color:#666666; scrollbar-base-color:#666666; scrollbar-darkshadow-color:#e2e2e2; scrollbar-face-color:#575757; scrollbar-highlight-color:#666666; SCROLLBAR-TRACK-COLOR: #656565; scrollbar-shadow-color:#666666 } but for some reason its not working now is it cus i used a javascript for the iframe??? Any help would be much appreciated N3cr0 |
|||||||