HomeHome  SearchSearch  Rules & Guidelines  Staff List  Latest imagesLatest images  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

Nickolas
Role : Designer & Coder
Location : Somewhere
http://niq-olas.com/

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

Transition Buttons: DynamicDIV DD
Back to top Go down
Nickolas

Nickolas
Role : Designer & Coder
Location : Somewhere
http://niq-olas.com/

Transition Buttons: DynamicDIV Empty
PostSubject: Re: Transition Buttons: DynamicDIV Transition Buttons: DynamicDIV EmptyWed Oct 16, 2013 5:57 am

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

Valoish
Role : Designer & Coder
Location : New York City
http://kyaimvu.deviantart.com

Transition Buttons: DynamicDIV Empty
PostSubject: Re: Transition Buttons: DynamicDIV Transition Buttons: DynamicDIV EmptyFri 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;
Back to top Go down
The author of this message was banned from the forum - See the message
Valoish

Valoish
Role : Designer & Coder
Location : New York City
http://kyaimvu.deviantart.com

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

Animals wrote:
Amg I can't wait longer man you're killing me>___>
You'll live.<3
Back to top Go down
The author of this message was banned from the forum - See the message
Slacker

Slacker

Transition Buttons: DynamicDIV Empty
PostSubject: Re: Transition Buttons: DynamicDIV Transition Buttons: DynamicDIV EmptySun 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

Nickolas
Role : Designer & Coder
Location : Somewhere
http://niq-olas.com/

Transition Buttons: DynamicDIV Empty
PostSubject: Re: Transition Buttons: DynamicDIV Transition Buttons: DynamicDIV EmptySun 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
Back to top Go down
The author of this message was banned from the forum - See the message
Valoish

Valoish
Role : Designer & Coder
Location : New York City
http://kyaimvu.deviantart.com

Transition Buttons: DynamicDIV Empty
PostSubject: Re: Transition Buttons: DynamicDIV Transition Buttons: DynamicDIV EmptyFri 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.
Back to top Go down
Nickolas

Nickolas
Role : Designer & Coder
Location : Somewhere
http://niq-olas.com/

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

Back to top Go down
Guest
Guest
Anonymous

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

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

Nickolas
Role : Designer & Coder
Location : Somewhere
http://niq-olas.com/

Transition Buttons: DynamicDIV Empty
PostSubject: Re: Transition Buttons: DynamicDIV Transition Buttons: DynamicDIV EmptyMon 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: 
Back to top Go down
Guest
Guest
Anonymous

Transition Buttons: DynamicDIV Empty
PostSubject: Re: Transition Buttons: DynamicDIV Transition Buttons: DynamicDIV EmptyMon 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

Nickolas
Role : Designer & Coder
Location : Somewhere
http://niq-olas.com/

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

Yes they are C:
Back to top Go down
Guest
Guest
Anonymous

Transition Buttons: DynamicDIV Empty
PostSubject: Re: Transition Buttons: DynamicDIV Transition Buttons: DynamicDIV EmptySun 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

Valoish
Role : Designer & Coder
Location : New York City
http://kyaimvu.deviantart.com

Transition Buttons: DynamicDIV Empty
PostSubject: Re: Transition Buttons: DynamicDIV Transition Buttons: DynamicDIV EmptySun 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:
Back to top Go down
Guest
Guest
Anonymous

Transition Buttons: DynamicDIV Empty
PostSubject: Re: Transition Buttons: DynamicDIV Transition Buttons: DynamicDIV EmptySun 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

Valoish
Role : Designer & Coder
Location : New York City
http://kyaimvu.deviantart.com

Transition Buttons: DynamicDIV Empty
PostSubject: Re: Transition Buttons: DynamicDIV Transition Buttons: DynamicDIV EmptySun 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>
Back to top Go down
Guest
Guest
Anonymous

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

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

Transition Buttons: DynamicDIV Empty
PostSubject: Re: Transition Buttons: DynamicDIV Transition Buttons: DynamicDIV EmptyMon 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

Valoish
Role : Designer & Coder
Location : New York City
http://kyaimvu.deviantart.com

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

Under 'Your Button Hover Design' just add
background-color: #HEXCOLOR;
c:
Back to top Go down
Guest
Guest
Anonymous

Transition Buttons: DynamicDIV Empty
PostSubject: Re: Transition Buttons: DynamicDIV Transition Buttons: DynamicDIV EmptyMon 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

Pantone
Role : Designer & Coder
Location : Indianapolis, IN, USA
http://pantonedoesgraphics.tumblr.com/

Transition Buttons: DynamicDIV Empty
PostSubject: Re: Transition Buttons: DynamicDIV Transition Buttons: DynamicDIV EmptyMon 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;
Back to top Go down
Sponsored content


Transition Buttons: DynamicDIV Empty
PostSubject: Re: Transition Buttons: DynamicDIV Transition Buttons: DynamicDIV Empty

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
 Similar topics
-
» Transition Buttons: iFrame
» Free Resource: - : BUTTONS : -
» Custom Music Buttons / gaf210

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