Jump to content

Search the Community

Showing results for tags 'coding tutorial'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • Site Information
    • Information
    • Staff Contact Center
    • Ask us
    • Introduce Yourself
  • Spotlight RPG Challenge
  • Roleplay Conversations
    • Roleplay Chat
    • Roleplay Management
    • Brainstorming & Ideas
    • Member Confessions
    • Staff Confessions
  • Assistance
    • Site Reviews
    • Coding Help & Requests
    • Graphics Requests
  • Personal RP Requests
  • Site Requests
  • Wanted
  • Creation & Development
  • Learn HTML/CSS's General conversation
  • Learn HTML/CSS's Ask for help
  • Learn HTML/CSS's Quick Tips
  • Modern Fantasy Circle's Topics
  • Historical RPs's Topics
  • Book Club's Topics
  • Make My Life Make Sense's Topics
  • Dragonriders of Pern Boards's Topics
  • Jcink Hosted's Topics
  • Graphics Showcase & Discussion's Topics
  • MyBB Staff People's Topics
  • SMF Staff People's Topics
  • Monster Fans's Topics
  • Discord's Topics
  • Gamers's Topics
  • Pet People's Topics
  • Site Design's Topics
  • Cooking's Topics
  • Cooking's Recipes
  • Star Trek's Topics
  • Star Wars's Topics
  • Game of Thrones's Topics
  • Cosplay's Topics
  • The Writing Pad's Discussion
  • The Writing Pad's Writing Exhibit
  • MTV's THE REAL WORLD!'s Non-RP Chat & Discussion
  • MTV's THE REAL WORLD!'s RL Storytime
  • MTV's THE REAL WORLD!'s The Hot Seat
  • MTV's THE REAL WORLD!'s Forum Games
  • NaNoWriMo's Information
  • NaNoWriMo's Previous NaNoWriMo Years
  • NaNoWriMo's Current NaNoWriMo
  • Harry Potter's Topics
  • Dr Who's Topics
  • Supernatural (The TV Show)'s Topics
  • Firefly's Topics
  • The Bug Enthusiast's Bugs, mice, and all things talk
  • Vesta Software's Feedback and Discussion
  • Vesta Software's Development
  • Vesta Software's Feature Requests
  • Vesta Software's Questions
  • Vesta Software's Archives
  • Movie Club's Test
  • Movie Club's Post-Movie
  • Movie Club's Pre-Movie
  • Movie Club's Topics
  • NOVA's Topics
  • The Art Studio's Topics
  • Avatar the Last Airbender's Topics
  • Cryptozoology's Topics
  • World Building's Map Building
  • World Building's Topics
  • World Building's General Discussions
  • PHPBB Staff people's Topics
  • Xenforo Staff People's Topics
  • Cyberpunk and Transhumanism's Topics
  • Dragon Age's Companions
  • Dragon Age's Ships
  • Dragon Age's Protagonist Corner


  • The Initiative Services and Features
  • Forum Building and Management
  • Writing Materials
  • Being a Member
  • Software
    • IPS Character Manager
  • Coding
  • Graphics


  • Roleplay Search
  • Writing Partner Search
  • Character Home Search


  • General Update
  • Announcement
  • Articles
  • Feedback
  • Tomfoolery


  • Active Challenges
  • Archived Challenges


  • Application Templates
  • Plotters
  • Post Templates
  • Staff Templates
  • Thread Trackers
  • Other
  • Pending Challenge Entries
  • Past Challenge Entries


  • Communications
  • Contributions
  • Operations


  • Jcink Themes
  • ProBoards/FreeForums Themes
  • MyBB Themes
  • IPS Themes
  • SMF Themes
  • phpBB Themes
  • Other Themes
  • Modifications
  • Make My Life Make Sense's Files
  • Dragonriders of Pern Boards's Files
  • PHPBB Staff people's Files
  • Xenforo Staff People's Files
  • Cyberpunk and Transhumanism's Files


  • Morrigan's Madness
  • Staff Blog
  • Just a girl and her stuff....
  • Loose Ends
  • A pirate captain's log
  • Somnia News
  • Ghost's One-Shots
  • Bits & Bones.
  • Amelia's Blog
  • Mobydoll's Blog
  • a medieval world
  • Everything Super
  • Ask GR - advice for RPers
  • Icewolf's Musings
  • Tales From The Shoebox
  • Thoughts on Roleplay
  • Salt Box
  • The Salt Mine
  • Little bit of Gothic
  • The Totally Epic and True Tales of Kit the Human
  • Obvious Blog Is Obvious
  • Fountain of Thoughts
  • Please Turn The Device Off and Back On
  • gbwhatsapp apk
  • The Veritas
  • That Necromancer Life
  • Make My Life Make Sense's Blog
  • Dragonriders of Pern Boards's Blog
  • Cryptozoology's Blog
  • Cyberpunk and Transhumanism's Blog


  • Community Calendar
  • Character Birthdays
  • Book Club's Events
  • Make My Life Make Sense's Events
  • Dragonriders of Pern Boards's Events
  • NaNoWriMo's Virtual Write Ins
  • Cryptozoology's Events
  • Xenforo Staff People's Events
  • Cyberpunk and Transhumanism's Events

