Jump to content

Search the Community

Showing results for tags 'javascript'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • 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

Categories

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

Categories

  • Roleplay Search
  • Writing Partner Search
  • Character Home Search

Categories

  • General Update
  • Announcement
  • Articles
  • Feedback
  • Tomfoolery

Categories

  • Active Challenges
  • Archived Challenges

Categories

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

Categories

  • Communications
  • Contributions
  • Operations

Categories

  • 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

Blogs

  • 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

Calendars

  • 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

Collections

  • 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

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Discord


Twitter


Skype


NaNo House


Game of Thrones House


Bending Nation

Found 3 results

  1. <p>https://github.com/DavideTriso/aria-tabs</p>
  2. Before we get started, this is what we're going to create: You can add as many articles as you like without needing to alter the script. Create Your Articles Go to webpage maker (under skins & templates) Click create new webpage Give it a page title, doesn't matter what, we're not going to see it. Give it a key, something memorable for you because you'll need it later. Set allow key to use board wrappers to No. Your contents need to include valid HTML, so wrap your paragraphs into paragraphs <p>I'm a paragraph!</p> and wrap the entire contents into a div with the class articles and it must have a unique ID. For IDs, I just use article_1 (number increasing for each new article) but you might prefer something more memorable. You will need to remember what it is. <div id="article_1" class='articles'> <p>Yay! First paragraph!</p> <p>I'm a middle paragraph</p> <p>I'm another paragraph!</p> </div> Rinse and repeat until you have the articles you want. Or just make two for the purposes of this tutorial. Create the Container The container is what will house the articles, it will also include our magical menu. Back in webpage maker (under skins & templates) Click Create a New Webpage Give it a page title, this one matters because it will appear in your nav strip. (ie. My Community -> lore) Set allow key to use board wrappers to Yes. Paste in the following code: <div id="welcome_articles"> <h1>Lore</h1> Welcome to our lore. Here you can bla bla bla. Click the links on the left to read the relevant articles. </div> <div id="article_container"> <aside> <ul class="article_container_list"> <h3>Lore Index</h3> <li><a class="container_links" href="#" data-showdiv="article_1">Link 1</a></li> <li><a class="container_links" href="#" data-showdiv="article_2">Link 2</a></li> </ul> </aside> <div class="article_content"> <% article_1 %> <% article_2 %> </div> </div> <script> $(".container_links").click(function(){ $(".articles:visible").hide(); $("#"+$(this).attr("data-showdiv")).show(); }); $('.container_links').click( function(){ if ( $(this).hasClass('active') ) { $(this).removeClass('active'); } else { $('.container_links.active').removeClass('active'); $(this).addClass('active'); } }); // following is purely to prevent page jump when user clicks on link $('a.container_links').click(function(e){ e.preventDefault(); }); </script> where <% article_1 %> and <% article_2 %> are the keys to the articles you created earlier. The javascript is already included and assuming that you don't replace your class names, it doesn't need to be altered. Besides the aforementioned keys, the most important part of the code for you is <li><a class="container_links" href="#" data-showdiv="article_1">Link 1</a></li> the data-showdiv attribute needs to be the same as one of the articles you created earlier. So, say you created an article about species and you gave it an id of species. Your link should look like this <li><a class="container_links" href="#" data-showdiv="species">Species</a></li> Once you have added the links and keys, save it. If you visit it now, you'll see that everything is displayed but clicking the link will make everything vanish except the for corresponding article. You'll also notice that the list sits on top of everything else. Time to hit the style sheets! Stylesheet Go to your stylesheets and paste in the following #welcome_articles { margin-bottom: 10px; padding: 5px; border-bottom: 1px solid rgba(0,0,0, .1); } #article_container { display: flex } #article_container .article_content { flex-grow: 2; padding: 0 20px 20px; border-left: 1px solid rgba(0,0,0, .1) } #article_container aside { padding: 10px; min-width: 15% } #article_container .articles { display: none } ul.article_container_list { list-style-type: none; margin: 0; padding: 0 } ul.article_container_list li { display: block; margin: 1px; } a.container_links { display: block; border-bottom: 1px solid rgba(0,0,0, .1); padding: 5px } a.container_links.active { padding-left: 15px } ul.article_container_list h3 { margin-top: 0 } The most important bits are #article_container { display: flex } this makes the aside and div.article_content sit next to each other. Sometimes however, the aside can look a little bit claustrophobic, so I add #article_container aside { padding: 10px; min-width: 15% } To ensure that the div.article_content grows to fill the entire space left over, I add #article_container .article_content { flex-grow: 2 } To hide all of the articles by default, I add #article_container .articles { display: none } if you are having problems with the script after adding this code, move #article_container .articles { display: none } to your guidebook page so that it sits above the scripts: ie <style> #article_container .articles { display: none } </style> <script> $(".container_links").click(function(){ $(".articles:visible").hide(); $("#"+$(this).attr("data-showdiv")).show(); }); $('.container_links').click( function(){ if ( $(this).hasClass('active') ) { $(this).removeClass('active'); } else { $('.container_links.active').removeClass('active'); $(this).addClass('active'); } }); // following is purely to prevent page jump when user clicks on link $('a.container_links').click(function(e){ e.preventDefault(); }); </script> Finally, it is useful if the displayed article's link is different from the others. To do this I add a.container_links.active { padding-left: 15px } Responsiveness Make sure your head (in the global wrappers) includes the following <meta name="viewport" content="width=device-width, initial-scale=1"> This will ensure the zoom is at 100%. If you have any fixed width elements in your header or footer you may find that that user now needs to scroll horizontally. I recommend fixing that so that those elements no longer include a fixed width. I've addressed the default fixed widths in the following code @media screen and (max-width: 979px) { body { font-size: 1rem } #wrapper { width: calc(100% - 20px); margin: 0 auto; } #article_container { display: block; } ul.article_container_list { text-align: center } #userlinks { width: 90% } ul.article_container_list li { margin-bottom: 10px } ul.article_container_list li:last-child { margin-bottom: 0 } } The important part (applicable to the guidebook) is as follows #article_container { display: block; } now the aside sits above the content. ul.article_container_list { text-align: center } we center the links (note that they automatically expand to fill the available space because we made the links into blocks earlier.) ul.article_container_list li { margin-bottom: 10px } we make the links easier to tap for a chunky finger. ul.article_container_list li:last-child { margin-bottom: 0 } but the last list item doesn't need a bottom margin, so we get rid of it. The end result for mobiles becomes this: Just want some copy and paste? <head> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <div id="welcome_articles"><h1>Lore</h1> Welcome to our lore. Here you can bla bla bla. Click the links on the left to read the relevant articles. </div> <div id="article_container"> <aside> <ul class="article_container_list"> <h3>Lore Index</h3> <li><a class="container_links" href="#" data-showdiv="article_1">Link 1</a></li> <li><a class="container_links" href="#" data-showdiv="article_2">Link 2</a></li> </ul> </aside> <div class="article_content"> <% article_1 %> <% article_2 %> </div> </div> <style> #welcome_articles { margin-bottom: 10px; padding: 5px; border-bottom: 1px solid rgba(0,0,0, .1); } #article_container { display: flex } #article_container .article_content { flex-grow: 2; padding: 0 20px 20px; border-left: 1px solid rgba(0,0,0, .1) } #article_container aside { padding: 10px; min-width: 15% } #article_container .articles { display: none } ul.article_container_list { list-style-type: none; margin: 0; padding: 0 } ul.article_container_list li { display: block; margin: 1px; } a.container_links { display: block; border-bottom: 1px solid rgba(0,0,0, .1); padding: 5px } a.container_links.active { padding-left: 15px } ul.article_container_list h3 { margin-top: 0 } @media screen and (max-width: 979px) { body { font-size: 1rem } #wrapper { width: calc(100% - 20px); margin: 0 auto; } #article_container { display: block; } ul.article_container_list { text-align: center } #userlinks { width: 90% } ul.article_container_list li { margin-bottom: 10px } ul.article_container_list li:last-child { margin-bottom: 0 } } </style> <script> $(".container_links").click(function(){ $(".articles:visible").hide(); $("#"+$(this).attr("data-showdiv")).show(); }); $('.container_links').click( function(){ if ( $(this).hasClass('active') ) { $(this).removeClass('active'); } else { $('.container_links.active').removeClass('active'); $(this).addClass('active'); } }); // following is purely to prevent page jump when user clicks on link $('a.container_links').click(function(e){ e.preventDefault(); }); </script> I hope that someone finds this useful! As already noted, any forum software can utilise this guide, the actual magic is the script and that is not software specific.
  3. My board is here. So, I'm looking to make my site's skin more accessible, and part of this includes a new tab system. What I'm attempting to do (following this tutorial) and have mostly succeeded with is allowing people to tab through the tabs (hah) and use enter key to switch to a tab. I'm also looking to let the user use their arrow keys to automatically switch through the tabs as well. Tab/enter key works fine, but the second I try to use the arrow key method is where the code is going haywire. If I use the arrow keys, it appears as if all the tabs are selected except the one that was navigated away from. The "focused" tab then becomes the last tab in the list, and the displayed content becomes the first tab. Needless to say it's not doing what it's supposed to, and I'm unsure of how to fix it. On the tutorial linked above, you can see that using the arrow keys automatically switches between the tabs as intended (or seems to, there's only two tabs there, compared to my 5-6) Here's the js I'm using: <script> $(document).ready(function(){ $("#sidebar li[role='tab']").click(function(){ $("#sidebar li[role='tab']:not(this)").attr("aria-selected","false"); //$("#sidebar li[role='tab']").attr("tabindex","-1"); $(this).attr("aria-selected","true"); //$(this).attr("tabindex","0"); var tabpanid= $(this).attr("aria-controls"); var tabpan = $("#"+tabpanid); $("#sidebar div[role='tabpanel']:not(tabpan)").attr("aria-hidden","true"); $("#sidebar div[role='tabpanel']:not(tabpan)").addClass("hidden"); tabpan.removeClass("hidden"); //tabpan.className = "panel"; tabpan.attr("aria-hidden","false"); }); //This adds keyboard accessibility by adding the enter key to the basic click event. $("#sidebar li[role='tab']").keydown(function(ev) { if (ev.which ==13) { $(this).click(); } }); //This adds keyboard function that pressing an arrow left or arrow right from the tabs toggel the tabs. $("#sidebar li[role='tab']").keydown(function(ev) { if ((ev.which ==39)||(ev.which ==37)) { var selected= $(this).attr("aria-selected"); if (selected =="true"){ $("#sidebar li[aria-selected='false']").attr("aria-selected","true").focus() ; $(this).attr("aria-selected","false"); var tabpanid= $("#sidebar li[aria-selected='true']").attr("aria-controls"); var tabpan = $("#"+tabpanid); $("#sidebar div[role='tabpanel']:not(tabpan)").attr("aria-hidden","true"); $("#sidebar div[role='tabpanel']:not(tabpan)").addClass("hidden"); tabpan.attr("aria-hidden","false"); tabpan.removeClass("hidden"); //tabpan.className = "panel"; } } }); }); </script> My tab css: ul.controlList { list-style-type: none; } li[aria-selected='true'] {} .panel[aria-hidden='true'] { display: none; } .panel[aria-hidden='false'] { display:block; } .hidden {display:none;} .tablist { list-style: none outside none; margin: 0px; padding: 0px; display: block; background-color: #080808; border-bottom: 2px solid #1e2733; border-top: 3px solid #252d34; text-align: center; } .tabs { background-color: transparent; padding: 5px; } .tab { display: inline; border-bottom: none; cursor: pointer; padding: 0 4px; font-family: georgia, times, serif; text-transform: uppercase; color: #5b656d; } .tab:focus, .tab:active, .tab[aria-selected='true'] { color: #374C5D; cursor:default; } .panel { background-color: #121212; padding: 5px; clear:both; } and the tab html: <aside id="sidebar" role="complementary"> <ul class="tablist" role="tablist"> <li id="tab1" class="tab" aria-controls="panel1" role="tab" aria-selected="true" tabindex="0">Welcome</li> <li id="tab2" class="tab" aria-controls="panel2" role="tab" aria-selected="false" tabindex="0">Links</li> <li id="tab3" class="tab" aria-controls="panel3" role="tab" aria-selected="false" tabindex="0">Chat</li> <li id="tab4" class="tab" aria-controls="panel4" role="tab" aria-selected="false" tabindex="0">Staff</li> <li id="tab5" class="tab" aria-controls="panel5" role="tab" aria-selected="false" tabindex="0">©</li> </ul> <div class="tabs"> <div id="panel1" class="panel" aria-labelledby="tab1" role="tabpanel" aria-hidden="false"><% WELCOME %></div> <div id="panel2" class="panel" aria-labelledby="tab2" role="tabpanel" aria-hidden="true"><div class="sidelink"><% LINKS %></div></div> <div id="panel3" class="panel" aria-labelledby="tab3" role="tabpanel" aria-hidden="true"><% CHAT %></div> <div id="panel4" class="panel" aria-labelledby="tab4" role="tabpanel" aria-hidden="true"><% STAFF %></div> <div id="panel5" class="panel" aria-labelledby="tab5" role="tabpanel" aria-hidden="true"><% CREDITS %></div> </div> </aside> Any help with this would be appreciated!
×
×
  • 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.