We Keep Coding

Use jQuery to hide an empty table

We are using jQuery and Javascript to build a CV/resume from data. To help with the page breaks with these tables we are utilizing a jQuery plugin called Columnizer. It works pretty well, but we still have the occasional header that doesn't render properly at the end of a page.
Rather than try to fix the plugin, we really just need to hide the "empty" table which is really just a couple of header rows. It's proving difficult. Either I am not detecting the rows that need to be removed or the order of operations is off. It seems to me that it would be easiest to remove these rows as the very last operation. That doesn't seem to be happening though.
Here is the script we trying. It's at the very bottom of the HTML page.
<script>
$(document).load(function () {
var x = document.getElementsByTagName("table");
//alert(x.length);
//alert(x[0]);
for (var i = 0; i < x.length; i++) {
alert(x[i].innerHTML);
try {
var childBody = x[i].getElementsByTagName("tbody");
//alert(childBody[0].innerHTML);
var childRows = childBody[0].getElementsByTagName("tr");
} catch (e) {
//alert("no child rows");
x[i].className = "hidden";
//$(x[i]).removeClass().addClass("hidden");
}
}
});
</script>
I appreciate your help. If you need more info, please let me know. I am a novice at this!

This can be solved with :not(:has(*)) and .closest:
$('tbody:not(:has(*))').closest('table').hide();
DEMO

animating one image tag with changing src attribute using jQuery

I have an application in which the one division contains a image that need to change in every three second. But the problem is that I also need to add some animations to that changing event. I have tried few things but those are not looking very pleasing. Is there any way I can use animate() on this? My code which just changes the images is as follows:
var arrayOfImages //asssume that this array have 10 images
var i = 0;
setInterval(function(){
$('.imageBox').attr('src', arrayImg[i]);
i++;
if(i == 10) i=0;
}, 3000);
Other then this I have tried fadeIn and fadeOut too, but this is also looking very naive.
var i = 0;
setInterval(function(){
$('.imageBox').fadeOut(500, function() {
$('.imageBox').attr("src",arrayImg[++i]);
$('.imageBox').fadeIn(500);
});
if(i == 10) i=0;
}, 3000);
Please any help on this is appreciable. Thank you in advance
this is link for fiddle http://jsfiddle.net/apf5X/8/

Have you tried jQuery Cycle 2?
It's a really powerful plugin with lots of animations. Not only for images but for any html tag!

It would probably be be easier to use a library.
Here are some suggestions to get you started:
http://flexslider.woothemes.com/
http://dimsemenov.com/plugins/royal-slider/
There are many more to choose from. A good keyword to search for would be javascript image slider or jquery image slider.

CSS Inliner in Javascript (premailer)

