eligeske » JQuery

Javascript Dedup an Array

eligeske — Tue, 15 Jun 2010 20:35:38 +0000

Here is a simple javascript function do remove the duplicate values in an array. It worked very well for what I needed it for, although it may not be full proof for your application.

function dedupArray(array)
{
array.sort();
var cnt = array.length – 1;
var i=0;
var keepers = new Array();
while(i <= cnt){
if(array[i] != array[i + 1]){
keepers.push(array[i]);
i++;
}else{
array.shift();
}
cnt = array.length – 1;
}
return keepers;
}

While Loop with JQuery

eligeske — Wed, 31 Mar 2010 18:46:50 +0000

So you want to loop through some elements using JQuery. Me too! We have something in common, maybe we should go have a beer together. Bud light anyone? just kidding. (about the bud light, ik.)

There is some important things when trying to loop through elements with JQuery.

Need to get an array of elements OR use .each function (but there can be some issues there)
Loop through those elements

First: Assigning elements to an array.

I want everyone to know right now that I am by far an expert on this subject, but…… but….. I do think this may help someone out. If you have some good feedback or improvements please comment below! The more good info the marry’er!!!!! <– is that a word? anyways.

ASSIGN ELEMENTS TO AN ARRAY or grab OBJECTs:

examples:

var divs = $('divs');
var rows = $('.container .row'); // assigns all class with rows

Once you have that assigned you can get the .length value for looping through. This is different than using the .get() which uses the dom and not JQuery. So for this writeup I will be using the JQuery .eq() function which allowed me to grab out of the array from a JQuery object.

$cnt = $row.length  // returns count obviously

Now that we have a count of how many are in the array we can do a while loop. (using .eq) and not the .get() which would look like this $row[1]. Instead what we will do will look like this $row.eq(1);. What I used this for was to determine the height of my left column and hide rows that extended the height of the main column past the height of the left. But this is only a portion of that. Here is how i looped through and hid some rows.

$i = $cnt -1;
while($i > 0){
rows.eq($i).slideUp(); // slides up all the rows
}

SO HEY YOU! WHY NOT JUST USE THE .each() FUNCTION BUILT INTO JQuery!!!!!

Ok. I’ll tell you why, or at least a partial why. Here is the partial why.

When using the .each function it appeared that it did not do a full iteration and complete all the code sequentially. For some reason, here is the partial I can’t cover yet, the .each function iterated each part in the enclosed function at the same time not allow me to determine things in between each loop. Which forced me to learn how to traverse the JQuery object. Which is good because using this way was WAY less code than I was about to write out of my shear laziness.

I hope this has helped someone else out there wanting to loop through some elements. Oh and here is the code I used to hide some rows that were making the main page container not match the height to the left column. In case you were curious.

function squishBox(){
var rows = $('.products_cont .row');
$cnt = rows.length;
$i = $cnt – 1;
while($i > 0){
$left_height = $('#LEFTPANE').height();
$main_height = $('#CONTENTPANE').height();
if($left_height < $main_height – 100){
rows.eq($i).slideUp();
}
$i–;
}
}

Combining $(this) with selector

eligeske — Tue, 16 Feb 2010 15:41:23 +0000

Ok, I know that there are many times where you may be using a click function of an element but you need to use specifically that element you clicked siblings or children. Being able to stack the $(this) selector with other ones can be a little difficult or puzzling at times. Check below on a couple different ways of sticking them together.

Notice in the code that a comma “,” is used and not the concatenation plus “+”.

// find out if a selected element's is visible.
$visible = $(this,":visible").length; // returns true of false
// find out if a selected element's immediate sibling div is visible.
$visible = $(this).next('div:visible').length; // returns true of false
// hide the selected previous siblings element, hide methis
$('+ span', this).hide();
// hide the selected element's child with the class name .class
$(this,".class").hide(); // returns true of false

JQuery checkbox.val always on?

eligeske — Tue, 16 Feb 2010 15:34:35 +0000

When using JQuery selectors and trying to get the value of a checkbox, it seems that it will always return the result “on”. That is because you need to check to see if it is “:checked” instead of trying to grab the value of it.

