Tabby Responsive Tabs - Version 1.0.2

Version Description

  • enqueue plugin js only when needed
  • css for improved specificity
Download this release

Release Info

Developer numeeja
Plugin Icon 128x128 Tabby Responsive Tabs
Version 1.0.2
Comparing to
See all releases

Code changes from version 1.0.1 to 1.0.2

Files changed (3) hide show
  1. css/tabby.css +35 -33
  2. readme.txt +19 -5
  3. tabby-responsive-tabs.php +8 -6
css/tabby.css CHANGED
@@ -1,20 +1,12 @@
1
- /* === CORE CSS Do not change this section === */
2
-
3
- .responsive-tabs__heading { display: none; }
4
- .responsive-tabs__list__item { display: inline; cursor:pointer; }
5
-
6
- @media (max-width: 767px) {
7
- .responsive-tabs__list { display: none; }
8
- .responsive-tabs__heading { display: block; cursor: pointer; }
9
- .responsive-tabs__panel--closed-accordion-only { display: none; }
10
  }
11
 
12
- @media (min-width: 768px) {
13
- .responsive-tabs__panel--closed-accordion-only { display: block; }
 
14
  }
15
 
16
- /* === Basic design === */
17
-
18
  .responsive-tabs-wrapper {
19
  clear: both;
20
  margin-bottom: 20px;
@@ -29,44 +21,44 @@
29
  clear: both;
30
  }
31
 
32
- .responsive-tabs__heading:focus,
33
- .responsive-tabs__list__item:focus {
34
  outline: 1px solid transparent;
35
  }
36
 
37
- .responsive-tabs__heading--active:focus,
38
- .responsive-tabs__list__item--active:focus {
39
  outline: none;
40
  }
41
 
42
  .responsive-tabs .responsive-tabs__list {
43
  font-size: 18px;
44
- margin: 20px 0 5px 0;
45
  padding-bottom:0;
46
  line-height: 1;
47
  }
48
 
49
- .responsive-tabs__list__item {
50
  padding: 10px 20px 10px;
51
  margin: 0 14px 0 0;
52
  border: 1px solid transparent;
 
53
  }
54
 
55
- .responsive-tabs__list__item:hover {
56
  color: #222;
57
  }
58
 
59
- .responsive-tabs__list__item--active,
60
- .responsive-tabs__list__item--active:hover {
61
  color: #606060;
62
  background: #fff;
63
- border: 1px solid #ddd;
64
- border-bottom-color: #fff;
65
  border-top-left-radius: 4px;
66
  border-top-right-radius: 4px;
67
  }
68
 
