Bright Cherry » jQuery Scripts & Helpful Snippets http://www.brightcherry.co.uk/scribbles Tue, 20 Dec 2011 19:54:41 +0000 en hourly 1 http://wordpress.org/?v= How To Display Latest Tweet On Website http://www.brightcherry.co.uk/scribbles/how-to-display-latest-tweet-on-website/ http://www.brightcherry.co.uk/scribbles/how-to-display-latest-tweet-on-website/#comments Wed, 30 Nov 2011 12:50:29 +0000 adm1n http://www.brightcherry.co.uk/scribbles/?p=447 Here’s a really quick and simple way to display your latest Tweet on your website like the example below (the graphics obviously won’t appear, just the Tweet):

Latest Tweet

1
2
3
4
5
6
7
8
9
10
11

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function ()
{
 $.getJSON("http://twitter.com/statuses/user_timeline/USERNAME.json?callback=?", function(data) {
  $(".show_tweet").html(data[0].text);
 });
});
</script>
 
<div class="show_tweet"></div>

Simply replace USERNAME with your unique Twitter username. The show_tweet class is where the Tweet will display.

The “follow us” link won’t appear by default, I hard-coded that into the show_tweet div :)

It’s as easy as that.

]]> http://www.brightcherry.co.uk/scribbles/how-to-display-latest-tweet-on-website/feed/ 1 jQuery- Show The Height And Width Of The Browser Viewport in Real-Time http://www.brightcherry.co.uk/scribbles/jquery-show-the-height-and-width-of-the-browser-viewport-in-real-time/ http://www.brightcherry.co.uk/scribbles/jquery-show-the-height-and-width-of-the-browser-viewport-in-real-time/#comments Thu, 28 Jul 2011 20:23:45 +0000 adm1n http://www.brightcherry.co.uk/scribbles/?p=402 Strange. I looked around everywhere for this code, and couldn’t find it anymore online. I simply wanted jQuery code that would show the height and width of the browser viewport in “real-time” I found plenty of code samples that would show the viewport size on page load/refresh, but nothing that would update live, as I was reducing/expanding the browser size. So I decided to write my own code, and it turned it to be a lot easier than anticipated.

Demo

Simply change the size of your browser and the values (height and width) below should automatically update.

Width in pixels:

Height in pixels:

Code

All you need to do is copy/paste the code and it should work.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function ()
{
 $(window).resize(function()
 {
  var show_width = $(window).width();
  document.getElementById("output_width").value=show_width.toString();
 
  var show_height = $(window).height();
  document.getElementById("output_height").value=show_height.toString();
 });
});
</script>
 
 
<h3>Width:</h3>
<input type="input" id="output_width" value="" name="width" />
 
<h3>Height:</h3>
<input type="input" id="output_height" value="" name="height" />

So, what do you think? Does it work?

Does anyone know of a more efficient way of getting this result? If so, please let me know.


]]> http://www.brightcherry.co.uk/scribbles/jquery-show-the-height-and-width-of-the-browser-viewport-in-real-time/feed/ 2 Simple JQuery / PHP Image Gallery http://www.brightcherry.co.uk/scribbles/simple-jquery-php-image-gallery/ http://www.brightcherry.co.uk/scribbles/simple-jquery-php-image-gallery/#comments Sun, 27 Mar 2011 13:52:36 +0000 adm1n http://www.brightcherry.co.uk/scribbles/?p=342 I previously wrote a Simple, Pure CSS Image Gallery. But times have changed since then, and now everyone seems to be keen on AJAX technologies. So I’ve written a nice and easy Image Gallery script that uses JQuery (and a small bit of PHP).

The problem with the CSS image gallery is that different browsers behave differently when displaying the images. Of course, you don’t get that same problem with AJAX.

Demo of the Simple JQuery / PHP Gallery

JQuery / PHP Image Gallery Code

The gallery relies on 3 separate files (one of which includes the JQuery library). The code is pretty clean and simple.

This is the JQuery code (located in index.php):

1
2
3
4
5
6
7
8
9

	<script type="text/javascript">
	$("document").ready(function() {
		$("ul.jqgal_thumbnails li").click(function () {
			$("#jqgal_images").load('images_display.php', {'id': $(this).attr('id')});
			$("ul.jqgal_thumbnails li").removeClass('jqgal_highlight');
			$(this).addClass('jqgal_highlight');
		});
	});
	</script>

This is the PHP code (located in images_display.php)

1
2
3
4
5
6

<?
$image = str_replace("thumbimage","",$_POST['id']);
?>
<div class="loadimage">
	<img src="images/<?=$image;?>.jpg" alt="" title="" />
</div>

The rest is just HTML/CSS.

DOWNLOAD JQuery / PHP Image Gallery

Any probs? Let me know. I’m not offering full-support on this feature, but if you have any queries, i’ll do my best to assist.

Extra Features

