jquery Questions - SnippetGood

How can I find a div in javascript or jquery

2009-10-23T16:45:36Z

How do I find on my page using javascript or jquery?

IE8 window.open alternative in javascript/jquery

2009-10-14T15:55:01Z

Is there an alternative to window.open in javascript/jquery? I'm asking because the function doesn't seem to work in IE8 any longer.

How do you make rounded corners in all browsers?

2009-10-03T03:05:13Z

CSS? JQuery? What's the best and most efficient way to make rounded corners that work in all browsers? I've tried a few and right now I'm making small divs that are positioned negatively outside of the relatively positioned parent divs. Instead of foreground images, I use sprites so the corner divs are less invasive. (ha ha I should give them shorter class names too)

since I'm asking for a snippet - I'll leave a snippet of what I do.

<div id="container">
    <div class="corner-top-left"></div><div class="corner-top-right"></div>
    <div class="corner-bottom-left"></div><div class="corner-bottom-right"></div>
</div>
#container 
{
    display: block;
    height: 300px;
    position: relative;
    width: 500px;
}
.corner-top-left, .corner-top-right, .corner-bottom-left, .corner-bottom-right
{
    background: url(corner.png) 0 0 no-repeat;
    display: block; 
    height: 10px;
    position: absolute;
    width: 10px;
}
.corner-top-left { top: -10px; left: -10px;}
.corner-top-right { background-position: x x; top: -10px; right: -10px;} 
.corner-bottom-left { background-position: x x; bottom: -10px; left: -10px;} 
.corner-bottom-right { background-position: x x; bottom: -10px; right: -10px;}

Current Year Copyright Line in JQuery

2009-10-11T01:44:54Z

I was wondering what ways there are to have the current year in a copyright line. I don't like having to change it manually every year.

How can I display formatted rss data in a DIV

2009-10-23T19:33:07Z

I'd like to display the title and a snippet of the last 2 or 3 entries of an RSS feed on another site.

I do not have access to a server-side technology on the receiving page, only Javascript/JQuery.

What do I need in order to get that done?

If statements and ranges

2009-10-13T17:23:45Z

I have a JQuery script that I'm working on and in part of it, I am comparing a value to make sure it is within a specific integer range.

This is what my first attempt looks like:

if (levelCounter < 0) { levelCounter = 0; }
if (levelCounter > maxLevels) { levelCounter = maxLevels;}

I'm hoping there's a shorter more efficient way to do this - I can't think of it off the top of my head.

How can I make a basic jquery rotator?

2009-10-08T22:57:42Z

Are there any jquery rotators out there that are both basic and flexible? I've tried a bunch of carousel ones and they are not what I want.

It should have pager ability and transitions if possible. Also I need to be able to put text on the images, but if that's not possible I could save the text into the images.

add a class to something based on its content in jquery?

2009-10-23T16:49:08Z

I have a bunch of divs that have the same class on them. They are created dynamically, so I can't assign any further classes to differentiate them. Is there anything I can do to make one have red text for example if it's a certain tag like "photoshop"?

JQuery how can I use show/hide and opacity?

2009-10-23T03:51:19Z

This goes for all effects except for slideUp/slideDown.

If I set opacity for an id/class that I'm manipulating with show/hide or fadeIn/fadeOut, my opacity is set to 1 (100%) instead of whatever I've set it as in the css. Is there any way to override that behaviour?

Use jQuery hosted by Google or hosted by Microsoft?

2009-10-05T04:50:02Z

They both offer jQuery hosting now - which should I use? I'm leaning towards the Microsoft option since they also host the jquery-1.3.2-vsdoc.js file which means I get full Intellisense support in Visual Studio.

Thoughts?

Halloween Ghost Script: count hidden divs?

2009-10-20T02:52:34Z

I have a script that I'm working on which is close to functionality sought here: http://snippetgood.com/questions/48/ninjafy-javascript-halloween-pirates-or-ghosts-or-ninjas

The ghosts appear when you hit more ghosts and disappear when you hover over them or click less ghosts. The functionality I'm looking to add now is to check when you hover on a ghost to see if that was the last ghost showing, and if so, reset the ghosts back to 0. I'm not sure of the best logic to use here: count the hidden divs?

Any ideas? Tips on tidying my jquery are also appreciated!

The (updated) demo is here: http://content.snippetgood.com/demos/halloween-ghosts-v1.html

