| Transition Buttons: DynamicDIV | |
|
|
Nickolas
Role : Designer & Coder Location : Somewhere
| |
| |
Nickolas
Role : Designer & Coder Location : Somewhere
| |
| |
The author of this message was banned from the forum - See the message |
Pugs
| Subject: Re: Transition Buttons: DynamicDIV Fri Oct 18, 2013 5:28 pm | |
| 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> |
|
| |
Valoish
Role : Designer & Coder Location : New York City
| Subject: 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; |
|
| |
The author of this message was banned from the forum - See the message |
Pugs
| |
| |
Valoish
Role : Designer & Coder Location : New York City
| |
| |
The author of this message was banned from the forum - See the message |
Pugs
| |
| |
Slacker
| Subject: 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: |
|
| |
Nickolas
Role : Designer & Coder Location : Somewhere
| |
| |
The author of this message was banned from the forum - See the message |
Pugs
| |
| |
Valoish
Role : Designer & Coder Location : New York City
| Subject: 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. |
|
| |
Nickolas
Role : Designer & Coder Location : Somewhere
| |
| |
Guest Guest
| |
| |
Nickolas
Role : Designer & Coder Location : Somewhere
| Subject: 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: |
|
| |
Guest Guest
| Subject: 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? |
|
| |
Nickolas
Role : Designer & Coder Location : Somewhere
| |
| |
Guest Guest
| Subject: 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? |
|
| |
Valoish
Role : Designer & Coder Location : New York City
| Subject: 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: |
|
| |
Guest Guest
| Subject: 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. |
|
| |
Valoish
Role : Designer & Coder Location : New York City
| Subject: 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>
|
|
| |
Guest Guest
| |
| |
Guest Guest
| Subject: 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! |
|
| |
Valoish
Role : Designer & Coder Location : New York City
| |
| |
Guest Guest
| Subject: 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! |
|
| |
Pantone
Role : Designer & Coder Location : Indianapolis, IN, USA
| Subject: 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; |
|
| |
Sponsored content
| |
| |
|