if($("input[name='YourCheckboxName']").is(":checked")){
alert('on');
}else{
alert('off');
}

JQuery – Run script if!

eligeske — Tue, 24 Nov 2009 16:39:57 +0000

When running a site with a boat load of javascript, you may want to run a script only if a certain something is on the page. Not only could this save on initial loading time, but more importantly if you have an element of one thing on one page and the same named element for something else on another. You don’t want your JQuery to do an action to that if it isn’t intended.

So. Run my enclosed script if! I read somewhere a while back on a nice way of determining if an element exists. Really simple and I definitely cannot take credit for this.

Let’s say you have a div on your index page you have some classes you want to change on page load. But on another page you have some more of those classes.

You could either have an entirely new javascript page for that page || you could do the following.

Create something with a unique id that you don’t plan on using elsewhere on your site, so maybe the page name.

Then all you need to do for JQuery is the following:

if ($('#myPageName').length > 0){
//everything you want to run inside here.   
}

Got any other ideas that would work besides this? Please let me know!

JQuery – Star Comment Rating

eligeske — Tue, 01 Sep 2009 21:07:51 +0000

Here is a nice little rating effect. This does not include the PHP, it is only the JavaScript, HTML, CSS, and Images. If you like this, I do have the PHP script that I created, but will not support, and I threw together quite quickly. But, what the heck, back to this post now.

Look below and you can see what will be created by the time we are done with this project.

Skip to full source code || Download Source in .zip

What we start with is one HTML file, JQUERY library, star_rating.js (contains all the effects), and the image folder with some images.

First let’s take a look at the file structure.

Right now I contain all the CSS in the html file, out of shear laziness, and so you don’t have an extra file with a small amount of CSS in it.

So let’s talk about the html.

Everything except the hidden form field that contains the final rating selected is contained within the rating_cont div.

Inside the main rating_cont div is three more divs.

rating_btns div.
rating_on div.
rated div.

<div id="rating_cont">
<div id="rating_btns"></div>
<div id="rating_on" > </div>
<div id="rated"></div>
</div>
<input type="hidden" id="rating_output" name="rating_output" value="not rated" />

Now that we have the main divs setup, let’s add some of the style so we can see what we are working with.

We will add the following CSS to the rating_cont, our main div.

#rating_cont { background: #1E1D1C url(images/rating_background.jpg) top left no-repeat; border: 1px solid #F9BA0D; width: 140px; height: 23px; text-align: left; margin-left: 6px;}

This puts the background image of the stars ‘off’ and creates our height, width, border, and background for our main container.

Next, let’s create the CSS and html for the rating_btns div.

The rating_btns div will have an unordered list with the actual ratings in it.

Look below.

<ul>
<li>0.5</li>
<li>1.0</li>
<li>1.5</li>
<li>2.0</li>
<li>2.5</li>
<li>3.0</li>
<li>3.5</li>
<li>4.0</li>
<li>4.5</li>
<li>5.0</li>
</ul>

If you’re doing the code step by step, I’m sure you noticed that this looks pretty ugly right now. Let’s add the CSS to the rating_btns div and the ul we have.

The rating_btns div needs to be above the rating_on div that we will create next, so we will give it a relative positioning and a z-index of 100. We also add the height and width to define the container of our

links.

Inside the rating_btns div is our

. We do not want our

to have any margin or padding. The
needs to be 14px wide. Guess why. 14 x 100 = 140! Yup, you got it. That is the width of our container, amazing, I know. We are going to float them left, give them a block display so they don’t go over each other, and last but not least, change the font display. We will change the font to 1px, and the same color as the background. I’m sure you’re asking; why not just have them empty and not have any text in there at all? Well, we will use this text to tell our JQuery script what you hovered over.

Here is the CSS for this.
```
#rating_btns { position: relative; z-index: 100; width: 140px; height: 21px;}
#rating_btns ul, #rating_btns li  { padding: 0; margin: 0; }
#rating_btns li { float: left; width: 14px; height: 21px; display: block; font-size: 1px; cursor: pointer; color: #1E1D1C; }
```
Next, look at our rating_on div. Just as it says, it is our div that contains our stars that are “ON”. We use a quite unique way of doing this. We give it a background image of the “on” stars, but change it’s width based upon what we hover over. That’s the reason we had to give the rating_btns a relative positioning with a z-index, and this div we will also give a relative positioning, but a z-index of 50. We will also set the width to 0px initially, so it doesn’t show before we hover over it.

