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 1428 registered users
The newest registered user is zZbannyezZ

Our users have posted a total of 2569 messages in 157 subjects
Canvas Time
Share | 
 

 Transition Buttons: DynamicDIV

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

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

PostSubject: Transition Buttons: DynamicDIV Mon Feb 18, 2013 5:48 am

Back to top Go down
Nickolas

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

PostSubject: Re: Transition Buttons: DynamicDIV Wed Oct 16, 2013 5:57 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
The author of this message was banned from the forum - See the message
Valoish

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

PostSubject: Re: Transition Buttons: DynamicDIV Fri Oct 18, 2013 5:45 pm

Animals wrote:
Would this be done the same way for iFrame?
and if so is this part of it you use for it?o3o


Quote :
<div id="navigation">
   <a href="http://google.com">Link 1</a><br>
   <a href="http://yahoo.com">Link 2</a><br>
   <a href="http://bing.com">Link 3</a><br>
</div>
The Transition Buttons for iFrame Tutorial will be released later on.
Keep an eye out c;

__________________________________
CanvasTutorials
ADMIN


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

Back to top Go down
The author of this message was banned from the forum - See the message
Valoish

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

PostSubject: Re: Transition Buttons: DynamicDIV Fri Oct 18, 2013 5:56 pm

Animals wrote:
Amg I can't wait longer man you're killing me>___>
You'll live.<3

__________________________________
CanvasTutorials
ADMIN


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

Back to top Go down
The author of this message was banned from the forum - See the message
Slacker

avatar
View user profile

PostSubject: Re: Transition Buttons: DynamicDIV Sun Oct 20, 2013 6:05 pm

Ooh! Thank you for the tutorial. I know there's one for iFrames on another website but I've been waiting for somebody to explain it for Dynamic Divs.

:cheers: 
Back to top Go down
Nickolas

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

PostSubject: Re: Transition Buttons: DynamicDIV Sun Oct 20, 2013 6:27 pm

@Slacker wrote:
Ooh! Thank you for the tutorial. I know there's one for iFrames on another website but I've been waiting for somebody to explain it for Dynamic Divs.

:cheers: 
You're welcome . Smile

__________________________________


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
The author of this message was banned from the forum - See the message
Valoish

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

PostSubject: Re: Transition Buttons: DynamicDIV Fri Oct 25, 2013 10:09 am

Code:
<script>
 function changeNavigation(id)
 {document.getElementById('mainbox'). innerHTML=document.getElementById(id). innerHTML}
</script>
<img style="float:center:" src="http://i39.tinypic.com/f9oy9i.png">

<div id="NAV">
 <a href="#" onclick="changeNavigation('b1'); return false; "> HOMEPAGE </a>
 <a href="#" onclick="changeNavigation('b2'); return false; "> ABOUT </a>
 <a href="#" onclick="changeNavigation('b3'); return false; "> FRIENDS </a>
 <a href="#" onclick="changeNavigation('b4'); return false; "> LOVE </a>
<a href="#" onclick="changeNavigation('b4'); return false; "> GALLERY</a>
<a href="#" onclick="changeNavigation('b4'); return false; "> SUPPORT </a>
</div>

<div id="mainbox" style="position:absolute; left:524; top:68; width:381; height:483; overflow: auto; border:0px; background-color:transparent; color:#000000;"> <center> <font face="verdana" size="1" color="8d00e7">
Text
</font></center>
</div>

<div id="Home" style="display:none">
<center> <font face="verdana" size="1" color="8d00e7">
Text
</font></center>
</div>

<div id="About" style="display:none">
<center> <font face="verdana" size="1" color="8d00e7">
Text [About]
</font></center>
</div>

<div id="Friends" style="display:none">
<center> <font face="verdana" size="1" color="8d00e7">
Text[Friends]
</font></center>
</div>

<div id="Love" style="display:none">
<center> <font face="verdana" size="1" color="8d00e7">
Text [Love]
</font></center>
</div>

<div id="Gallery" style="display:none">
<center> <font face="verdana" size="1" color="8d00e7">
Text [Gallery]
</font></center>
</div>

<div id="Support" style="display:none">
<center> <font face="verdana" size="1" color="8d00e7">
Text [Support]
</font></center>
</div>

<div id="music_box" style="width:285px; height:176px; position:absolute; left:21px; top: 300px; z-index:1">
<div id="gaf210imvustylez_youtubebox" style="width:285px;height:156px;overflow:hidden;"><object width="285" height="189"><param name="movie" value="http://www.youtube.com/v/dGl81VqJ2po?modestbranding=1&fs=0&rel=0&hd=1&disablekb=0&egm=1&showsearch=0&showinfo=0&iv_load_policy=0&autoplay=1&loop=1&version=2"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/dGl81VqJ2po?modestbranding=1&fs=0&rel=0&hd=1&disablekb=0&egm=1&showsearch=0&showinfo=0&iv_load_policy=0&autoplay=1&loop=1&version=2" type="application/x-shockwave-flash" allowscriptaccess="always" width="285" height="189"></embed></object><!--Youtube player code generated @ http://gaf210.imvustylez.net --></div></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>

<style type="text/css">
#NAV{
width:200;
left:232;
top:270;
text-align:center;
position:absolute;
}

#NAV a:link, #NAV a:visited, #NAV a:active{
display:block;
width:200px;
padding:10px 0px;
background-color:#000000;
color:#232323;
text-align:center;
text-decoration:none;
font-family:Arial;
font-size:10px;
margin:2px 0px;

  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease
}

