HomeHome  SearchSearch  Rules & Guidelines  Staff List  MemberlistMemberlist  RegisterRegister  Log inLog in  
Announcements

September 13th, 2017: Adding tutorials for the badging community! We're looking for volunteers to feature and help us write guides - PM Panton to get started with our project!


July 3rd, 2017: Canvas Tutorials is currently undergoing a major revamp. Please excuse any hiccups or glitches.


Coming soon

About Us

Canvas creates and supports an IMVU education environment. We offer tutorials and assistance from some of the community's most active and knowledgeable. Tutorials by users, for users!

Staff
Staff Updates
Important Links
Statistics
We have 1424 registered users
The newest registered user is Virtualdoll

Our users have posted a total of 2565 messages in 156 subjects
Canvas Time
Share | 
 

 Dynamic DIV Homepage

View previous topic View next topic Go down 
Go to page : 1, 2, 3  Next
CanvasInc

avatar
View user profile
http://avatars.imvu.com/CanvasInc

PostSubject: Dynamic DIV Homepage Tue Aug 14, 2012 6:18 am

Welcome to the Dynamic DIV Homepage tutorial! Below will be the coding, the video instructions and a complimentary FAQ in case anything is unclear. Like it has been said before, if you have any questions or something is malfunctioning - please ask it. Use this thread as your blank canvas and ask any and all questions you can come up with. We hope you enjoy the tutorial! As well - if you liked the tutorial or want us to fix something, review it and let us know how it worked for you.

Please note that this code isn't set up of one specifiec browser, after installing the coding on to your homepage you may need to add pixels to the top and/or left coordinates. This is not a universal code that works well with all browsers.

Questions That Have Come Up:



Reviews:
Back to top Go down
CanvasInc

avatar
View user profile
http://avatars.imvu.com/CanvasInc

PostSubject: Re: Dynamic DIV Homepage Tue Aug 14, 2012 6:22 am

Video Instructions: Click Here
Installation Instructions: Click Here

The Base Coding:

Code:
<script>
   function changeNavigation(id)
   {document.getElementById('mainbox'). innerHTML=document.getElementById(id). innerHTML}
   </script>
<img style="float:center:" src="IMAGE_LINK" usemap="#ImageMap1">

<map id="ImageMap1" name="ImageMap1">
   <area shape="rect" coords="000,000,000,000" id="1b" onClick="changeNavigation('Home')">
   <area shape="rect" coords="000,000,000,000" id="2b" onClick="changeNavigation('About')">
   <area shape="rect" coords="000,000,000,000" id="3b" onClick="changeNavigation('Love')">
   <area shape="rect" coords="000,000,000,000" id="4b" onClick="changeNavigation('Friends')">
   <area shape="rect" coords="000,000,000,000" id="5b" onClick="changeNavigation('Gallery')">
   <area shape="rect" coords="000,000,000,000" id="6b" onClick="changeNavigation('Support')">
   <area shape="rect" coords="000,000,000,000" id="7b" onClick="changeNavigation('FAQ')">
</map>

<div id="mainbox" style="position:absolute; left:227px; top:161px; width:414px; height:174px; overflow: auto; border:0px; background-color:transparent; color:#000000;"> <center> <font face="verdana" size="1" color="white">
This tab will feature the same text found in your " Home " tab.
</font></center>
</div>

<div id="Home" style="display:none">
<center> <font face="verdana" size="1" color="white">
DYNAMIC! [Home]
</font></center>
</div>

<div id="About" style="display:none">
<center> <font face="verdana" size="1" color="white">
DYNAMIC! [About]
</font></center>
</div>

<div id="Friends" style="display:none">
<center> <font face="verdana" size="1" color="white">
DYNAMIC! [Friends]
</font></center>
</div>

<div id="Love" style="display:none">
<center> <font face="verdana" size="1" color="white">
DYNAMIC! [Love]
</font></center>
</div>

<div id="Gallery" style="display:none">
<center> <font face="verdana" size="1" color="white">
DYNAMIC! [Gallery]
</font></center>
</div>

<div id="Support" style="display:none">
<center> <font face="verdana" size="1" color="white">
DYNAMIC! [Support]
</font></center>
</div>

<div id="FAQ" style="display:none">
<center> <font face="verdana" size="1" color="white">
DYNAMIC! [FAQ]
</font></center>
</div>

<div id="other_box" style="width:000px; height:000px; position:absolute; left:000px; top: 000px; z-index:1">

</div>


<div id="avi_box" style="width:160px; height:220px; position:absolute; left:000px; top: 000px; z-index:1">

</div>


<style type="text/css">   #aboutme_panel, #contact_panel,

#dev_panel, #wishlist_panel, #visitors_panel,  

