Tag Archives: css

resizing columns in wordpress

Posted on by
Reply

Our OCP 11 (IZ0-815) book is at the printer. It comes out this month! In fact we are doing a CodeRanch promo for it next week. The book comes with an online test bank. The online bank includes two full length mock exams and every question in the book.

While uploading our questions to the test bank software, one of the test bank staff noticed an error. Two of our answer choices were the same. Luckily this wasn’t the correct answer, so a pretty minor errata. But it is our first errata so time to start the errata list.

For our Java 8 books, we used an HTML table for the errata list because our WordPress instance didn’t have table support. Editing the HTML was a pain so I was happy to see that now there are native WordPress tables. So I tried it out. Easy to enter data, add/remove rows/columns. Excellent. It’s all you could want in a table editor. Well. Almost.

Attempt #1

I chose the striped option. And this is what I got my default. I agree that the error column is the most important. And it’s nice that it is wide. But the other columns are so narrow to be unreadable.

Attempt #2

I looked at what my options were on the table. There was only one option that looked relevant. So I clicked it

Yuck; that’s even worse. The error column is the most important and it is so narrow it is hard to read. And there is lots of wasted whitespace.

Attempt #3

I got rid of the Type column to get a bit more real estate. Then I discovered there was a CSS option. I made up a unique CSS class name. Given that 815 is in the exam name, that sounds unique on our site.

I also went to the Additional CSS screen:

  • Settings
  • Appearance
  • Customize
  • Additional CSS

I added this CSS:

/* By default, wordpress only allows default or equals column size. Both look bad on the errata table so using CSS to customize */

/* page # */
.ocp-815-errata-table td:nth-child(1) {
  width: 10%;
  }

/* chapter #*/
.ocp-815-errata-table td:nth-child(2) {
  width: 10%;
}

/* actual errata */
.ocp-815-errata-table td:nth-child(3) {
  width: 50%;
 }

/* reporter */
.ocp-815-errata-table td:nth-child(4) {
  width: 15%;
 }

/* confirmed */
.ocp-815-errata-table td:nth-child(5) {
  width: 15%;
 }

Finally I published and got:

Live from TSS-JS – jQuery with Bear

Posted on by
1

Below is a hightlight of a presentation by Bear Bibeault, who gave a break out talk at TheServerSide Symposium entitled “How jQuery Made Bob a Happy Man”.  Bear is well-known author of many jQuery books as well as a moderator on the CodeRanch.

1.  Overview of jQuery
The invention of Ajax has blurred the line between server and client development by providing users a more rich user experience.  jQuery is one of those emerging direct Ajax frameworks.  Bear claims you don’t need to be a JavaScript expert to use jQuery, although you to have some background in jQuery.  Also, there are many plugins that provides a large range of overall functionality.

2.  Do More With Less
jQuery simplifies JavaScript by providing the browser-dependent wrapped in very simple calls.  One line of jQuery often represents dozens of hundreds of lines of JavaScript.  Unlike Prototype, it only uses one namespace $() to simplify coding.  Excellent for finding elements using selectors, whereas in pure JavaScript this would syntactically difficult.

  • Basic Selectors.  The most commons selector can match by ID or component CSS type such as $(‘div’) and $(‘myApplication’)
  • Positional Selectors.  Filtered selection based upon DOM relationships such as $(‘div:first-child’) as defined by CSS3.
  • Custom Selectors.  jQuery-defined filters that inputs things CSS missed.  Example:  $(‘:text:disabled’) [selects all text input elements that are disabled].

jQuery also has a very diverse library for event, click, and click handlers.  Hard to imagine how we ever lived without them.

3.  Plays well with others
jQuery has supported means to give up $() namespace for other tools to use that namespace.  In this manner, jQuery and Prototype can be intermixed.

4.  DOM Manipulation
Variety of DOM manipulation elements such as move/copy, add/remove, style manipulation, position manipulation (helpful for animations), etc.  Variety of integration tools such as GET/POST/PUT/DELETE, etc for server Ajax-based calls.  Includes tools to automatically parse JSON, XML, HTML and can even execute retrieved JavaScript code.

5.  Chaining jQuery
Common jQuery interactions allow you to chain elements such as $(‘myClass’).css(‘color’,’red’).show().appentTo(‘…’).  A little strange to get used but very powerful.  There are some functions that do return values and cannot be chained as this.

6.  document-ready handler
jQuery offers a document-ready handler that fires immediately after the page has downloaded but before the page has fully displayed.  Allows you manipulate items before they have been drawn.

7.  jQuery with JavaScript turned off
One of the design goals of jQuery is to create pages that ‘degrade gracefully’ if the user has turned JavaScript has been turned off.  For example, updating the form action to match a form submit click handler in the event the form is submitted without the Ajax handler being invoked.  Some government groups require pages to work with JavaScript disabled.

8.  More with Plugins
Large variety of plugins available for jQuery that follow similar patterns/structure as the core jQuery API.  Most popular ones are jQuery UI for complex UI widgets, and jQuery Forms for advanced form handling.  There’s also validation plugin to help simplify creating complex form validation logic.  jQuery Templates can be used to create versatile client-side templating.  Finally, there’s LiveQuery for notifications and updates about elements being created and destroyed.

Conclusion
Bear reiterates the point “Do more with less and in less time” and in that jQuery is successful.