|
CSS - Context Sensitive Help System
I'm trying to create a context sensitive help system so that users can click an icon and get additional information about the section of the web page they're viewing.
I want a layered div to come to the top and display this information then close upon the user clicking a button / link. I have all that working fine. The problem I'm having is I only want one help layer to appear at a time. So if the user fails to close the currently open layer, i want to automatcially close this layer then display the next one. Applicable CSS: Code:
.helpText {
position: absolute;
top: 30px;
left: 10px;
right: 10px;
bottom: 10px;
color: #000000;
font-size: 13px;
float:left;
}
.top {
position: absolute;
bottom: 90;
left: 110;
width: 100px;
height:5em;
background-color:#FFFF99;
z-index:1;
padding:.5em;
border: 1px;
border-style: solid;
border-color: #000000;
}
HTML: Code:
<DIV id="button">
<input type="button" name="button" value="?" onclick="helpText(\'matches\');">
<DIV id="matches" class="top" style="display:none;">
<DIV class="close">
<input type="button" name="button" value=" X " onclick="helpText(\'matches\');">
</div>
<div class="helpText">
It works here too!
</div>
</DIV>
</DIV>
javascript: Code:
function helpText (elm) {
/*
The function below successfully alters the class ".top" to not display, the problem is it works globally. So since two or more "helpText" divs will use this class even the one i want to display will be hidden.
*/
// alterCssClass(".top","display","none");
var div = document.getElementById(elm);
if (div.style.display == "") {
div.style.display = "none";
} else {
changecss("#"+elm+".top","display","");
div.style.display = "";
}
}
Any help would be greally appreciated. Thanks in advance. Similar TutorialsHello I would like to change the cursor when it is over on a link with an defined file extension. It does not work well: the test.zip link is OK while the test.ZIP link does not have any effect. How can i disable the case sensitive in the following code so that work? Thank you PHP Code: <html> <head> <style type="text/css" media="screen"> a[href*=".zip"] {cursor:help;} </style> </head> <body> <a href="http://www.abc.com/test.ZIP">test.ZIP</a> <a href="http://www.abc.com/test.zip">test.zip</a> </body> </html> Hi, I'm building a page that imports two blog feeds from feedburner displaying them in separate divs. I'm a beginner at CSS and could use some help manipulating the styles of these blog feeds separately (which are linked to an external style sheet), but I don't know enough about context dependent css and selectors. I've tried researching a solution but haven't found an answer specific to what I'm doing. I've given the divs their own IDs ("newsblog" and "newcontent"). Here's an example of some of Google's css: div.feedBurnerFeedBlock li a:link { font-size: 20px; font-weight: bold; font-color: #9F0; font-family: Verdana, Geneva, sans-serif; text-decoration: none; list-style-type:none; } I need to take that code and make it specific to one div or the other, instead of applying to both. Any help or advice is greatly appreciated. Thanks, Jeff I have one issue left in this context menu: www.webfletch.com/sharing (( Make Sure You Right Click On The Page )) The issue is in Internet Explorer, when you click on the sub-menu or one of the links in the sub-menu. Everything works fine at that point, but when you right-click to bring up the context menu again, the sub-menu comes up showing. Because technically, the css didn't grab the mouseout (Or whatever the opposite of "hover" is.) I attempted to fix this with javascript by placing different variations of different scripts all over the code that made the sub-menu style.display = 'none' However, the javascript made the code permenant. Once it was executed, the sub-menu never showed back up again. I guess javascript out-trumps the "hover" attribute of CSS. Any thoughts? Hello everyone, after a good bit of browsing around in an attempt to understand how to apply push/pull as supporter by the 960 css FW I've utterly failed. I'm simply doing the layout right now to see where to place elements and so forth, and as far as I understand the following code would push the logo box 3 columns up (3*60=180px): Code: <div class="grid_6 push_3"> <p>logo</p> </div> Whilst this here, would pull one of my textboxes back 6 columns (6*60=360px); Code: <div class="grid_3 pull_6"> <p>text column</p> </div> Yet while using dreamweaved and previewing the page in firefox, for some reason, even after saving the index page, i still get the logo box on the top left corner, so anyone able to tell me why it wont adhere to the pushes and pulls? Oh btw, these DIV's are place inside of the <body> tags. And here's the full code of body so far: Code: <body> <div class="grid_6 push_3"> <p>logo</p> </div> <div class="grid_3 pull_6"> <p>text column</p> </div> <div class="grid_3"> <p>text column</p> </div> <div class="grid_12"> <p>big box</p> </div> </body> Need help converting the above to use 960 grid system. Most is already done by "cloning" the FourKitchens.com main page but I can't get this last bit of code converted. This code is contained within a container-16 element: Code:
<!-- COLUMN-LEFT -->
<div id="column-left" class="grid-11 suffix-1">
<!-- COLUMN-LEFT-INNER -->
<div id="column-left-inner" class="grid-11 clearfix">
<!-- CONTENT -->
<div id="content">
<!-- CONTENT-BODY -->
<div id="content-body">
<!-- HEADER_IMG -->
<div id="header_img">
<img src="images/banner4.jpg" width="640" id="banner" />
</div> <!-- END HEADER_IMG -->
<!-- FILTER-ROW -->
<div id="filter-row">
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td><strong>Filter by :</strong> <a href="categorytasks.php?category=&mny=&f=l">Latest</a> | <a href="categorytasks.php?category=&mny=&f=p">Most Popular</a> | <a href="categorytasks.php?category=&mny=&f=r11">Highest Rated</a> </td>
<td> </td>
<td><strong>For $</strong>
<form name="mnyform" method="post" enctype="multipart/form-data">
<select name="mnyindex" onChange="indexcategoryload(document.mnyform.mnyindex.value)">
<option value="5">5</option>
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
<option value="150">150</option>
<option value="250">250</option>
<option value="500">500</option>
<option value="1">1</option>
</select>
</form>
</td>
</tr>
</table>
</div> <!-- END FILTER-ROW -->
<!-- TASK-ROW -->
<div id="task-row">
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td width="107">
<img src="taskimages/a4d11fddb35c9f__donate.jpg" width="106" height="76" />
</td>
<td width="17"> </td>
<td width="476">
<a href="task_desc.php?No=21" class="mainheading">I Will Keep it real for $1</a></span><br />
Just keep it real<br /><br />
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td width="15%">
<a href="task_desc.php?No=21" class="heading">
Read more
</a>
<img src="images/small_twitter.jpg" width="43" height="27" align="absmiddle" /> <span class="share" onClick="showHideDiv('share21')" style="cursor:pointer;"> Share</span>
</td>
<td width="8%">
<div id ="share21" style="display:none;">
<td width="4%"> </td>
<td>
<a href="fb_link" target="_blank" class="heading">
<img src="images/btn-facebook.png" alt="twitter" width="16" height="16" align="absmiddle" />
</a>
<a href="twitter_link" target="_blank" class="heading">
<img src="images/btn-twitter.png" alt="twitter" width="16" height="16" align="absmiddle" />
</a>
</td>
<td width="4%"> </td>
</div>
</td>
<td width="1%"> </td>
<td width="17%" align="right"><a href="task_desc.php?No=21"><img src="images/order_now_btn2.gif" border="0" /></a></td>
</tr>
</table>
</td>
</tr>
</table>
</div> <!-- END TASK-ROW -->
</div> <!-- END CONTENT-BODY -->
</div> <!-- END CONTENT -->
</div> <!-- END COLUMN-LEFT-INNER -->
</div> <!-- COLUMN-LEFT -->
This is driving me crazy! I'm experimenting with the "MyGosu" menu (the drop-down menu at the top of the page) inside of the default Mambo template. See my efforts he http://www.mediamogulsweb.com/client/Mambo/ The menu works fine in Mozilla/Firefox, but is failing in IE6 and IE7... In IE, the pop-out submenus don;t appear...But I'm thinking that they actually do appear, but are being obscured by the header image (or something else?)....So I adjusted the z-index of the header image div to "1", but that didn;t do the trick... What is going on here? Any ideas are appreciated... This might not be the best place in the forum for this question, but here it goes... I am looking to start using a CMS and wanted to see what you use, why you like it, etc? Right now, I am looking into WordPress, CMS Made Simple, and a few others... Thanks in advance... |
|||||||