Could someone help?

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

Can you post the rest of the HTML please?

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 · Author

I've honestly no clue. I've tried calling a second function for the other button. However, it still didn't seem to work. I'm not the best with Javascript.

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 · Author

Sad to say, this did not fix my issue. It's still doing it. However, thank you for the heads up as I must have missed that. -facepalms-

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:

Use pascal case for your id/class names. Exmaple: homeDiv, specialDiv, aboutDiv etc..
https://msdn.microsoft.com/en-us/library/x2dbyw72(v=vs.71).aspx
Give HomeDIV, AboutDIV and SpecialDIV a class so you cant style them via css easier.

Posted 6 years ago · Author

Instead of showing one tab, this code blocked all tabs once clicked on one. I can no longer see any of my text in any of the DIVs.

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";   
}

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!