Solved

DIV with Rollover

Posted on 2014-03-21
16
258 Views
Last Modified: 2014-03-21
Hello,

I am trying to get this div to show another when it is clicked - it hides itself, but doesn't show the other one...

Here's my code:
<script language="javascript">
function replace( hide, show ) {
  document.getElementById(hide).style.display="none";
  document.getElementById(show).style.display="block";
}
</script>
<style type="text/css">
.rolloverad {
	position: fixed; 
	right: 0; 
	top: 150px; 
	width: 25px; 
	height: 149px; 
	background: #65a825;
	display:block;
}

.rolloveradexpanded {
    display: none;
    z-index:1000;
    background:#FFF;
    color:#000;
	position: fixed; 
	right: 0; 
	top: 0px;
	bottom: 0px; 
	width: 100%; 
	border: 1px solid grey;
	overflow-x: hidden;
	-ms-overflow-x: hidden;
	overflow: scroll;
}

.properties {
	 width:100%; 
	 overflow-y: hidden; 
	 overflow: scroll;
}

.rolloverad2 {
	position: fixed; 
	right: 0; 
	top: 300px; 
	width: 25px; 
	height: 232px; 
	background: #5e9cc4;	
}

.rolloveradexpanded2 {
    display: none;
    z-index:1000;
    background:#FFF;
    color:#000;
	position: fixed; 
	right: 0; 
	top: 0px;
	bottom: 0px; 
	width: 500px; 
	overflow: scroll;
	border: 1px solid grey;
}

</style>
<!--
HORIZONTAL SCROLLING
overflow: auto;
overflow-y: hidden;
-ms-overflow-y: hidden;
-->


<div class="rolloverad" id="rolloverad" style="display:block" onclick="replace('rolloverad','rolloveradexpanded')">
<table><tr><td style="width:1px"></td><td style="text-align:center"><span class="para12whitesh">F<BR>A<BR>V<BR>O<BR>R<BR>I<BR>T<BR>E<BR>S</span></td></tr></table></div>
<div class="rolloveradexpanded" id="rolloveradexpanded" style="display:none"><table><tr><td width="500" height="100%"><!--#include file="favorites_pop_out.asp"--></td></tr></table></div>
<div class="rolloverad2" id="rolloverad2" style="display:block" onclick="replace('rolloverad2','rolloveradexpanded2')">
<table><tr><td style="width:1px"></td><td align="center"><span class="para12whitesh">R<BR>E<BR>C<BR>E<BR>N<BR>T<BR>L<BR>Y<BR>&nbsp;<BR>V<BR>I<BR>E<BR>W<BR>E<BR>D</span></td></tr></table></div>
<div class="rolloveradexpanded2" id="rolloveradexpanded2" style="display:none"><table><tr><td width="500" height="100%"><!--#include file="recently_viewed.asp"--></td></tr></table></div>

Open in new window


THANKS!
0
Comment
Question by:Nico2011
  • 8
  • 7
16 Comments
 
LVL 20

Expert Comment

by:Daniel Van Der Werken
ID: 39945351
You're missing the onClick() event in the other divs.

try this:
<script language="javascript">
function replace( hide, show ) {
  document.getElementById(hide).style.display="none";
  document.getElementById(show).style.display="block";
}
</script>
<style type="text/css">
.rolloverad {
	position: fixed; 
	right: 0; 
	top: 150px; 
	width: 25px; 
	height: 149px; 
	background: #65a825;
	display:block;
}

.rolloveradexpanded {
    display: none;
    z-index:1000;
    background:#FFF;
    color:#000;
	position: fixed; 
	right: 0; 
	top: 0px;
	bottom: 0px; 
	width: 100%; 
	border: 1px solid grey;
	overflow-x: hidden;
	-ms-overflow-x: hidden;
	overflow: scroll;
}

.properties {
	 width:100%; 
	 overflow-y: hidden; 
	 overflow: scroll;
}

.rolloverad2 {
	position: fixed; 
	right: 0; 
	top: 300px; 
	width: 25px; 
	height: 232px; 
	background: #5e9cc4;	
}

.rolloveradexpanded2 {
    display: none;
    z-index:1000;
    background:#FFF;
    color:#000;
	position: fixed; 
	right: 0; 
	top: 0px;
	bottom: 0px; 
	width: 500px; 
	overflow: scroll;
	border: 1px solid grey;
}

</style>
<!--
HORIZONTAL SCROLLING
overflow: auto;
overflow-y: hidden;
-ms-overflow-y: hidden;
-->


