iframe button and their states

  • buzzby365
  • Proficient
  • Proficient
  • buzzby365
  • Posts: 288

Post 3+ Months Ago

is it possible to have buttons in an iframe (these buttons have an 'off' state and an 'on' state) when pressed keep their on state until another button is pressed thereby relieving the button back to their off state? so basically the button stays highlighted once it is pressed until another button is pressed. then the first highlighted button goes back to its first orginal sate/colour and the next button i have pressed stays in its 'pressed' state - probably sight change in colour.
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • RichB
  • Guru
  • Guru
  • User avatar
  • Posts: 1121
  • Loc: Boston

Post 3+ Months Ago

I'm not sure if this is what you mean, but you could use the disabled property to "gray out" a button and make it unavailabe until another button is pressed:

Code: [ Select ]
<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
<!--
function toggle(off,on)
{
off.disabled=true;
on.disabled=false;
}
// -->
</script>
</head>
<body>
<input id="button1" type="button" value="Button 1" onclick="toggle(this,document.getElementById('button2'))">
<input id="button2" type="button" value="Button 2" onclick="toggle(this,document.getElementById('button1'))">
</body>
</html>
  1. <html>
  2. <head>
  3. <title>Untitled</title>
  4. <script type="text/javascript">
  5. <!--
  6. function toggle(off,on)
  7. {
  8. off.disabled=true;
  9. on.disabled=false;
  10. }
  11. // -->
  12. </script>
  13. </head>
  14. <body>
  15. <input id="button1" type="button" value="Button 1" onclick="toggle(this,document.getElementById('button2'))">
  16. <input id="button2" type="button" value="Button 2" onclick="toggle(this,document.getElementById('button1'))">
  17. </body>
  18. </html>
  • buzzby365
  • Proficient
  • Proficient
  • buzzby365
  • Posts: 288

Post 3+ Months Ago

let me explain abit more.

i have a row of buttons. if i am at the 'about us' page i want the 'about us' button "greyed out" until i press the (for example) 'services' button. then the 'about us' button will regain its unpressed state and the 'services' button will be greyed out.

i see how the script works for 2 buttons but i have a row of 8 buttons. how will that go then?
  • RichB
  • Guru
  • Guru
  • User avatar
  • Posts: 1121
  • Loc: Boston

Post 3+ Months Ago

What kind of buttons are you using? Perhaps you could post an example of the code...
  • Rabid Dog
  • Web Master
  • Web Master
  • User avatar
  • Posts: 3245
  • Loc: South Africa

Post 3+ Months Ago

buzzby365 wrote:
let me explain abit more.

i have a row of buttons. if i am at the 'about us' page i want the 'about us' button "greyed out" until i press the (for example) 'services' button. then the 'about us' button will regain its unpressed state and the 'services' button will be greyed out.

i see how the script works for 2 buttons but i have a row of 8 buttons. how will that go then?


try this
Code: [ Select ]
var curMnu        = "";
        function shadeMenu(menu){
            unShadeMenu();
            document.getElementById(menu).style.backgroundColor = "#cccccc";
            curMnu            = menu;
        }
        
        function unShadeMenu(){
            if (curMnu != ""){
                document.getElementById(curMnu).style.backgroundColor = "#ffffff";
            }
        }
  1. var curMnu        = "";
  2.         function shadeMenu(menu){
  3.             unShadeMenu();
  4.             document.getElementById(menu).style.backgroundColor = "#cccccc";
  5.             curMnu            = menu;
  6.         }
  7.         
  8.         function unShadeMenu(){
  9.             if (curMnu != ""){
  10.                 document.getElementById(curMnu).style.backgroundColor = "#ffffff";
  11.             }
  12.         }


and then on your links

Code: [ Select ]
<a id="about" href="page.html" onMouseOver="shadeMenu('about')">about</a>


this will work until the page is refreshed or a user selects one of the links.

The only way to maintain state between the pages so that the page being visited is highlighted is to either use frames or pass some form of variable to a server side script that can dynamically write an onload attribute that will call the shade and unshade functions
  • buzzby365
  • Proficient
  • Proficient
  • buzzby365
  • Posts: 288

Post 3+ Months Ago

i see. that code is brill. but my buttons are .gif rollovers. is there a way to adapt this script to take in that fact?
  • Rabid Dog
  • Web Master
  • Web Master
  • User avatar
  • Posts: 3245
  • Loc: South Africa

Post 3+ Months Ago

buzzby365 wrote:
i see. that code is brill. but my buttons are .gif rollovers. is there a way to adapt this script to take in that fact?