The code I provide in itself is extremely simple. It’s the shell of a gallery image. But by adding a few extra JQuery functions like FadeIn/FadeOut, you can develop the gallery into something beautiful.

Be careful – word of warning

The image naming convention is very important with this script. So if you don’t understand the code, it’s best to stick to the naming convention I’ve provided in the download.

]]> http://www.brightcherry.co.uk/scribbles/simple-jquery-php-image-gallery/feed/ 0 JQuery – Hover And Show Next Element http://www.brightcherry.co.uk/scribbles/jquery-hover-and-show-next-element/ http://www.brightcherry.co.uk/scribbles/jquery-hover-and-show-next-element/#comments Thu, 17 Feb 2011 16:12:37 +0000 adm1n http://www.brightcherry.co.uk/scribbles/?p=291

So, this JQuery code shows the next element (a DIV in this case) when you hover over a “trigger” (in this case, the triggers are hyperlinks), and then hides the element (the DIV and its contents) once you hover out. Below is a demo of exactly what I mean…

Demo Link- Gallery
Take a look at some of our projects, ranging from CSS to eCommerce websites.
Demo Link- About Us
Read more about BrightCherry- what we do, how we do it and how we started.

Here’s the code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

<html>
 <head>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script type="text/javascript"> 
  $(function() {
   $(".demo_containers .sub a").hover(function() {
    $(this).next("div").show("slow");
    },function(){
    $(this).next("div").hide("slow");
   });
  });   
  </script>
 <style type="text/css">
 .demo_containers .sub div{
  display:none;
 }	
 </style>
 </head>
 <body>
 <div class="demo_containers">
  <div class="sub">
   <a href="#">Demo Link- Gallery</a>
   <div class="desc">
    Take a look at some of our projects, ranging from CSS to eCommerce websites.
   </div>
  </div>
  <div class="sub">
   <a href="#">Demo Link- About Us</a>
   <div>
    Read more about BrightCherry- what we do, how we do it and how we started.
   </div>
  </div>
 </div>
 </body>
</html>

That’s a very basic example.

Using the parent() function

This feature can get more complicated if the trigger (the hyperlink) is wrapped in an extra element. For example, if the code looked like this:

1
2
3
4
5
6
7
8

  <div class="sub">
   <span> 
    <a href="#">Demo Link- Gallery</a>
   </span> 
   <div class="desc">
    Take a look at some of our projects, ranging from CSS to eCommerce websites.
   </div>
  </div>

If you look carefully, the trigger (hyperlink) now has an extra span tag around it. The previous JQuery code will no longer work because the “next” element after the hyperlink (a tag) is no longer the DIV you want to show, it’s the SPAN tag.

1
2
3
4
5
6
7
8
9

  <script type="text/javascript"> 
  $(function() {
   $(".demo_containers .sub a").hover(function() {
    $(this).parent().next("div").show("slow");
    },function(){
    $(this).parent().next("div").hide("slow");
   });
  });   
  </script>

In order to get the code to work we need to access the next element after the SPAN, which is why we need the parent() function to select the parent of the hyperlink (which is the SPAN tag), and then select the “next” DIV element after the SPAN.

I’m probably not explaining it very well, but the example code should explain it better than I do :)

]]> http://www.brightcherry.co.uk/scribbles/jquery-hover-and-show-next-element/feed/ 0 Ajax- JQuery Hovering/Expanding Info Box http://www.brightcherry.co.uk/scribbles/ajax-jquery-hoveringexpanding-info-box/ http://www.brightcherry.co.uk/scribbles/ajax-jquery-hoveringexpanding-info-box/#comments Wed, 24 Nov 2010 19:53:52 +0000 adm1n http://www.brightcherry.co.uk/scribbles/?p=268 I looked high and low for an “AJAX hovering/expanding info box”, but I couldn’t really find anything decent that worked in all browsers. Most of them choked when using I.E. I may have even been Googling the wrong keyphrase, I’m not even sure I named this effect the right thing…

For those of you who don’t have a clue what I’m talking about, I mean something like this:

JQuery Hovering/Expanding Info Box

So basically, there are 3 panels, and when you hover one, the panel expands with further information.

As I said, I couldn’t find anything precisely to the criteria I required, so I decided to try and write my own. The code is really simple, and from what I’ve tested, it works in most browsers, including I.E 6. It’s quite smooth, but it’s not animated. I’m sure someone can improve the code to make it a lot smoother.

Anyways, I still think the end result is pretty cool (even though quite basic). The actual CSS was more of a pain than the AJAX, purely because of cross-browser issues.

Demo

JQuery Hovering/Expanding Info Box Demo

Download

JQuery Hovering/Expanding Info Box Download

If anyone actually uses this, let me know how it works out. Additionally, if anyone has any improvements to the code, i’d love to see it…

]]> http://www.brightcherry.co.uk/scribbles/ajax-jquery-hoveringexpanding-info-box/feed/ 3