Here is the HTML for this:
```
#rating_on { background: url(images/rating_onbackground.jpg) top left no-repeat; width: 0px; height: 21px; position: relative; z-index: 50; top: -21px; }
<div id="rating_on" > </div>
```
On to our last div, our rating div, this contains three smaller divs that act as cells, one containing the selected rating, another containing the image of the stars, and the last one containing our edit link.

I still haven’t gotten to the JQuery yet, so I will just show you the CSS, and HTML for this.
```
#rated { display: none; width: 138px; padding: 3px 0px 3px 2px; height: 23px; background-color: #1E1D1C; height: 17px;font-size: 11px;color: #FFC910;}
#rated div { display: block; float: left; }
#rating { font-size: 11px; font-family: Arial, Helvetica, sans-serif; color: #FFC910; padding-left: 3px; width: 22px; }
#small_stars { height: 11px; width: 69px; background-image: url(images/stars_small_sprite.jpg); background-position: 0px -11px; font-size:1px; line-height: 11px; margin-top:3px; }
#rate_edit { line-height: 17px; font-size: 11px; font-family: Arial, Helvetica, sans-serif; color: #FFF; padding-left: 9px; cursor: pointer; }
#rate_edit:hover { text-decoration: underline; }
<div id="rated">
<div id="rating" style="height: 17px; line-height: 17px;">not rated</div>
<div> –  </div>
<div id="small_stars"> </div>
<div id="rate_edit">edit</div>
</div>
```
Since this will be used to send a rating from a form, we will add a hidden form field to be sent. This will be updated from JQuery.
```
<input type="hidden" id="rating_output" name="rating_output" value="not rated" />
```
Ok, on to the fun stuff, the JQuery.

This will have a total of six functions, NOT including the document.ready function.
1. rateWidth function
2. starSprite function
3. hover function *JQuery
4. mouseout function *JQuery
5. click function *JQuery
6. edit function *JQuery
With JQuery we need to surround it’s functions with $(document).ready(function()).

In saying that, keep that in mind when you look at the source code. If you don’t know what I am talking about, check out the full source code at the end of this post, or the downloadable source code.

1. rateWidth function
This function accepts the rating variable from our JQuery functions, converts it to an Integer, uses a switch statement to determine the width value, then returns the width to make our rating_on div show the stars. (shows the stars).
```
function rateWidth($rating){
$rating = parseFloat($rating);
switch ($rating){
case 0.5: $width = "14px"; break;
case 1.0: $width = "28px"; break;
case 1.5: $width = "42px"; break;
case 2.0: $width = "56px"; break;
case 2.5: $width = "70px"; break;
case 3.0: $width = "84px"; break;
case 3.5: $width = "98px"; break;
case 4.0: $width = "112px"; break;
case 4.5: $width = "126px"; break;
case 5.0: $width = "140px"; break;
default:  $width =  "84px";
}
return $width;
}
```
2. starSprite function
I used two different methods for creating the stars. One uses less HTML, and one uses more. For the small stars that show up when you make a rating, I wanted to use less HTML and used the sprite method to show the rating. But it does the same thing as the rateWidth but determines the background positioning based on the rating provided.
```
function starSprite($rating){
$rating = parseFloat($rating);
switch ($rating){
case 0.5: $pos = "-11px"; break;
case 1.0: $pos = "-22px"; break;
case 1.5: $pos = "-33px"; break;
case 2.0: $pos = "-44px"; break;
case 2.5: $pos = "-55px"; break;
case 3.0: $pos = "-66px"; break;
case 3.5: $pos = "-77px"; break;
case 4.0: $pos = "-88px"; break;
case 4.5: $pos = "-99px"; break;
case 5.0: $pos = "-110px"; break;
default:  $pos =  "-77px";
}
return $pos;
}
```
3. hover function *JQuery
The hover function will detect the cursor hovering over our
’s and the value of it and then send the value to the rateWidth function to get our width. It then assigns the width to the #rating_on div.
```
$('#rating_btns li').hover(function(){
$rating = $(this).text();
$('#rating_on').css('width', rateWidth($rating));
});
```
4. mouseout function
The mouseout function does just that, tells what stars should be showing on mouseout. But we do not want the stars to be reset every time we go off the stars, especially if we already selected a rating. So we grab the value of our #rating div and if it is “not rated” we set our width to 0px but if it doesn’t equal “not rated” we set the width of it’s set value. This way if you have selected a rating it defaults back to it when you mouseout.
```
$('#rating_btns li').mouseout(function(){
$rating = $('#rating').text();
if($rating == "not rated"){
$('#rating_on').css('width', "0px");
}
else{
$('#rating_on').css('width', rateWidth($rating));
}
});
```
5. click function
This function has a little bit more going on than the other ones. When you click the
it first grabs the value of the clicked

