Develop Reference

Target CSS and JS to specific tables

I have three tables on a page, there are some responsive features I want applied to 2 of the 3 tables- the 3rd is just a basic 2 column table. The problem I am having is that the css + js is also applying globally to all tables including the third table which I more or less just need as basic without any js bells and whistles.
I have tried applying a class to the table and looking over the script but was unable to fix the issue.
https://codepen.io/GideonB/pen/rgWgPm I recreated the issue in this pen so that you can see as its a bit extensive. Basically the third smaller table has two columns but once the screen size is reduced below 1024px it reduces to one column (inheriting the styling I want applied only to the two larger tables) while hiding the other. Below is the script I am using.
$('ul').on('click', 'li', function() {
var pos = $(this).index() + 2;
$('tr').find('td:not(:eq(0))').hide();
$('td:nth-child(' + pos + ')').css('display', 'table-cell');
$('tr').find('th:not(:eq(0))').hide();
$('li').removeClass('active');
$(this).addClass('active');
});
// Initialize
var mediaQuery = window.matchMedia('(min-width: 640px)');
// Add Event Listener
mediaQuery.addListener(selectElement);
// Function Event Listener
function selectElement(mediaQuery) {
if (mediaQuery.matches) {
$('.sep').attr('colspan', 5);
} else {
$('.sep').attr('colspan', 2);
}
}
// On Load
selectElement(mediaQuery);
Any and all help and suggestions would be greatly appreciated. Basically I just can't seem to figure out how to target the two tables specifically and leave the third alone. Any changes I make to the two upper tables effects the smaller one.

Try adding this to your css outside of your media query, worked for me see code pen below:
table.si-cov-tb td{
display: table-cell;
}
codepen

ExtJS paging toolbar malformed

Using ExtJS 4.2.1 I added a paging toolbar to a grid panel. Everything works fine except that the toolbar is rendered malformed. The page input field is far to small and has some weird frames around it. With a little luck I can type something into the field but I can't read anything. I see this with both default theme, neptune and gray theme and it is the same for Chrome and Firefox:
I used the default themes. Any idea about this?
In case this is a theme or CSS related problem (is it?) here is what I am including currently (trying neptune theme):
<link rel='stylesheet' id='extjsstyle-css' href='http://127.0.0.1/wordpress/wp-includes/js/extjs/resources/css/ext-all-neptune-debug.css?ver=3.8.1' type='text/css' media='all' />
<script type='text/javascript' src='http://127.0.0.1/wordpress/wp-includes/js/extjs/ext-dev.js'></script>
When adding the following include as proposed in another thread it gets a little better (frames little more centric) but still no number visible and toolbar still much to high:
<script type='text/javascript' src='http://127.0.0.1/wordpress/wp-includes/js/extjs/ext-theme-neptune.js'></script>
This is the code that fails for me:
var dummyStore = Ext.create('Ext.data.Store', {
storeId: 'DummyStore',
pageSize: 1,
fields: [ 'Data' ],
data: [ { Data: 0 } ]
});
var pagingToolbar = Ext.create('Ext.toolbar.Paging', {
store: dummyStore,
dock: 'bottom',
displayInfo: true
});
var panel = Ext.create('Ext.grid.Panel', {
title: 'Test',
store: dummyStore,
columns: [ { text: 'Data', dataIndex: 'Data', flex: 1 } ],
height: 550,
width: 620,
renderTo: 'myHtmlDiv',
dockedItems: [ pagingToolbar ]
});
However I don't think this problem is data store related.
I did not do any stylings on my own.
UPDATE: If I copy the essential code and the includes into a blank HTML file, everything is displayed properly. Obviously this is a problem that arises due to something that Wordpress adds to the page. In the moment I have no clue how to tackle such a problem.

