Multiple Javascript Functions..

Posted 12 years ago · Author

i am currently redoing my HP and i ran into a conflict...
i have two javascripts that are running and i cant figure out whats wrong... but they keep conflicting when they are activated...

Here is the old Javascript
[spoiler=open]

Code

function toggle() {
   var oDiv = document.getElementById('aboutme')
   var oBtn = document.getElementById('aboutmebtn')
   if (oBtn.value=='About Me') {
      oDiv.style.display = 'block'
      oBtn.value='Hide It!'
   } else {
      oDiv.style.display = 'none'
      oBtn.value='About Me'
   }
}

Seccond one:

Code

function toggle() {
   var moo = document.getElementById('pictures')
   var poo = document.getElementById('picturesbtn')
   if (poo.value=='pictures') {
      moo.style.display = 'block'
      poo.value='Hide It!'
   } else {
      moo.style.display = 'none'
      poo.value='pictures'
   }
}

Third javascript:

Code

function toggle() {
   var zoo = document.getElementById('mylove')
   var oink = document.getElementById('lovebtn')
   if (oink.value=='love') {
      zoo.style.display = 'block'
      oink.value='Hide It!'
   } else {
      zoo.style.display = 'none'
      oink.value='love'
   }
}

[/spoiler]

And here is the new javascript:
[spoiler=open]

Code

function aboutme() {
   var oDiv = document.getElementById('aboutme')
   var oBtn = document.getElementById('aboutmebtn')
   if (oBtn.value=='About Me') {
      oDiv.style.display = 'block'
      oBtn.value='Hide It!'
   } else {
      oDiv.style.display = 'none'
      oBtn.value='About Me'
   }
}
function pictures() {
   var moo = document.getElementById('pictures')
   var poo = document.getElementById('picturesbtn')
   if (poo.value=='pictures') {
      moo.style.display = 'block'
      poo.value='Hide It!'
   } else {
      moo.style.display = 'none'
      poo.value='pictures'
   }
}
function mylove() {
   var zoo = document.getElementById('mylove')
   var oink = document.getElementById('lovebtn')
   if (oink.value=='love') {
      zoo.style.display = 'block'
      oink.value='Hide It!'
   } else {
      zoo.style.display = 'none'
      oink.value='love'
   }
}

[/spoiler]

Here is the current HTML + CSS

Code

<style type="text/css"> 
#aboutme_panel, #contact_panel, #dev_panel, #wishlist_panel, #visitors_panel, 
#messages_panel, #tagcloud_panel, #stickers_panel, #room_panel, #rankings_panel, #cool_panel, #gallery_panel, #friends_panel, #rss_panel, #url_panel, #special_panel,#outfits_panel, #video_panel, #groups_panel, #slideshow_panel, #badges_panel  { 
width: 900px !important
}
#rightColumn, #url_panel_colRow {
display:none !important;
}
</style>

<!-- Background -->
<img src="http://i85.photobucket.com/albums/k69/brandenwolf/IphoneBackground.png" width="439" height="794" style="z-index:1;">

<!-- Avi Pic -->
<div id="avi_pic" style="position: absolute; top: 213px; left: 196px; width: 160px; height: 220px; z-index:2;">
   <img src="http://www.imvu.com/catalog/web_av_pic.php?av=AVINAME" width="160" height="220" style=" border-bottom-left-radius:20px; border-bottom-right-radius:20px; border-top-left-radius:20px; border-top-right-radius:20px;" />
 </div>
 
<!-- Youtube Video  -->
<div style="position: absolute; width: 313px; height: 146px; left: 60px; top: 508px; z-index:3;">
   <div style="text-align: center; margin: auto"><object type="application/x-shockwave-flash" style="width:260pxpx; height:146pxpx;" data="http://www.youtube.com/v/cHcVU5cGUNE?rel=0&autoplay=1&showsearch=0&version=3&showinfo=0&modestbranding=1">
      <param name="movie" value="http://www.youtube.com/v/cHcVU5cGUNE?rel=0&autoplay=1&showsearch=0&version=3&showinfo=0&modestbranding=1" />
      <param name="allowFullScreen" value="true" />
      <param name="allowscriptaccess" value="always" />
<param name="wmode" value="transparent"  />
   </object><div style="font-size: 0.8em"></div></div>
</div>

<!-- about me button -->
<div style="position: absolute; width: auto; height: auto; top: 220px; left:77px; z-index:4; ">
  <a id="aboutmebtn" href="javascript:aboutme();"><img src="http://i85.photobucket.com/albums/k69/brandenwolf/aboutme.png" width="60" height="60"></a>
</div>

<!-- about me div -->
<div style=" background-image:url(http://i85.photobucket.com/albums/k69/brandenwolf/popupbackground.png); width:316px; height:480px; position:absolute; left:61px; top:180px;display:none; z-index:7;" id='aboutme'>
   <div style=" position: absolute; width: 100%; height: 480px; left:0px; top:0px;">
      <div align="right">
         <a id="aboutmebtn" href="javascript:aboutme();">
         <img src="http://i85.photobucket.com/albums/k69/brandenwolf/Exit.png" width="25" height="25"> </a>
            <div style="position:absolute; width:291px; height:479px; top:0px; left:0px; overflow:auto" align="center">
               About Me<br />Currently In Progress... <br>Please press the "x" in the top right corner...
          </div>
      </div>
   </div>
