Solved

Show/Hide Div Cleanup Code Java/CSS

Posted on 2006-06-16
4
982 Views
Last Modified: 2011-09-20
Below is my code, I would like to clean it up as I am not very good with css and Java.

What I want is for the "X" to be a mouseover, not a link as it currently is (Non Clickable) and I want it to reuse some html I already have set aside. The "Y" option will have custom code.

The background colors will be set on my end, so i would like to call the overall DIV tags with a parameter, that parameter being the background color... I will provide this parameter via ASP

Please help me out.

------------------Code------------------------

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
.edit {color:#999999;border: 1px solid #999999;padding-left:5px;padding-right:5px;font-size:10;font-family:Arial;text-decoration:none;margin-bottom:2px;margin-right:2px}
.edit:hover {color:white}

div.unlock-inline {
diplay:inline;
position: relative;
}

div.unlock-pop {
display: none;
position: absolute;
}

div.unlock-inline:hover div.unlock-pop {
display: block;
}

div.dir-left {
z-index: 0;
_z-index: -1;
border: 1px solid #999999;
left: auto;
right: 1px;
top: auto;
bottom: 18px;
_bottom: 15px;
background:#333333;
}
</style>
<script type="text/javascript">
<!--
var agt   = navigator.userAgent.toLowerCase();
var is_ie = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1));

function hide_mine(elmnt) {
      if( !is_ie ) return;
      var a = elmnt.getElementsByTagName("div");
      var div = a[0];
      elmnt.style.zIndex = 1;
      div.style.display = "none";
}

function show_mine(elmnt) {
      if( !is_ie ) return;
      var a = elmnt.getElementsByTagName("div");
      var div = a[0];
      elmnt.style.zIndex = 100;
      div.style.display = "block";
}
//-->
</script>
</head>

<body>
      <div style="position:absolute;margin-top:5px;_margin-top:0px">
      <div style="border: 1px solid #000000;font-size:12;font-family:Arial;position:absolute;margin-top:-7px;margin-left:5px;background:#FFFFFF;padding-left:3px;padding-right:3px;width:80%;white-space: nowrap"><b>This Is A Test Title For The Box</b></div>
      <div style="border: 1px solid #000000;font-size:12;font-family:Arial;background:#CCCCCC;padding-top:10px;padding-left:5px;padding-right:5px">iifd d idgo jdoissgoik fjsdlkg nmfdfdklgnmf dkgfndg msfdngfdm nfdsgkfndg fjdng fdsjgvnfd jfdnvgfdsg vfdgvsg fdsgfds g</div>
      <div style="border: 1px solid #000000;font-size:12;font-family:Arial;border-top:0px;padding-top:2px;padding-bottom:2px;background:#333333;align:right;height:1em">
            <div style="float:right;display:inline">
                  <div class="unlock-inline" onmouseover="show_mine(this);" onmouseout="hide_mine(this);">
                        <div class="unlock-pop dir-left" style="white-space:nowrap">First Information<br/>1st Set<br></div>
                        <a href="" class="edit" style="background:#333333">Y</a>
                  </div>
            </div>
            <div style="float:right;display:inline">
                  <div class="unlock-inline" onmouseover="show_mine(this);" onmouseout="hide_mine(this);">
                        <div class="unlock-pop dir-left" style="white-space:nowrap">Next Information<br/>2nd Set<br></div>
                        <a href="" class="edit" style="background:#333333">X</a>
                  </div>
            </div>
      </div>
</div>
</body>
</html>
0
Comment
Question by:B_Dorsey
  • 2
4 Comments
 
LVL 14

Author Comment

by:B_Dorsey
ID: 16924662
BTW for some reason the code above doesnt keep the DIV visible when you move the mouseover it....

I want when the mouse goes over the "X" for the information to stay there if the mouse goes to the now visible DIV tag, like this version of my code.


-------------------Code----------------------

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
.edit {color:#999999;border: 1px solid #999999;padding-left:5px;padding-right:5px;font-size:10;font-family:Arial;text-decoration:none;margin-bottom:2px;margin-right:2px}
.edit:hover {color:white;border: 1px solid white;border-top: 1px solid #333333}

div.unlock-inline {
diplay:inline;
position: relative;
}

div.unlock-pop {
display: none;
position: absolute;
}

div.unlock-inline:hover div.unlock-pop {
display: block;
}

div.dir-left {
border: 1px solid #FFFFFF;
left: auto;
right: 2px;
top: -16px;
background:#333333;
}
</style>
<script type="text/javascript">
<!--
var agt   = navigator.userAgent.toLowerCase();
var is_ie = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1));

function hide_mine(elmnt) {
      if( !is_ie ) return;
      var a = elmnt.getElementsByTagName("div");
      var div = a[0];
      elmnt.style.zIndex = 1;
      div.style.display = "none";
}

function show_mine(elmnt) {
      if( !is_ie ) return;
      var a = elmnt.getElementsByTagName("div");
      var div = a[0];
      elmnt.style.zIndex = 100;
      div.style.display = "block";
}
//-->
</script>
</head>