Code: [ Select ]
var curImg        = "";
        var oldImgID    = "";
        function shadeMenuImg(imgID, imgNewPath, imgOldPath){
            unShadeMenuImg();
            document.images[imgID].src = imgNewPath;
            curImg                      = imgOldPath;
            oldImgID                  = imgID;
            
        }
        
        function unShadeMenuImg(){
            //alert ('looking')
            if (curImg != "" && oldImgID != ""){
                document.images[oldImgID].src = curImg;
            }
        
  1. var curImg        = "";
  2.         var oldImgID    = "";
  3.         function shadeMenuImg(imgID, imgNewPath, imgOldPath){
  4.             unShadeMenuImg();
  5.             document.images[imgID].src = imgNewPath;
  6.             curImg                      = imgOldPath;
  7.             oldImgID                  = imgID;
  8.             
  9.         }
  10.         
  11.         function unShadeMenuImg(){
  12.             //alert ('looking')
  13.             if (curImg != "" && oldImgID != ""){
  14.                 document.images[oldImgID].src = curImg;
  15.             }
  16.         

this is the easy way to use the function look below

Code: [ Select ]
<img src="image1.jpg" name='img1' onMouseOver="shadeMenuImg('img1','newImage.jpg','image1.jpg')">


let me know if it works remeber to set your image border to zero if you are using it inside an <a href> scenario :twisted:
  • buzzby365
  • Proficient
  • Proficient
  • buzzby365
  • Posts: 288

Post 3+ Months Ago

sorry but it doesnt work. the old image moves over to the left slightly. the new image doesnt appear at all. i am sure that you understand what i am after. if not let me explain. i would like a script that enables the user press a button to get to a page. the button that is pressed stays in its 'over' state until the user presses another button to go to another page.

thanks for your help in this. it is much appreciated. if you can alter ya script somewhat it would be great. i am rackin my brain trying to figure this out aswell. if i get the code before anyone i will post it up here
  • Rabid Dog
  • Web Master
  • Web Master
  • User avatar
  • Posts: 3245
  • Loc: South Africa

Post 3+ Months Ago

buzzby365 wrote:
sorry but it doesnt work. the old image moves over to the left slightly. the new image doesnt appear at all. i am sure that you understand what i am after. if not let me explain. i would like a script that enables the user press a button to get to a page. the button that is pressed stays in its 'over' state until the user presses another button to go to another page.

thanks for your help in this. it is much appreciated. if you can alter ya script somewhat it would be great. i am rackin my brain trying to figure this out aswell. if i get the code before anyone i will post it up here


are you using frames?
  • buzzby365
  • Proficient
  • Proficient
  • buzzby365
  • Posts: 288

Post 3+ Months Ago

i am using iframes
  • RichB
  • Guru
  • Guru
  • User avatar
  • Posts: 1121
  • Loc: Boston

Post 3+ Months Ago

Are the images in the parent document and the target the iframe?

Something like this example?

http://www.gotrivia.com/test2/

PS- I used the images from the page you used as an example earlier. I don't usually use other's images, but I didn't have time to make any, and it's just for this example.
  • buzzby365
  • Proficient
  • Proficient
  • buzzby365
  • Posts: 288

Post 3+ Months Ago

yes. that is brilliant. just what i wanted. i will adapt the script. but this is perfect.

what did you do this script in? dreamweaver? did you compile the javascript yourself?
  • RichB
  • Guru
  • Guru
  • User avatar
  • Posts: 1121
  • Loc: Boston

Post 3+ Months Ago

The preload function is the one that comes with dreamweaver; the rest I wrote myself, although the swap is just a standard one with an if wrapped around it.
  • buzzby365
  • Proficient
  • Proficient
  • buzzby365
  • Posts: 288

Post 3+ Months Ago

just a note to this. i see where the disadvantage is. in the text you cannot have links to other pages. all links are governed by the image links. that way the image changes. is there a way that a link can be in the text but still the image changes? i am not sure there is one because all the code happens in the img tag
  • RichB
  • Guru
  • Guru
  • User avatar
  • Posts: 1121
  • Loc: Boston

Post 3+ Months Ago

You could have the links that point to pages on your own site invoke the img code in their onclick handler. I added a function to handle the text link clicks that just invokes the code for the correspoding image.

Code: [ Select ]
function doImgClick(img) {
    document.images[img].onmouseover();
    document.images[img].onclick();
    return true;
}
  1. function doImgClick(img) {
  2.     document.images[img].onmouseover();
  3.     document.images[img].onclick();
  4.     return true;
  5. }


The I add the onclick to the text links that show in the iframe:

Code: [ Select ]
<a href="home.html" onclick="parent.doImgClick('img1')">home</a>


If the text links are in the parent page that holds the iframe I did this:

Code: [ Select ]
<a href="home.html" target="myFrame" onclick="doImgClick('img1')">home</a>


...basically just targeting the iframe for those and not adding the parent to the function call. That way the code for the image highlighting only needs to be in the parent page that holds the iframe.

I probably should have named the images something other than 'img1' so that it would be a little easier to keep track of which was which. You can name them something more sensible like name="home" so that when you're coding your text links it will be easier to remember which name to pass to the doImgClick function. Just remember to go back and change the img code to match.

Anyway here's the example.

Have a look and see if that's what you were looking for.

Post Information

  • Total Posts in this topic: 15 posts
  • Users browsing this forum: No registered users and 59 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.