#messages_panel, #tagcloud_panel, #stickers_panel,

#collect_panel,   #room_panel, #rankings_panel,

#cool_panel, #gallery_panel, #friends_panel,  

#streetteam_panel, #blog_panel, #video_panel_header,

#music_panel, #rss_panel, #url_panel,  

#special_panel,#outfits_panel {      width:900px !important;   }  

#rightColumn {      display:none !important;   }</style>  <style

type="text/css">#url_panel_colRow, .imvucodes_net {

display:none !important; }</style>
Back to top Go down
CanvasInc

avatar
View user profile
http://avatars.imvu.com/CanvasInc

PostSubject: Re: Dynamic DIV Homepage Tue Aug 14, 2012 6:22 am

This tutorial is complete and approved. -Admin
Back to top Go down
The author of this message was banned from the forum - See the message
Nickolas

avatar
View user profile
Role : Designer & Coder
Location : Somewhere
http://niq-olas.com/

PostSubject: Re: Dynamic DIV Homepage Mon Jan 07, 2013 7:17 am

Hermoso wrote:
I run into this problem like almost EVERY time I finish coding a layout and I get where,
not all the tabs are clickable and I refresh the page and preview it
and I go back and I see if I find any careless errors I may have made
maybe forgot to put something and it still doesn't solve the problem.
How do I fix this?


When I go to paste the code into Custom HTML/CSS in my URL panel
how come everything is out of place. Dp out of the box
Text on the main div is not in the center like it should be
products aren't scrolling in the box
shoutout isn't in the box either. I have to go and fix the code myself
before I send the code to the customer. Is this unavoidable like will I be doing this
EVERY time like its normal or is there a way to fix this?

Are you using Google Chrome or Mozzila Firefox?
Back to top Go down
CanvasInc

avatar
View user profile
http://avatars.imvu.com/CanvasInc

PostSubject: Re: Dynamic DIV Homepage Mon Jan 07, 2013 2:20 pm

Hermoso wrote:
I run into this problem like almost EVERY time I finish coding a layout and I get where,
not all the tabs are clickable and I refresh the page and preview it
and I go back and I see if I find any careless errors I may have made
maybe forgot to put something and it still doesn't solve the problem.
How do I fix this?


When I go to paste the code into Custom HTML/CSS in my URL panel
how come everything is out of place. Dp out of the box
Text on the main div is not in the center like it should be
products aren't scrolling in the box
shoutout isn't in the box either. I have to go and fix the code myself
before I send the code to the customer. Is this unavoidable like will I be doing this
EVERY time like its normal or is there a way to fix this?

Is it possible for you to mail us a sample of this coding?
- Ana
Back to top Go down
Kill

avatar
View user profile

PostSubject: Re: Dynamic DIV Homepage Wed Mar 06, 2013 1:16 am

How would you do the add/chat/message buttons? :<
Back to top Go down
Nickolas

avatar
View user profile
Role : Designer & Coder
Location : Somewhere
http://niq-olas.com/

PostSubject: Re: Dynamic DIV Homepage Wed Mar 06, 2013 1:37 am


__________________________________


If you have any questions or suggestions how to improve our forum & if you have any complains feel free to send me an pm here or via imvu.
My Website Shop

Back to top Go down
Kill

avatar
View user profile

PostSubject: Re: Dynamic DIV Homepage Wed Mar 06, 2013 8:56 pm

Thanks. Also, where are you getting the "top" height from? I mean you say to use gimp and all but you don't exactly say where we should be reading these numbers. Thanks in advance!
Back to top Go down
Guest
Guest
avatar

PostSubject: Re: Dynamic DIV Homepage Wed Mar 06, 2013 9:01 pm

Kill wrote:
Thanks. Also, where are you getting the "top" height from? I mean you say to use gimp and all but you don't exactly say where we should be reading these numbers. Thanks in advance!

in the tool box ;o
Back to top Go down
CookieEvermore

avatar
View user profile
Location : New York City
http://www.imvu.com/catalog/web_mypage.php?user=56197003

PostSubject: Re: Dynamic DIV Homepage Thu Mar 07, 2013 5:07 am

Kill wrote:
Thanks. Also, where are you getting the "top" height from? I mean you say to use gimp and all but you don't exactly say where we should be reading these numbers. Thanks in advance!

xx

__________________________________

Back to top Go down
Guest
Guest
avatar

PostSubject: Re: Dynamic DIV Homepage Fri Jun 28, 2013 7:37 am

Hermoso wrote:
I run into this problem like almost EVERY time I finish coding a layout and I get where,
not all the tabs are clickable and I refresh the page and preview it
and I go back and I see if I find any careless errors I may have made
maybe forgot to put something and it still doesn't solve the problem.
How do I fix this?


