Toxic Web » Site News

WordPress and the Twitter Bootstrap Carousel…

Toxic Web — Wed, 10 Oct 2012 12:46:05 +0000

…how to make it work.

I’ve been using Twitter Bootstrap as the starting block for a site redesign and wanted to incorporate the Carousel on the front page to cycle through last five news posts.

The problem arises with the fact that the code used for the Carousel isn’t set up to handle the dynamic output of the WordPress loop.




  
  
     1st news item here 
     2nd news item here 
     3rd news item here 
  
  
  ‹
  ›

The first item div needs the class active but with a dynamic WordPress loop that’s not immediately possible.




  
  
have_posts()) : $my_query->the_post();
  $do_not_duplicate = $post->ID; ?>

    
    
    
 
  
  

  
  ‹
  ›

Add that and nothing shows up because the Boostrap CSS file has…



.carousel .item {
  display: none;
  position: relative;
  -webkit-transition: 0.6s ease-in-out left;
  -moz-transition: 0.6s ease-in-out left;
  -o-transition: 0.6s ease-in-out left;
  transition: 0.6s ease-in-out left;
}

…so all the posts are hidden.

So a quick look round some sites found through a “WordPress Twitter Carousel” Google search finds some answers.

First up is a plugin. Now I don’t really want to use a plugin, try not to use too many, especially for things I think can be done without resorting to one.

Only other solution seems to be using two custom loops, inside the carousel-inner div. The first has the active class added to the item div and the loop $args is set for just one post 'posts_per_page' => 1. The second loop uses 'offset' => 1 $arg so that it doesn’t show the post called in the first loop and then the number of posts you want to show minus one, so in my case 4 as I wanted a total of 5 'posts_per_page' => 4.

It works but two loops just seems like a touch of overkill and it adds more queries on the database which I prefer to keep as low as possible.

There was other php based methods of figuring out which was the first post and adding the active class to it but another thing jumped out during the search. The Carousel wasn’t automatically cycling through the items for people.

To start it going you need to add the following bit of JavaScript after plugin…



$('.carousel').carousel({
  interval: 2000
})

…with the interval set at what ever speed you want. Which all got me thinking, the whole thing is based on using JavaScript so why not just use that very same thing, through jQuery, to add the active class to the first item.

Number of ways you can do it…



$(".carousel-inner").first().addClass('active');

$(".carousel-inner .item:first").addClass('active');

$(".carousel-inner .item:first-child").addClass('active');

$(".carousel-inner>:first-child").addClass('active');

Haven’t checked them on all different browsers, especially not the old Internet Explorers, some might not make work with them, though I’ll probably only be checking 8 and above – 6 and 7 are dead to me.

You’ll just have to add some CSS for users that have JavaScript switched off in their browsers. Assuming you use no-js class in the tag.



.no-js .carousel .item {display: block;}

Read the rest of this crap at Toxic Web →

Advanced jQuery background image slideshow…

Toxic Web — Thu, 06 Sep 2012 13:52:55 +0000

…plugin version 1.2.

Since posting about Marco Kuiper’s Advanced jQuery Background Slideshow, and the modifications I made to it it’s garnered a bit of interest and a few requests for various additions as you can see in the comments.

Well I’ve changed a couple of things since that first version, to make things a bit easier to use.

First up there’s the latest version of jQuery, 1.8.1, so it works with that – I’ve only checked it with Chrome, so other browsers may require some finessing, or dropping down a version of jQuery.

All the options have been moved from the plugin.js file to the .html file, as it really should be, with some new additions.

The images are now just the name of the image file and doesn’t include the folder path to the file, that’s part of the options imgDir. The value of this needs changed to reflect where the images are in relation to the .html file.

The plugin.js file has also been altered to reflect the image directory path option.

~~Download version 1.2 – version 1.0.1 is still available, so you can view the changes – there’s also a version 1.2 with thumbnails that was requested v1.2 thumbs.~~

The latest version is v1.3.1. It has added options for randomising, as asked about below in the comments, along with the thumbnails, which have been made better. And the whole thing has been cleaned up to come up error free when checked with JSHint and checked with the latest version of jQuery (1.9.1)

