Solved

Show/Hide Div Cleanup Code Java/CSS

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

PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
maps stopped work unsure why 7 36
Javasctipt 2 28
HTML5 Get data in table rows 5 29
Checking data with javascript 3 19
When you need to keep track of a simple list of numbers or strings, the Array object is your most direct tool.  As we saw in my earlier EE Article (http://www.experts-exchange.com/A_3488.html), typical array handling might look like this: (CODE) B…
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…
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…

832 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