<body>
<div style="position:absolute;margin-top:5px;_margin-top:0px">
<div style="border: 1px solid #000000;font-size:12;font-family:Arial;position:absolute;margin-top:-7px;margin-left:5px;background:#FFFFFF;padding-left:3px;padding-right:3px;width:80%;white-space: nowrap"><b>This Is A Test Title For The Box</b></div>
<div style="border: 1px solid #000000;font-size:12;font-family:Arial;background:#CCCCCC;padding-top:10px;padding-left:5px;padding-right:5px">iifd d idgo jdoissgoik fjsdlkg nmfdfdklgnmf dkgfndg msfdngfdm nfdsgkfndg fjdng fdsjgvnfd jfdnvgfdsg vfdgvsg fdsgfds g</div>
<div style="border: 1px solid #000000;font-size:12;font-family:Arial;border-top:0px;padding-top:2px;padding-bottom:2px;background:#333333;align:right;height:1em"><div style="float:right;display:inline"><div class="unlock-inline" onmouseover="show_mine(this);" onmouseout="hide_mine(this);"><div class="unlock-pop dir-left" style="white-space:nowrap">reused information</div><a href="" class="edit">edit</a></div></div></div>
</div>
</body>
</html>
0
 
LVL 23

Assisted Solution

by:basicinstinct
basicinstinct earned 75 total points
ID: 16924668
to stop the 'X' being a clickable link, you could change this line:

<a href="" class="edit" style="background:#333333">X</a>

to this:

<span class="edit" style="background:#333333">X</span>
0
 
LVL 10

Accepted Solution

by:
Khanh Doan earned 425 total points
ID: 16925709
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
.edit {color:#999999;border: 1px solid #999999;padding-left:5px;padding-right:5px;font-size:10;font-family:Arial;text-decoration:none;margin-bottom:2px;margin-right:2px}
.edit:hover {color:white;border: 1px solid white;border-top: 1px solid #333333}

div.unlock-inline {
diplay:inline;
position: relative;
}

div.unlock-pop {
display: none;
position: absolute;
}

div.unlock-inline:hover div.unlock-pop {
display: block;
}

div.dir-left {
border: 1px solid #FFFFFF;
left: auto;
right: 2px;
top: -16px;
background:#333333;
}
</style>
<script type="text/javascript">
<!--
var agt   = navigator.userAgent.toLowerCase();
var is_ie = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1));

function hide_mine(elmnt) {
     if( !is_ie ) return;
     var a = elmnt.getElementsByTagName("div");
     var div = a[0];
     elmnt.style.zIndex = 1;
     div.style.display = "none";
}

function show_mine(elmnt) {
     if( !is_ie ) return;
     var a = elmnt.getElementsByTagName("div");
     var div = a[0];
     elmnt.style.zIndex = 100;
     div.style.display = "block";
}
//-->
</script>
</head>

<body>
<div style="position:absolute;margin-top:5px;_margin-top:0px">
<div style="border: 1px solid #000000;font-size:12;font-family:Arial;position:absolute;margin-top:-7px;margin-left:5px;background:#FFFFFF;padding-left:3px;padding-right:3px;width:80%;white-space: nowrap"><b>This Is A Test Title For The Box</b></div>
<div style="border: 1px solid #000000;font-size:12;font-family:Arial;background:#CCCCCC;padding-top:10px;padding-left:5px;padding-right:5px">iifd d idgo jdoissgoik fjsdlkg nmfdfdklgnmf dkgfndg msfdngfdm nfdsgkfndg fjdng fdsjgvnfd jfdnvgfdsg vfdgvsg fdsgfds g</div>
<div style="border: 1px solid #000000;font-size:12;font-family:Arial;border-top:0px;padding-top:2px;padding-bottom:2px;background:#333333;align:right;height:1em"><div style="float:right;display:inline"><div class="unlock-inline" onmouseover="show_mine(this);" onmouseout="hide_mine(this);"><div class="unlock-pop dir-left" style="white-space:nowrap"><span style="color:#FFFFFF">reused information</span></div><span class="edit" style="background:#333333">edit</span></div></div></div>
</div>
</body>
</html>


replace <a href="" class="edit">edit</a>
with <span class="edit" style="background:#333333">edit</span>
and add <span style="color:#FFFFFF">
before reused information. And then </span> after that.
<span style="color:#FFFFFF"> // This will make the font color is white. And user can read it.

Good luck.
Bonmat86.
0
 
LVL 14

Author Comment

by:B_Dorsey
ID: 16931960
Hey Guys,

I am accepting the answer cause I wanna reword the question and change the requirements, and Im pulling my hair out trying to find a solution to all my problems, and it wouldnt be fair for me to do it in a answered question (as this question is....), so be on the lookout for another question in the javascript threads for 'this question' again :)

Split the points cause the first answer is used in the second answer.

Thanks
b
0

Featured Post

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

Suggested Solutions

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now