Read the rest of this crap at Toxic Web →

Call to undefined function get_header()…

Toxic Web — Fri, 31 Aug 2012 13:01:16 +0000

…WordPress.

Used to get a lot of the above/following errors in my error log files…

Fatal error: Call to undefined function get_header() in /server_path/wp-content/themes/theme_folder/index.php on line 16

General response in most of the forums and blogs I found from a Google search seemed to based round people thinking it’s because the theme’s index.php file had been put into the root folder WordPress was installed in. When you know you haven’t done that and you look at the file in question, the theme index.php, and everything is as it should be you start wondering.

Well it’s all down to something or someone accessing the themes folder. So without the core functions of WordPress to tell it what get_header() should do it’ll throw up the error.

So if it’s a bot searching places it shouldn’t – it’ll probably be grabbing the link of your style.css then going up the directory tree to get to the theme folder – it’s time to fire up the robots.txt file. Put the following in it.


User-agent: *
Disallow: /wp-content/themes/

If you don’t already have one it should be in the root folder of the domain. Change the Disallow: path if your wp-content isn’t in the root directory.

It could also be someone checking out the folder of your theme, again looking at the style.css file then lopping off that end bit and getting the error message. And that error message will be showing the full path of your files from the server, kind of information you probably don’t want someone seeing.

So it’s probably best to stick in a bit of php to stop errors being displayed. You can find more about error reporting at php.net. Placing the error_reporting(0); before the get_header() call should stop anything showing up.


error_reporting(0);
get_header();

So no more reports about something you know about and can’t do much about.

Read the rest of this crap at Toxic Web →

Advanced jQuery background image slideshow…

Toxic Web — Wed, 12 Oct 2011 14:38:48 +0000

…plugin.

I was searching around teh interweb for a piece of jQueried javascript that would rotate background images for the header of a site I’m thinking of redoing.

There’s a number out there but mainly just standard carousel type things for image viewing rather than background changing. The one I kept coming back to was Marco Kuiper’s Advanced jQuery Background Slideshow (demo).

Marco’s work put all the info for stuff like the blocks of text within the .js file, while I required a plugin style where I could have info generated in the html file passed to the script. Luckily Sylvain Papet from Com-Ocean had converted Marco’s script into such a plugin. Unfortunately it still didn’t quite meet my requirements. Couldn’t find a way for it to handle the markup spat out by a WordPress widget.

Anyway the main problem to begin with was getting the plugin to work, lot of people commentating on Marco’s original post seemed to be struggling as well. So after a bit of searching round and some actual work on my part, I think I may have cracked it.

I’ve changed a few things and added a couple. You can check out and download my version from here – this is version 1.0.1 there’s a new version (see below). There are three new options.