When I go to paste the code into Custom HTML/CSS in my URL panel
how come everything is out of place. Dp out of the box
Text on the main div is not in the center like it should be
products aren't scrolling in the box
shoutout isn't in the box either. I have to go and fix the code myself
before I send the code to the customer. Is this unavoidable like will I be doing this
EVERY time like its normal or is there a way to fix this?

I have this same problem. I use Google Chrome. and most times I can fix this problem myself but it is just aggravating to have to deal with it every time I try to code a layout. I have tried to use Online image map editor's to since I thought it's because of how I did the coords.
Back to top Go down
Guest
Guest
avatar

PostSubject: Re: Dynamic DIV Homepage Fri Jul 05, 2013 8:23 pm

Whenever I made my profile everything comes out right but there's a  blue outline all around the sides of my layout, I don't know if maybe it only does that because od my internet browser or if it's something else, I didn't change anything on the basic code other than add the things I needed to put in there place. Did I somehow mess up the code?

well I suppose it was just my internet explore browser, I've installed google chrome and the blue outline is gone ^-^
Back to top Go down
haseovzla

avatar
View user profile

PostSubject: Re: Dynamic DIV Homepage Thu Jan 02, 2014 7:32 am

my buttons are not clickable -.-

here is the code i used
Code:
<script>
   function changeNavigation(id)
   {document.getElementById('mainbox'). innerHTML=document.getElementById(id). innerHTML}
   </script>
<img style="float:center:" src="http://i.imgur.com/Z0ZcRWr.png" usemap="#ImageMap1">

<map id="ImageMap1" name="ImageMap1">
   <area shape="rect" coords="96,145,151,165" id="1b" onClick="changeNavigation('Home')">
   <area shape="rect" coords="225,145,306,165" id="2b" onClick="changeNavigation('About')">
   <area shape="rect" coords="377,145,452,165" id="3b" onClick="changeNavigation('Friends')">
   <area shape="rect" coords="520,145,605,165" id="4b" onClick="changeNavigation('Support')">
   <area shape="rect" coords="682,145,794,165" id="5b" onClick="changeNavigation('Love')">
</map>

<div id="mainbox" style="position:absolute; left:216px; top:240px; width:570px; height:250px; overflow: auto; border:0px; background-color:transparent; color:#000000;"> <center> <font face="verdana" size="1" color="white">
This tab will feature the same text found in your " Home " tab.
</font></center>
</div>

<div id="Home" style="display:none">
<center> <font face="verdana" size="1" color="white">
DYNAMIC! [Home]
</font></center>
</div>

<div id="About" style="display:none">
<center> <font face="verdana" size="1" color="white">
DYNAMIC! [About]
</font></center>
</div>

<div id="Friends" style="display:none">
<center> <font face="verdana" size="1" color="white">
DYNAMIC! [Friends]
</font></center>
</div>

<div id="Support" style="display:none">
<center> <font face="verdana" size="1" color="white">
DYNAMIC! [Support]
</font></center>
</div>

<div id="Love" style="display:none">
<center> <font face="verdana" size="1" color="white">
DYNAMIC! [Love]
</font></center>
</div>




<div id="other_box" style="width:000px; height:000px; position:absolute; left:000px; top: 000px; z-index:1">

</div>


<div id="avi_box" style="width:160px; height:220px; position:absolute; left:000px; top: 000px; z-index:1">

</div>


<style type="text/css">   #aboutme_panel, #contact_panel,

#dev_panel, #wishlist_panel, #visitors_panel,  

#messages_panel, #tagcloud_panel, #stickers_panel,

#collect_panel,   #room_panel, #rankings_panel,

#cool_panel, #gallery_panel, #friends_panel,  

#streetteam_panel, #blog_panel, #video_panel_header,

#music_panel, #rss_panel, #url_panel,  

#special_panel,#outfits_panel {      width:900px !important;   }  

#rightColumn {      display:none !important;   }</style>  <style

type="text/css">#url_panel_colRow, .imvucodes_net {

display:none !important; }</style>
Back to top Go down
Pantone

avatar
View user profile
Role : Designer & Coder
Location : Indianapolis, IN, USA
http://pantonedoesgraphics.tumblr.com/

PostSubject: Re: Dynamic DIV Homepage Thu Jan 02, 2014 8:56 am

*Please keep in mind that posts here aren't the first we catch, and we apologize for that.
Please use the Request Help thread for further issues. Thanks!



EmileighAmethyst - Traditionally, it depends on browser. There are some "international" browser coding, but we haven't set a tutorial for that. Usually, the answer I give is to Preview the HP, or take orders based off what browser they use.

