Solved

Show/Hide Div Cleanup Code Java/CSS

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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
PHP Web Development 6 68
AngularJS: ng-repeat 25 54
javascript works in Chrome, but none of the other browsers 14 54
Where is this content coming from? 4 40
This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
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…

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