Using Chrome developer tools I compared the HTML representations of the input field table of my broken toolbar and the Sencha example. There are differences. The broken input field sub tree has:
"numberfield-1014" -> "top: 13px" instead of 1px
"numberfield-1014-bodyEl" -> additional class "x-form-trigger-wrap-focus"
"numberfield-1014-inputEl" -> additional classes "x-form-focus x-field-form-focus x-field-default-form-focus"
Thinking more about this.... CSSs could accidentally change the formatting of the input field (based on element classes and a lot of other element features). But how does it come that the classes of the wellformed and malformed elements are different? CSSs do not change class attributes, do they? Where could this difference come from?
I also checked the CSS rules. I could identify one rule in the wordpress twentyfourteen theme that makes the outer frame visible:
table,
th,
td {
border: 1px solid rgba(0, 0, 0, 0.1);
}
This is part of the reset section of the theme. When disabling it, the frame disappears.
Another rule is this one:
.entry-content td,
.comment-content td {
padding: 8px;
}
It prevents the input field from showing correctly. After disabling this only the vertical positions of all items in the bar must be fixed to make the bar look correctly.
Any idea what the root cause of these effects is?

I did not find a satisfying solution. Also the manufacturer of ExtJS (Sencha) could not give me a solution. It seems currently the only way to safely embed ExtJS content without CSS collisions is to use an iframe. I read about similar problems using other JS frameworks too so I suppose this generally is a problem.

fancybox 2 with div

I thought I had trouble using fancybox 2 with nivo slider wrapped by a div, but after some tests, I found that i have trouble using facybox 2 with div. So I will reorganize my question.
To make it clearer, I will post my codes in the following:
For css:
<style>
#content{
background: red;
}
#maximize{ width: 24px; height: 24px; }
</style>
For html:
max
<div id="content"> </div>
For JS:
$('#maximize').click(function() {
$('#maximize').fancybox({
'href' : '#content'
});
});
It works as expected if I clicked the max button. However, if I closed the fancybox, the popup box is gone, and the original div with id = "content" disappear as well. this is not expected. I want the content become what it was, but not disappeared.
Other question: How can I change the size of the fancy box popped up? I want to make the fancy box larger.
I hope my question is clear enough. Thanks in advance.

You don't actually need :
$('#maximize').click(function() {
$('#maximize').fancybox({
'href' : '#content'
});
});
... but only this :
$('#maximize').fancybox({
// API options here
});
... since .fancybox() already binds the click event to the selector #maximize, otherwise is redundant .... so does the 'href' : '#content' option since the href is already taken from the href attribute in the link.
On the other hand, fancybox will always hide the opened inline content since it would be its expected state (isn't it redundant to show in fancybox something that is already visible?) ... anyway, you could make it visible again using the callback afterClose like :
$('#maximize').fancybox({
afterClose: function() {
$("#content").show();
}
});
Regarding the second question, use the width and height options along with fitToView and autoSize to set your preferred box dimensions like :
$('#maximize').fancybox({
fitToView: false, // avoid the adjusting size to viewport
autoSize: false, // avoid set size based on content
width: 420, // or whatever
height: 320,
afterClose: function() {
$("#content").show();
}
});​
See working DEMO

Flot graph does not render when parent container is hidden

I was having an issue where a flot graph would not render in a tabbed interface because the placeholder divs were children of divs with 'display: none'. The axes would be displayed, but no graph content.
I wrote the javascript function below as a wrapper for the plot function in order to solve this issue. It might be useful for others doing something similar.
function safePlot(placeholderDiv, data, options){
// Move the graph place holder to the hidden loader
// div to render
var parentContainer = placeholderDiv.parent();
$('#graphLoaderDiv').append(placeholderDiv);
// Render the graph
$.plot(placeholderDiv, data, options);
// Move the graph back to it's original parent
// container
parentContainer.append(placeholderDiv);
}
Here is the CSS for the graph loader div which can be placed
anywhere on the page.
#graphLoaderDiv{
visibility: hidden;
position: absolute;
top: 0px;
left: 0px;
width: 500px;
height: 150px;
}

Perhaps this is better solution. It can be used as a drop in replacement for $.plot():
var fplot = function(e,data,options){
var jqParent, jqHidden;
if (e.offsetWidth <=0 || e.offetHeight <=0){
// lets attempt to compensate for an ancestor with display:none
jqParent = $(e).parent();
jqHidden = $("<div style='visibility:hidden'></div>");
$('body').append(jqHidden);
jqHidden.append(e);
}
var plot=$.plot(e,data,options);
// if we moved it above, lets put it back
if (jqParent){
jqParent.append(e);
jqHidden.remove();
}
return plot;
};
Then just take your call to $.plot() and change it to fplot()