assigns it to the #rating div, uses starSprite function to assign the background position for the #small_stars div, then hides the #rating_btns div, and the #rating_on div. Once hidden, it nicely fades in the #rated div.

$('#rating_btns li').click(function(){
$rating = $(this).text();
$('#rating').text($rating);
$('#rating_output').val($rating);
$pos = starSprite($rating);
$('#small_stars').css('background-position', "0px " + $pos );
$('#rating_btns').hide();
$('#rating_on').hide();
$('#rated').fadeIn();
});

6. edit function
This function just hides the #rated div and fades in the two divs we just hid. The #rating_div and the #rating_btns div.

$('#rate_edit').click(function(){
$('#rated').hide();
$('#rating_btns').fadeIn();
$('#rating_on').fadeIn();
});

Bam… we’re done.

FULL SOURCE CODE

Here is the completed code for your viewing pleasure.

HTML (star_rating.html) -


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQuery-Star Comment Rating</title>
<script type="text/javascript" src="js/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/star_rating.js"></script>
<style type="text/css">
#rating_cont { background: #1E1D1C url(images/rating_background.jpg) top left no-repeat; border: 1px solid #F9BA0D; width: 140px; height: 23px; text-align: left; margin-left: 6px;}
#rating_on { background: url(images/rating_onbackground.jpg) top left no-repeat; width: 0px; height: 21px; position: relative; z-index: 50; top: -21px; }
#rated { display: none; width: 138px; padding: 3px 0px 3px 2px; height: 23px; background-color: #1E1D1C; height: 17px;font-size: 11px;color: #FFC910;}
#rated div { display: block; float: left; }
#rating { font-size: 11px; font-family: Arial, Helvetica, sans-serif; color: #FFC910; padding-left: 3px; width: 22px; }
#small_stars { height: 11px; width: 69px; background-image: url(images/stars_small_sprite.jpg); background-position: 0px -11px; font-size:1px; line-height: 11px; margin-top:3px; }
#rate_edit { line-height: 17px; font-size: 11px; font-family: Arial, Helvetica, sans-serif; color: #FFF; padding-left: 9px; cursor: pointer; }
#rate_edit:hover { text-decoration: underline; }
#rating_btns { position: relative; z-index: 100; width: 140px; height: 21px;}
#rating_btns ul, #rating_btns li  { padding: 0; margin: 0; }
#rating_btns li { float: left; width: 14px; height: 21px; display: block; font-size: 1px; cursor: pointer; color: #1E1D1C;
}
</style>
</head>
<body>
<div id="rating_cont">
<div id="rating_btns">
<ul>
<li>0.5</li>
<li>1.0</li>
<li>1.5</li>
<li>2.0</li>
<li>2.5</li>
<li>3.0</li>
<li>3.5</li>
<li>4.0</li>
<li>4.5</li>
<li>5.0</li>
</ul>
</div>
<div id="rating_on" > </div>
<div id="rated">
<div id="rating" style="height: 17px; line-height: 17px;">not rated</div>
<div> –  </div>
<div id="small_stars"> </div>
<div id="rate_edit">edit</div>
</div>
</div>
<input type="hidden" id="rating_output" name="rating_output" />
</body>
</html>

JQuery/JavaScript (star_rating.js) -