I use CKEDITOR 4 and I want to filter a HTML content to insert the style directly in the HTML Elements like MailChimp with its CSS inliner (http://beaker.mailchimp.com/inline-css). But I have to do in Javascript must, someone an idea?
I can use jQuery and PrototypeJs.
I can't use an external API.
My test jsFiddle with CKEditor (on paste) : http://jsfiddle.net/EpokK/utW8K/7/
In :
<style>
.test {
outline: 1px solid red;
}
</style>
<div class="test">Hello</div>
Out :
<div style="outline: 1px solid red;">Hello</div>
I find this solution : http://tikku.com/scripts/websites/tikku/css_inline_transformer_simplified.js
but this trick opens a tab and it is blocked by default in Firefox ...
API solution : http://premailer.dialect.ca/

Edit: Cleaning up my GH account from unfinished PoCs I removed the tool mentioned below, so the link leads to a 404. There's someone else's project, though, which may interest you: http://styliner.slaks.net/
I created simple CSS styles inliner - styliner.
It works on Firefox and Chrome. May also work on IE9+ and Safari 6, but I haven't tested it yet. This version does not need a new window - it uses iframe (so it may not work on IE - it always needs some tricks to make iframes work :).
It lacks support for CSS specificity, so at least for now, to use it, you would have to sort rules manually. But maybe I'll find some time to add this feature soon.

I'm not sure if this will help but I found this nice little jQuery/javascript method that can be embedded into a page - http://devintorr.es/blog/2010/05/26/turn-css-rules-into-inline-style-attributes-using-jquery/
I've edited it a little to support IE and also to support a page with multiple CSS files attached applying the styles in the correct order. The if(rules[idx].selectorText.indexOf("hover") == -1) line is necessary because jQuery (as of 1.8) can't use the :hover selector anymore apparently.
$(document).ready(function ($) {
var rules;
for(var i = document.styleSheets.length - 1; i >= 0; i--){
if(document.styleSheets[i].cssRules)
rules = document.styleSheets[i].cssRules;
else if(document.styleSheets[i].rules)
rules = document.styleSheets[i].rules;
for (var idx = 0, len = rules.length; idx < len; idx++) {
if(rules[idx].selectorText.indexOf("hover") == -1) {
$(rules[idx].selectorText).each(function (i, elem) {
elem.style.cssText = rules[idx].style.cssText + elem.style.cssText;
});
}
}
$('style').remove();
$('script').remove();
$('link').remove();
}
});
The page can then be copy/pasted into the email body.

Automated DD Belated png script

I've been using http://www.dillerdesign.com/experiment/DD_belatedPNG/ for a while now and it has solved most of my IE6 png headaches.
I wonder though, whether there is a way of automating it so that I don't have litter my code with class="png" or adding the ids of html elements using background images to a JS file. - I don't care really that this would slow IE6 down - It's easier to explain to a client that the website is slow due to their browser than it is to explain why everything has a grey background!
I'm not really a JS expert but I guess grabbing the src attribute and adding the file name to the class isn't difficult. - Somehow parsing the CSS and and adding the id of the containing element sounds difficult if not impossible though??

This isn't tested but here is my jQuery solution which should work. It basically checks all img elements for a .png extension then checks all elements except img for a background image with a .png extension
You may need to add in extra code to check for CSS background property as well as background-image. With the body * selector I would imagine a lot of overhead on pages with lots of elements but I'm with you, I don't care how long it takes IE6 users to load the page if they don't care about updating their browser
$(function() {
$('img').each(function() {
if(this.src.split('.').pop() == 'png') {
DD_belatedPNG.fixPng(this)
}
});
$('body *:not(img)').each(function() {
if($(this).css('background-image').split('.').pop().replace(/("|\')\)/,'') == 'png') {
DD_belatedPNG.fixPng(this);
}
});
});
EDIT: I found this quite an interesting challenge so wrote up a pure JavaScript solution. It needs to be run when the DOM is ready though, so if you really don't want to use jQuery or another framework with a DOM ready function you'll have to use Dean Edwards' method, like so:
document.write('<script type="text/javascript" id="domready" defer="defer" src="javascript:void(0)"><\/script>');
document.getElementById("domready").onreadystatechange = function() {
if (this.readyState == "complete") {
var imgs = document.getElementsByTagName('img')
for(i=0; i < imgs.length; i++) {
if(imgs[i].src.toLowerCase().search(/\.png$/) != -1) {
DD_belatedPNG.fixPng(imgs[i]);
}
}
var children = document.body.getElementsByTagName('*');
for(i=0; i < children.length; i++) {
var bg = children[i].currentStyle.backgroundImage;
if(bg != 'none' && bg.toLowerCase().search(/\.png("|\')?\)$/) != -1) {
DD_belatedPNG.fixPng(children[i]);
}
}
}
}

Preloading img elements

I currently have a preloading image javascript script:
function MM_preloadImages() {
var d = document;
if(d.images){
if(!d.MM_p )
d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments;
for(i=0; i<a.length; i++){
if (a[i].indexOf("#")!=0){
d.MM_p[j]=new Image;
d.MM_p[j++].src= '/img' + a[i];
}
}
}
}
The problem is that i have to manually update the array when images are added deleted etc.
Is there anyway of automating this or is there a library.
Most of the image urls are element hrefs.
Obviously I could write something server side but I want to check if there is something out there already.

Here is someone who did what you are trying to do with jQuery:
http://www.filamentgroup.com/lab/update_automatically_preload_images_from_css_with_jquery/
Edit: Actually this is not quite what you are looking for as this preloads images from CSS files - I am going to leave this here in case this is still helpful.

The trouble is by the time the elements are available in the DOM for JS to inspect the images are already being loaded anyway.
AFAIK there is no way to do this (the CSS based inspection works because that's loaded before the body content), but a superior solution for the problem in general is CSS spriting.