The only thing that works without any CSS trick is to load the plot 1 second after like this:
$('#myTab a[href="#tabname"]').on("click", function() {
setTimeout(function() {
$.plot($(divChartArea), data, options);
}, 1000);
});
or for older jquery
$('#myTab a[href="#tabname"]').click (function() {
setTimeout(function() {
$.plot($(divChartArea), data, options);
}, 1000);
});
The above example is applied to Bootstrap tags for Click funtion. But should work for any hidden div or object.
Working example: http://topg.org/server-desteria-factions-levels-classes-tokens-id388539
Just click the "Players" tab and you'll see the above example in action.

This one is a FAQ:
Your #graphLoaderDiv must have a width and height, and unfortunately, invisible divs do not have them. Instead, make it visible, but set its left to -10000px. Then once you are ready to show it, just set it's left to 0px (or whatever).

OK, I understand better now what you're actually saying... I still think your answer is too complicated though. I just tried this out using a tabbed interface where the graph is in a hidden tab when it's loaded. It seems to work fine for me.
http://jsfiddle.net/ryleyb/dB8UZ/
I didn't have the visibility:hidden bit in there, but it didn't seem necessary...
You could also have visibility:hidden set and then change the tabs code to something like this:
$('#tabs').tabs({
show: function(e,ui){
if (ui.index != 2) { return; }
$('#graphLoaderDiv').css('visibility','visible');
}
});
But given the information provided, none of that seems particularly necessary.

I know this is a bit old but you can also try using the Resize plugin for Flot.
http://benalman.com/projects/jquery-resize-plugin/
It is not perfect because you'll sometimes get a flash of the non-sized graph which may be shrunk. Also some formatting and positioning may be off depending on the type of graph that you are using.

JQuery Progress Bar Inline Text

I am trying to use the basic progress bar however I am unable to figure out the css/command to actually put some text inside the bar. I am using this progress bar: http://docs.jquery.com/UI/Progressbar however I am open to other ones if they are just as simple to implement.
I want it to display in the left corner some static information and then a percentage of complete somewhere in the right section. All css I attempted to do just made the information display below or to the side of. As well I am unsure how to actually have this CSS change based on a JQuery method (new to JQuery).
below is my actual JQuery. Don't try to understand the url value just assume it returns 0-100.
<script type="text/javascript">
var url = "%%$protocol_url%%/bin/task_status?id=%%$tid%%&cmd=percent_done";
$(function() {
var progress = 0;
//alert("some value" + value, value);
$("#progressbar").progressbar({ progress: 0 });
setTimeout(updateProgress, 500);
});
function updateProgress() {
var progress;
$.get(url, function(data) {
// data contains whatever that page returns
if (data < 100) {
$("#progressbar")
.progressbar("option", "value", data);
setTimeout(updateProgress, 500);
} else {
$("#progressbar")
.progressbar("option", "value", 100);
}
});
}
Thanks

I'm not familiar with the plugin, but with CSS you can just position the div with lettering over the progress bar. I'm not sure if it would work with nested divs,since the inner div may get erased when the content for the progress bar is rendered.
You can play around with the top and left positions to position the text exactly where you want. In face you can dynamically change left, so that the text moves with the bar, though this may be a little trickier.
Z-index should not be a problem, but if you want to change the order of the divs, you might have to make sure that the text has a greater z-index than the bar.
The CSS:
#bardivs {
width:400px; /* or whatever the of the porgress bar is */
/*
The position of #bardivs must be something other than
static (the default) so that its children will be positioned
relative to it.
*/
position:relative;
}
#progresstext {
position:absolute;
top:0;
left:0;
}
The HTML:
<div id="bardivs">
<div id="progressbar"></div>
<div id="progresstext"></div>
</div>
The JS:
$("#progressbar").progressbar("option", "value", data);
$("#progresstext").html("<p>Hard code or string here<p>");

I've improved upon an already developed progressbar concept that is simply jquery and CSS based (but not using jquery-ui).
If you like you can look at the following link for having its details:
http://progressbar-simple.blogspot.com/
Hope that helps.