Search Results

Search found 2353 results on 95 pages for 'tabs'.

Page 1/95 | 1 2 3 4 5 6 7 8 9 10 11 12  | Next Page >

  • Using JQuery tabs in an HTML 5 page

    - by nikolaosk
    In this post I will show you how to create a simple tabbed interface using JQuery,HTML 5 and CSS.Make sure you have downloaded the latest version of JQuery (minified version) from http://jquery.com/download.Please find here all my posts regarding JQuery.Also have a look at my posts regarding HTML 5.In order to be absolutely clear this is not (and could not be) a detailed tutorial on HTML 5. There are other great resources for that.Navigate to the excellent interactive tutorials of W3School.Another excellent resource is HTML 5 Doctor.Two very nice sites that show you what features and specifications are implemented by various browsers and their versions are http://caniuse.com/ and http://html5test.com/. At this times Chrome seems to support most of HTML 5 specifications.Another excellent way to find out if the browser supports HTML 5 and CSS 3 features is to use the Javascript lightweight library Modernizr.In this hands-on example I will be using Expression Web 4.0.This application is not a free application. You can use any HTML editor you like.You can use Visual Studio 2012 Express edition. You can download it here. Let me move on to the actual example.This is the sample HTML 5 page<!DOCTYPE html><html lang="en">  <head>    <title>Liverpool Legends</title>    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >    <link rel="stylesheet" type="text/css" href="style.css">    <script type="text/javascript" src="jquery-1.8.2.min.js"> </script>     <script type="text/javascript" src="tabs.js"></script>       </head>  <body>    <header>        <h1>Liverpool Legends</h1>    </header>     <section id="tabs">        <ul>            <li><a href="http://weblogs.asp.net/controlpanel/blogs/posteditor.aspx?SelectedNavItem=Posts§ionid=1153&postid=9143136#first-tab">Defenders</a></li>            <li><a href="http://weblogs.asp.net/controlpanel/blogs/posteditor.aspx?SelectedNavItem=Posts§ionid=1153&postid=9143136#second-tab">Midfielders</a></li>            <li><a href="http://weblogs.asp.net/controlpanel/blogs/posteditor.aspx?SelectedNavItem=Posts§ionid=1153&postid=9143136#third-tab">Strikers</a></li>        </ul>   <div id="first-tab">     <h3>Liverpool Defenders</h3>     <p> The best defenders that played for Liverpool are Jamie Carragher, Sami Hyypia , Ron Yeats and Alan Hansen.</p>   </div>   <div id="second-tab">     <h3>Liverpool Midfielders</h3>     <p> The best midfielders that played for Liverpool are Kenny Dalglish, John Barnes,Ian Callaghan,Steven Gerrard and Jan Molby.        </p>   </div>   <div id="third-tab">     <h3>Liverpool Strikers</h3>     <p>The best strikers that played for Liverpool are Ian Rush,Roger Hunt,Robbie Fowler and Fernando Torres.<br/>      </p>   </div> </div></section>            <footer>        <p>All Rights Reserved</p>      </footer>     </body>  </html>  This is very simple HTML markup. I have styled this markup using CSS.The contents of the style.css file follow* {    margin: 0;    padding: 0;}header{font-family:Tahoma;font-size:1.3em;color:#505050;text-align:center;}#tabs {    font-size: 0.9em;    margin: 20px 0;}#tabs ul {    float: left;    background: #777;    width: 260px;    padding-top: 24px;}#tabs li {    margin-left: 8px;    list-style: none;}* html #tabs li {    display: inline;}#tabs li, #tabs li a {    float: left;}#tabs ul li.active {    border-top:2px red solid;    background: #15ADFF;}#tabs ul li.active a {    color: #333333;}#tabs div {    background: #15ADFF;    clear: both;    padding: 15px;    min-height: 200px;}#tabs div h3 {    margin-bottom: 12px;}#tabs div p {    line-height: 26px;}#tabs ul li a {    text-decoration: none;    padding: 8px;    color:#0b2f20;    font-weight: bold;}footer{background-color:#999;width:100%;text-align:center;font-size:1.1em;color:#002233;}There are some CSS rules that style the various elements in the HTML 5 file. These are straight-forward rules. The JQuery code lives inside the tabs.js file $(document).ready(function(){$('#tabs div').hide();$('#tabs div:first').show();$('#tabs ul li:first').addClass('active'); $('#tabs ul li a').click(function(){$('#tabs ul li').removeClass('active');$(this).parent().addClass('active');var currentTab = $(this).attr('href');$('#tabs div').hide();$(currentTab).show();return false;});}); I am using some of the most commonly used JQuery functions like hide , show, addclass , removeClass I hide and show the tabs when the tab becomes the active tab. When I view my page I get the following result Hope it helps!!!!!

    Read the article

  • New Tabs at End Opens New Tabs at the End of the Chrome Tab Bar

    - by Jason Fitzpatrick
    Chrome: If you’d prefer to have new tabs open at the end of the row instead of next to their parent tab, New Tabs at End is a simple Google Chrome extension that will scoot your tabs where you want them. It’s a minor thing, to be sure, but many users prefer to have tabs open at the end of the row–I know it took me quite awhile as a new Chrome user to get used to the default next-to-parent action. If you’d prefer to have the new tabs open at the end, hit up the link below to install New Tabs at End to tweak your tab bar workflow. New Tabs at End [via Addictive Tips] How To Be Your Own Personal Clone Army (With a Little Photoshop) How To Properly Scan a Photograph (And Get An Even Better Image) The HTG Guide to Hiding Your Data in a TrueCrypt Hidden Volume

    Read the article

  • jQuery UI Tabs customization for many tabs

    - by Tauren
    I'd like to implement a tab bar using jquery-ui-tabs that has been customised to work like it does on HootSuite. Try this on HootSuite to see what I mean: Log in to your hootsuite.com account Click the + symbol to the right of your tabs Add tabs named "MMMMMMMMMMMMMMMMM" until a "More..." tab appears You'll see this: HootSuite includes the following features, all of which I would like to do: Fit as many tabs as possible onto the screen. Users with larger screens would see more tabs. If they run out of space, a "More..." tab would appear with a drop-down list Clicking onto the More tab would drop down a list of additional tabs Tabs can be dragged and rearranged. Tabs in the More drop-down list can be dragged to the tab bar Delete tabs with a small X next to the tab name Add tabs with a + icon to the right of the last tab I already have a tab bar working that does 4 and 6. I found a Paging Tab Plugin which is pretty cool, but works differently. Does anyone know of plugins or techniques that would help me accomplish the above? My thought is to not really make the More tab a real tab, but just an object that looks like a tab. I'd add logic to the tabs.add method to calculate if another tab can fit. If it can't, then I would add the details of the tab to my separate "More" list. There'd be a fair amount of effort to get this all working, so if there are any plugins that would help, I'd love to hear about them.

    Read the article

  • jQuery tabs - multiple sets on on page

    - by Jonny Wood
    This is kind of a follow on from a previous question I posted but I've not been able to get it to work.. I'm trying to use multiple sets of tabs (jQuery) on one page. This is the code I had for one set of tabs which works great: $('div.tabs div.tab').hide(); $('div.tabs div:first').show(); $('div.tabs ul.htabs li:first a').addClass('current'); $('div.tabs ul.htabs li a').click(function(){ $('div.tabs ul.htabs li a').removeClass('current'); $(this).addClass('current'); var currentTab = $(this).attr('href'); $('div.tabs div.tab').hide(); $(currentTab).show(); return false; }); To use more than one set on the page I assigned #id's to each tab-set and tried to impliment this with: $.each(['#tabs-1', '#tabs-2', '#tabs-3' ], function(id) { $(id + 'div.tab').hide(); $(id + 'div:first').show(); $(id + 'ul.htabs li:first a').addClass('current'); $(id + 'ul.htabs li a').click(function(){ $(id + 'ul.htabs li a').removeClass('current'); $(this).addClass('current'); var currentTab = $(this).attr('href'); $(id + 'div.tab').hide(); $(currentTab).show(); return false; }); }); Obviously I'm doing something wrong here but as a jQuery newcomer I'm stumped!

    Read the article

  • Getting Internet Explorer to Open Different Sets of Tabs Based on the Day of the Week

    - by Akemi Iwaya
    If you have to use Internet Explorer for work and need to open a different set of work-specific tabs every day, is there a quick and easy way to do it instead of opening each one individually? Today’s Question & Answer session comes to us courtesy of SuperUser—a subdivision of Stack Exchange, a community-driven grouping of Q&A web sites. The Question SuperUser reader bobSmith1432 is looking for a quick and easy way to open different daily sets of tabs in Internet Explorer for his work: When I open Internet Explorer on different days of the week, I want different tabs to be opened automatically. I have to run different reports for work each day of the week and it takes a lot of time to open the 5-10 tabs I use to run the reports. It would be a lot faster if, when I open Internet Explorer, the tabs I needed would automatically load and be ready. Is there a way to open 5-10 different tabs in Internet Explorer depending on the day of the week? Example: Monday – 6 Accounting Pages Tuesday – 7 Billing Pages Wednesday – 5 HR Pages Thursday – 10 Schedule Pages Friday – 8 Work Summary/Order Pages Is there an easier way for Bob to get all those tabs to load and be ready to go each day instead of opening them individually every time? The Answer SuperUser contributor Julian Knight has a simple, non-script solution for us: Rather than trying the brute force method, how about a work around? Open up each set of tabs either in different windows, or one set at a time, and save all tabs to bookmark folders. Put the folders on the bookmark toolbar for ease of access. Each day, right-click on the appropriate folder and click on ‘Open in tab group’ to open all the tabs. You could put all the day folders into a top-level folder to save space if you want, but at the expense of an extra click to get to them. If you really must go further, you need to write a program or script to drive Internet Explorer. The easiest way is probably writing a PowerShell script. Special Note: There are various scripts shared on the discussion page as well, so the solution shown above is just one possibility out of many. If you love the idea of using scripts for a function like this, then make sure to browse on over to the discussion page to see the various ones SuperUser members have shared! Have something to add to the explanation? Sound off in the comments. Want to read more answers from other tech-savvy Stack Exchange users? Check out the full discussion thread here.

    Read the article

  • prevent IE8 tabs from opening tabs in stack in taskbar

    - by Nano8Blazex
    This may have been asked before too... But, anyways. I'm using Windows 7 Ultimate, and IE 8, and have the taskbar in icon view. I'm not sure how to explain this, but I'm amazed at how each tab in IE8 seems to act like a new "process" in the taskbar (as if each tab was a window). Like... each tab acts like a different window in the taskbar although they are actually running in the same window. Now when I use IE 8 it looks (in the taskbar) like there's 15 windows open when in fact the taskbar is simply showing the 15 tabs. More simply put, it's displaying a "stack" for all of the tabs when I'd rather have the icon act like, for example, firefox so that a stack is only shown for the multiple windows. I know that they are meant to be running as separate processes to prevent crashing and the such... but is there a way to disable this strange "taskbar" effect? I'd rather have the taskbar show the main window and not the tabs individually. There has to be a simple way to do this...

    Read the article

  • jQuery UI Tabs Plugin Broke

    - by Warren J Thompson
    We are using the jquery ui tabs arrow plugin from this fiddle: http://jsfiddle.net/dECtZ/282/, but like many plugins, it breaks with the latest version of jQuery. We were able to get the csscur to work, but still get the following error in the jquery core (line 353): Uncaught TypeError: Cannot assign to read only property 'length' of function (e,t){if(!this._createWidget)return new o(e,t);arguments.length&&this._createWidget(e,t)} Code is as follows: (function($, undefined) { if (!$.xui) { $.xui = {}; } var tabs = $.extend({}, $.ui.tabs.prototype), _super = { _create: tabs._create, _destroy: tabs._destroy, _update: tabs._update }; $.xui.tabs = $.extend(tabs, { options: $.extend({}, tabs.options, { scrollable: false, changeOnScroll: false, closable: false, resizable: false, resizeHandles: "e,s,se" }), _create: function() { var self = this, o = self.options; _super._create.apply(self); if (o.scrollable) { self.element.addClass("ui-tabs-scrollable"); var scrollContainer = $('<div class="ui-tabs-scroll-container"></div>').prependTo(this.element); self.header = $('<div class="ui-tabs-nav-scrollable ui-widget-header ui-corner-all"></div>').prependTo(scrollContainer); var nav = self.element.find(".ui-tabs-nav:first").removeClass("ui-widget-header ui-corner-all").appendTo(this.header); var arrowsNav = $('<ol class="ui-helper-reset ui-helper-clearfix ui-tabs-nav-arrows"></ol>').prependTo(self.element); var navPrev = $('<li class="ui-tabs-arrow-previous ui-state-default ui-corner-bl ui-corner-tl" title="Previous"><a href="#"><span class="ui-icon ui-icon-carat-1-w">Previous tab</span></a></li>').prependTo(arrowsNav).hide(), navNext = $('<li class="ui-tabs-arrow-next ui-state-default ui-corner-tr ui-corner-br" title="Next"><a href="#"><span class="ui-icon ui-icon-carat-1-e">Next tab</span></a></li>').appendTo(arrowsNav).hide(); var scrollTo = function(to, delay) { var navWidth = 0, arrowWidth = navPrev.outerWidth(), marginLeft = -(parseInt(nav.css("marginLeft"), 10)), hwidth = self.header.width(), newMargin = 0; nav.find("li").each(function() { navWidth += $(this).outerWidth(true); }); if (to instanceof $.Event) { } else { newMargin = marginLeft+to; if (newMargin > (navWidth-hwidth)) { newMargin = (navWidth-hwidth); } else if (newMargin < 0) { newMargin = 0; } nav.stop(true).animate({ marginLeft: -(newMargin) }, delay, function(){ $(window).trigger("resize.tabs"); }); } } var holdTimer = false; navPrev.add(navNext).bind({ "click": function(e) { var isNext = this === navNext[0]; e.preventDefault(); if (o.changeOnScroll) { self.select(self.options.selected + (isNext ? 1 : -1)); } else { if (!holdTimer) scrollTo(isNext ? 150 : -150, 250); } }, "mousedown": function(e){ if (!o.changeOnScroll) { var isNext = this === navNext[0], duration = 10, pos = 15, timer; if (holdTimer) clearTimeout(holdTimer); holdTimer = setTimeout(timer = function(){ scrollTo(isNext ? pos : -(pos), duration); holdTimer = setTimeout(arguments.callee, duration); }, 150); } }, "mouseup mouseout": function(e){ if (!o.changeOnScroll) { clearTimeout(holdTimer); holdTimer = false; nav.stop(); } } }); self.header.bind('mousewheel', function(e, d, dX, dY) { e.preventDefault(); if (d === -1) { navNext.click(); } else if (d === 1) { navPrev.click(); } }); $(window).bind("resize.tabs", function(e) { var navWidth = 0; var arrowWidth = navPrev.outerWidth(); nav.find("li").each(function() { navWidth += $(this).outerWidth(true); }); var marginLeft = -(parseInt(nav.css("marginLeft"), 10)), hwidth = self.header.width(); if (navWidth > (hwidth+marginLeft)) { self.header.addClass("ui-tabs-arrow-r"); navNext.show("fade"); if (marginLeft > 0) { self.header.addClass("ui-tabs-arrow-l"); navPrev.show("fade"); } else { self.header.removeClass("ui-tabs-arrow-l"); navPrev.hide("fade"); } } else { self.header.removeClass("ui-tabs-arrows ui-tabs-arrow-l"); navNext.hide("fade"); if (marginLeft > 0) { self.header.addClass("ui-tabs-arrow-l"); navPrev.show("fade"); } else { self.header.removeClass("ui-tabs-arrow-l"); navPrev.hide("fade"); } } }).trigger("resize.tabs"); arrowsNav.find("li").bind({ "mouseenter focus": function(e) { $(this).addClass("ui-state-hover"); }, "mouseleave blur": function(e) { $(this).removeClass("ui-state-hover"); } }); this.anchors.bind("click.tabs", function(){ var li = $(this).parent(), arrowWidth = navPrev.outerWidth(), width = li.outerWidth(true), hwidth = self.header.width(), pos = li.position().left, marginLeft = -(parseInt(nav.stop(true,true).css("marginLeft"),10)), newMargin = -1; if (li.index() === 0) { newMargin = 0; } else if ((pos+width) >= (hwidth+marginLeft)) { newMargin = pos-hwidth+width; if ((li.index()+1) < nav.find("li").length) { newMargin += arrowWidth; } } else if (pos < marginLeft) { newMargin = pos-arrowWidth; } if (newMargin > -1) { nav.animate({ marginLeft: -(newMargin) }, 250, function(){ $(window).trigger("resize.tabs"); }); } }); } return self; }, _update: function(){ console.log(arguments); _super._update.apply(this); } }); $.widget("xui.tabs", $.xui.tabs); })(jQuery); $(function() { $("#tabs").tabs({ scrollable: true, changeOnScroll: false, closable: true }); $("#switcher").themeswitcher(); });

    Read the article

  • jQuery UI Tabs - bind tabs to links on the same page

    - by Troy
    Hello, I'm trying to bind tabs to a link on the same page, but I'm a relative newby to jQuery and need some help. I have the tabs working with the code from jQuery UI site. However, how do I bind the links in the sidebar on the same page? <script> $(function() { $( "#tabs" ).tabs(); }); /script> <div class="demo"> <div id="tabs"> <ul> <li><a href="#tabs-1">Nunc tincidunt</a></li> <li><a href="#tabs-2">Proin dolor</a></li> <li><a href="#tabs-3">Aenean lacinia</a></li> </ul> <div id="tabs-1"> <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p> </div> <div id="tabs-2"> <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p> </div> <div id="tabs-3"> <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p> <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p> </div> </div> </div> <div id="sidebar"> <a href="#tab-1" id="tab-1"><img src="image1.jpg" /></a> <a href="#tab-2" id="tab-2"><img src="image2.jpg" /></a> </div>

    Read the article

  • JQuery UI + tabs : How to kow to get the selected tab with imbricated tabs

    - by chris
    Hi, I'm new to Jquery. I'm using JQuery UI and i have imbricated Tabs : Tabs in tabs. ____ tab 1 | tab 2 | tab 3 | tab 4| tab 5 ______ tab 1-1 | tab 1-2 | tab 1-3 | tab 1-4| tab 1-5 I'm using $('#div').bind('tabsselect', function(event, ui) { selectedTab = ui.index; alert('selectedTab : ' + selectedTab); }); to kown the selected index. If i click on "tab "1 the selected index returned is correct. But when click on tabs in the second level ("tab 1-xx") the event is fired too. I want to resctriced the bind('tabsselect', function(event, ui) on the first level of tab (tab x). How can i do that ? Thanks

    Read the article

  • jquery ui tabs close button beneath the text

    - by Pradyut Bhattacharya
    Hi I m using jquery ui tabs and i m using them with the function of dynamically closing them. the example page here where clicking on the link 'add tab' leads to adding of tabs in the tabs panel... now in firefox the close buttons are displayed beneath the text of the tab which is leading to garbled text in the tab panel or the body of the tabs like other browsers how can i display it in same line the css i m using is .ui-tabs { padding: .20em; zoom: 1; } .ui-tabs .ui-tabs-nav { list-style: none; position: relative; padding: .2em .2em 0; height:27px; } .ui-tabs .ui-tabs-nav li { position: relative; float: left; border-bottom-width: 0 !important; margin: 0 .2em -1px 0; padding: 0; font-size:63.5%; } .ui-tabs .ui-tabs-nav li a { float: left; text-decoration: none; padding: .5em 1em; } .ui-tabs .ui-tabs-nav li.ui-tabs-selected { padding-bottom: 1px; border-bottom-width: 0; } .ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: text; } .ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; font: 62.5%; } .ui-tabs .ui-tabs-panel { padding: 1em 1.4em; display: block; border-width: 0; background:black; color:white; font-size: 12px; } .ui-tabs .ui-tabs-hide { display: none !important; font: 62.5%; } #tabs .ui-tabs-nav li a:hover { float: left; text-decoration: none; padding: .5em 1em; background-color: #868472; } #tabs-profile .ui-tabs-nav li { position: relative; float: left; border-bottom-width: 0 !important; margin: 0 .2em -1px 0; padding: 0; font-size:75%; } Please help thanks Pradyut India

    Read the article

  • Keyboard navigation for jQuery Tabs

    - by Binyamin
    How to make Keyboard navigation left/up/right/down (like for photo gallery) feature for jQury Tabs with History? Demo without Keyboard feature in http://dl.dropbox.com/u/6594481/tabs/index.html Needed functions: 1. on keyboardtop/down make select and CSS showactivenested ajax tabs from 1-st to last level 2. on keyboardleft/right changeback/forwardcontent ofactivenested ajax tabs tab 3. an extra option, makeactivenested ajax tab on 'cursor-on' on concrete nested ajax tabs level Read more detailed question with example pictures in http://stackoverflow.com/questions/2975003/jquery-tools-to-make-keyboard-and-cookies-feature-for-ajaxed-tabs-with-history /** * @license * jQuery Tools @VERSION Tabs- The basics of UI design. * * NO COPYRIGHTS OR LICENSES. DO WHAT YOU LIKE. * * http://flowplayer.org/tools/tabs/ * * Since: November 2008 * Date: @DATE */ (function($) { // static constructs $.tools = $.tools || {version: '@VERSION'}; $.tools.tabs = { conf: { tabs: 'a', current: 'current', onBeforeClick: null, onClick: null, effect: 'default', initialIndex: 0, event: 'click', rotate: false, // 1.2 history: false }, addEffect: function(name, fn) { effects[name] = fn; } }; var effects = { // simple "toggle" effect 'default': function(i, done) { this.getPanes().hide().eq(i).show(); done.call(); }, /* configuration: - fadeOutSpeed (positive value does "crossfading") - fadeInSpeed */ fade: function(i, done) { var conf = this.getConf(), speed = conf.fadeOutSpeed, panes = this.getPanes(); if (speed) { panes.fadeOut(speed); } else { panes.hide(); } panes.eq(i).fadeIn(conf.fadeInSpeed, done); }, // for basic accordions slide: function(i, done) { this.getPanes().slideUp(200); this.getPanes().eq(i).slideDown(400, done); }, /** * AJAX effect */ ajax: function(i, done) { this.getPanes().eq(0).load(this.getTabs().eq(i).attr("href"), done); } }; var w; /** * Horizontal accordion * * @deprecated will be replaced with a more robust implementation */ $.tools.tabs.addEffect("horizontal", function(i, done) { // store original width of a pane into memory if (!w) { w = this.getPanes().eq(0).width(); } // set current pane's width to zero this.getCurrentPane().animate({width: 0}, function() { $(this).hide(); }); // grow opened pane to it's original width this.getPanes().eq(i).animate({width: w}, function() { $(this).show(); done.call(); }); }); function Tabs(root, paneSelector, conf) { var self = this, trigger = root.add(this), tabs = root.find(conf.tabs), panes = paneSelector.jquery ? paneSelector : root.children(paneSelector), current; // make sure tabs and panes are found if (!tabs.length) { tabs = root.children(); } if (!panes.length) { panes = root.parent().find(paneSelector); } if (!panes.length) { panes = $(paneSelector); } // public methods $.extend(this, { click: function(i, e) { var tab = tabs.eq(i); if (typeof i == 'string' && i.replace("#", "")) { tab = tabs.filter("[href*=" + i.replace("#", "") + "]"); i = Math.max(tabs.index(tab), 0); } if (conf.rotate) { var last = tabs.length -1; if (i < 0) { return self.click(last, e); } if (i > last) { return self.click(0, e); } } if (!tab.length) { if (current >= 0) { return self; } i = conf.initialIndex; tab = tabs.eq(i); } // current tab is being clicked if (i === current) { return self; } // possibility to cancel click action e = e || $.Event(); e.type = "onBeforeClick"; trigger.trigger(e, [i]); if (e.isDefaultPrevented()) { return; } // call the effect effects[conf.effect].call(self, i, function() { // onClick callback e.type = "onClick"; trigger.trigger(e, [i]); }); // default behaviour current = i; tabs.removeClass(conf.current); tab.addClass(conf.current); return self; }, getConf: function() { return conf; }, getTabs: function() { return tabs; }, getPanes: function() { return panes; }, getCurrentPane: function() { return panes.eq(current); }, getCurrentTab: function() { return tabs.eq(current); }, getIndex: function() { return current; }, next: function() { return self.click(current + 1); }, prev: function() { return self.click(current - 1); } }); // callbacks $.each("onBeforeClick,onClick".split(","), function(i, name) { // configuration if ($.isFunction(conf[name])) { $(self).bind(name, conf[name]); } // API self[name] = function(fn) { $(self).bind(name, fn); return self; }; }); if (conf.history && $.fn.history) { $.tools.history.init(tabs); conf.event = 'history'; } // setup click actions for each tab tabs.each(function(i) { $(this).bind(conf.event, function(e) { self.click(i, e); return e.preventDefault(); }); }); // cross tab anchor link panes.find("a[href^=#]").click(function(e) { self.click($(this).attr("href"), e); }); // open initial tab if (location.hash) { self.click(location.hash); } else { if (conf.initialIndex === 0 || conf.initialIndex > 0) { self.click(conf.initialIndex); } } } // jQuery plugin implementation $.fn.tabs = function(paneSelector, conf) { // return existing instance var el = this.data("tabs"); if (el) { return el; } if ($.isFunction(conf)) { conf = {onBeforeClick: conf}; } // setup conf conf = $.extend({}, $.tools.tabs.conf, conf); this.each(function() { el = new Tabs($(this), paneSelector, conf); $(this).data("tabs", el); }); return conf.api ? el: this; }; }) (jQuery); /** * @license * jQuery Tools @VERSION History "Back button for AJAX apps" * * NO COPYRIGHTS OR LICENSES. DO WHAT YOU LIKE. * * http://flowplayer.org/tools/toolbox/history.html * * Since: Mar 2010 * Date: @DATE */ (function($) { var hash, iframe, links, inited; $.tools = $.tools || {version: '@VERSION'}; $.tools.history = { init: function(els) { if (inited) { return; } // IE if ($.browser.msie && $.browser.version < '8') { // create iframe that is constantly checked for hash changes if (!iframe) { iframe = $("<iframe/>").attr("src", "javascript:false;").hide().get(0); $("body").append(iframe); setInterval(function() { var idoc = iframe.contentWindow.document, h = idoc.location.hash; if (hash !== h) { $.event.trigger("hash", h); } }, 100); setIframeLocation(location.hash || '#'); } // other browsers scans for location.hash changes directly without iframe hack } else { setInterval(function() { var h = location.hash; if (h !== hash) { $.event.trigger("hash", h); } }, 100); } links = !links ? els : links.add(els); els.click(function(e) { var href = $(this).attr("href"); if (iframe) { setIframeLocation(href); } // handle non-anchor links if (href.slice(0, 1) != "#") { location.href = "#" + href; return e.preventDefault(); } }); inited = true; } }; function setIframeLocation(h) { if (h) { var doc = iframe.contentWindow.document; doc.open().close(); doc.location.hash = h; } } // global histroy change listener $(window).bind("hash", function(e, h) { if (h) { links.filter(function() { var href = $(this).attr("href"); return href == h || href == h.replace("#", ""); }).trigger("history", [h]); } else { links.eq(0).trigger("history", [h]); } hash = h; window.location.hash = hash; }); // jQuery plugin implementation $.fn.history = function(fn) { $.tools.history.init(this); // return jQuery return this.bind("history", fn); }; })(jQuery); $(function() { $("#list").tabs("#content > div", {effect: 'ajax', history: true}); });

    Read the article

  • Having trouble deselecting all jquery tabs

    - by Julian
    I set up some jQuery tabs to start off with no tabs selected like this: $('#tabs').tabs( { selected: -1 } ); Then I also have a separate link that when pressed needs to deselect all the tabs. $("#deselectButton").click(function(){ $('#tabs').tabs( 'select' , -1 ) }); or $("#deselectButton").click(function(){ $('#tabs').tabs( 'selected' , -1 ) }); The deselectButton click does deselect the tabs content, however the tabs title remains active with the class 'ui-tabs-selected ui-state-active'. What is the correct way to deselect all the tabs?

    Read the article

  • jquery ui tabs major style change

    - by Jonah
    I am using jquery UI tabs and I need to majorly change the styling on it. I need to rempve the background image, the borders, almost everything. I need it to look minimal, and not like it's self contained. What's the best way to do this? I need to use the default UI styling for the calendar widget however, which is on the same page. I've done a lot of research and everyone seems to point to the theme-roller. However, i do not just want to change the colors and border radii. I need to delete crap. theme-roller seems to be just change things like colors (not really useful for the real world) Is it even worth using jquery UI for my tabs?

    Read the article

  • Chromium/Chrome tabs crashes on Ubuntu/Edubuntu 12.04.3

    - by Joakim Waern
    For some reason the tabs of Chromium and Chrome have started to crash (He's dead Jim) when running on Ubuntu or Edubuntu 12.04.3. It seems to happen only when I log in. I tried the browsers on Ubuntu 13.10 and everything worked fine. Any suggestions? Ps. The browser doesn't crash, just the tabs, and I can open new ones (but they also crash after a while). Here's the output command free on the terminal after a tab crash: total used free shared buffers cached Mem: 2041116 1722740 318376 0 2868 267256 -/+ buffers/cache: 1452616 588500 Swap: 2085884 104 2085780 Compared to the output before the crash: total used free shared buffers cached Mem: 2041116 1967108 74008 0 14632 253036 -/+ buffers/cache: 1699440 341676 Swap: 2085884 40 2085844

    Read the article

  • how to list opened nautilus tabs with qdbus?

    - by Aquarius Power
    I am trying to dig into qdbus for nautilus to get a list of opened tabs; I managed to do this so far: sites=(`qdbus |grep nautilus -i`); for siteSrc in ${sites[@]};do list=(`qdbus $siteSrc`); for path in ${list[@]}; do qdbus $siteSrc $path |sed -r "s|.*|$siteSrc $path &|"; done; done |sort -u #|grep paths -i for ex.: I was able to get a list of selected files with qdbus org.gnome.NautilusApplication /org/nautilus_actions/DBus/Tracker/0 org.nautilus_actions.DBus.Tracker.Properties1.GetSelectedPaths but I cant find a clue for opened tabs locations? (so we can use on scripts to restore them later)

    Read the article

  • jQuery UI Tabs animation

    - by Ayrton
    Hi I haven't been able to find a lot of documentation on animating the jQuery UI Tabs, so I'm wondering if anyone knows how to simulate a grow/shrink effect relatively to the current tab I don't really like the height: 'toggle' animation where the tab goes to height 0px first and then the height of the new tab. when tab 1 has a height of 100px and the second a height of 120px I would like the tab to grow 20px

    Read the article

  • show/hide a link if certain jquery ui tab is selected.

    - by Mark
    When #my-text-link is clicked, i need to select tab 5 and when tab 5 is selected i need to hide #my-text-link. hope this makes sense, heres the code, and also what I have done so far, please feel free to show me a better way. Thanks in advance var $tabs = $('.tabbed').tabs(); // first tab selected $('#my-text-link').click(function() { // bind click event to link $tabs.tabs('select', 4); // switch to third tab $('#my-text-link').hide(); return false; }); <a href="#" id="my-text-link"></a> <ul> <li class="one"><a href="#tabs-1" title="Summary"></a></li> <li class="two"><a href="#tabs-2" title="Detailed Info"></a></li> <li class="three"><a href="#tabs-3" title="Images"></a></li> <li class="four"><a href="#tabs-4" title="Reviews"></a></li> <li class="five"><a href="#tabs-5" title="Dates &amp; Prices"></a></li> </ul> <div id="tabs-1"></div> <div id="tabs-2"></div> <div id="tabs-3"></div> <div id="tabs-4"></div> <div id="tabs-5"></div>

    Read the article

  • Stop Child Elements from Inheriting Parent Style, Broken Tabs Javascript

    - by WillingLearner
    I am using the flowplayer jquery tabs plugin: http://flowplayer.org/tools/tabs/index.html Im having mucho difficulty when placing my child elements inside the panes divs, and stopping them from inheriting the style of the container pane div. Its breaking my layout to pieces and i need to know how to override the style and just keep the container panes div only to itself. Also, im having a devil of a time trying to call 2 different sets of tabs and panes. Im not getting the classes and IDs right, the javascript, or something along those lines. How would i set this up so i can call (tabs A / panes A) and then (tabs B / panes B), css wise, and javascript wise? My current javascript is: <!-- This JavaScript snippet activates the tabs --> <script> // perform JavaScript after the document is scriptable. $(function() { // setup ul.tabs to work as tabs for each div directly under div.panes $("ul.tabs").tabs("div.panes1 > div"); //$("ul.tabs.myprofile").tabs("div.panes > div"); }); </script> This only works for 1 set of tabs and panes on a page. Dosent help me much if i want to call 2 totally different sets. Ive gone over the documentation many times but im still not getting it. Please help me find a solution to BOTH of my problems. Thanks.

    Read the article

  • Unable to click on tabs in Firefox unless I press Command-Q

    - by Philip
    Why does clicking on tabs in Firefox sometimes fail until I hit cmd-Q, and then why does that not quit but instead make clicking on the tabs work, and how do I stop that behavior? I'm running Firefox 3.5.5 on Mac OS X 10.5 and this has been happening for a while (with previous versions of FF as well). I can't forcibly reproduce the behavior, but every now and then (few days?) I just can't click on tabs or on the x's to close the tabs. I can still ctrl-tab between tabs, though. But if I press cmd-Q, instead of quitting, Firefox seems to seize for a second and then I can click on tabs and click to close them just fine. No clue why this is happening or how to stop it. And I do have tons of extensions installed, so it's plausible one of them is the problem..... Thanks.

    Read the article

  • Firefox extension to save tabs?

    - by emzero
    I'm looking for some Firefox (4 or 5) extension to save a group of tabs (better if can be done directly in Panorama view). What I mean by "Save tabs" is not to restore them when Firefox starts. I always have the browser opened and a LOT of tabs (work and personal life related) eating my RAM. So when I'm not working, I would want a way to save those tabs but keep them closed while I still use Firefox. So when I have to start working again, I will restore that saved tabs back again. I know I could use something like Read It Later, but I really need a way to say "hey, save this group of tabs and close them". RIL makes me do it per tab, which is annoying since I'm used to have A LOT.

    Read the article

  • Opera: closed window w/many tabs, window still open w/one tab, how to retrieve the many tabs

    - by Abel
    This is a little recipe for a little disaster: accidentally close a window with many important tabs open, only to find out that another window is still active with one tab open. Closing it will overwrite the saved tabs of the other window, which I want to recover. I need to recover the window with "many tabs" if possible,I didn't yet close the window with the one tab open, hopefully that prevents overwriting the saved settings. How do I retrieve, now that Opera is still active, the tabs of the closed window? I.e., where would Opera normally store these tabs when it closes a window? Can I prevent it from overwriting the saved state of "many tabs" with the current "one tab"?

    Read the article

  • Tabs in asp.net mvc

    - by Xulfee
    I have three tabs on page and one user control. I want to RenderPartial on each tab. <script type="text/javascript"> $(document).ready(function() { $("#tabs").tabs(); }); </script> <div id="tabs"> <ul> <li><a href="#tabs-1">Text 1</a></li> <li><a href="#tabs-2">Text 2</a></li> <li><a href="#tabs-3">Text 3</a></li> </ul> <div id="tabs-1"> <% Html.RenderPartial("usercontrol", Model); %> </div> <div id="tabs-2"> <% Html.RenderPartial("usercontrol", Model); %> </div> <div id="tabs-3"> <% Html.RenderPartial("usercontrol", Model); %> </div> </div> how can i get values from different tabs.

    Read the article

  • Jquery-UI tabs : Double loading of the default tab

    - by Stephane
    I use jqueryui-tabs to display a tabbed UI. here is how my markup looks in a MasterPage: <div id="channel-tabs" class="ui-tabs"> <ul class="ui-tabs-nav"> <li><%=Html.ActionLink("Blogs", "Index", "Blog", new { query = Model.Query, lang = Model.SelectedLanguage, fromTo = Model.FromTo, filters = Model.FilterId }, new{ title="Blog Results" }) %></li> <li><%=Html.ActionLink("Forums", "Index", "Forums", new { query = Model.Query, lang = Model.SelectedLanguage, fromTo = Model.FromTo, filters = Model.FilterId }, null) %></li> <li><%=Html.ActionLink("Twitter", "Index", "Twitter", new { query = Model.Query, lang = Model.SelectedLanguage, fromTo = Model.FromTo, filters = Model.FilterId }, null) %></li> </ul> <div id="Blog_Results"> <asp:ContentPlaceHolder ID="ResultPlaceHolder" runat="server"> </asp:ContentPlaceHolder> </div> If the content is loaded via ajax, I return a partial view with the content of the tab. If the content is loaded directly, I load a page that include the content in the ContentPlaceHolder. somewhat like this : <asp:Content ID="Content2" ContentPlaceHolderID="BlogPlaceHolder" runat="server"> <%=Html.Partial("Partial",Model) %> </asp:Content> //same goes for the other tabs. With this in place, if I access the url "/Forums" It loads the forum content in the Blog tab first, trigger the ajax load of the Blog tab and replace the content with the blog content. I tried putting a different placeholder for each tab, but that didn't fix everything either, since when loading "/Forums" it will sure load the forum tab, but the Blog tab will show up first. Furthermore, when using separate placeholders, If I load the "/Blogs" url, It will first load the content statically in the Blog contentplaceholder and then trigger an ajax call to load it a second time and replace it. If I just link the tab to the hashtag, then when loading the forum tabs, I won't get the blog content... How would you achieve the expected behaviour? I feel like I might have a deeper probelm in the organization of my views. Is putting the tabs in the masterpage the way to go? Maybe I should just hijax the links manually and not rely on jquery-ui tabs to do the work for me. I cannot load all tabs by default and display them using the hash tags, I need an ajax loading because it is a search process that can be long. So to sum up : /Forum should load the forum tab, and let the other tabs be loaded with an ajax call when clicking on it. /Twitter should load the twitter tab and let the other tabs.... the same goes for /Blogs and any tabs I would add later. Any idea to have this working properly?

    Read the article

1 2 3 4 5 6 7 8 9 10 11 12  | Next Page >