|
CSS - Hiding Javascript And Css When Javascript Is Disabled
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 Similar TutorialsThis 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 Hi, if i test my website with javascript disabled i don't see any colors or styles(it automatically disables css too). i don't know if its normal or not?? i din't disable css rather i disabled javascript only. all suggestions and recommendations are most welcome. 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 folks. I am in the process of creating a feature in our Web application to allow users to create and manage a set of simple HTML email templates. At the bottom of my editor screen I show a preview of the formatted email (with the text and HTML entered into a textarea field). My problem is that when I output the preview to the Web page, it inherits all the styles from the parent page (for example an <h1> header has colors and special spacing, etc.). Is there a way to temporarily disable then re-enable the CSS styles defined in the header of the page so I can draw the "preview" with default browser CSS styles which will reflect more what an eMail program would look like? I am not sure if this can be done. If it could, it would be awesome and save me from having to code a special preview page or iFrame for the email template. Ok, don't blame me if this looks like a bad idea as it's not my code. I just have to make it work. Our navigation is basically a div that has a background which is three times the height of that div (and the background file contains different versions of each button or so I am told). Our code is below. We want to have a div behind the menu that will obviously show up if images are disabled but I can't get it working. Presumably because the nav div uses a background file and is not actually filled. Code: PHP Code: <div id="mainmenuText">text links to go below...</div> <div id="mainmenu"> <ul id="mainmenulist"> <li id="menu_homepage"><a href="index.php" title="Homepage" name="Homepage">Homepage</a></li> <li id="menu_apartments"><a href="apartments.php" title="Apartments" name="Apartments">Apartments</a></li> <li id="menu_villas"><a href="villas.php" title="Villas" name="Villas">Villas</a></li> <li id="menu_prices"><a href="prices.php" title="Price Matrix" name="Price Matrix">Price Matrix</a></li> <li id="menu_contact"><a href="contact.php" title="Contact Us" name="Contact Us">Contact Us</a></li> </ul> </div> CSS: PHP Code: #mainmenu { z-index:1000; height: 20px; background: transparent url("../images/layout/navigation.jpg") no-repeat top left; margin-left: 0px; } #mainmenuText { z-index:10; width:100%; height:100%; position:relative; top:10px; display:block; margin-left: 0px; } I am using a CSS with my forms, including setting the color and text font for the <INPUT> buttons. However, if the button is disabled, the colors revert to system default. I've tried but can't seem to set the color if the button is disabled. Is it even possible? Thanks, Hey - So I have a page with a disabled multiple select box, which is automatically populated with the relevant selected value. In Firefox, you can still see the value that's been automatically selected even though it's disabled. But in IE, you can't. Is there a way to make IE show that? Thanks in advance. Hi I have a page I am putting together and everything is fine until I take off js in ff. Then I get this small gap between the code thats would have gotten replaced by flash if js was enabled. Its right below the menu. If you could take a look at http://www.bostonredhat.com/menu.php with js enabled and with it disabled for me and let me know if you see any problems I am missing I would appreciate it. Thanks. This is a small thing, but it's kind of annoying. I'm using CSS to make some buttons on my site purty. And they are purty. The problem comes in when I set a buttons state to "disabled". IE o' so nicely makes the button "grayed out". Mozilla browsers do squat. Observe he http://www.drcwbt.com/codetests/disabledbutton.htm I was hoping I might be able to skirt around this problem with the pseudo class ":disabled" but it appears that this is too new still and nobody supports it. Any ideas on how to "gray out" in Mozilla? Is there a way to detect if the browser have disabled CSS? That way, I can redirect users to another page explaining that website won't function with his/her browser with disabled CSS. When a Text Input is disabled, is there a way to control the visual characteristics such that it's not as subdued, or use different colors for the text / background? I've searched and searched with no luck. Does anyone know if it is possible to set a style that would set all my disabled textboxs to a grey bg color, back to white on enabling. I know I can perform it through javascript. I'm just trying to do as much with styles as possible here. If someone could point me in the right direction I'd appreciate it. I only need it to work in IE6. Thanks Not sure if this is an HTML or CSS related question but here goes... googling gives me nothing. I have a form that I've built and on occasion one or two of the text fields may have text in side them but I've sent the text field to 'disabled' so that the user cannot change the information inside. The problem is is that some of my users are a little bit older and have a hard time seeing what is inside of the disabled text field because its already grayed out and the text inside is gray. Does anyone know if there is a way to change this or is it just a default with internet explorer? Thanks! hi im using a CSS drop down menu, when my browser is refreshed it becomes disabled/stopsworking. im using IE browser. i got the css drop down list script from the web. can someone help me please! Hello, So I have a page built that displays correctly in all modern browsers. However in IE6 the right floated div does not float right and throws the page off. If I could just hide the right and left columns from IE6 it would work fine. I have tried several bug fixes but nothing so far works. the page is : woodbuiltright com/ test2 php If it would layout correctly in IE6 with a fix/hack that would be great if not could I just make the right and left divs just not display? I even tried using some php to redirect IE6 to a different page. I guess I did not insert the php correctly because I could never get it to work. I would not even support IE6 but I know people who still use it...despite my recommendations. Just so you know, I have spent hours trying stuff before asking. Thanks! hi in Internet Explorer, this style works fine and when i print it prints the div and hides it on screen. however, in firefox, it does not hide the div on screen. can anyone help with this? many thanks Code: <style media="print">
.noPrint { display:none;}
.Hidden { display:inline;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
}
</style>
<style media="screen">
.Hidden { display:none;}
</style>
<div class="Hidden">Just an example of text in a div.<br /><br />Thank you</div>
</p>
<p><input type="button" value="Print this page" onclick="printpage()" /></p>
My name is Steven and I wanted to officially introduce myself and see if anyone could help me with a css issue. I have set the page up and upon checking an item, I want the page to show the form below. I was able to do that but either way it keeps the space where the form is which in fact, it should minimize and maximize the space upon clicking the check item. Instead, the area is still there. This seems to the only issue that I am unable to resolve and would greatly appreciate it if someone could help. I have listed the code below as well as attached the css and the page( If images are need, please let me know: Code: html, body {
padding: 0px;
margin: 0px;
background-color: #FFFFFF;
font-family:Arial, Helvetica, sans-serif;
}
#logo {
background: url(profileimages/logo.png) no-repeat;
position: absolute;
left: 6px;
top: 3px;
z-index: 4;
width: 92px;
height: 64px;
}
#congratulations {
position: absolute;
left: 22px;
top: 377px;
z-index: 3;
width: 914px;
height: 30px;
font-size:26px;
font-weight:bold;
color:#4fa700;
}
#toptext {
position: absolute;
left: 31px;
top: 85px;
z-index: 6;
width: 897px;
height: 16px;
font-size:16px;
font-weight:bold;
color:#1b1b1b;
}
#cartproduct,
#cartproductcopy {
position: absolute;
z-index: 2;
width: 268px;
height: 20px;
font-size:18px;
color:#272727;
}
#shippinginformation {
position: absolute;
left: 226px;
top: 421px;
z-index: 2;
width: 711px;
height: 31px;
font-weight:bold;
font-size:34px;
color:#272727;
}
#willbesecure {
position: absolute;
left: 83px;
top: 285px;
z-index: 3;
width: 315px;
height: 14px;
font-size:12px;
font-weight:bold;
color:#272727;
}
#foryourarea {
position: absolute;
left: 682px;
top: 257px;
z-index: 3;
width: 233px;
height: 14px;
font-size:11px;
color:#272727;
font-weight:bold;
}
.toplinksbar {
color:#006FD6;
text-decoration:none;
}
.toplinksites {
font: 12px/14px Arial;
margin: 0px;
color: #1B1B1B;
text-align: left;
text-decoration: underline;
}
#toplinks {
position: absolute;
left: 745px;
top: 25px;
z-index: 2;
width: 227px;
}
#item,
#qtyproductback {
background: url(profileimages/layer5copy12.gif) no-repeat;
position: absolute;
left: 11px;
z-index: 2;
width: 31px;
height: 25px;
}
#totalback,
#priceback {
background: url(profileimages/layer5copy9.gif) no-repeat;
position: absolute;
top: 156px;
z-index: 2;
width: 124px;
height: 25px;
}
#cartproductcopy {
top: 720px;
left: 262px;
}
#ourprice {
position: absolute;
left: 803px;
top: 190px;
z-index: 2;
width: 117px;
height: 28px;
font-size:12px;
font-weight:bold;
}
.ourpricepercent {
color:#43a000;
}
#securelock {
background: url(profileimages/id46vectorsmartobject.gif) no-repeat;
position: absolute;
left: 525px;
top: 875px;
z-index: 2;
width: 20px;
height: 27px;
}
#profilevectorsmartobject {
background: url(profileimages/vectorsmartobjectsmall.gif) no-repeat;
position: absolute;
left: 15px;
top: 259px;
z-index: 3;
width: 62px;
height: 68px;
}
#cartproduct {
top: 191px;
left: 54px;
}
#productdescription {
position: absolute;
left: 59px;
top: 163px;
z-index: 3;
width: 140px;
height: 13px;
color:#272727;
font-size:14px;
font-weight:bold;
}
#retailprice {
position: absolute;
left: 669px;
top: 190px;
z-index: 2;
width: 117px;
height: 13px;
font-size:13px;
color:#ff0000;
}
#acceptedpayments {
position: absolute;
left: 490px;
top: 270px;
z-index: 2;
width: 121px;
height: 13px;
font-size:12px;
font-weight:bold;
color:#272727;
}
#enteryourzipcode {
position: absolute;
left: 683px;
top: 279px;
z-index: 3;
width: 145px;
height: 12px;
font-size:12px;
font-weight:bold;
color:#272727;
}
#profilereadmoreaboutit {
position: absolute;
left: 87px;
top: 300px;
z-index: 3;
width: 98px;
height: 9px;
}
.profilereadmoreaboutitlink {
text-decoration:underline;
color:#3170ab;
font-size:10px;
}
#formback {
background: url(profileimages/layer5copy13.gif) no-repeat;
position: absolute;
left: 557px;
top: 467px;
z-index: 2;
width: 380px;
height: 381px;
}
#formtable {
font-size:14px;
font-weight:bold;
}
#item {
top: 187px;
}
#qtyproductback {
top: 156px;
}
#checkback {
background: url(profileimages/layer5copy10.gif) no-repeat;
position: absolute;
left: 677px;
top: 249px;
z-index: 2;
width: 249px;
height: 77px;
}
#lowerbar {
background: url(profileimages/layer1copy5.gif) no-repeat;
position: absolute;
left: 4px;
top: 342px;
z-index: 2;
width: 952px;
height: 3px;
}
#shippingback {
background: url(profileimages/layer5copy7.gif) no-repeat;
position: absolute;
left: 566px;
top: 156px;
z-index: 2;
width: 90px;
height: 92px;
}
#zipcodefield {
position: absolute;
left: 681px;
top: 296px;
z-index: 3;
width: 150px;
height: 25px;
}
#zipcodefieldform {
border:#aab1b7;
}
#totalback {
left: 800px;
}
#priceback {
left: 667px;
}
#formarea {
display:none;
overflow:hidden;
width:1px;
height:1px;
}
#congratulationsback {
background: url(profileimages/layer24copy.gif) no-repeat;
position: absolute;
left: 5px;
top: 368px;
z-index: 2;
width: 951px;
height: 42px;
}
#producttitleback {
background: url(profileimages/layer5copy6.gif) no-repeat;
position: absolute;
left: 48px;
top: 156px;
z-index: 2;
width: 507px;
height: 25px;
}
#layer1copy {
background: url(profileimages/layer1copy.gif) no-repeat;
position: absolute;
left: 373px;
top: 68px;
z-index: 3;
width: 400px;
height: 5px;
}
#profilesecurityback {
background: url(profileimages/layer5copy.gif) no-repeat;
position: absolute;
left: 19px;
top: 278px;
z-index: 2;
width: 395px;
height: 40px;
}
#area {
margin: 0px auto 0px auto;
background: url(profileimages/background.gif) no-repeat;
height:100%;
width: 960px;
position: relative;
}
#shipping {
position: absolute;
left: 583px;
top: 162px;
z-index: 3;
width: 54px;
height: 14px;
font-size:14px;
font-weight:bold;
color:#272727;
}
#yourcart {
position: absolute;
left: 10px;
top: 132px;
z-index: 2;
width: 106px;
height: 17px;
font-size:20px;
font-weight:bold;
color:#272727;
}
#profileshadow {
background: url(profileimages/layer16.gif) no-repeat;
position: absolute;
left: 29px;
top: 326px;
z-index: 2;
width: 32px;
height: 4px;
}
#fedex {
background: url(profileimages/layer30.gif) no-repeat;
position: absolute;
left: 579px;
top: 221px;
z-index: 4;
width: 66px;
height: 18px;
}
#paymenttypes {
background: url(profileimages/layer18.gif) no-repeat;
position: absolute;
left: 490px;
top: 291px;
z-index: 2;
width: 174px;
height: 27px;
}
#profileproductback {
background: url(profileimages/layer24.gif) no-repeat;
left: 223px;
top: 467px;
z-index: 2;
width: 323px;
height: 243px;
}
#profileproductimage {
/*background: url(profileimages/layer25.gif) no-repeat;*/
position: absolute;
left: 227px;
top: 491px;
z-index: 3;
width: 305px;
height: 200px;
}
#topbar {
background: url(profileimages/topbar.png) no-repeat;
position: absolute;
left: 15px;
top: 73px;
z-index: 5;
width: 952px;
height: 41px;
}
#freedivide {
background: url(profileimages/layer32.gif) no-repeat;
position: absolute;
left: 567px;
top: 213px;
z-index: 4;
width: 88px;
height: 1px;
}
#fedexback {
background: url(profileimages/layer31.gif) no-repeat;
position: absolute;
left: 567px;
top: 214px;
z-index: 3;
width: 88px;
height: 33px;
}
#checkbackbutton {
/*background: url(profileimages/layer21.gif) no-repeat;*/
position: absolute;
left: 835px;
top: 293px;
z-index: 3;
width: 72px;
height: 26px;
}
#lowerarrow {
background: url(profileimages/layer34.gif) no-repeat;
position: absolute;
left: 862px;
top: 344px;
z-index: 3;
width: 24px;
height: 6px;
}
#paymentline {
background: url(profileimages/layer20.gif) no-repeat;
position: absolute;
left: 490px;
top: 285px;
z-index: 2;
width: 173px;
height: 1px;
}
#form {
/*background: url(profileimages/layer23.gif) no-repeat;*/
position: absolute;
left: 571px;
top: 480px;
z-index: 3;
width: 349px;
height: 354px;
}
#checkoutbuttonback {
/*background: url(profileimages/layer6.gif) no-repeat;*/
position: absolute;
left: 556px;
top: 854px;
z-index: 2;
width: 382px;
height: 50px;
}
#total {
position: absolute;
left: 806px;
top: 163px;
z-index: 3;
width: 28px;
height: 10px;
font-size:14px;
font-weight:bold;
color:#272727;
}
#price {
position: absolute;
left: 673px;
top: 163px;
z-index: 3;
width: 30px;
height: 11px;
font-size:14px;
font-weight:bold;
color:#272727;
}
#free {
position: absolute;
left: 598px;
top: 191px;
z-index: 3;
width: 34px;
height: 10px;
font-size:14px;
color:#2e2e2e;
font-weight:bold;
}
#radiobutton {
position: absolute;
left: 571px;
top: 190px;
z-index: 3;
width: 13px;
height: 13px;
}
#qty {
position: absolute;
left: 15px;
top: 162px;
z-index: 3;
width: 25px;
height: 14px;
font-size:14px;
font-weight:bold;
color:#272727;
}
#itemnumber {
position: absolute;
left: 24px;
top: 190px;
z-index: 3;
width: 5px;
height: 13px;
font-size:18px;
color:#272727;
}
#copyright {
position: absolute;
left: 13px;
top: 971px;
z-index: 2;
width: 940px;
height: 126px;
font-size:11px;
}
.copyrighttext {
text-align:center;
}
.copyrightlinks {
text-decoration:underline;
color:#000000;
}
This is driving me nuts! I've been trying to do the simplest thing for over 3 hours now. Any help would be greatly appreciated! It's not allowing me to post a link to the site at hand. [myoviedolawyerDOTcom/index2.php]It seems to be working fine in Firefox and Safari, but IE is giving me troubles (as always). Here is the CSS (sorry if it's a mess, I'm learning) ul.MenuBarVertical { margin: 0; padding: 0; list-style-type: none; font-size: 100%; cursor: default; width: 298px; background-image: url(../images/PracticeAreas.gif); z-index: 2; } ul.MenuBarActive { z-index: 1000; } ul.MenuBarVertical li { margin: 0; padding: 0; list-style-type: none; font-size: 100%; position: relative; text-align: left; cursor: pointer; width: 298px; } ul.MenuBarVertical ul { margin: 0% 0 0 100%; padding: 0; list-style-type: none; font-size: 100%; position: absolute; z-index: 1020; cursor: default; width: 8.2em; left: -1000em; top: 0; } ul.MenuBarVertical ul.MenuBarSubmenuVisible { left: 0; } ul.MenuBarVertical ul li { width: 302px; background-color: #CCC; border: 1px solid #A32B34; z-index: 2; } ul.MenuBarVertical { border: 0px; } ul.MenuBarVertical ul { border: 0px; } ul.MenuBarVertical a { display: block; cursor: pointer; padding: 0.5em 0.75em; color: #A32B34; text-decoration: none; } ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus { color: #FFF; } ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible { color: #FFF; } ul.MenuBarVertical a.MenuBarItemSubmenu { background-image: url(../images/PracticeAreas.gif); background-repeat: no-repeat; background-position: left top; background-attachment: fixed; width: 298px; } ul.MenuBarVertical a.MenuBarItemSubmenuHover { background-repeat: no-repeat; background-position: left top; background-image: url(../images/Template_10_ro_10.png); background-attachment: fixed; width: 298px; } ul.MenuBarVertical iframe { position: absolute; z-index: 1010; filter:alpha(opacity:0.1); } @media screen, projection { ul.MenuBarVertical li.MenuBarItemIE { display: inline; f\loat: left; z-index: 2; } } -------------------------------------------------------------- Any help would be greatly appreciated! ~cheers~ I have a problem... I have text in a div class "schedule" which is dragged in dynamically. Basically all the headers are in span tags with the style "font-weight:bold" on them. I want to hide all the non-bold text, ie all the text in the div class .schedule that doesn't have a <span> tag around it. Any ideas? Is there a way to hide part of my css from Firefox but show up in IE? |
|||||||