<div class="rolloverad" id="rolloverad" style="display:block" onclick="replace('rolloverad','rolloveradexpanded')">
<table><tr><td style="width:1px"></td><td style="text-align:center"><span class="para12whitesh">F<BR>A<BR>V<BR>O<BR>R<BR>I<BR>T<BR>E<BR>S</span></td></tr></table></div>
<div class="rolloveradexpanded" id="rolloveradexpanded" style="display:none" onclick="replace('rolloveradexpanded','rolloverad')"><table><tr><td width="500" height="100%">
<!--#include file="favorites_pop_out.asp"--></td></tr></table></div>
<div class="rolloverad2" id="rolloverad2" style="display:block" onclick="replace('rolloverad2','rolloveradexpanded2')">
<table><tr><td style="width:1px"></td><td align="center"><span class="para12whitesh">R<BR>E<BR>C<BR>E<BR>N<BR>T<BR>L<BR>Y<BR>&nbsp;<BR>V<BR>I<BR>E<BR>W<BR>E<BR>D</span></td></tr></table></div>
<div class="rolloveradexpanded2" id="rolloveradexpanded2" style="display:none" onclick="replace('rolloveradexpanded2','rolloverad2')"><table><tr><td width="500" height="100%">
<!--#include file="recently_viewed.asp"--></td></tr></table></div>

Open in new window

0
 

Author Comment

by:Nico2011
ID: 39945378
Nope - I intentionally missed those out as I would like to have a button to close them rather than a 'click anywhere'.  You can see that the buttons (which are down the right side of the screen) disappear when they are clicked and the other DIV doesn't open...

Here is the URL:

Test URL
0
 
LVL 58

Expert Comment

by:Gary
ID: 39945395
Your targeting the wrong ID's

<div class="rolloverad" id="rolloverad" style="display:block" onclick="replace('rolloveradexpanded2','rolloveradexpanded')">
    <table>
        <tr>
            <td style="width:1px"></td>
            <td style="text-align:center"><span class="para12whitesh">F<BR>A<BR>V<BR>O<BR>R<BR>I<BR>T<BR>E<BR>S</span>
            </td>
        </tr>
    </table>
</div>
<div class="rolloveradexpanded" id="rolloveradexpanded" style="display:none">
    <table>
        <tr>
            <td width="500" height="100%"><!--#include file="favorites_pop_out.asp"--></td>
        </tr>
    </table>
</div>
<div class="rolloverad2" id="rolloverad2" style="display:block" onclick="replace('rolloveradexpanded','rolloveradexpanded2')">
    <table>
        <tr>
            <td style="width:1px"></td>
            <td align="center"> <span class="para12whitesh">R<BR>E<BR>C<BR>E<BR>N<BR>T<BR>L<BR>Y<BR>&nbsp;<BR>V<BR>I<BR>E<BR>W<BR>E<BR>D</span>

            </td>
        </tr>
    </table>
</div>
<div class="rolloveradexpanded2" id="rolloveradexpanded2" style="display:none">
    <table>
        <tr>
            <td width="500" height="100%"><!--#include file="recently_viewed.asp"--></td>
        </tr>
    </table>
</div>

Open in new window


function replace(hide, show) {
    document.getElementById("rolloverad").style.display = "none";
    document.getElementById(hide).style.display = "none";
    document.getElementById(show).style.display = "block";
}

Open in new window

0
 

Author Comment

by:Nico2011
ID: 39945406
No - there are two buttons and two large 'expanded' div's and I am trying to get the button to be clicked so the large div shows (which contains the user's favorites)
0
 
LVL 58

Expert Comment

by:Gary
ID: 39945417
Edit
Forget that I misunderstood, your code works fine, but you are covering the sidebar when you show the other div.
0
 

Author Comment

by:Nico2011
ID: 39945422
thanks - but I'm not sure I understand!  I don't seem to be able to get the expanded panel to show when the button is clicked
0
 
LVL 58

Expert Comment

by:Gary
ID: 39945431
You have this function overriding your onclick declaration i.e. this fires before your replace function.
function onclick(event) {
replace('rolloverad2','rolloveradexpanded2')
}

Open in new window

0
 
LVL 58

Expert Comment

by:Gary
ID: 39945451
You have this for your replace function
<script language="javascript">

change it to
<script>
or
<script TYPE="text/javascript">
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

Author Comment

by:Nico2011
ID: 39945462
Thanks - done that, but it STILL won't play ball...!  The button just disappears and the large div doesn't display...
0
 

Author Comment

by:Nico2011
ID: 39945475
just noticed this answer, but noit sure where to put it.  I have the onclick inline, which I thought would work.  I don;t know how to call it the way you have written it:

function onclick(event) {
replace('rolloverad2','rolloveradexpanded2')
}

Open in new window


Sorry....
0
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 39945490
Ahhh! you cannot use replace as a function name - it is a reserved word i.e. its a js function itself.
0
 

Author Closing Comment

by:Nico2011
ID: 39945509
WELL DONE - boy oh boy, you really earned those points!  I wish I could give more for effort ;-)  I took the original code from StackOverFlow too, so would have thought whoever wrote that would have known!  Have a good weekend - thank you very much
0
 
LVL 58

Expert Comment

by:Gary
ID: 39945528
You still have this function overriding your click event

function onclick(event) {
replace('rolloverad2','rolloveradexpanded2')
}

Open in new window

0
 

Author Comment

by:Nico2011
ID: 39945536
where do you see that?  It works now and I can't see this code - I even took the source code of the full page and searched...
0
 
LVL 58

Expert Comment

by:Gary
ID: 39945567
Ignore it, must be a FF thing.
0
 

Author Comment

by:Nico2011
ID: 39945593
ok - thanks again
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
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)

910 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

24 Experts available now in Live!

Get 1:1 Help Now