Perplexity - Another issue could of been the Panel's outline stroke. But I am glad you got it! Very Happy

haseovzla - I am looking into the code now. Did you click "Preview" after you were done? o;.

__________________________________
CanvasTutorials
ADMIN

Human Resources │ Account Activation │ Ban Control
"May the Force be with you."
Back to top Go down
haseovzla

avatar
View user profile

PostSubject: Re: Dynamic DIV Homepage Thu Jan 02, 2014 9:01 am

iHae wrote:
*Please keep in mind that posts here aren't the first we catch, and we apologize for that.
Please use the Request Help thread for further issues. Thanks!



EmileighAmethyst - Traditionally, it depends on browser. There are some "international" browser coding, but we haven't set a tutorial for that. Usually, the answer I give is to Preview the HP, or take orders based off what browser they use.

Perplexity - Another issue could of been the Panel's outline stroke. But I am glad you got it! Very Happy

haseovzla - I am looking into the code now. Did you click "Preview" after you were done? o;

thank you. it was my mistake :P sorry
Back to top Go down
Pantone

avatar
View user profile
Role : Designer & Coder
Location : Indianapolis, IN, USA
http://pantonedoesgraphics.tumblr.com/

PostSubject: Re: Dynamic DIV Homepage Thu Jan 02, 2014 9:04 am

haseovzla wrote:
iHae wrote:
*Please keep in mind that posts here aren't the first we catch, and we apologize for that.
Please use the Request Help thread for further issues. Thanks!



EmileighAmethyst - Traditionally, it depends on browser. There are some "international" browser coding, but we haven't set a tutorial for that. Usually, the answer I give is to Preview the HP, or take orders based off what browser they use.

Perplexity - Another issue could of been the Panel's outline stroke. But I am glad you got it! Very Happy

haseovzla - I am looking into the code now. Did you click "Preview" after you were done? o;

thank you. it was my mistake :Psorry

No problem! & Did it finally work? -- it could of been that the height is too high. when you go over 900px (height wise) it gets pretty scary.

__________________________________
CanvasTutorials
ADMIN

Human Resources │ Account Activation │ Ban Control
"May the Force be with you."
Back to top Go down
Coachella

View user profile
Location : Rivendell

PostSubject: Re: Dynamic DIV Homepage Fri Jun 20, 2014 9:10 am

my thing keeps doing this
D:
 :cryy:
Back to top Go down
Pantone

avatar
View user profile
Role : Designer & Coder
Location : Indianapolis, IN, USA
http://pantonedoesgraphics.tumblr.com/

PostSubject: Re: Dynamic DIV Homepage Fri Jun 20, 2014 11:46 am

Do you have your <center> tags turned on? For the layout image? o;

__________________________________
CanvasTutorials
ADMIN

Human Resources │ Account Activation │ Ban Control
"May the Force be with you."
Back to top Go down
Guest
Guest
avatar

PostSubject: Re: Dynamic DIV Homepage Thu Aug 28, 2014 7:29 am

Hello I had a question. I understand the code, but I wanted to know how do you add a button to something other then your main box. For example I have my main box with home friend and love. then I have my other box that says other but i want to add a button to that so i can add news.
Back to top Go down
Guest
Guest
avatar

PostSubject: Re: Dynamic DIV Homepage Thu Mar 12, 2015 5:17 am

Taking to long to fix my code I give up
Back to top Go down
Guest
Guest
avatar

PostSubject: Re: Dynamic DIV Homepage Thu Mar 12, 2015 5:18 am

i cant click my shop or support :/ so although my prods show here they do not on my page. Also yes I have tried using preview mode a few times idk what is wrong
Back to top Go down
Valoish

avatar
View user profile
Role : Designer & Coder
Location : New York City
http://kyaimvu.deviantart.com

PostSubject: Re: Dynamic DIV Homepage Thu Mar 12, 2015 1:13 pm

I'll take a look at the coding for you after I take my last midterm exam c:

__________________________________
CanvasTutorials
ADMIN


Technician | Theft Council | Forum Design
"Love Truth and Pardon Error."

Back to top Go down
Guest
Guest
avatar

PostSubject: Re: Dynamic DIV Homepage Thu Mar 12, 2015 10:31 pm

okay thank you
Back to top Go down
Guest
Guest
avatar

PostSubject: Re: Dynamic DIV Homepage Tue May 12, 2015 12:52 am

was a really great help with most of the coding, my page is still under construction and still need to put in the diameters and more pics.
Back to top Go down
 
Dynamic DIV Homepage
View previous topic View next topic Back to top 
Page 1 of 3Go to page : 1, 2, 3  Next

Permissions in this forum:You cannot reply to topics in this forum
 :: HBAD REALM :: HBAD • Coding-
Jump to: