Cheesetoast » JQuery http://www.cheesetoast.co.uk Brain Food for Web Developers Mon, 07 Jul 2014 23:18:22 +0000 en-US hourly 1 http://wordpress.org/?v=4.2.10 Keyframe Transitions for Date/Time Display http://www.cheesetoast.co.uk/keyframe-transitions-datetime-display/ http://www.cheesetoast.co.uk/keyframe-transitions-datetime-display/#comments Tue, 25 Feb 2014 22:37:26 +0000 http://www.cheesetoast.co.uk/?p=1264 Here's a little keyframe animation I was working on to display the date/time along with the current weather. Continue reading

The post Keyframe Transitions for Date/Time Display appeared first on Cheesetoast.

]]>
Here’s a little keyframe animation I was working on to display the date/time along with the current weather.

See the Pen Date/Time with Weather Animation by Graham Clark (@Cheesetoast) on CodePen.

The post Keyframe Transitions for Date/Time Display appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/keyframe-transitions-datetime-display/feed/ 0
Simple Lightweight Parallax Scrolling Background http://www.cheesetoast.co.uk/simple-lightweight-parallax-scrolling-background-effect/ http://www.cheesetoast.co.uk/simple-lightweight-parallax-scrolling-background-effect/#comments Thu, 20 Feb 2014 21:34:51 +0000 http://www.cheesetoast.co.uk/?p=1246 I recently incorporated the parallax scrolling effect into a page and I wanted to share the code for it. I've seen some pretty sophisticated jQuery plugins that offer some neat options but this is just a simple lightweight version. Continue reading

The post Simple Lightweight Parallax Scrolling Background appeared first on Cheesetoast.

]]>
I recently incorporated the parallax scrolling effect into a page and I wanted to share the code for it. I’ve seen some pretty sophisticated jQuery plugins that offer some neat options but this is just a simple lightweight version. Parallax scrolling is about making the background image move at a different rate than the foreground image to create the illusion of depth. This is achieved by using javascript to detect the user’s scroll position and dynamically change the background image position accordingly through CSS.


See the Pen Parallax Scrolling Snow by Graham Clark (Cheesetoast) on CodePen

Let’s start with some basic HTML:

<body id="parallax">
  <section>
    <!-- Content goes here -->
  </section>
</body>

CSS (can be applied to divs also):

html {
  background-image: url(background-image.jpg);
}

body {
  background-image: url(transparent-image.png);
  background-repeat: repeat-x; // Optional
}

Javascript:

<script>
var parallax = document.getElementById("parallax");
var speed = -1;

window.onscroll = function() {
  var yOffset = window.pageYOffset;
  parallax.style.backgroundPosition = "0px " + (yOffset / speed) + "px";
}
</script>

Hope you like it!

The post Simple Lightweight Parallax Scrolling Background appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/simple-lightweight-parallax-scrolling-background-effect/feed/ 0
Slide-In jQuery Effect with CSS3 http://www.cheesetoast.co.uk/slidein-jquery-effect-css3/ http://www.cheesetoast.co.uk/slidein-jquery-effect-css3/#comments Fri, 13 Dec 2013 03:23:25 +0000 http://www.cheesetoast.co.uk/?p=1212 This useful little snippet can be used for making elements slide on from the side of a page as the user scrolls down. It uses jQuery to detect the scrolling point on the page and a CSS3 transition to slide an image in from the right of the screen. Continue reading

The post Slide-In jQuery Effect with CSS3 appeared first on Cheesetoast.

]]>
This useful little snippet can be used for making elements slide on from the side of a page as the user scrolls down. It uses jQuery to detect the scrolling point on the page and a CSS3 transition to slide an image in from the right of the screen.

View the demo.

Here’s some simple HTML code that you’d paste below the fold of your page:

<p id="container-paragraph"><img id="trigger_img"src="#"></p>

Here’s the CSS to go with it:

body { width: 800px; } /* This could be any div container */
#container-paragraph { overflow: hidden; } 
/* So that the img is hidden off the side */
.trigger-img {
   position: relative;
   transition: all 1s ease-in-out;
   -moz-transition: all 1s ease-in-out; /* FF */
   -webkit-transition: all 1s ease-in-out; /* Safari & Chrome */
   -o-transition: all 1s ease-in-out; /* Opera */
   left: 1000px; /* More than the width of the body */
}

Now here’s the jQuery code:

$(function() {
   $(window).scroll(function(){
	var distanceTop = $('#container-paragraph').offset().top - windowHeight;

	if  ($(window).scrollTop() > distanceTop){
            $('.trigger_img').css("left", 0);
        }
   });
});

JQuery will slide the image onto the page when you reach the container paragraph. You can adjust the exact point by changing the variable ‘distanceTop’.

It’s tempting to use the jQuery animate function when selecting the trigger_img but typically it’s better to use CSS over jQuery when you can. When jQuery tells the browser to animation something it adds inline styling and increments the values, in this case ‘left’, from 800px to 0. CSS puts the animations in control of the browser, which means better performance.

The post Slide-In jQuery Effect with CSS3 appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/slidein-jquery-effect-css3/feed/ 0
Add a Responsive Slideshow to your WordPress Theme http://www.cheesetoast.co.uk/add-responsive-slideshow-wordpress-theme/ http://www.cheesetoast.co.uk/add-responsive-slideshow-wordpress-theme/#comments Tue, 16 Oct 2012 18:50:03 +0000 http://www.cheesetoast.co.uk/?p=879 Add a responsive slideshow to the front end of your Wordpress theme and to the admin area, so users can add their own slides. Continue reading

The post Add a Responsive Slideshow to your WordPress Theme appeared first on Cheesetoast.

]]>
I’ll walk through how you can add a JQuery responsive slideshow to both the front end of your WordPress theme and to the admin area, so users can add their own slides.

An instance of the slideshow as viewed from a tablet.

The Slideshow Files

In searching for a slideshow I wanted to find one that not only looked great but met the following criteria:

  • I wanted it to be open source.
  • It had to be responsive so that it worked well with mobile devices.
  • I wanted to be able to add HTML text which overlaid the images (and remained responsive).
  • It needed to come with options so that I could customize the timing and effects.

Finding a slideshow the delivered on all of these counts took me a while but I eventually found what I was looking for with the excellent responsive slideshow from Codrops. Codrops not only provides the necessary download files but includes a step by step walk through for all the HTML markup, CSS and javascript code.

Include the Files in Your Theme Header

Download the slideshow files and add them to your WordPress theme folder. If you want to create a child theme but aren’t sure how, take a look at the WordPress codex section on child themes.

Now that you have the slideshow files in your folder you need to include them into your theme. There are a couple of ways to do this. One way is to manually add the <script src=”…”></script> code to your header file, but the recommended way to is use the WordPress functions wp_enqueue_script() & wp_enqueue_style().

For directions on how to do this read my previous post on how to safely include scripts in the WordPress header. Make sure to include all the necessary javascript and CSS files that come with the slideshow.

Adding Slides to the WordPress Admin Panel

To make it easy for users to add their own slides we’ll create a new post type in WordPress. To do this we use the register_post_type() function in our functions.php file (located in [Wordpress root] > wp-content > themes > [current theme] > functions.php).

Add the following code:

// Creates Slides post type
register_post_type('slides', array(
'label' => 'Slides',
'public' => true,
'show_ui' => true,
'capability_type' => 'post',
'hierarchical' => false,
'rewrite' => array('slug' => 'slides'),
'query_var' => true,
'supports' => array(
'title',
'editor',
'excerpt',
'revisions',
'thumbnail',
'author',
'page-attributes',)
) );

A new 'Slides' menu has been added to the WordPress admin panelOnce created, this new post type will show up in the admin menu and will act separately from regular posts (they won’t appear in your blog or your RSS feed, etc.).

Now you can make your own slides in the same way you’d create a new post. The image for your slides comes from assigning a ‘featured image’ to each post. The title and content will make up the overlaid text on each slide.

The next step is to create a page template that combines the slideshow files and the newly created slide posts to display them on your site.

Creating a Page Template

Open up a new file in your editor and paste in the following code:

<?php
/*
Template Name: Slideshow
*/
get_header();
<div id="ei-slider" class="ei-slider">
<ul class="ei-slider-large">
<?php
//This is for our custom Slides menu
$args = array( 'post_type' => 'slides', 'orderby' => 'menu_order');
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post();
?>
   <li>
      <?php the_post_thumbnail('full');?>
      <div class="ei-title">
         <h2><?php the_title(); ?></h2>
         <?php the_excerpt(); ?>
      </div>
   </li>
<?php
endwhile;
?>
</ul>
<ul class="ei-slider-thumbs">
   <li class="ei-slider-element">Current</li>
      <?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
   <li><a href="#"><?php the_title(); ?></a></li>
<?php endwhile; ?>
</ul>
</div><!-- ei-slider -->

/* Include any code you want in your page */

<?php the_sidebar(); ?>
<?php the_footer(); ?>

In that snippet I’ve taken the Codrops slideshow markup and modified it to generate the slides dynamically using the WordPress loop. I also used the new post type (slides) for the WP_Query.

The slideshow template is now available from the page attributes panel.Save the file as template-slideshow.php and keep it in your theme folder. You’ll now be able to select the template for any of your pages.

Side Note: because we’re displaying the content of the post on our slideshow we don’t want it to be so long that it’ll run off the bottom of the slide. That’s why, to limit the length of the output, I used the_excerpt() function instead of the_content(). This will trim the content if it gets too long. You can also read how to limit the word length of the excerpt further if you need to.

Not so fast. Updating the Slideshow Files

We’re almost there but there’s one catch with using WordPress to display the slides. The slideshow is configured to display it’s text as h2 and h3 elements. When we display the content of our post, however, we use the_excerpt() function which displays the basic content as paragraphs. To make sure these paragraphs are displayed properly in the slideshow we need to open up one of the javascript files and tinker a little.

Go into your the folder containing the slideshow files and open /js/jquery.eislideshow.js
Look  for this block of code:

// titles animation
$nextSlide.find('div.ei-title > h2')
.css( 'margin-right', 50 + 'px' )
.stop()
.delay( this.options.speed * this.options.titlesFactor )
.animate({ marginRight : 0 + 'px', opacity : 1 }, this.options.titlespeed, this.options.titleeasing )
.end()
.find('div.ei-title > h3')
.css( 'margin-right', -50 + 'px' )
.stop()
.delay( this.options.speed * this.options.titlesFactor )
.animate({ marginRight : 0 + 'px', opacity : 1 }, this.options.titlespeed, this.options.titleeasing )

Add the following after the last line of that block of code:

.find('div.ei-title > p')
.css( 'margin-left', -50 + 'px' )
.stop()
.delay( this.options.speed * this.options.titlesFactor )
.animate({ marginLeft : 0 + 'px', opacity : 1 }, this.options.titlespeed, this.options.titleeasing )

This will ensure that paragraphs are displayed properly on the slides.

Give it a Try

Now that all the code is together go ahead and try it out. Make sure you assign the template to one of your pages then add a slide post with a featured image.

You can also edit the file [slideshow folder]/css/style.css to play around with the styling of the slides. Have fun!

The post Add a Responsive Slideshow to your WordPress Theme appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/add-responsive-slideshow-wordpress-theme/feed/ 0
Automatically Generate a Table of Contents with JQuery http://www.cheesetoast.co.uk/automatically-generate-table-of-contents-jquery/ http://www.cheesetoast.co.uk/automatically-generate-table-of-contents-jquery/#comments Sat, 03 Jul 2010 22:57:39 +0000 http://www.cheesetoast.co.uk/cheesepress/?p=30 I'm going to walk through a little JQuery script that automatically generates a table of contents at the top of the page. This is useful when you have content arranged under several sub-headers (a typical Wikipedia page is a good example) and want to have quick links to each section. Continue reading

The post Automatically Generate a Table of Contents with JQuery appeared first on Cheesetoast.

]]>
I’m going to walk through a short JQuery script that automatically generates a table of contents at the top of the page. This is useful when you have content arranged under several sub-headers (a typical Wikipedia page is a good example) and want to have quick links to each section.

This script will use JQuery to search through the a page for H2 tags and add an anchor to each one so that the table of contents can jump to it. Then it adds the table of contents in the form of a list at the top of the page, after the main header.

First of all we’re going to set up some variables:

$(“document”).ready(function(){

var header_type = “h2″;
var number_of_headers = 2;
var counter = 0;
var table_of_contents = $(“<ul id=’table_of_contents’>”);

// This is the HTML code that will eventually become our table of contents.

You can change these variables to suit your needs. For example you could change the header type to H3. The number_of_headers variable is the minimum number of headers allowed on the page before the table of contents if generated (after all, you probably don’t want a table of contents when there are only one or two sections).

Next comes the ‘if’ statement:

if($(header_type).size() > number_of_headers) {

This uses the size() function which basically counts to see if there are more than 2 (or whatever you set as ‘number_of_headers’) of the header tags on the page, since a table of contents is not necessary when there’s only one or two headers. One issue with this is that you might have a webpage shell that contains other H2 tags, as menu headers for example. To get around this you could perhaps use a header tag that is isn’t in use OR you could give your H2 tags a class and use that to narrow down the search.

Then we want to use JQuery to select all the H2 tags and iterate through them, like so:

$(header_type).each(function() {

Once these are selected, we perform the following:

$(this).html(“<a name=’bookmark” + counter + “‘></a>” + $(this).html());

table_of_contents.append($(“<li><a href=’#bookmark” + counter++ + “‘> ”
+ $(this).text() + “</a></li>”));

} );    //  Close the bracket for the current function.

First of all we take the HTML code for the H2 tag and place an anchor before it. This anchor marks the spot that the user is taken to when they click on the table of contents. The ‘counter’ variable is used to give the anchor name a unique ID.

The second line appends the HTML code stored in the ‘table_of_contents’ variable (the unordered list code) by adding some list items to it. Inside these list items we place a link to the anchors we just placed in the previous line of code. We also increment the counter so that the next ID is unique. Then we just use the text of the header as the text for the link and close our tags (you don’t need to worry about closing the <ul> tag, since JQuery takes care of this for you).

The final step is to add the ‘table_of_contents’ code we’ve just assembled to the page. For this example we are assuming that we want the table of contents page to come right after the main heading. We can use a selector to place the code after the first H1 tag on the page. Alternatively, you could instead create a div on the page with a ID and tell the JQuery to plonk the code right inside that instead.

$(“h1:first”).after(table_of_contents);

Here is the code all together:

$(“document”).ready(function(){

var header_type = “h2″;
var number_of_headers = 2;
var counter = 0;
var table_of_contents = $(“<ul id=’table_of_contents’>”);

if($(header_type).size() > number_of_headers) {

$(header_type).each(function(){

$(this).html(“<a name=’bookmark” + counter + “‘></a>” + $(this).html());

table_of_contents.append($(“<li><a href=’#bookmark” + counter++ + “‘> ”
+ $(this).text() + “</a></li>”));

});

$(“h1:first”).after(table_of_contents);

}
})

If you have any ideas about how to improve this little script or even just points that you’d like to make about it, please leave a comment.

Update [23rd March, 2012]: I found a great JQuery plugin for table of contents simply called TOC. It’s easy to setup and customize. It also comes with nice smooth scrolling.

The post Automatically Generate a Table of Contents with JQuery appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/automatically-generate-table-of-contents-jquery/feed/ 0
JQuery Tablesorter http://www.cheesetoast.co.uk/jquery-tablesorter/ http://www.cheesetoast.co.uk/jquery-tablesorter/#comments Fri, 02 Jul 2010 22:55:10 +0000 http://www.cheesetoast.co.uk/cheesepress/?p=27 Want to improve the functionality of your HTML tables? Tablesorter is "a JQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes". It is also cross browser friendly, working on IE6+. Continue reading

The post JQuery Tablesorter appeared first on Cheesetoast.

]]>

Want to improve the functionality of your HTML tables? Tablesorter is “a JQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes”. It is also cross browser friendly, working on IE6+.

To set it up you’ll need to download and include the tablesorter js file (along with a link to the JQuery library). Then simply give your table an id tag like so: <table id=”my_table”> and remember to include both THEAD and TBODY tags. Finally, add the javascipt in your page head:

$(document).ready(function(){

$(‘#my_table’).tablesorter();

}

To download tablesorter and to read the documentation on it, visit the tablesorter website.

 

The post JQuery Tablesorter appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/jquery-tablesorter/feed/ 0
Add Icon for External Links with JQuery http://www.cheesetoast.co.uk/add-icon-for-external-links/ http://www.cheesetoast.co.uk/add-icon-for-external-links/#comments Thu, 01 Jul 2010 22:52:25 +0000 http://www.cheesetoast.co.uk/cheesepress/?p=24 This is a very basic JQuery tip that demonstrates how you can add an icon () to external anchor links. A similar approach is also useful is you want to add filetype icons to your links, such as pdf's or txt files. Continue reading

The post Add Icon for External Links with JQuery appeared first on Cheesetoast.

]]>

This is a very basic JQuery tip that demonstrates how you can add an icon (external link icon) to external anchor links. A similar approach is also useful is you want to add filetype icons to your links, such as pdf’s or txt files.

First of all, there are several ways this can be done. You could use CSS to create a class,

.external_link {
background: url(/images/external.png) center right no-repeat; padding-right: 10px; }

and manually add the class to each external link on your site. Of course this is something you can easily forget to do and is not very practical when you have content being generated dynamically. To get around this you might replace the class with a css selector that checks to see if each link starts with a ‘http://’, like so:

a[href^=”http://”] { … }

The problem there is that IE6 (oh joy) does not support this selector. Another issue crops up when you use absolute links to your own pages instead of relative ones (i.e. you use “http://www.yoursite.com/images/picture.jpg” instead of just “/images/picture.jpg”), in which case the absolute link would appear to be an external one.

Another way of doing this is to use JQuery to select all the links that point away from your site and automatically add the icon. You could potentially combine the two methods so that browsers with javascript disabled still get the benefit of the CSS method.

Here is the code for that:

$(document).ready(function() {
$(‘a’).filter(function() {
return this.hostname && location.hostname !== this.hostname;
}).addClass(‘external_link’);
});

The first line checks that the page is ready. The second line selects all anchors and applies the following filter to them. The filter checks that the location of the link does not match the current site AND checks that internal links such as ‘mailto’ are not included. If these conditions are met then it will add the CSS class mentioned previously.

 

The post Add Icon for External Links with JQuery appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/add-icon-for-external-links/feed/ 0