|
CSS - Changing Css On Click Event
Hi,
I have this site, you see home in red, It is through css. http://natradersonline.com/temp/index.php what i want when I click on some other menu item, it turn red and 'home' goes back to normal color. Is it possible to change css throght javascript, I have an onclick even in each menu, i tried something like this , but that gives me error. Code:
document.getElementById('home1').class= 'first active';
I appreciate your help. Thanks Similar TutorialsHey guys, Just seeing if this is possible. By the way this is for a myspace page. Looking to have a link to change opacity on current page. table table table, div table table{ border-color:rgb(0,0,0); border-style:solid; border-width:2px; background-color:rgb(55,55,5); opacity:0.8; -moz-opacity:0.7; filter:alpha(opacity=50); } This is the code currently. Is it possible (without java) to have a link that would set "opacity:0" Thanks! I have a FAQ web page which has a list of questions at the top which link to the answer for that question (on that page). I have used 'on click' to change the background colour of the div which contains the answer to the question you have clicked on. Code: <a href="#name" onclick="document.getElementById('namediv').style.background='#99ccaa'" >click here !!! </a><br>
And this works, but it becomes a problem when i scroll back to the questions and click on another one. It will change the background of the new div as required but I can't find a way to revert the previous div back to its original background color. any ideas? Thanks Hello, I have a table inside a layer (position: absolute). I want to apply onMouseOut event to my layer, so when I roll my mouse outside of the layer it gives an alert message. Well, it does give an alert when I move my out outside of the layer. But it also alerts when I move my mouse over the table which is inside my layer. I'm sure it's something simple, but I'm struggling with it for hours already and can't find any solution. Code below. What am I doing wrong? <div style="position:relative; z-index:1;"> <div style="position: absolute; z-index:2; background-color:#009900; padding:10px; width: 200px; height:200px;" onMouseOut="alert('hey');"> <table width="100%" border="1" cellspacing="0" cellpadding="0"> <tr> <td>table</td> </tr> </table> </div> </div> Thanks so much! hi, I was just wondering, how can you get an image to change on mouse click like how an image changes on a mouse over? What i mean by this is when you click on an image and you go to the destination page, how can you use css to keep the image as the same one seen on the mouse over? so the person knows what section of the site they are in? Hi guys, I don't know if this is possible.. I have a table with position: fixed and width: 100% height: 100% so it covers the entire screen. There is text behind it, you can see through the table and there is text back there. My problem is you can't click on anything in the background, behind the table. You can't select the text and you can't click the links because the table is blocking them. So my question is it possible to click through the table element on the links in the background and stuff? http://perfbase.com/beta/tablesector/v7/ I tried setting the middle td to visibility: hidden and display: none but that didn't work. I tried javascript events but click, mousedown, mouseover, none of them work for the text in the background. Thanks a lot! Is it possible to make a menu with css that appears when you right click a certain link? I tried with javascript, my only downfall was i couldn't be bothered find out how to pass PHP variables into javascript variables. ... Anyway, is it possible? For some odd reason, the link in one of my DIVS is inaccessible. It's styled as a link, so I know it's being recognized, but mouse-over does nothing, and it won't respond to a click. I've tried to bring the DIV to the front via z-index, but no help. The pile of code is below, but the DIV I'm needing help with is "frontcontentbox". You can see an example at www . deepwaterchurch / next Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<link href="css/universal.css" rel="stylesheet" type="text/css" />
<link href="css/jflow.css" rel="stylesheet" type="text/css" />
<link href="tweet/jquery.tweet.css" media="all" rel="stylesheet" type="text/css"/>
<script src="scripts/jquery-1.2.6.pack.js" type="text/javascript"></script>
<script src="scripts/jquery.flow.1.2.auto.js" type="text/javascript"></script>
<!--[if lt IE 7]>
<script type="text/javascript" src="unitpngfix.js"></script>
<![endif]-->
<script type="text/javascript">
$(function() {
$("div#controller").jFlow({
slides: "#slides",
width: "462px",
height: "289px",
auto:true,
});
});
</script>
<script language="javascript" src="/tweet/jquery.tweet.js" type="text/javascript"></script>
<script type='text/javascript'>
$(document).ready(function(){
$(".tweet").tweet({
username: "deepwaterchurch",
join_text: "auto",
avatar_size: 0,
count: 5,
auto_join_text_default: "we said,",
auto_join_text_ed: "we",
auto_join_text_ing: "we were",
auto_join_text_reply: "we replied to",
auto_join_text_url: "we were checking out",
loading_text: "loading tweets..."
});
});
</script>
<link href="tweet/jquery.tweet.css" media="all" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="container">
<div id="top"></div><!--end top-->
<div id="content-container">
<div id="content"><!--START ENTERING CONTENT HERE-->
<div id="logo"></div>
<div id="navtabs">
<ul id ="nav">
<li class="whoweare"><a href="whoweare">WHO WE ARE</a></li>
<li class="whatwedo"><a href="whatwedo">WHAT WE DO</a></li>
<li class="beforeyoucome"><a href="beforeyoucome">BEFORE YOU COME</a></li>
<li class="onceyourehere"><a href="onceyourehere">ONCE YOU'RE HERE</a></li>
<li class="faq"><a href="faq">FAQ</a></li>
<li class="contactus"><a href="contactus">CONTACT US</a></li> </ul></div><!--end navigation-->
<div id="wrap">
<div id="controller" class="hidden">
<span class="jFlowControl">Current Series</span>
<span class="jFlowControl">We're Social</span>
<span class="jFlowControl">Compassion</span>
</div>
<div id="prevNext" class="hidden">
<img src="images/prev.png" alt="Previous Tab" class="jFlowPrev" align="left"/>
<img src="images/next.png" alt="Next Tab" class="jFlowNext" align="right"/>
</div>
<div id="slides">
<div><img class="cushycms" src="images/currentseries.jpg" height="289" alt="Current Series Graphic" width="462" /><p class="slideshow">Current Series</p></div>
<div><a href="social"><img src="images/weresocial.jpg" alt="We're Social" border="0"></a></div>
<div><img src="images/luv.jpg" alt="show a little luv" class="cushycms"/></div>
</div>
</div>
<div id="overlay" style="z-index:3; position:relative; top:80px; left:10px; width:462px; height:289px;"><img src="images/slideoverlay.png" /></div>
<!-- end slideshow -->
<div id="tagline" style="position:absolute; top:110px; left:390px; z-index:5;"><img src="images/tagline.png" alt="Deep Water exists to help people become passionate followers of Jesus Christ" /></div>
<div id="front page content" style="position:relative; top:120px; padding-bottom:140px; padding-right:20px;">
<!--start twitter block-->
<div class="tweet_bird" style="position:relative; top:20px; left:140px; z-index:6;"><a href="http://twitter.com/deepwaterchurch"><img src="images/whatstweetin.png" border="0"></a></div>
<div class="tweet" style="position:relative; left:50px; top:12px; width:380px; padding-bottom:50px;"></div>
<!--end twitter block-->
<!--start theloop block-->
<div id="the loop" style="position:relative; left:50px; width:380px; top:20px; padding-bottom:20px;">
<!-- Begin MailChimp Signup Form -->
<!--[if IE]>
<style type="text/css" media="screen">
#mc_embed_signup fieldset {position: relative;}
#mc_embed_signup legend {position: absolute; top: -1em; left: .2em;}
</style>
<![endif]-->
<!--[if IE 7]>
<style type="text/css" media="screen">
.mc-field-group {overflow:visible;}
</style>
<![endif]-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="http://downloads.mailchimp.com/js/jquery.validate.js"></script>
<script type="text/javascript" src="http://downloads.mailchimp.com/js/jquery.form.js"></script>
<div id="mc_embed_signup">
<form action="http://deepwaterchurch.us1.list-manage.com/subscribe/post?u=e6c98debd5802cfe5d135bc4d&id=1b9e118a77" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" style="font: normal 100% Arial;font-size: 12px;">
<fieldset style="-moz-border-radius: 4px;border-radius: 4px;-webkit-border-radius: 4px;border: 1px solid #000000;padding-top: 1.5em;margin: .5em 0;background:url(images/blackboardtexture.jpg);color: #ffffff;text-align: left;">
<div align="center"><a href="../theloop"><img src="images/theloop_front.png" border="0" /></a></div>
<div class="mc-field-group" style="margin: 1.3em 5%;clear: both;overflow: hidden;">
If you're not receiving <em>the loop</em> newsletter, then you're... out of the loop. Check out <a href="../theloop">the archives</a> or sign up below.<br /> <br />
<label for="mce-EMAIL" style="display: block;margin: .3em 0;line-height: 1em;font-weight: bold;">Email Address: </label>
<input type="text" value="" name="EMAIL" class="required email" id="mce-EMAIL" style="margin-right: 1.5em;padding: .2em .3em;width: 90%;float: left;z-index: 999;">
</div>
<div id="mce-responses" style="float: left;top: -1.4em;padding: 0em .5em 0em .5em;overflow: hidden;width: 90%;margin: 0 5%;clear: both;">
<div class="response" id="mce-error-response" style="display: none;margin: 1em 0;padding: 1em .5em .5em 0;font-weight: bold;float: left;top: -1.5em;z-index: 1;width: 80%;color: #b51b00;"></div>
<div class="response" id="mce-success-response" style="display: none;margin: 1em 0;padding: 1em .5em .5em 0;font-weight: bold;float: left;top: -1.5em;z-index: 1;width: 80%;background:#;color: #73bd2b;"></div>
</div>
<div id="counter chicklet" style="float:right; padding-right:40px; padding-bottom:20px;">
<script type="text/javascript" src="http://deepwaterchurch.us1.list-manage.com/subscriber-count?b=7&u=e6c98debd5802cfe5d135bc4d&id=1b9e118a77"></script></div>
<div><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn" style="width: auto;display: block;margin: 1em 0 1em 5%;">
</div>
</fieldset>
<a href="#" id="mc_embed_close" class="mc_embed_close" style="display: none;">Close</a>
</form>
</div>
<script type="text/javascript">
var fnames = new Array();var ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[3]='NAME';ftypes[3]='text';fnames[1]='PHONE';ftypes[1]='phone';fnames[4]='MMERGE4';ftypes[4]='phone';fnames[2]='SMALLGROUP';ftypes[2]='dropdown';var err_style = '';
try{
err_style = mc_custom_error_style;
} catch(e){
err_style = 'margin: 1em 0 0 0; padding: 1em 0.5em 0.5em 0.5em; background: fff5ee none repeat scroll 0% 0%; font-weight: bold; float: left; z-index: 1; width: 80%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; color: 9C1801;';
}
var mce_jQuery = jQuery.noConflict();
mce_jQuery(document).ready( function($) {
var options = { errorClass: 'mce_inline_error', errorElement: 'div', errorStyle: err_style, onkeyup: function(){}, onfocusout:function(){}, onblur:function(){} };
var mce_validator = mce_jQuery("#mc-embedded-subscribe-form").validate(options);
options = { url: 'http://deepwaterchurch.us1.list-manage1.com/subscribe/post-json?u=e6c98debd5802cfe5d135bc4d&id=1b9e118a77&c=?', type: 'GET', dataType: 'json', contentType: "application/json; charset=utf-8",
beforeSubmit: function(){
mce_jQuery('#mce_tmp_error_msg').remove();
mce_jQuery('.datefield','#mc_embed_signup').each(
function(){
var txt = 'filled';
var fields = new Array();
var i = 0;
mce_jQuery(':text', this).each(
function(){
fields[i] = this;
i++;
});
mce_jQuery(':hidden', this).each(
function(){
if ( fields[0].value=='MM' && fields[1].value=='DD' && fields[2].value=='YYYY' ){
this.value = '';
} else if ( fields[0].value=='' && fields[1].value=='' && fields[2].value=='' ){
this.value = '';
} else {
this.value = fields[0].value+'/'+fields[1].value+'/'+fields[2].value;
}
});
});
return mce_validator.form();
},
success: mce_success_cb
};
mce_jQuery('#mc-embedded-subscribe-form').ajaxForm(options);
});
function mce_success_cb(resp){
mce_jQuery('#mce-success-response').hide();
mce_jQuery('#mce-error-response').hide();
if (resp.result=="success"){
mce_jQuery('#mce-'+resp.result+'-response').show();
mce_jQuery('#mce-'+resp.result+'-response').html(resp.msg);
mce_jQuery('#mc-embedded-subscribe-form').each(function(){
this.reset();
});
} else {
var index = -1;
var msg;
try {
var parts = resp.msg.split(' - ',2);
if (parts[1]==undefined){
msg = resp.msg;
} else {
i = parseInt(parts[0]);
if (i.toString() == parts[0]){
index = parts[0];
msg = parts[1];
} else {
index = -1;
msg = resp.msg;
}
}
} catch(e){
index = -1;
msg = resp.msg;
}
try{
if (index== -1){
mce_jQuery('#mce-'+resp.result+'-response').show();
mce_jQuery('#mce-'+resp.result+'-response').html(msg);
} else {
err_id = 'mce_tmp_error_msg';
html = '<div id="'+err_id+'" style="'+err_style+'"> '+msg+'</div>';
var input_id = '#mc_embed_signup';
var f = mce_jQuery(input_id);
if (ftypes[index]=='address'){
input_id = '#mce-'+fnames[index]+'-addr1';
f = mce_jQuery(input_id).parent().parent().get(0);
} else if (ftypes[index]=='date'){
input_id = '#mce-'+fnames[index]+'-month';
f = mce_jQuery(input_id).parent().parent().get(0);
} else {
input_id = '#mce-'+fnames[index];
f = mce_jQuery().parent(input_id).get(0);
}
if (f){
mce_jQuery(f).append(html);
mce_jQuery(input_id).focus();
} else {
mce_jQuery('#mce-'+resp.result+'-response').show();
mce_jQuery('#mce-'+resp.result+'-response').html(msg);
}
}
} catch(e){
mce_jQuery('#mce-'+resp.result+'-response').show();
mce_jQuery('#mce-'+resp.result+'-response').html(msg);
}
}
}
</script>
<!--End mc_embed_signup-->
</div><!--end the loop block-->
<!--start social icons-->
<div style="position:relative; top:20px; left:50px; width:380px; background-color:#333333; padding-top:20px; padding-bottom:20px;">facebook link place holder</div>
<!--end social icons-->
<!--start right column-->
<div style="position:absolute; top:81px; left:480px; width:300px;">
<div id="frontcontentbox">
<img src="images/wherewemeetfront.jpg" alt="Where We Meet" />
<p>Deep Water meets Sunday mornings at 10:30 in the Empire Theatres at Park Lane, on the corner of Spring Garden Road and Dresden Row. <a href="wherewemeet">Get more details</a>.</p>
</div>
</div><!--end right column-->
</div><!--end front page content-->
</div><!--end content div-->
<div id="bottom"></div><!--end bottom-->
</div><!--end content-container-->
<div class="clear"></div><!--end clearing div-->
</div><!--end container-->
</body>
</html>
I've set up two divs side by side using "float:left;". In each of the Divs I have placed links, in the right hand div I can click the links but in the left hand div I can not. If I remove the "float:left;" I can then click the links in the left hand div but the divs are no longer aligned. The problem only happens in FF not in IE. I have copied the relative code below that is causing the problem. Code:
#left{float:left;position:relative;width:49%;}
#right{position:relative;}
<div id="left"><a href="hh">hh</a></div>
<div id="right"><a href="hh">hh</a></div>
I don't want to have to change the layout just for FF so I'm hoping there is a fix for this problem. Thanks I want to have the functionality of this page
Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Bug Tracker | View All Active Bugs</title>
<script type="text/javascript">
function toggleCard(card) {
var o = document.getElementById(card);
o.style.display=(o.style.display == "none")?"block":"none";
}
</script>
<style type="text/css">
h2 {
border: 1px 0 0 0 solid #000;
background-color: #eee;
margin: 0px;
padding: 2px 2px 2px 15px;
font-size: 1.0em;
}
p {
margin: 2px;
padding: 0px;
}
</style>
<script src="inc/js/sorttable.js"></script>
</head>
<body>
<h2 id="head1" onclick="toggleCard('card1')">Click Me</h2>
<div id="card1" style="border: 1px solid #000; display: none"><p>Click should display me!</p></div>
</body>
</html>
But instead of using a heading element (h2) I would like to use a table row to display the new div. However, when I do this, the newly displayed division messes with the spacing for the table columns and also in firefox it will leave the display space for the div blank and continue to repeat this each time the row is clicked. I've looked for similar problems with google, but haven't dug anything up. Any pointers? Ok I have a html page with 6 navigation buttons on pressing a navigation button it changes a iframe but what I want to do is have a differant colour for each iframe whick is no problem but can I add some code to the buttons to change the CSS of the main html page? Or does anyone have any idea how I can achieve this Regards Kev @kravvitz You have any idea how to do this? I can do it in all browsers except ie6, but I have no idea how to make ie6 comply... I am not sure if this is being done with CSS or JavaScript but I am hoping someone can post how to get effect found on the abduzeedo site. Each time you click a link it dips. Here is the address http://abduzeedo.com/ Thanks James Hi, I have a pure css menu that uses hover, Kravitz told me it wont work in touchscreens which I searched for and is so, thanks Kravitz. Also one told me to keep the hover and add a class to make it posible to click on li if hover does not work. Problem, cant test this as I dont have any touchscreen. So 1. is there a way to add a code to disable the hover affect? 2, maybe a website where you can test but using mouse.... 3. Dont remember, its validates but are there anything against using <a href="#">? Thanks, Helen Hi Guys, I'm trying to create a category list. One first load, the category list is going to be a short list of the top 5 major categories. Each major category will have a sublist of 3 subcategories below it. Lastly, there will be a link labeled 'more' that when clicked, will toggle out divs and display a full category list. Lastly, all other primary categories will have their short list hidden as well, so you only see the Primary Category followed by a 'more' link. Here's a crude example of what I mean. First block is 'first load'. Then the next block would be how it'd look if I clicked the "more" link below vehicles -------------------------------- Vehicles -Cars -Trucks -Motorcycles MORE Stuff -Musical Instruments -Camping -clothing MORE Electronics -televisions -stereos -video games MORE ------------------------------ ex. Vehicles -Cars -Trucks -Motorcycles -Boats -Tractors -antiques -commercial Less Stuff MORE Electronics MORE ------------------------------ I think every primary category (ie vehicles) will require 3 divs. Div1 - short list with 3 sub categories Div2 - full list of all subcategories Div3 - hidden list At first load, the DIV1 variant will be displayed for all primary categories. When the 'more' link is clicked for a particular primary category, it will swap it's div1 for it's div2, and at the same time, swap all other categories div1 for their div3. If the 'less' link is clicked on div3, everything would revert back to normal, all primary categories showing div1. I need to find/write some javascript which would toggle the div's. Does this make sense? Am I going about this the right way? I'd think the code would look something like the following, with each Primary category being cat1, cat2, cat3, etc. Code for first Primary Category Code: <div id="cat1div1">
sample text
<a href="javascript:toggle2('cat1div1','cat1div2');javascript:toggle2('cat2div1','cat2div3'); javascript:toggle2('cat3div1','cat3div3');">
more
</a>
</div>
<div id="cat1div2">
a whole bunch of sample text
<a href="javascript:toggle2('cat1div2','cat1div1');javascript:toggle2('cat2div3','cat2div1'); javascript:toggle2('cat3div3','cat3div1');">less</a>
</div>
<div id="cat1div3">
<a href="javascript:toggle2('cat1div3','cat1div2');">MORE</a>
</div>
Hi, I am in the process of migrating a web site over on to a new platform. The old web page had an in text translation feature which I am wanting to keep but just tweek slightly. The original page has the turkish translation appear on the right and the english translation appear on the let each expanding to about 80% of the page when clicked on. Original Website web .archive.org/web/20080719023530/cat .une.edu.au/page/acemhoyuk This is a link to the original site using Wayback Machine and you can see from the moment the page loads both translations are visible. What I am wanting to do is keep the minimised translations to the one side and the bulk of the text to the other to eliminate the inertia that comes with constantly moving your focus from one side of the page to the other. I have done this by changing this bit of css code: .page_language_a .bilingual .language_a, .page_language_b .bilingual .language_b { position: static; margin: 0 20% 0 0; padding: 0 1.5em 0 0; text-align:left; border-right:1px solid #ccc; } .page_language_b .bilingual .language_b { margin: 0 0 0 20%; padding: 0 0 0 1.5em; border-left:1px solid #ccc; border-right: none; } to .page_language_a .bilingual .language_a, .page_language_b .bilingual .language_b { position: static; margin: 0 20% 0 0; padding: 0 1.5em 0 0; text-align:left; border-right:1px solid #ccc; } .page_language_b .bilingual .language_b { margin: 0 20% 0 0; padding: 0 1.5em 0 0; text-align:left; border-right:1px solid #ccc; } This simple change in the code seems to have worked for the most part and everything lines up fine except that it is not initially visible. When you first navigate to the page both translation appear as the body of the text one after each other. It is not until you click the mouse in the body of the text that you see the css doing what it is meant to and the translation appear on the right. New website www .une.edu .au/cat/sites/Acemhoyuk .php I am a relative novice with css but I can 'read' the code and I have gone through it, experimenting with changing different aspect of it but I can't find any solution to my problem. Could someone please help me figure out a solution to this issue as I want both the text and the translation to appear at the same time on the screen from the moment it loads not just after a mouse click. Kim Something has gone terribly wrong. I added a sub menu to one of my pages by creating a sub-unordered list and positioning it absolutely where I wanted it. Now only 1 of 7 of the hyperlinks actually works and even that one isn't lined up correctly. I'm not sure what is going on here. The page in question can be found here. I've gone over this a hundred times and can't find where the problem starts. Hey all, I have a position div with a background image that sits just above and to the right of a text box. The image appears higher because I want it to overlap the text box. Most of the area that overlaps the text box is transparent. My problem is the transparent area makes it so you have to click the on the left side of the text box to place the cursor inside. Is their any way to make it so the transparent areas I can click inside the text box while leaving the image appearing over the text box? Thanks Hi, how can I set the <a> tag (of <a href...) to be of some color in one div and some other color in another div? I'm revamping my personal webpage. (What I've done so far is at http://homepage.mac.com/johntstuart/mockup/ ) I've been told there is a way for JavaScript to replace the content of a DIV, when the user selects from the navigation. Can anyone point me in the direction of this JavaScript? And any tutorials? I have a header.inc and a css style sheet that are called to each page of a website via php. In the style sheet there are two styles that I would like to change depending on the section of the website. For example: in the style sheet css id "subnav" has background: #E8EDF5 and cssi id "subtitle" has background #E8EDF5 however in each major section of the website I would like to change the background colors of the divs that have id "subnav" and "subtitle". Is there type of php statement that I could place at the top of my website pages that would allow me to specify the colors of these two css ids? Hope I have made this clear. |
|||||||