CSS

    body
    {
        background-color: #000;
        color: #fff;
        font-family: Trebuchet MS;
    }
    h1 { color: #fff; }
    #more-ghosts, #less-ghosts
    {
        cursor: pointer;
        font-size: 20pt;
        text-decoration: blink;
    }
    #ghost-count
    {
        font-size: 40pt;
    }
    .maximum { color: #b00; }
    .ghost-1, .ghost-2, .ghost-3, .ghost-4, .ghost-5
    {
        background: url(images/ghosts-ghost-1.png) 0 0 no-repeat;
        cursor: crosshair;
        display: none;
        height: 50px;
        width: 50px;
    }

HTML

    <div id="ghosts">
        <div class="ghost-1"></div><div class="ghost-1"></div><div class="ghost-1">   </div><div class="ghost-1"></div>
        <div class="ghost-2"></div><div class="ghost-2"></div><div class="ghost-2"></div><div class="ghost-2"></div>
        <div class="ghost-3"></div><div class="ghost-3"></div><div class="ghost-3"></div><div class="ghost-3"></div>
        <div class="ghost-4"></div><div class="ghost-4"></div><div class="ghost-4"></div><div class="ghost-4"></div><div class="ghost-4"></div>
        <div class="ghost-5"></div><div class="ghost-5"></div><div class="ghost-5"></div><div class="ghost-5"></div>
    </div>
    <div id="control-panel">
        <div id="more-ghosts">
            + more ghosts</div>
        <div id="ghost-count">
            0</div>
        <div id="less-ghosts">
            - less ghosts</div>
    </div>

JQUERY

$(function() {
        var maxGhosts = 5;

        var docWidth = $(document).width();
	    var docHeight = $(document).height(); 
        $("#ghosts div").each(function () {
	        var positionLeft = Math.round(Math.random()*(docWidth - $(this).width()));
	        var positionTop = Math.round(Math.random()*(docHeight));

	        $(this).css("position","absolute").css("top",positionTop+"px").css("left",positionLeft+"px");
	    });
        var ghostCount = 0;

        $("#more-ghosts").click(function() {
             if (ghostCount < maxGhosts) {
                ghostCount++;
                $(".ghost-"+ghostCount).fadeIn("slow");
                if (ghostCount == maxGhosts) { ghostMeter = "MAXIMUM GHOSTS!"; $("#ghost-count").addClass("maximum"); }
                else { ghostMeter = ghostCount }
                $("#ghost-count").text(ghostMeter);
             }
        });
        $("#less-ghosts").click(function() {
             if (ghostCount > 0){
                 $(".ghost-"+ghostCount).fadeOut("slow");
                 ghostCount--;
                 if (ghostCount < maxGhosts) { $("#ghost-count").removeClass("maximum"); }
                 $("#ghost-count").text(ghostCount);
             }
        });
        $("#ghosts div").hover(function() {$(this).fadeOut("slow");
        });

    });

add class on hover wtih jquery

2009-10-19T23:27:22Z

I'm stuck on how to add a class on hover and remove it on mouseout.

How can I build a rotating "Tips" feature using Javascript

2009-10-13T20:42:10Z

I'd like to build a Javascript function that can read tips off of an XML or text document and display them randomly. I may up to two on screen at a time and it would be nice if they displayed different tips. The function would only need to change tips on page load and does not need to support async calls. I'm not exactly sure where to start.

JQuery is fine as well, although I have no experiance in using it and would rather not have to include multiple libraries.

For those that care, this is for a StackExchange site which has some JQuery capabilities baked in.

How can I use jQuery Datepicker?

2009-10-13T23:26:25Z

I've seen datepickers for other languages. How could I use jQuery datepicker if I wanted to put a calendar on my website?

Can I use JQuery to animate using a class?

2009-10-13T18:00:48Z

I want to use jquery animate to do an animation, but I'm really hoping to define the end result as a class. Is there any way to use animate and addClass together?

NB: there would be more to the CSS - it is not a straight show/hide. I don't want to define all the attributes in animate() because it makes it less flexible for people to reuse.

ex:

    .start
    {
        display: none;
        height: 0;
        width: 0;  
    }
    .end
    {
       display: block;
       height: 30px;
       width: 30px;
    }

Trigger event in JQuery based on whether div has content or not

2009-10-11T03:16:10Z

I want to trigger an event in jquery based on whether or not it has content in it. How do I do that?

How can I make a lightbox effect on pageload?

2009-10-09T00:08:00Z

I want to make a popup div appear on pageload with a lightbox type effect - how do I do that?

Sliding Overlays

2009-09-30T21:50:12Z

I'm looking for a snippet for an div with an image in the background and a translucent overlay that slides up on hover and down on mouse out.

How can I use jQuery animate()?

2009-10-09T04:14:28Z

I'd like to use jQuery to do more animation, especially with the nav. Do you have any tips for using jQuery animiate()?

Styling Community Server Article Pages

2009-10-01T17:24:57Z

The article pages on Community Server 4.1 get one template and it's hard to do any individual styling to make an article look like it's unique from the other ones. I needed a way to attach an ID or class to the shell of a site or even to the body tag. This is the solution that I came up with.

EXPLANATION

This code will let you add a unique class to you website shell.

What it does is:

grab the text of the h1
nullify all symbols except / and -
replace the spaces with dashes.
convert all characters to lowercase.

So, if the page is called About Community Server, the website shell div will look like this:

<div id="website-shell" class="about-community-server-pg"></div>

caveats

For this to work, you'll need one h1 with the class "content-title" - if you use more than one, you're probably not going to get the class you're expecting.
If you change the h1 text, the class attached to the website shell will also change. However, this isn't for use on normal pages that you can style - only Community Server article pages with limited styling flexibility.

HTML

<div id="website-shell">
    <h1 class="content-title">frequently asked questions</h1>
</div>

JQUERY

<script type="text/javascript">
    $(function() {   
        var h1Class = $(".content-title").text().replace(/ /g,"-").replace(/[^\w/-]/g, '').toLowerCase();
        $("#website-shell").addClass(h1Class+"-pg");
    });
</script>

Dynamically change the background colour of even or odd rows in a table (zebra stripe)

2009-10-04T03:25:05Z

How can I dynamically change the background colour of even or odd rows in a table? this is also known as zebra striping.

Add Commas to List Items Except for Last One JQuery

2009-10-02T14:23:47Z

I have a bunch of items that I want to seperate by commas, but this is causing the last item to also have a comma. How do I keep the last item from having a comment?

$("#popular-tags li a").append(", ");

Style a Form Button With CSS

2009-10-01T16:14:38Z

How can I style a form button or .net control button if I don't have access to the code to insert an image?

Use the Latest Jquery Directly from Google

2009-10-01T15:49:57Z

It's really problematic to update files, change version, make sure you got every instance... so I'm looking for a way to add the latest jquery all the time.