Could someone help?

DeliciousDank
by DeliciousDank · 15 posts
6 years ago in Help & Requests
Posted 6 years ago · Author
Code
<map name="IMGMap">
  <area shape="rect" coords="696,454,824,497" id="1b" onclick="changeNavigation('AboutDIV')" />
  <area shape="rect" coords="696,501,825,538" id="2b" onclick="changeNavigation('SpecialDIV')" />
  <area shape="rect" coords="694,542,823,583" href="javascript:IMVU.messagePopupShow({force_recipient_id:})" title="Message" alt="MessageLink" />
  <area shape="rect" coords="694,587,825,631" href="imvu:StartIM?avatar=&fromSite=1" "title"="Chat" alt="Chat" />
</map>
<!-- DIV / Layout coding end -->
<script>
function changeNavigation(id)
{document.getElementById('MainDIV').innerHTML=document.getElementById(id).innerHTML}
</script>


Having some issues here. The buttons for About, and Special work perfectly. However, once ONE of them is clicked, the other no longer works. How do I go about fixing that?
Posted 6 years ago · Author
Code
<!-- Style Start -->
<style type="text/css">
#url_panel_colRow, #url_panel_header .paneltitletext {
   display:none;
}
#url_panel {
   border:none !important;
}
#url_panel_header {
   margin-bottom:0px;
   width:900px;
}
#url_panel_body {
   width:900px;
   height:900px;
}
#LayoutIMG {
   position:absolute;
   top:0px;
   left:0px;
   border:none;
}
.Content {
   color:#FFF;
   font-size:24px;
   font-family:Georgia, "Times New Roman", Times, serif;
   z-index:5000;
}
.Content a {
   color:#FFF !important;
}
#AviDIV {
   position:absolute;
   top:74px;
   left:58px;
   width:160px;
   height:220px;
   cursor:pointer;
}
#ScrollerDIV {
   position:absolute;
   top:270px;
   left:271px;
   width:540px;
   height:40px;
   font-weight:bold;
   font-size:16px !important;
   line-height:40px;
}
#MainDIV {
   position:absolute;
   top:370px;
   left:67px;
   width:585px;
   height:360px;
   overflow:auto;
}
</style>
<!-- Style End -->

<!-- DIV / Layout coding start -->
<div id="AviDIV" class="Content">
  <iframe src="http://www.imvu.com/catalog/web_av_pic.php?u=" width="200" height="300" frameborder="0">
</iframe>
</div>

<div id="ScrollerDIV" class="Content">
<marquee onmouseover="this.stop();" onmouseout="this.start();" direction="left" behavior="scroll" scrollamount="3">
A quote is just a tattoo on the tongue.
</marquee>
</div>

<div id="MainDIV" class="Content">

<div id="HomeDIV">
</br><center>Homepage</center>
</div>

<div id="AboutDIV" style="display:none">
</br><center>I'm still trying to figure this out too!</center>
</div>

<div id="SpecialDIV" style="display:none">
</br><center>Borky</center>
</br><center>There will be more added here in the future.</center>
</div>

</div>

<img src="" usemap="#IMGMap" id="LayoutIMG" />

<map name="IMGMap">
  <area shape="rect" coords="696,454,824,497" id="1b" onclick="changeNavigation('AboutDIV')" />
  <area shape="rect" coords="696,501,825,538" id="2b" onclick="changeNavigation('SpecialDIV')" />
  <area shape="rect" coords="694,542,823,583" href="javascript:IMVU.messagePopupShow({force_recipient_id:})" title="Message" alt="MessageLink" />
  <area shape="rect" coords="694,587,825,631" href="imvu:StartIM?avatar=&fromSite=1" "title"="Chat" alt="Chat" />
</map>
<!-- DIV / Layout coding end -->
<script>
function changeNavigation(id)
{document.getElementById('MainDIV').innerHTML=document.getElementById(id).innerHTML}
</script>
<!-- Script end -->


-- Wed Mar 28, 2018 1:23 am --

Anyone?
Posted 6 years ago
Code
<area shape="rect" coords="696,454,824,497" id="1b" onclick="changeNavigation('AboutDIV')" />
<area shape="rect" coords="696,501,825,538" id="2b" onclick="changeNavigation('SpecialDIV')" />


Alright, so that above is the section of code for the about and special buttons. As you can see, when you click either button, the onclick parameter calls the JavaScript function named "changeNavigation" and passes a string as the parameter.

We can see that here is the JavaScript function:
Code
function changeNavigation(id) 
{document.getElementById('MainDIV').innerHTML=document.getElementById(id).innerHTML}


The function's body only contains 1 line of code, so logically, the code must be breaking on that 1 line of code. Thus why the page's JavaScript GUI crashes and stops working after only 1 click. So, what do we see wrong with that 1 line of code? Anyone? Any guesses?
Posted 6 years ago
No problem. We understand and are here to teach. Basic first rule of JavaScript you should take from this experience: Each complete line of code inside of the body of a function should end in a semicolon. You are missing a semicolon after the line of code I pointed out to you.

Find:
Code
{document.getElementById('MainDIV').innerHTML=document.getElementById(id).innerHTML} 



Replace with:
Code
{document.getElementById('MainDIV').innerHTML=document.getElementById(id).innerHTML;}


Otherwise, your GUI runs that line and then the JavaScript engine errors / crashes on that page ... which is why your buttons are only working for 1 click.

That might not be your only error, but that should fix the issue you described.
Posted 6 years ago
@DeliciousDank


Your javascript won't work because you're telling it to populate the innerHTML of MainDIV with HomeDIV, AboutDIV and SpecialDIV. HomeDIV, AboutDIV and SpecialDIV are children of MainDIV. innerHTML basically means anything between the tags. So in this case everything between <div id="MainDiv"> and </div> is it's innerHTML including those 3 divs.

HomeDIV, AboutDIV and SpecialDIV would have to be outside of MainDIV in order for this code to work. But the HTML you have now is the correct way of doing this. What you need to do instead of setting innerHTML is toggle the visibility of each div.


This function should do the trick:
Code
function changeNavigation(id) {
   document.getElementById('HomeDIV').style.display = "none";
   document.getElementById('AboutDIV').style.display = "none";
   document.getElementById('SpecialDIV').style.display = "none";
   id.style.display = "block";   
}


What this function does is hides all 3 divs, then sets the display value of the div you passed to the function to block making it appear.



Some other errors with your code:

  • </br> should be <br/> instead. Self closing tags always have the slash at the end.



Some suggestions to improve your code:
Posted 6 years ago
Correct, it hides all of the divs then shows the one you want. I have an idea why it's not working for you. Try this code instead:

Code
function changeNavigation(id) {
   document.getElementById('HomeDIV').style.display = "none";
   document.getElementById('AboutDIV').style.display = "none";
   document.getElementById('SpecialDIV').style.display = "none";
   document.getElementById(id).style.display = "block";   
}

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

SIGN IN NOW

Create an account

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

REGISTER A NEW ACCOUNT