</div>

<!-- Pictures button -->
<div style="position: absolute; width: auto; height: auto; top: 323px; left:77px; z-index:5;">
  <a id="picturesbtn" href="javascript:pictures();"><img src="http://i85.photobucket.com/albums/k69/brandenwolf/Photos.png" width="60" height="60"></a>
</div>

<!-- Pictures div -->
<div style=" background-image:url(http://i85.photobucket.com/albums/k69/brandenwolf/popupbackground.png); width:316px; height:480px; position:absolute; left:61px; top:180px;display:none; z-index:9;" id='pictures'>
   <div style=" position: absolute; width: 100%; height: 480px; left:0px; top:0px;">
      <div align="right">
         <a id="picturesbtn" href="javascript:pictures();">
         <img src="http://i85.photobucket.com/albums/k69/brandenwolf/Exit.png" width="25" height="25"> </a>
            <div style="position:absolute; width:291px; height:479px; top:0px; left:0px; overflow:auto" align="center">
               Pictures <br />Currently In Progress... <br>Please press the "x" in the top right corner...
                </div>
      </div>
   </div>
</div>

<!-- My Love button -->
<div style="position:absolute; width:auto; height:auto; top:426px; left:77px; z-index:6;">
  <a id="lovebtn" href="javascript:mylove();"><img src="http://i85.photobucket.com/albums/k69/brandenwolf/Mylove.png" width="60" height="60"></a>
</div>

<!-- my love div -->
<div style=" background-image:url(http://i85.photobucket.com/albums/k69/brandenwolf/popupbackground.png); width:316px; height:480px; position:absolute; left:61px; top:180px;display:none; z-index:11;" id='mylove'>
   <div style=" position: absolute; width: 100%; height: 480px; left:0px; top:0px;">
      <div align="right">
         <a id="lovebtn" href="javascript:mylove();">
         <img src="http://i85.photobucket.com/albums/k69/brandenwolf/Exit.png" width="25" height="25"> </a>
            <div style="position:absolute; width:291px; height:479px; top:0px; left:0px; overflow:auto" align="center">
               Relationship <br />Currently In Progress... <br>Please press the "x" in the top right corner...
                </div>
      </div>
   </div>
</div>

BTW... this isnt the complete code.. i still need to add another function to the third button im going to add...
but if you know how to fix this please help me...
i have done everything i can think of, to combining the javascript, to putting them on diffrent parts of the codeing, to renaming them...
i have a feeling its a very easy fix though lol

and i know there is some errors with the positioning of the divs.. i had it fixed but this code is a saved version of it..

[spoiler=Change Log]~~! Edit !~~
-Updated the code some

~~! Edit !~~
-added z-index to things that needed layering. (still cant fix youtube video showing through popup DIV)

~~! Edit !~~
-Fixed the cross javascript errors... just had to change the function names... (knew it was an easy fix)
now to fix the youtube player showing though the div..

~~! Edit !~~
-Fixed the background for the popup DIV's making the text/close button transparent
-Fixed the positioning of buttons
-Removed "home" button on ipod for the name of users
-Removed my personal data

~~! Edit !~~
-Fixed flash file showing through DIV
-Added rounded corners to AVI picture
-Adjusted the position of youtube video
-Added comments for easier navigation
-Added CSS for the homepages
-Remove a lot of unneeded codeing[/spoiler]

Last edited by Mew on Mon Jun 25, 2012 2:21 pm, edited 4 times in total.

Posted 12 years ago

Gratz smart boy

Posted 12 years ago

It woudl be more than wise to remove it since the av pic shows your name which is forbidden here due to safety issues for your own good. so just edit out the parts that show your name.

Posted 12 years ago · Author

Nikky wrote:
It woudl be more than wise to remove it since the av pic shows your name which is forbidden here due to safety issues for your own good. so just edit out the parts that show your name.

lol yes thank you for telling me this lol i completely forgot about that

Posted 12 years ago

Which browser are you using?
Most browsers have a javascript console that will give you error messages.
The error message would help if you can get it please.

Posted 12 years ago · Author

lol well i was doing it all in Dreamweaver. but i got it all fixed lol i just had to rename "function" to something else >.<

correction... had to change "toggle"

Posted 12 years ago

Mew wrote:
lol well i was doing it all in Dreamweaver. but i got it all fixed lol i just had to rename "function" to something else >.<

correction... had to change "toggle"

Some browsers are now requiring window.function for functions that are injected into a page with JavaScript.

Posted 12 years ago · Author

hmmm well i guess i will have to test it on other browsers

Product Requests

Create an account or sign in to comment

You need to be a member in order to leave a comment

Sign in

Already have an account? Sign in here

Create an account

Sign up for a new account in our community. It's easy!