?
Solved

DIV with Rollover

Posted on 2014-03-21
16
Medium Priority
?
275 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
[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
  • 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
Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

 

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
 

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 2000 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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

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 position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Suggested Courses

800 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