Solved

Show/Hide Div Cleanup Code Java/CSS

Posted on 2006-06-16
4
1,000 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
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…

734 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