options = jQuery.extend({
slideshowSpeed: 6000,
method : "fade", /* slide or fade, default is fade */
fadeSpeed :2000, /* how quickly one image fades/slides into the next */
contDiv : "#header", /* id or class of div you want the images to appear in. */

Method: this is how the images change from one to the next. Default is fade as in the original or you can change it to slide so the images slide out to the left, revealing the next one.

fadeSpeed: This is the speed at which the fade or slide occurs.

contDiv: This is the id or class of the containing div you want the background images, control buttons and text boxes to be in. #header in the original can be changed to what ever you want, just remember the . for class or # for id. As I’ve kept the same css as Marco’s original a different way had to be found for the plugin to add the markup.

The images and text box options have been moved from the script to the html file. So your version of the following should be added below the plugin which is below the call for jQuery.

The images need the path to the folder they’re in from the html file.

You can view/download my version of things here – this is version 1.0.1 there’s a new version (see below) – and check them against the original files found at Marco’s site (link above).

I’ve checked it in the latest Chrome & Firefox and IE9 and it all seems to work but chances are there’ll be bugs somewhere and would be better to move some of the options out of the plugin file.

Edit: there’s a new version of the plugin available see this post.

Read the rest of this crap at Toxic Web →

And we're back…

Toxic Web — Fri, 06 May 2011 10:37:11 +0000

…in the room.

So things are back being reddish and orangey around here instead of deafultish and bland I believe was the word Flash used. Hey it’s only taken how long???

Well we’ll see how long the server stands up to version 4.5 of Toxic Web – all new and improved now with added html5 and css3. OK so the look is still very roughly the same.

A load of plugins have been given the heave-ho, lot of functionality switched to javascript, so you’re browser does the work not my server, therefore you’ll need jscript switched on if it isn’t there’s a nice warning telling you over on the right hand side. Speaking of browsers if anyone’s using an old one then tough, certain things ain’t gonna be looking right. Forget Microisoft’s campaign to rid us of Internet Explorer 6, I’ve gone one better as I really couldn’t be arsed figuring out what was wrong with IE 7.

Update now or better change *cough*Chrome*cough* or be left behind.

So it’s been tested on the the last couple of versions of Chrome (10 to 12), Safari (4 & 5), Opera (10 & 11), Firefox (3.6 & 4.0) and on IE8 and is working to my satisfaction but there may be a couple of glitches here and there but there’ll get ironed out.

First thing I have to check is how well the caching setup works with new posts and that’ll be done by this post

Read the rest of this crap at Toxic Web →

Where's all the red, orange and skulls…

Toxic Web — Tue, 22 Feb 2011 14:17:45 +0000

…gone?

Anyone stumping up here over the last couple of days – anyone? anyone? no-one? – will have been met with a nice 403 error page, for the second time this year.

I never touched it, honest guv.

Second time and again it’s due to the same thing, something within the site is taking up far too much of the server’s resources and so taking down the whole thing. So the hosts had really no option than to block access to the index page and inform me, with a few suggestions.

First time round I reckoned it was due to a backup plugin, which emailed me a gzipped backup of the database every week. Database had got so big that the file wasn’t being zipped and email but just put in a folder on the server. So back then the plugin was deactivated and deleted. A couple of other plugins went the same way, moving from php to jscript, mainly the external link icon and the last.fm latest track list.

Another of the suggestions was to use a caching plugin, namely W3 Total Cache, which I did, hosts tested it and things seemed to be fine by them. Wasn’t too sure about the caching, seemed to slow things down a lot and things weren’t right with other sections of the site, especially admin such as deleting spam comments.

So at the time I decided on an upgrade of the theme, switching more things from php to javascript, finding ways of shifting things from plugins and widgets, generally cutting down queries to the database, less use of php and everything that puts strain on the server.

Then the other night another email, same thing. Of course I was away at the time and knew nowt about it and so yesterday the site was down for quite a bit. This time round it seemed the main culprit was a mixture of the Twitter Tools plugin and W3 Total Cache both of them leading to a massive error_log file.

Now the process of upgrading everything had been put on the back-burner due to other commitments. So when faced with this again it seemed the easy option and best to get the site up and running again was a switch to the default WordPress theme and get rid of all the plugins possible. That is most of those not involved in stopping spam and securing the site, a few were kept which are necessary to the running of the place and the caching plugin was replaced with another suggested one, which so far seems to have far a far less negative impact on the site.

So that’s why we find ourselves here in default land. Everything was done in a bit of a hurry, so things might not be working perfectly but I’m on the case…

Read the rest of this crap at Toxic Web →

Updating JonRauhouse.com and solving…

Toxic Web — Thu, 16 Dec 2010 14:44:10 +0000

…problems.

A bit back I decided it was time to leap into the all new sparkling html5 and css3. Think it was a move to a browser that can handle the new markup – from the old Mozilla based Flock to Firefox, which of course is still Mozilla based but was a few versions on from the base of Flock and then onto Chrome.

So which site to go with, after a few experiments for this place I decided that Rauhouse’s site could do with a bit of spit and polish, nothing drastic design wise and would be easier. The existing markup was pretty much valid xhtml 1.1 so it was easy to replace the old

with the various new elements –

etc. Does make things easier to read and know exactly where you are. Also of course means workarounds for IE, so the shiv is added.

Now one of the first problems I came across was also present in the previous version of the site so nothing to do with the new markup or style. It was the problem of using hash links in a page when there’s a static header at the top of a page.

So the style for the header includes position:fixed; and is about 80px heigh. So when the page contains internal hash links – Track Listing – and they are clicked the page scrolls down so the block the link corresponds to –

– is visible. Unfortunately the way it works is the page scrolls down until you can see the maximum amount of the section so basically until the top of the section is as far up the window as possible and so a number of times the top of the section is at the top of the window and thus underneath the header.

Not ideal as you can’t now see the first 80px of the section.

I racked my brain for a while previously when I came up with the design and again when redoing it how to get over this. First idea is to give the section a top padding of about 80px but that leaves a whacking big space on the page if you just scroll down manually. Second could I give the section the padding but only when the corresponding hash link is clicked, could work but still a bit of an ugly workaround. Third, move the id from the section to somewhere at least 80px higher on the page, very ugly.

And then when it was really bugging me what pops up but the perfect solution in my feed reader. A fancier clean html/css method to achieve the perfect results. Using :before for the sections in the css.


  section:before {
  display: block;
  content: " ";
  margin-top: -85px;
  height: 85px;
  visibility: hidden;
  }

So thanks to Chris Coyier on css-tricks.com. At the bottom he points out there can be difficulties under certain circumstances which Nicolas Gallagher has addressed.

For my part the simple version above works for the main browsers for the site I’ve used it on – as you can see on any of the Solo Recording pages on Jon’s site – so perfect.

Read the rest of this crap at Toxic Web →

Strange qq829.com referrer…

Toxic Web — Thu, 22 Apr 2010 12:58:30 +0000

…stats.

Noticed a few days back that all of a sudden that top of this sites stats everyday seemed to from this weird address I hadn’t heard of before…

qq829.com/web_stat.asp?dn=toxic-web.co.uk

Now being the curious type I started to wonder what it was all about – Alfie – but being the suspicious type I didn’t just click it, like a number of folks seem to have done, to find out, but a quick Google and up comes a number of sites where people are asking the same questions. Where’s it from and what’s it doing.

So a quick squizz at this Google analytics forum thread, looks to have some answers. China is teh answer to the first question but is it just old fashioned referrer spam or is it something more malicious. Well it may look like it’s a good job that I didn’t click the link to check. Much talk of malware. More details on what precisely…

..it seems that this may be a new variant of trojan.adclicker, as reported by Threatexpert, which places cookies on the user’s computer then generates false hits on various websites and displays malicious adverts over the top of a website’s pages…

It is also believed that if a webmaster clicks on the link via their logs, it displays the animated graph and possibly tries to download malicious software onto their computer. Some webmasters have also reported changes to their website upon noticing this traffic such as php-injections. HubPages

…great. A quick look through the files on the site with FileZilla to see when they were modified to find any anomalies, thankfully nothing looked out of the ordinary.

So what to do about it well the IP address isn’t static so individual banning is out of the window, could of course ban the whole of China, but is that overkill some Chinese folks out there might be interested in the crap posted here – I said might be – and my .htaccess file is big enough as it is.

So in the Google thread there’s a post from AurelloSoft suggesting the fix of placing the below in the.htaccess file.


SetEnvIfNoCase Referer "^qq829" TOBLOCK=1
SetEnvIfNoCase Referer "^cnzz" TOBLOCK=1


Order Allow,Deny
Allow from all
Deny from env=TOBLOCK

I did this but the hits kept coming, until someone pointed out that it works if you put it before the WordPress code in the file and since I did that it does look to have worked. No mention in the referrers stats since.

If it doesn’t work for you AurelloSoft have another possible solution, again for the .htaccess file of…


RewriteEngine on
# Options +FollowSymlinks
RewriteCond %{HTTP_REFERER} cnzz.cn [NC,OR]
RewriteCond %{HTTP_REFERER} qq829.com [NC]
RewriteRule .* - [F]

So if you’ve got the site showing up in your stats – the toxic-web.co.uk bit will be replaced by your site domain – then don’t click it and get blocking the bastards…

Read the rest of this crap at Toxic Web →

As well as being a big image used with CSS a sprite…

Toxic Web — Thu, 11 Mar 2010 14:23:21 +0000

…is also a type of goblin.

This sprite’s not so refreshing after an all-nighter and it likes to feel the wind in it’s hair.

But less of the little green fella. Don’t know why but it’s taken me some time to actually get round to using CSS sprites for the background images here on Toxic Web, after all I think the first article I saw about them was on “A List Apart” and that is just over 6 years old. Added to that I’ve used them elsewhere, mainly for such things as menu lists with a rollover effect, but in a smaller individual basis.

In fact even on this site, with the rollover effect for the submit button on the comments form (below). Pretty much every image to do with the site’s layout is a background image so I decided to go the whole hog and create one huge image, which turned out not as workable so I ended up with two sprites.

I tried a couple of the Sprite generators but they didn’t exactly work out for me, the SpriteMe bookmarklet looked like a good one – there are more in this Smashing Magazine article – but in Firefox it produced a strange box that covered the working are making it partially unusable.

So it was down to a bit of DIY, importing the images into a big transparent background image, marking all the coordinates and making sure that there’s no overlapping when rendered on the page.

First one an image for all the borders (in the main content area), boxes (red & orange over there on the right) and all the little icons (again over there on the right next to ever list menu oh and down below and the date on the left), it came out at 150px high and 15,000px long but was only 21kb and replaced 37 individual images that in total were about 5kb more. The second image was for the navigation menu tabs at the top, one the left and at the bottom, this weighed in at 6kb replacing 16 images totally 10kb.

But it wasn’t the size of the images that I was bothered about, this day and age of broadband what difference does 9kb make? Bugger all.

It was partly just to do it and see about getting 53 images down to just 2 and thus reducing the number of HTTP-Requests by at least 50.

Using this post as a test subject (mainly because it is just text, no videos or images), Firebug shows that before the sprite there was 133 HTTP-Requests, after it was down to 78. The total download time was reduced by about 33%.

Then I looked at the site a Linux Mint live disc and of course even though it’s Firefox, it’s not the same as in Windows. Great, top nav is miles above where it should be. Hmmm positioned absolutely, obviously not measuring the same from the bottom of the containing div. Positioning it from the top gets it to work but of course the search box on the right drops down below where it should be.

And all this started when I was thinking about CSS3ing the whole site after changing back from Flock to Firefox when the latter moved to v3.6 – more on that later – and viewing a number of examples that would negate the use of images all together with nice border radii, alpha transparencies, glossy style boxes which of course won’t work in the most used browser.

Bloody interweb, can’t live with it, can’t hit it over the back of the head with a shovel and bury it under the patio…

Read the rest of this crap at Toxic Web →

Again it was worth the admission…

Toxic Web — Fri, 11 Sep 2009 13:44:39 +0000

…price*.

Neko Case was back at the Ò'ran Mór in Glasgow on Monday night with her band, nearly three years since the last visit, illness prevented me getting down to the London show earlier in the year.

They (Neko Case: vocals, tenor guitar, 7 string acoustic – Paul Rigby: guitar – Tom V. Ray: bass double & electric – Kelly Hogan: vocals – Barry Mirochnick: drums – Jon Rauhouse: pedal steel, guitar, banjo) put on another great show in the old church’s basement, from the classics, “Favorite”, “Deep Red Bells”, to tracks from her current, excellent, album “Middle Cyclone” all top notch stuff.

Actually remembered to use my camera before it was time for them to pack up all their gear, can view some dark blurry pics like that on the right either at Jon’s site or on flickr.

Also got a couple of videos from the sound check, here’s Jon and part of Paul…

click to play

…the rest of Mr. Rigby’s is again either at Jon’s site or on YouTube.

There’s still a number of dates to go on the tour in England, one in Scotland tonight and one in Amsterdam so if you want to hear some damn fine music check if there’s somewhere near you now, tickets are a very reasonably price and enjoy… can’t guarantee the same price I paid, little pass with AAA meant it was a little cheaper than usual.

Read the rest of this crap at Toxic Web →