|
CSS - Css Onclick Help
Hi all,
Im new to the forum.....and quite new to all things web! Ive just inherited a website at work that I have to update but now im stuck! I have a menubar done as a <UL> <LI>, the cell names are populated from a database using php, as depending on the login depends on what the user sees. Theres quite a comprehensive CSS sheet for the site with various #nav tags relating to the menu bar. ok so ive worked out the css for the hover (it changes the text and background color) but what I now need it to do is stay in the hover colours onClick? this will show the user what page they are on. I would go down the javascript route however the php confuses me a little and i just want to modify whats there. Any help greatly recieved. Thanks Mike Similar TutorialsHi Is it possible to make some kind of Div: onclick that it opens a link? I made a box with a link inside it of 200px wide and 30px high. Is it possible that if you click anywhere in the box that a link opens? Thanks -------------- EDIT: got it to work by just added <a href infront of the div tag.. So obvious, sorry. sorry for the double post - reworded the question and reposted. Good day to you all, I'm working on a piece of code which display an image and when you click on it a full size image appears on a css box. I was wondering how can I center it on the screen, knowing the size will be different for each.... Code:
<img src="Web/ThePonder/The Ponder.png" width="160" onmouseover='this.style.cursor="pointer" ' onfocus='this.blur();' onclick="document.getElementById('Ponder').style.display = 'block' " />
<div id='Ponder' class='Ponder' style='display: none; position: absolute; margin: 0px auto -1px auto; border: dashed black 1px; padding: 10px; background-color: rgb(255,255,225); text-align: justify; font-size: 12px; ' onfocus='this.blur();' onclick="document.getElementById('Ponder').style.display = 'none' " onmouseover='this.style.cursor="pointer" '>
<img src="Web/ThePonder/The Ponder.png" width="500" />
<br />
</div>
If someone can help me understand how I can do this. Thanks ! Hi all. I've read through a lot of posts and for the life of me I can't figure out why this isn't working. I have navigation tabs at the top of the page, and my "tabber" function to change the clicked tab's className to 'on' for highlighting: CSS #header li a { display: block; width: 100%; color: #fff; padding-top: 7px; } #header li a.on, #header li a:hover { background-color: #333; color: #9c0; height: 20px; } JavaScript <script language="JavaScript" type="text/javascript"> function tabber (tab) { if (document.getElementById('header')) { var getLinks = document.getElementById('header'); var links = getLinks.getElementsByTagName('a'); for (var i=0; i<links.length; i++) { if (links[i].name == tab) { links[i].className == 'on'; } else { links[i].className == ''; } } } } </script> HTML <div id="header"><div> <ul> <li><a href="#" name="home" class="on" onClick="tabber(this.name);">Home</a></li> <li><a href="#" name="stories" onClick="tabber(this.name);">Stories</a></li> <li><a href="#" name="featured" onClick="tabber(this.name);">Featured</a></li> <li><a href="#" name="contact" onClick="tabber(this.name);">Contact</a></li> </ul> </div></div> The tabber function is finding matches for the clicked link, but the matched tab is never highlighted. I can highlight a tab using onClick="className='on';" but I need to be able to turn all other tabs off with a blank className at the same time. Thank you! Guys, Im new to UI design, pls help... This is a part of my code - Code: <div class="yellow"><a href="#">test link 1</a></div> <div class="yellow"><a href="#">test link 2</a></div> <div class="yellow"><a href="#">test link 3</a></div> Now when i click on a link, the css class "Yellow" should be changed to class "Red" - (the div has yellow css class by default, when a link is clicked the css class for the div should be changed). And when the link on the second div is clicked, the first div should go to its default class (yellow) and second div (the one clicked) should change its class from yellow to red. Please Help. Thanks. I got transitions to work using a simple hover, but how do i make them respond to onclick? Code:
<html>
<head>
<style>
#trans {
opacity:100;
transition: all 1st ease-in-out;
}
#trans:hover {
opacity:0;
}
</style>
</head>
<body>
<img src="myimage.jpg" id="trans" />
</body>
</html>
Hi there, I've set up an href in my php script which when clicked hides or shows the layer .login. At the moment it only hides the text within the layer and not the layer itself, in other words the border and bg of the layer remain and the text disappears. How do I hide the WHOLE layer? Many thanks in advance! in my style.css the layer login is defined as: Code: .login {
border-style:solid;
border-width:1px;
border-color:000000;
background-color:FFFFFF;
filter:alpha(opacity=75); -moz-opacity:0.75; opacity:0.75; -khtml-
opacity:0.75;
font: normal 10px Verdana;
width:116px; height:100px;
position:absolute; z-index:2; left:82%; top:0;
margin-left: 0; margin-top:35px;
visibility:visible;
}
in my words.php script I do: Code: <a href="#" onClick="if(login.style.visibility=='visible'){login.style.visibility='hidden';}
else{login.style.visibility='visible';}">Sign in</a>
The actual layer is under: <div class="login">text here etc</div> Many thanks Mark Hi there, I've set up an href which when clicked hides or shows the layer .login. At the moment it only hides the text within the layer and not the layer itself, in other words the border and bg of the layer remain and the text disappears. How do I hide the WHOLE layer? Many thanks in advance! in my style.css the layer login is defined as: Code: .login {
border-style:solid;
border-width:1px;
border-color:000000;
background-color:FFFFFF;
filter:alpha(opacity=75); -moz-opacity:0.75; opacity:0.75; -khtml-
opacity:0.75;
font: normal 10px Verdana;
width:116px; height:100px;
position:absolute; z-index:2; left:82%; top:0;
margin-left: 0; margin-top:35px;
visibility:visible;
}
in my words.php script I do: Code:
<a href="#" onClick="if(login.style.visibility=='visible'){login.style.visibility='hidden';}
else{login.style.visibility='visible';}">Sign in</a>
The actual layer is under: <div class="login">text here etc</div> Hi there, Was wondering if anyone had a solution with what I am trying to achieve if at all possible. I've been playing with a drop down that opens onclick with pure css. What I am trying to accomplish to have the dropdown close automatically when pointer is not on the dropdown menu. I know this is possible with jQuery but get this, I am trying to accomplish this in pure css. My code is below which is pure css which again works onclick to open the 2nd tab. Again, I am trying to achieve an automatic close behavior such as with a hover but not by using the hover class or javascript. <!doctype html> <!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ --> <!--[if lt IE 7 ]> <html class="no-js ie6" lang="en"> <![endif]--> <!--[if IE 7 ]> <html class="no-js ie7" lang="en"> <![endif]--> <!--[if IE 8 ]> <html class="no-js ie8" lang="en"> <![endif]--> <!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" lang="en"> <!--<![endif]--> <head> <meta charset="utf-8"> <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame Remove this if you use the .htaccess --> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title></title> <!-- Mobile viewport optimized: j.mp/bplateviewport --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- All JavaScript at the bottom, except for Modernizr which enables HTML5 elements & feature detects --> <script src="js/libs/modernizr-1.7.min.js"></script> <style> div.items ul:not(:target) {display:none;} div.items ul:target {display:block;} .tabs { float:left; clear:none; width:200px; height:30px; border:solid 1px #cccccc; padding:10px; background:#000000; } a { text-decoration:none; } .tabs a { float:left; margin:8px 5px 5px 5px; color:#ffffff; } ul { width:222px; float:left; clear:both; padding:10px 0px 10px 0px; margin:-8px 0px 0px 222px; line-height:35px; list-style:none; } li { border-left:#cccccc solid 1px; border-right:#cccccc solid 1px; border-bottom:#cccccc solid 1px; } ul li a { margin-left:15px; } </style> </head> <body> <!-- Start Tabs --> <div class="tabs"> <a href="#">Dashboard</a> </div> <div class="tabs"> <a href="#item2">Data & Reports</a> </div> <div class="tabs"> <a href="#">Data Archives</a> </div> <!-- End Tabs --> <!-- Start 2nd Tabs Content --> <div class="items"> <ul id="item2"> <li> <a href="#">Sales By Device</a> </li> <li> <a href="#">Delivery</a> </li> <li> <a href="#">Revenue</a> </li> <li> <a href="#">Sales By Purchase Type</a> </li> <li> <a href="#">Data Archives</a> </li> </ul> </div> <!-- End 2nd Tabs Content --> </body> </html> |
|||||||