Product Groups

  • Converted Subscriptions
  • Hosting
  • Advertising


  • Settings
  • Staff
  • Notifications
  • Forums
  • Submitting to the Directory
  • RPG Directory
  • Playby Directory
  • Searching for Roleplay
  • Guides
  • Challenges
  • Character Wanted Ads
  • Affiliate & Staff search

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start






NaNo House

Game of Thrones House

Bending Nation

Found 1 result

  1. HTML/CSS + Javascript Gude to Tabs Tabbed browsing is something we've all become accustomed to over the past several years and the concept has permiated the web as well. Through tabs you can maximize spacial area on your website with several different sources of content. The process of creating a tabbed area on your site is pretty simple actually as you will see while I walk you through the process. Creating The Content Area The first thing to address when setting up tabs is to actually sort out where they'll go on the page, and how they will look. This is a design choice and not actual important to the mechanics of making working tabs. For the purpose of this tutorial I will be using normal hyperlinks to navigate between tabbed areas however via simple HTML/CSS you can handle this other ways. The OnClick Event The OnClick code is was does most of the work for our tabs. For this tutorial I'm assuming just two tabs are used but you can add as many as you want this way. Clicking on the link wrapped in the <a> tag will change the display properties of corresponding <div> layers (We'll get to how it does that shortly.) <a href="#" onClick='document.getElementById("div1").style.display="block";document.getElementById("div2").style.display="none";'>Link</a> The code above executes two things when clicked. First through javascript it sets CSS display for "div1" as block (which allows it to be viewed). Second it sets CSS display for "div2" to none which causes it not to be displayed. Depending on how many tabs you have you may have to repeat this core code document.getElementById("div1").style.display="block/none"; for each tab, the OnClick of the link determining which <div> layers are set to 'block' and which to 'none' For example... <a href="#" onClick='document.getElementById("div1").style.display="block";document.getElementById("div2").style.display="none";document.getElementById("div3").style.display="none";'>Link 1</a> <a href="#" onClick='document.getElementById("div1").style.display="none";document.getElementById("div2").style.display="block";document.getElementById("div3").style.display="none";'>Link 2</a> <a href="#" onClick='document.getElementById("div1").style.display="none";document.getElementById("div2").style.display="none";document.getElementById("div3").style.display="block";'>Link 3</a> notice how each link's OnClick determines which <div> will be set to 'block' while the others are set to 'none' this determines which <div> shows when you click on the link. Now the <div> Layers Each tabbed content area will need a separate <div> layer that corresponds to one of the id's called on the OnClick (div1, div2, etc) You can obviously name these whatever you want, just make sure you reflect that in your OnClick code as well. Below you will see a sample snippit of <div> code. <div id="div1" name="div1" style="display:block;">Content</div> <div id="div2" name="div2" style="display:none;">Different Content</div> As you see you need to make sure the name/id is set to match your OnClick in the links. You also need to make sure the style is set either inline of in a css file to determine to default display. You will want your default content in the tabbed area to be set to 'block' while any other tabs that are currently not seen until clicked on are set to 'none'. You can set different css properties to each <div> as you see fit. An Example of This Code in Action Using just the code above with some actual content/css styling I created ( This ) page.
  • Create New...

Important Information

By using this site, you agree to our Terms of Use, Guidelines and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.