69
- .responsive-tabs__panel {
70
  background: #fff;
71
  border: 1px solid #ddd;
72
  margin-bottom: 20px;
@@ -75,13 +67,23 @@
75
 
76
  /* --- ACCORDION --- */
77
 
 
 
 
 
 
 
 
 
 
 
78
  @media (max-width: 767px) {
79
 
80
  .responsive-tabs-wrapper {
81
  border-top: 1px solid #ddd;
82
- }
83
 
84
- .responsive-tabs__heading {
85
  background: #fff;
86
  color: #909090;
87
  padding: 10px 0 10px 20px;
@@ -92,7 +94,7 @@
92
  position: relative;
93
  }
94
 
95
- .responsive-tabs__heading:after {
96
  content:"";
97
  display: block;
98
  position: absolute;
@@ -105,23 +107,23 @@
105
  border-top: 6px solid #444;
106
  }
107
 
108
- .responsive-tabs__heading:hover {
109
  color: #606060;
110
  }
111
 
112
- .responsive-tabs__heading--active,
113
- .responsive-tabs__heading--active:hover {
114
  background: #e3e3e3;
115
  color: #606060;
116
  }
117
 
118
- .responsive-tabs__heading--active:after {
119
  border-bottom: 6px solid #404040;
120
  border-top: 0;
121
  top: 18px;
122
  }
123
 
124
- .responsive-tabs__panel {
125
  border-top: none;
126
  margin: 0;
127
  }
1
+ .responsive-tabs .responsive-tabs__heading {
2
+ display: none;
 
 
 
 
 
 
 
3
  }
4
 
5
+ .responsive-tabs .responsive-tabs__list__item {
6
+ display: inline;
7
+ cursor:pointer;
8
  }
9
 
 
 
10
  .responsive-tabs-wrapper {
11
  clear: both;
12
  margin-bottom: 20px;
21
  clear: both;
22
  }
23
 
24
+ .responsive-tabs .responsive-tabs__heading:focus,
25
+ .responsive-tabs .responsive-tabs__list__item:focus {
26
  outline: 1px solid transparent;
27
  }
28
 
29
+ .responsive-tabs .responsive-tabs__heading--active:focus,
30
+ .responsive-tabs .responsive-tabs__list__item--active:focus {
31
  outline: none;
32
  }
33
 
34
  .responsive-tabs .responsive-tabs__list {
35
  font-size: 18px;
36
+ margin: 20px 0 11px 0;
37
  padding-bottom:0;
38
  line-height: 1;
39
  }
40
 
41
+ .responsive-tabs .responsive-tabs__list__item {
42
  padding: 10px 20px 10px;
43
  margin: 0 14px 0 0;
44
  border: 1px solid transparent;
45
+ border-bottom: none;
46
  }
47
 
48
+ .responsive-tabs .responsive-tabs__list__item:hover {
49
  color: #222;
50
  }
51
 
52
+ .responsive-tabs .responsive-tabs__list__item--active,
53
+ .responsive-tabs .responsive-tabs__list__item--active:hover {
54
  color: #606060;
55
  background: #fff;
56
+ border-color: #ddd;
 
57
  border-top-left-radius: 4px;
58
  border-top-right-radius: 4px;
59
  }
60
 
61
+ .responsive-tabs .responsive-tabs__panel {
62
  background: #fff;
63
  border: 1px solid #ddd;
64
  margin-bottom: 20px;
67
 
68
  /* --- ACCORDION --- */
69
 
70
+ @media (min-width: 768px) {
71
+ .responsive-tabs .responsive-tabs__panel--closed-accordion-only { display: block; }
72
+ }
73
+
74
+ @media (max-width: 767px) {
75
+ .responsive-tabs .responsive-tabs__list { display: none; }
76
+ .responsive-tabs .responsive-tabs__heading { display: block; cursor: pointer; }
77
+ .responsive-tabs .responsive-tabs__panel--closed-accordion-only { display: none; }
78
+ }
79
+
80
  @media (max-width: 767px) {
81
 
82
  .responsive-tabs-wrapper {
83
  border-top: 1px solid #ddd;
84
+ }
85
 
86
+ .responsive-tabs .responsive-tabs__heading {
87
  background: #fff;
88
  color: #909090;
89
  padding: 10px 0 10px 20px;
94
  position: relative;
95
  }
96
 
97
+ .responsive-tabs .responsive-tabs__heading:after {
98
  content:"";
99
  display: block;
100
  position: absolute;
107
  border-top: 6px solid #444;
108
  }
109
 
110
+ .responsive-tabs .responsive-tabs__heading:hover {
111
  color: #606060;
112
  }
113
 
114
+ .responsive-tabs .responsive-tabs__heading--active,
115
+ .responsive-tabs .responsive-tabs__heading--active:hover {
116
  background: #e3e3e3;
117
  color: #606060;
118
  }
119
 
120
+ .responsive-tabs .responsive-tabs__heading--active:after {
121
  border-bottom: 6px solid #404040;
122
  border-top: 0;
123
  top: 18px;
124
  }
125
 
126
+ .responsive-tabs .responsive-tabs__panel {
127
  border-top: none;
128
  margin: 0;
129
  }
readme.txt CHANGED
@@ -3,8 +3,8 @@ Contributors: numeeja
3
  Donate link: http://cubecolour.co.uk/wp
4
  Tags: tabs, responsive, shortcode, tab
5
  Requires at least: 3.7
6
- Tested up to: 3.8
7
- Stable tag: 1.0.1
8
  License: GPLv2 / MIT
9
 
10
  Tabby enables you to create responsive tabs inside your posts, pages or custom post types by adding simple shortcodes inside the post editor. The tabs transform into an accordion on a viewport 767px wide or less.
@@ -111,13 +111,17 @@ eg:
111
 
112
  Changing these values individually will show you how they interact.
113
 
 
 
 
 
114
  = Can you create a customised stylesheet for me to fit in with the colours of my website? =
115
 
116
- I'd love to, but my time is limited and this is beyond of the scope of the free support that I can give on the forums, I can offer this as a paid service. Please send me details of your requirements via the [cubecolour contact form](http://cubecolour.co.uk/contact/ "cubecolour contact form").
117
 
118
- = Why do you spell the word 'colour' incorrectly? =
119
 
120
- I don't, I'm from England.
121
 
122
  = I am using the plugin and love it, how can I show my appreciation? =
123
 
@@ -138,6 +142,11 @@ The plugin is licenced under [GNU GPLv2](http://opensource.org/licenses/GPL-2.0
138
 
139
  == Changelog ==
140
 
 
 
 
 
 
141
  = 1.0.1 =
142
 
143
  * Updated js & css
@@ -148,6 +157,11 @@ The plugin is licenced under [GNU GPLv2](http://opensource.org/licenses/GPL-2.0
148
 
149
  == Upgrade Notice ==
150
 
 
 
 
 
 
151
  = 1.0.1 =
152
 
153
  * Updated js & css
3
  Donate link: http://cubecolour.co.uk/wp
4
  Tags: tabs, responsive, shortcode, tab
5
  Requires at least: 3.7
6
+ Tested up to: 3.8.1
7
+ Stable tag: 1.0.2
8
  License: GPLv2 / MIT
9
 
10
  Tabby enables you to create responsive tabs inside your posts, pages or custom post types by adding simple shortcodes inside the post editor. The tabs transform into an accordion on a viewport 767px wide or less.
111
 
112
  Changing these values individually will show you how they interact.
113
 
114
+ = I've just updated to version 1.0.2 and the tabs are now displaying incorrectly =
115
+
116
+ The CSS has changed in version 1.0.2. It is possible that you added css rules to your theme's stylesheet rather than following the recommended method for using a customised version of the css.
117
+
118
  = Can you create a customised stylesheet for me to fit in with the colours of my website? =
119
 
120
+ I'd love to, but my time is limited and this is beyond of the scope of the free support that I can provide. I can however offer this as paid consultancy. Please send me details of your requirements via the [cubecolour contact form](http://cubecolour.co.uk/contact/ "cubecolour contact form") for a quote. Please do not use that form for requests for free support. Plugin support is provided at the [plugin's support forum](http://wordpress.org/support/plugin/tabby-responsive-tabs/ "Tabby Responsive Tabs plugin support forum") on WordPress.org.
121
 
122
+ = Why do you spell the word 'color' incorrectly? =
123
 
124
+ I don't, I'm from England and 'colour' is the correct spelling.
125
 
126
  = I am using the plugin and love it, how can I show my appreciation? =
127
 
142
 
143
  == Changelog ==
144
 
145
+ = 1.0.2 =
146
+
147
+ * enqueue plugin js only when needed
148
+ * css for improved specificity
149
+
150
  = 1.0.1 =
151
 
152
  * Updated js & css
157
 
158
  == Upgrade Notice ==
159
 
160
+ = 1.0.2 =
161
+
162
+ * better efficiency - enqueue plugin js only when needed
163
+ * improved theme compatibility with default css
164
+
165
  = 1.0.1 =
166
 
167
  * Updated js & css
tabby-responsive-tabs.php CHANGED
@@ -4,7 +4,7 @@ Plugin Name: Tabby Responsive Tabs
4
  Plugin URI: http://cubecolour.co.uk/tabby-responsive-tabs
5
  Description: Create responsive tabs inside your posts, pages or post types by adding simple shortcodes inside the post editor. The tabs behave like an accordion on smaller screens.
6
  Author: cubecolour
7
- Version: 1.0.1
8
  Author URI: http://cubecolour.co.uk
9
 
10
  Tabby Responsive Tabs WordPress plugin Copyright 2013 Michael Atkins
@@ -83,19 +83,19 @@ function cc_tabby_meta_links( $links, $file ) {
83
  add_action('wp_print_styles', 'cc_tabby_css', 30);
84
 
85
  function cc_tabby_css() {
86
- wp_enqueue_style('tabby.css', plugin_dir_url(__FILE__).'css/' . 'tabby.css' , false, '1.0.1');
87
  }
88
 
89
  // ==============================================
90
  // Register & enqueue the script
91
  // ==============================================
92
-
93
  add_action('wp_enqueue_scripts', 'cc_tabby_js');
94
  function cc_tabby_js() {
95
  wp_register_script( 'tabby', plugins_url() . "/" . basename(dirname(__FILE__)) . '/js/tabby.js', array('jquery'), '1.0.1', true );
96
  wp_enqueue_script( 'tabby' );
97
  }
98
-
99
  // ==============================================
100
  // Trigger the script if it has not already been triggered on the page
101
  // ==============================================
@@ -123,7 +123,7 @@ function cc_shortcode_tabby( $atts, $content = null ) {
123
  global $reset_firsttab_flag;
124
  static $firsttab = TRUE;
125
 
126
- if ($GLOBALS["reset_firsttab_flag"] == TRUE) {
127
  $firsttab = TRUE;
128
  $GLOBALS["reset_firsttab_flag"] = FALSE;
129
  }
@@ -154,7 +154,9 @@ add_shortcode('tabby', 'cc_shortcode_tabby');
154
  // ==============================================
155
  function cc_shortcode_tabbyending( $atts, $content = null ) {
156
 
157
- add_action('wp_footer', 'cc_tabbytrigger', 5);
 
 
158
 
159
  $GLOBALS["reset_firsttab_flag"] = TRUE;
160
 
4
  Plugin URI: http://cubecolour.co.uk/tabby-responsive-tabs
5
  Description: Create responsive tabs inside your posts, pages or post types by adding simple shortcodes inside the post editor. The tabs behave like an accordion on smaller screens.
6
  Author: cubecolour
7
+ Version: 1.0.2
8
  Author URI: http://cubecolour.co.uk
9
 
10
  Tabby Responsive Tabs WordPress plugin Copyright 2013 Michael Atkins
83
  add_action('wp_print_styles', 'cc_tabby_css', 30);
84
 
85
  function cc_tabby_css() {
86
+ wp_enqueue_style('tabby.css', plugin_dir_url(__FILE__).'css/' . 'tabby.css' , false, '1.0.2');
87
  }
88
 
89
  // ==============================================
90
  // Register & enqueue the script
91
  // ==============================================
92
+ /*
93
  add_action('wp_enqueue_scripts', 'cc_tabby_js');
94
  function cc_tabby_js() {
95
  wp_register_script( 'tabby', plugins_url() . "/" . basename(dirname(__FILE__)) . '/js/tabby.js', array('jquery'), '1.0.1', true );
96
  wp_enqueue_script( 'tabby' );
97
  }
98
+ */
99
  // ==============================================
100
  // Trigger the script if it has not already been triggered on the page
101
  // ==============================================
123
  global $reset_firsttab_flag;
124
  static $firsttab = TRUE;
125
 
126
+ if ($GLOBALS["reset_firsttab_flag"] === TRUE) {
127
  $firsttab = TRUE;
128
  $GLOBALS["reset_firsttab_flag"] = FALSE;
129
  }
154
  // ==============================================
155
  function cc_shortcode_tabbyending( $atts, $content = null ) {
156
 
157
+ wp_enqueue_script('tabby', plugins_url('js/tabby.js', __FILE__), array('jquery'), '1.0.2', true);
158
+
159
+ add_action('wp_footer', 'cc_tabbytrigger', 20);
160
 
161
  $GLOBALS["reset_firsttab_flag"] = TRUE;
162