How do I get 2 scrollbars to open when they are both placed on 1 page?'

JavaScript
1

Much appreciated if someone can help me out with this.

Both scrollbars open without an issue when placed individually, but not when they are both placed on 1 page.

How do I fix this?

<div style="width:0;" onclick="mysc=document.getElementById('myscroll1'); mysc.style.display='block'; this.style.display='none'">

<a href="http://linksscrollbar.blogspot.com/" style="cursor: pointer;display:block; width: 256px; height: 200px; background-color:transparent; color:transparent; border: 5px solid #0059dd; border-radius:0px;font-family:Tahoma; font-weight: bold;font-size:30px; color:#0059dd;text-align: center;line-height:100px;text-decoration: none;" target="frame">Links</a></div>

<div id="myscroll1" style="display: none;">
<iframe style="display:block;" frameborder="0" name="frame" height="200" width="266" ></iframe>
</div>


<div style="width:0;" onclick="myscr=document.getElementById('myscroll2'); myscr.style.display='block'; this.style.display='none'">

<a href="http://radioscrollbar.blogspot.com/" style="cursor: pointer;display:block; width: 256px; height: 256px; background-color:transparent; color:transparent; border: 5px solid #0059dd; border-radius:0px;font-family:Tahoma; font-weight: bold;font-size:30px; color:#0059dd;text-align: center;line-height:100px;text-decoration: none;" target="frame">Station Hub</a></div>

<div id="myscroll2" style="display: none;">
<iframe style="display:block;" frameborder="0" name="frame" height="266" width="266" ></iframe>
</div>

This is them working individually without any issue:

Links
http://www.cssdesk.com/epseJ

Radio Hub
http://www.cssdesk.com/Q5jMX

How can I get them to both work when they are on the same page?

And you can see on my testpage, only one scrollbar is opening up.
http://testpage23456.blogspot.com/

2

Iā€™m not at all sure what youā€™re trying to achieve here, but it looks as if you are greatly over-complicating things.

If you have a <div> with fixed dimensions, and the content is too big to fit, then the default behaviour is for the div to generate scrollbars to allow access to the full content. You seem to be using a JS solution to try to achieve native behaviour.

If Iā€™ve missed the point, then please explain the problem in more detail.

3

Both of them are in iframe. Why is it required to first click on the boxes first?

Try putting the content as it is and use overflow css code for putting scroll bars there.

4

Fixing a typo might help. Dunno.

onclick="mysc=document.getElementById('myscroll1'); mysc.style.display='block';
--------------------------------------------------------^

onclick="mysc=document.getElementById('myscroll2'); myscr.style.display='block';

5

I want to be able to use 2 iframe scrollbar divs on one page, and it will only let me use one for a reason I donā€™t know.

6

I donā€™t have a typo.

7

Iā€™m sorry, I know that YOU donā€™t have a typo, but the code that you posted above does.

8

no it doesnā€™t. Whereā€™s the typo? Thereā€™s no typo.

<div style="width:0;" onclick="mysc=document.getElementById('myscroll1'); mysc.style.display='block'; this.style.display='none'">

<div style="width:0;" onclick="myscr=document.getElementById('myscroll2'); myscr.style.display='block'; this.style.display='none'">
9

Once again, if we knew what you wanted to achieve as the end result, we might be able to suggest a better solution.

You do in the code youā€™ve posted here.

10

Whereā€™s here?

11

Maybe not, but he DID change the code that he posted after it was originally posted, so maybe the confusion is entirely mine for not keeping up.

12

I donā€™t recall changing anything.

13

Here, as in ā€œon this forumā€. I didnā€™t look at your blog source code, so I donā€™t know if you have a typo there or not.

14

This is what happens when I put both codes on to 1 page.
http://www.cssdesk.com/TaDQh

Only 1 shows and the other code disappears.

15

Thatā€™s how I have it set up, and prefer it that way.

16

The JavaScripts perform as explained separately, but do not perform correctly when both appear on the same web page.

There is interaction between the JavaScripts. Moving this to the JS category.

17

Is there any way to fix it so that both are able to work on 1 page?

18

You do understand that relying on JS for this means it wonā€™t work at all for anybody who has JS disabled, or for whom JS doesnā€™t load correctly, donā€™t you?

19

To assist anyone who is willing to look at this issue, I have removed the inline CSS so the inline JS is easier to read. As stated by asasass, the boxes function as intended separately, but not if both are enabled on the same page. Move the comment marks to enable and disable the boxes.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>asasass' boxes</title>
    <style>

.buttonbox {width:0;}

#myscroll1,
#myscroll2 {display:none;}

iframe {
    display:block;
    border:0;
}

#myscroll1 iframe {width:266px;height:200px;}
#myscroll2 iframe {width:266px;height:266px;}

.blogs,
.radio {
    cursor:pointer;
    display:block;
    width:256px;
    height:200px;
    background-color:transparent;
    color:transparent;
    border:5px solid #0059dd;
    border-radius:0px;
    font-family:Tahoma;
    font-weight:bold;
    font-size:30px;
    color:#0059dd;
    text-align:center;
    line-height:100px;
    text-decoration:none;
}
.radio {
    height:256px;
}
a.blogs:hover,
a.radio:hover {border-color:magenta;}

    </style>
</head>
<body>

<!--
<div class="buttonbox" onclick="mysc=document.getElementById('myscroll1'); mysc.style.display='block'; this.style.display='none'">
    <a class="blogs" href="http://linksscrollbar.blogspot.com/" target="frame">Links</a>
</div>
<div id="myscroll1">
    <iframe name="frame"></iframe>
</div>
-->

<div class="buttonbox" onclick="myscr=document.getElementById('myscroll2'); myscr.style.display='block'; this.style.display='none'">
    <a class="radio" href="http://radioscrollbar.blogspot.com/" target="frame">Station Hub</a>
</div>
<div id="myscroll2">
    <iframe name="frame"></iframe>
</div>

</body>
</html>
1 Like
20

You are targeting ā€˜frameā€™ in both blocks so only one will ever get found. They need different names.

<a class="radio" href="http://radioscrollbar.blogspot.com/" target="frame2">Station Hub</a>
</div>
<div id="myscroll2">
    <iframe name="frame2"></iframe>
</div>
4 Likes