Solved

Show/Hide Div Cleanup Code Java/CSS

Posted on 2006-06-16
4
993 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

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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…

763 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