/*
* Written by eligeske
* downloaded from eligeske.com
* have fun. nerd.
*/
$(document).ready(function(){
// hover
$('#rating_btns li').hover(function(){
$rating = $(this).text();
$('#rating_on').css('width', rateWidth($rating));
});
// mouseout
$('#rating_btns li').mouseout(function(){
$rating = $('#rating').text();
if($rating == "not rated"){
$('#rating_on').css('width', "0px");
}
else{
$('#rating_on').css('width', rateWidth($rating));
}
});
//click
$('#rating_btns li').click(function(){
$rating = $(this).text();
$('#rating').text($rating);
$('#rating_output').val($rating);
$pos = starSprite($rating);
$('#small_stars').css('background-position', "0px " + $pos );
$('#rating_btns').hide();
$('#rating_on').hide();
$('#rated').fadeIn();
});
//edit
$('#rate_edit').click(function(){
$('#rated').hide();
$('#rating_btns').fadeIn();
$('#rating_on').fadeIn();
});
function rateWidth($rating){
$rating = parseFloat($rating);
switch ($rating){
case 0.5: $width = "14px"; break;
case 1.0: $width = "28px"; break;
case 1.5: $width = "42px"; break;
case 2.0: $width = "56px"; break;
case 2.5: $width = "70px"; break;
case 3.0: $width = "84px"; break;
case 3.5: $width = "98px"; break;
case 4.0: $width = "112px"; break;
case 4.5: $width = "126px"; break;
case 5.0: $width = "140px"; break;
default:  $width =  "84px";
}
return $width;
}
function starSprite($rating){
$rating = parseFloat($rating);
switch ($rating){
case 0.5: $pos = "-11px"; break;
case 1.0: $pos = "-22px"; break;
case 1.5: $pos = "-33px"; break;
case 2.0: $pos = "-44px"; break;
case 2.5: $pos = "-55px"; break;
case 3.0: $pos = "-66px"; break;
case 3.5: $pos = "-77px"; break;
case 4.0: $pos = "-88px"; break;
case 4.5: $pos = "-99px"; break;
case 5.0: $pos = "-110px"; break;
default:  $pos =  "-77px";
}
return $pos;
}
});

I hope it works for you all. If you have any questions feel free to leave a comment.

This will have a total of six functions, NOT including the document.ready function.

rateWidth function
starSprite function
hover function *JQuery
mouseout function *JQuery
click function *JQuery
edit function *JQuery

With JQuery we need to surround it’s functions with $(document).ready(function()).

In saying that, keep that in mind when you look at the source code.

1. rateWidth function

This function accepts the rating variable from our JQuery functions, converts it to an Integer, uses a switch statement to determine the width value, then returns the width to make our rating_on div show the stars. (shows the stars).

ß jscript rateWidth à

2. starSprite function

I used two different methods for creating the stars. One uses less HTML, and one uses more. For the small stars that show up when you make a rating, I wanted to use less HTML and used the sprite method to show the rating. But it does the same thing as the rateWidth but determines the background positioning based on the rating provided.

ß jscript starSprite à

3. hover function *JQuery

The hover function will detect the cursor hovering over our

’s and the value of it and then send the value to the rateWidth function to get our width. It then assigns the width to the #rating_on div.

ß hover function à

4. mouseout function

The mouseout function does just that, tells what stars should be showing on mouseout. But we do not want the stars to be reset every time we go off the stars, especially if we already selected a rating. So we grab the value of our #rating div and if it is “not rated” we set our width to 0px but if it doesn’t equal “not rated” we set the width of it’s set value. This way if you have selected a rating it defaults back to it when you mouseout.

ß à

5. click function

This function has a little bit more going on than the other ones. When you click the
it first grabs the value of the clicked
assigns it to the #rating div, uses starSprite function to assign the background position for the #small_stars div, then hides the #rating_btns div, and the #rating_on div. Once hidden, it nicely fades in the #rated div.

6. edit function

This function just hides the #rated div and fades in the two divs we just hid. The #rating_div and the #rating_btns div.

Bam… we’re done.

Here is the completed code for your viewing pleasure.

ß html à

ß JQuery à