#NAV a:hover{
color:#8d00e7;
}

</style>
All I did was remove the <--YOUR _________ DESIGN--> stuff, removed the 'usemap="#ImageMap1" and I moved the Nav box up.
If you put it under the layout image it works. c:
You also dont need the usemap thing.. Sometimes that can mess up the coding as well ><

**Also, if you have anymore problems, don't post the code in the thread please. Just PM it to someone, and then write in this thread that you PM'd >o<
Keeps things more neat.

__________________________________
CanvasTutorials
ADMIN


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

Back to top Go down
Nickolas

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

PostSubject: Re: Transition Buttons: DynamicDIV Fri Oct 25, 2013 1:02 pm


__________________________________


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
Guest
Guest
avatar

PostSubject: Re: Transition Buttons: DynamicDIV Mon Jan 06, 2014 1:35 pm

:brb: ppl you are the best!
Back to top Go down
Nickolas

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

PostSubject: Re: Transition Buttons: DynamicDIV Mon Jan 06, 2014 1:38 pm

Loquev wrote:
:brb: ppl you are the best!

Please show me example when you finish C: I would like to seeeee


 :wowsweetnice: 

__________________________________


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
Guest
Guest
avatar

PostSubject: Re: Transition Buttons: DynamicDIV Mon Jan 06, 2014 1:54 pm

hm i think i will need to learn and dynamic coding for simple layouts before all this.
are transition buttons on iframe easier?
Back to top Go down
Nickolas

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

PostSubject: Re: Transition Buttons: DynamicDIV Mon Jan 06, 2014 1:59 pm

Yes they are C:

__________________________________


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
Guest
Guest
avatar

PostSubject: Re: Transition Buttons: DynamicDIV Sun Mar 16, 2014 4:43 pm

This thread is very very helpful. Thank you for all the hard work you put on this one. I have another question that is related on this one. My question is I seen lots of other hover tab layout that is not like the one you shared, example a ribbon designed tab that when you hover around it will Glow or sometimes it will change color. Any idea how to code that kind of layout. Thank you in advance!

Example of what I'm talking about. This imvu avatar has a hover tab layout that expand.. http://avatars.imvu.com/Kumita How do you code that?
Back to top Go down
Valoish

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

PostSubject: Re: Transition Buttons: DynamicDIV Sun Mar 16, 2014 5:04 pm

I don't see an expansion on her HP o-o'
Its a solid image..
But what you're talking about can be done with the
" background-image: url(); " property. c:

__________________________________
CanvasTutorials
ADMIN


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

Back to top Go down
Guest
Guest
avatar

PostSubject: Re: Transition Buttons: DynamicDIV Sun Mar 16, 2014 5:32 pm

How to add the " background-image: url(); " property in the layout code. please help.. ( about the expansion lol idk why but everytime i point my cursor in her home or about tab it expand..lol weird.
Back to top Go down
Valoish

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

PostSubject: Re: Transition Buttons: DynamicDIV Sun Mar 16, 2014 5:54 pm

You'd put it under the 'Your Button Design'.
So it'd look something like this;

Code:

<style type="text/css">
/* YOUR NAVIGATION BOX */
#NAV{
   width:200px;
   left:000px;
   top:000px;
   text-align:center;
   position:absolute;
}

/* YOUR BUTTON DESIGN */
#NAV a:link, #NAV a:visited, #NAV a:active{
   display:block;
   width:200px;
   padding:10px 0px;
   background-color:#0d0d0d;
        background-image: url(IMG LINK HERE);
   color:#FFF;
   text-align:center;
   text-decoration:none;
   font-family:Arial;
   font-size:10px;
   margin:2px 0px;

   -webkit-transition: all 1s ease;
   -moz-transition: all 1s ease;
   -o-transition: all 1s ease;
   -ms-transition: all 1s ease;
   transition: all 1s ease
}

/* YOUR BUTTON HOVER DESIGN */
#NAV a:hover{
   color:#DE4E7E;
}

</style>

__________________________________
CanvasTutorials
ADMIN


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

Back to top Go down
Guest
Guest
avatar

PostSubject: Re: Transition Buttons: DynamicDIV Sun Mar 16, 2014 6:38 pm

Thank You Very Much!! You're a genius.
Back to top Go down
Guest
Guest
avatar

PostSubject: Re: Transition Buttons: DynamicDIV Mon Mar 17, 2014 5:32 pm

What about changing the color of the tab button when hovering around it. I tried but i always fail. Thank you in advance!
Back to top Go down
Valoish

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

PostSubject: Re: Transition Buttons: DynamicDIV Mon Mar 17, 2014 5:47 pm

Under 'Your Button Hover Design' just add
background-color: #HEXCOLOR;
c:

__________________________________
CanvasTutorials
ADMIN


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

Back to top Go down
Guest
Guest
avatar

PostSubject: Re: Transition Buttons: DynamicDIV Mon Mar 17, 2014 9:40 pm

Another question. I used the whole code (Css buttons) on this one but when I added the code of add, msg, chat codes from map editor it doesn't work on this one. Please help me. Thank you very much in advance!
Back to top Go down
Pantone

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

PostSubject: Re: Transition Buttons: DynamicDIV Mon Mar 17, 2014 10:52 pm

@Hillsong: - Make sure your quotations are in the right spots, that is a terrible thing to have missing.

-Or-

- Send me some coding to look at? c;

__________________________________
CanvasTutorials
ADMIN

Human Resources │ Account Activation │ Ban Control
"May the Force be with you."
Back to top Go down
 
Transition Buttons: DynamicDIV
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: