Jump to content

Search the Community

Showing results for tags 'jQuery'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • WebFlake
    • Announcements and Updates
    • Site Questions
    • Off-topic Lounge
    • Member Introductions
  • Webmaster Marketplace
    • Marketplace (Buy, Sell, Trade)
    • Coupons and Deals
  • Webmasters
    • Webmaster Lounge
    • Servers
    • Website and Graphics Design
    • Website Showcase
  • Website Scripts
    • Downloads and Resources
    • Programming and Coding
    • Resource Requests
  • IPS Community Suite 4.2
    • IPS Community Suite 4.2
    • IPS 4.2 Tutorials
    • IPS 4.2 Requests
    • IPS 4.2 Support
  • IPS Community Suite 4.1
    • IPS Community Suite 4.1
    • IPS 4.1 Tutorials
    • IPS 4.1 Requests
    • IPS 4.1 Support
  • WordPress
    • WordPress Downloads
    • WordPress Tutorials
    • WordPress Requests
    • WordPress Support
  • IPB 3.4 Legacy
    • IPB 3.4 Legacy Software Downloads
    • IPB 3.4 Legacy Discussion
  • Graveyard
    • Archives

Categories

  • IPS Community Suite 4.2
    • Applications
    • Plugins
    • Themes
    • Language Packs
    • Miscellaneous XML Files
  • IPS Community Suite 4.1
    • Applications
    • Plugins
    • Themes
    • Language Packs
    • Miscellaneous XML Files
  • XenForo 2.0
    • Add-ons
    • Styles
    • Language Packs
    • Miscellaneous XML Files
  • XenForo 1.5
    • Add-ons
    • Styles
    • Language Packs
    • Miscellaneous XML Files
  • Wordpress
    • Themes
    • Plugins
  • ThemeForest
    • HTML
    • Marketing
    • CMS
    • eCommerce
    • UI Design
    • JavaScript Code
  • CodeCanyon
    • PHP Scripts
    • eCommerce Plugins
    • JavaScript
    • CSS
    • HTML5
    • Custom Skins
  • Graphics & Design
    • Emoticons & Smileys
    • Ranks & Badges
    • PSD & AI Designs
  • IPB 3.4 Legacy Software

Categories

  • Feature Plan

Categories

  • WebFlake Release Notes

Categories

  • Records

Found 6 results

  1. Here's a tutorial on how to create a jQuery accordion toggler for your website. For those who don't know what a jQuery accordion does, it allows you show/hide items upon clicking their header/title toggler. If you want an example of what it looks like, go to the bottom of this post. This tutorial assumes that you already have an HTML file ready to edit and have basic HTML knowledge, so I won't bother with those things. Note: You will need jQuery for this code to work. If you don't already have jQuery installed, add inside your <head> tag. <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> Note: This tutorial also utilizes the Font Awesome icon font. If you don't already have it installed, you can read how to install it by visiting this page OR by inserting this inside your <head> tag: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" /> First, let's get started with the HTML markup. What you'll need is something like this: <div class="accord_wrap"> <div class="accord_item"> <h1>Title <i class="fa fa-fw fa-angle-down"></i></h1> <div>Here's some content that can be toggled.</div> </div> <div class="accord_item"> <h1>Title <i class="fa fa-fw fa-angle-down"></i></h1> <div>Here's some content that can be toggled.</div> </div> <div class="accord_item"> <h1>Title <i class="fa fa-fw fa-angle-down"></i></h1> <div>Here's some content that can be toggled.</div> </div> </div> I'll be using 3 items for this example, but you can use however many you see fit. Since we haven't applied any CSS to this, this is what it currently looks like: The CSS we're gonna apply is very minimal - only 3 lines! Here it is: .accord_wrap .accord_item { margin-bottom: 10px; } .accord_wrap .accord_item > h1 { display: inline-block; font-size: 18px; cursor: pointer; } .accord_wrap .accord_item > div { display: none; } With that applied, here's what it looks like now: Looking good! But of course, it doesn't actually work without the jQuery. To save both your and my time, I'll be leaving comments in the code instead of explaining things step-by-step in this post. If you already understand jQuery then you probably won't need the comments, but I'll be leaving them in there for those who aren't very experienced with it. This is the jQuery code we'll be using: $(document).ready(function() { // Configuration settings /* display_default - Do you want the first item to display by default? only_one - Do you want only one item open at a time? If set to true, the next option won't matter hide_opened - If an item is open, do you want to allow it to be closed again? icons - The 2 Font Awesome icon classes you want to use Note: when changing the first 3 settings, only use true or false */ var config = { display_default: true, only_one: false, hide_opened: true, icons: "fa-angle-down fa-angle-up" } // If the config setting "display_default" is set to true... if (config['display_default']) { // Get the first item in the accordion wrapper var first_item = ".accord_wrap .accord_item:first-child"; // Give it the attribute "data-active" $(first_item).attr("data-active", "true"); // Open it $(first_item + " > div").show(); // And then give it the appropriate icon $(first_item + " > h1 i").toggleClass(config['icons']); } // Once we click a title... $(".accord_item > h1").click(function() { // Here's an array of options to make it easier to target the active accordion item // wrap - Target the active accordion's wrap // div - Target the active accordion's div (where you place your content) // icon - Target the active accordion's icon // We use $(this).closest() so that we can use multiple accordions throught the site! var active = { wrap: $(this).closest(".accord_wrap").find(".accord_item[data-active='true']"), div: $(this).closest(".accord_wrap").find(".accord_item[data-active='true'] > div"), icon: $(this).closest(".accord_wrap").find(".accord_item[data-active='true'] > h1 i") }; // If the config settings "only_one" is NOT set to true... if (!config['only_one']) { // Get the active div content and remove the "data-active" attribute active['wrap'].removeAttr("data-active"); // Toggle the icon $(this).find("i").toggleClass(config['icons']); // And then slideToggle the content, while also NOT continuing with the rest of the code return $(this).next().stop().slideToggle(); } if (!$(this).parent().attr("data-active")) { // Close it, change the icon, and then remove the "active-item" attribute active['div'].stop().slideToggle(); active['icon'].toggleClass(config['icons']); active['wrap'].removeAttr("data-active"); // Target this item and give it the "data-active" attribute $(this).parent().attr("data-active", "true"); // Target the div (where you place your content) and open it $(this).next().stop().slideToggle(); // Target the icon and then change it accordingly $(this).find("i").toggleClass(config['icons']); } else { // If the config setting "hide_opened" is NOT set to true, don't continue with the code if (!config['hide_opened']) { return; } // Close the active icon, change the icon, and remove the "data-active" attribute active['div'].stop().slideToggle(); active['icon'].toggleClass(config['icons']); active['wrap'].removeAttr("data-active"); } }); }); After adding that, you're done! This is the final result: If you have the "only_one" setting set to false, then you can open multiple items at once! Not counting all the comments and blank lines, you now have a jQuery accordion with only 40 lines of jQuery! Code and tutorial by Sanctuary.
  2. Simple jQuery Spoiler

    Here's a tutorial on how to create a simple jQuery spoiler. This tutorial assumes that you already have an HTML file ready to edit and have basic HTML knowledge, so I won't bother with those things. Note: You will need jQuery for this code to work. If you don't already have jQuery installed, add inside your <head> tag. <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> First, let's get started with the HTML markup. What you'll need is something like this: <div class="spoiler_wrap"> <input type="button" value="Show" /> <div class="spoiler_content">Here's some hidden content</div> </div> At first, it'll look something like this: As you can see, the content isn't hidden like it's supposed to be, but that's because we haven't applied the CSS yet. Let's do that right now. In your .css file, add this: .spoiler_wrap input[type='button'] { color: #fff; background-color: #2C93FA; padding: 2px; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 2px; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); cursor: pointer; } .spoiler_wrap .spoiler_content { display: none; margin-top: 5px; padding-left: 5px; border-left: 3px solid #2C93FA; } It should now look like this: Looks pretty good, right? The next (and final) part of this tutorial would be the jQuery itself. Some of you may not know jQuery, so I'll leave some comments in the code to make things easier to understand. $(document).ready(function() { // Once we click the spoiler button $(".spoiler_wrap input[type='button']").click(function() { // If the button's value is "Show", use the value "Hide" // But if it's not "Show", then change it back to "Show" var btn_txt = ($(this).val() == "Show") ? "Hide" : "Show"; // Actually change the button's value $(this).val(btn_txt); // Go to HTML element directly after this button and slideToggle it $(this).next().stop().slideToggle(); }); }); And you're done! Super easy, nice looking jQuery spoiler with just 3 pieces of code. Here's what it looks like after being opened: You can see that the button's text has been changed to "Hide" and that the content is now shown. You can even copy/paste the HTML as many times as you want and create multiple spoilers! Like so: Hope you found this useful!
  3. Custom jQuery Tabs

    Here's a tutorial on how to create some jQuery tabs for your website. This tutorial assumes that you already have an HTML file ready to edit and have basic HTML knowledge, so I won't bother with those things. Note: You will need jQuery for this code to work. If you don't already have jQuery installed, add inside your <head> tag. <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> Let's begin with the HTML. <div class="tabs_wrap"> <ul> <li class="active"><a href="#">Tab 1</a></li> <li><a href="#">Tab 2</a></li> <li><a href="#">Tab 3</a></li> </ul> <div class="tabs_content"> <div> Tab content #1. </div> <div> Tab content #2. </div> <div> Tab content #3. </div> </div> </div> I'll be using 3 tabs for this tutorial. Right now, this is what it looks like: Let's go ahead and style that with some CSS. You'll want something along these lines: .tabs_wrap > ul { margin-bottom: 5px; } .tabs_wrap > ul > li { display: inline-block; text-align: center; background-color: #2C93FA; border-radius: 3px; } .tabs_wrap > ul > li.active a { background-color: rgba(0, 0, 0, 0.25); } .tabs_wrap > ul > li a { color: #fff; display: block; padding: 5px 8px; } .tabs_wrap .tabs_content > div:not(:first-child) { display: none; } Here's what it looks like with the CSS applied: A pretty simple layout. If you have some CSS knowledge, you can of course tweak it to your liking. While it looks pretty and whatnot right now, it's not complete - it still doesn't actually work! To make it fully functional, we'll need to apply our jQuery. For the sake of time, I'll be leaving comments inside the code itself instead of explaining it step-by-step. Here's the jQuery we're gonna be using: $(document).ready(function() { // When we click a tab... $(".tabs_wrap > ul > li > a").click(function(e) { // Since the <a> tag has a "#" as the href // We want to prevent it from taking us to the top of the screen e.preventDefault(); // If this tab is the currently active one, don't continue the code if ($(this).parent().hasClass("active")) { return; } // Grab the index of the current tab var tab_index = $(this).parent().index(); // Find the current active tab and remove the "active" class from it $(this).closest(".tabs_wrap").find("li.active").removeClass(); // Add the "active" class to the tab we clicked $(this).parent().addClass("active"); // Inside the .tabs_content div, find the visible <div> and make it fade out $(this).closest(".tabs_wrap").find(".tabs_content > div:visible").stop().fadeOut(250, function() { // As soon as the previously visible <div> is done fading out // Find the <div> we wanted to show and fade it in $(this).closest(".tabs_wrap").find(".tabs_content > div").eq(tab_index).stop().fadeIn(250); }); }); }); And then you're done! Here's what the final product will look like: It looks about the same as the screenshot after applying the CSS, but it is now fully functional and can be clicked around with no problem. You can also use this multiple times on a single page. Enjoy! Code and tutorial by Sanctuary.
  4. Version

    70 downloads

    Photomin is the perfect responsive template designed in a clean and minimalistic style. This template is very flexible, easy for customizing and well documented, approaches for personal and professional use. Photomin has been coded in HTML & CSS3 and jQuery. It’s developed on the [url="http://getskeleton.com/"]Skeleton[/url] — beautifull boilerplate for responsive development so it look beautiful at any size, be it a 17” laptop screen or an iPad, iPhone. Visit the [url="http://html.color-theme.com/photomin/"]responsive preview[/url] site and resize your browser to see it in action or visit Photomin directly on your mobile device. [b]Template Features[/b][list] [*]Awesome Camera Slider [*]Filterable Portfolio [*]2 Porfolio Layouts with Pretty Hover Effects [list] [*]4 Columns [*]3 Columns [/list][*]Unique Blog Style [*]Blog Post Formats (image, gallery, video, audio, link, aside, quote) [*]jQuery Powered [*]Cool CSS3 Features [*]Responsive Layout [/list]
  5. Version

    70 downloads

    Creative Portfolio Template for personal or business use. [b]Features[/b][list] [*]Full JQuery Powered [*]Skitter Slider [*]HTML Version [*]Vertical Scrolling [*]Custom 680 Grid System [*]Woking Ajax / PHP Form [*]Animated Portfolio Item [*]Colorbox JQuery Plugin [*]Animated Article View [*]Well commented [*]Cufon YUI [*]Home .PSD File [/list]
  6. jQuery TimelineXML

    Version

    71 downloads

    [b]What is TimelineXML?[/b] TimelineXML is the perfect addition to your blog, magazine, news site, portfolio, you name it. The script takes time-stamped pieces of content and puts them on a timeline. The best thing about TimelineXML is how flexible it is. Here’s a list of what it can do:[list] [*]places the event on the timeline very accurately – up to the day! [*]decides whether to show every month, every second month, etc., or whether to show months at all [*]supports timespans from one year up to thousands, even millions of years. [*]supports pre-modern dates – 1000 BC, 50 000 BC, etc. [*]accepts content either as an XML file, or as HTML code [*]can work with any XML file – you can specify what’s the tag name for the title, for the content, etc. [*]sorts the events based on their date – you don’t have to enter them chronologically [*]prevents overlapping of near events [*]decides how long the timespan needs to be [*]flexible width [*]very customizable – both in functionality and style [*]comes with four unique designs: basic, modern, dark and sleek. [/list] Live Demo:[code=auto:0] http://codecanyon.net/item/jquery-timelinexml/full_screen_preview/1448100[/code]
×