Solved

DIV with Rollover

Posted on 2014-03-21
16
267 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
PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

 

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

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
SharePoint and CAML query help 4 26
Jquery Ajax - on change event not being picked up 9 60
Diff of the day 2 41
Set css in function 11 54
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
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 …

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