Solved

DIV with Rollover

Posted on 2014-03-21
16
255 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 19

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
6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

 

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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

747 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

10 Experts available now in Live!

Get 1:1 Help Now