Load this plugin. Then:
$("body *").replaceText( /&/gi, '<b class="ampersand">' + '&' + '</b>' );Change the selector as needed. That one is pretty intense.
Now you have a class name you can use to style them specially.
.ampersand {
font-family: Baskerville, Some Other Cool Font, Serif;
font-style: italic;
}
Find all links that start with the sites domain, a slash, relative file path, or a hashtag.
var siteURL = "http://" + top.location.host.toString();
var $internalLinks = $("a[href^='"+siteURL+"'], a[href^='/'], a[href^='./'], a[href^='../'], a[href^='#']");
Several big companies offer copies of jQuery hosted on their CDN's (Content Delivery Network). Most notoriously Google, but also Microsoft and jQuery themselves. A lot of people swear by this since it saves bandwidth, downloads faster, and perhaps even stays cached jumping between different sites that use the same script.
There is always that twinge of doubt though, that perhaps something goes wrong with these big companies CDN at the script isn't available (it happens). It's more reliable to use your own website, as hey, if they are loading your webpage, then your server is up and will server the script just fine, albeit with out the benefits of the CDN.
So perhaps the best solution is to use both methods! Use the CDN first, and if it fails, load the local copy. Here is a technique:
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
if (typeof jQuery == 'undefined') {
document.write(unescape("%3Cscript src='/js/jquery-1.4.2.min.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>
Make a CSS sprite image, with the top half and the bottom half being the two images you want to animate between. The jQuery adds a <span> tag, and adds the bottom half of the sprite image as its background. As you hover on and off, the span animates between fully transparent and fully opaque, fading one image into another.
<ul id="menu">
<li id="home"><a href="#">home</a></li>
<li id="about"><a href="#">about</a></li>
<li id="services"><a href="#">services</a></li>
<li id="contact"><a href="#">contact</a></li>
</ul>ul#menu li a{float:left;display:block;background:url("images/menu.png") no-repeat;width:150px;text-indent:-9999px;height:50px}
ul#menu li#home a{background-position:0px 0px}
ul#menu li#about a{background-position:-150px 0px}
ul#menu li#services a{background-position:-300px 0px}
ul#menu li#contact a{background-position:-450px 0px}
ul#menu li a span {background:url("images/menu.png");height:50px;display:block}
ul#menu li#home a span{background-position:0px -50px}
ul#menu li#about a span{background-position:-150px -50px}
ul#menu li#services a span{background-position:-300px -50px}
ul#menu li#contact a span{background-position:-450px -50px}$(function() {
$("ul#menu li a").wrapInner("<span></span>");
$("ul#menu li a span").css({"opacity" : 0});
$("ul#menu li a").hover(function(){
$(this).children("span").animate({"opacity" : 1}, 400);
}, function(){
$(this).children("span").animate({"opacity" : 0}, 400);
});
});
Make a div that is the exact size of the image. This div will have a background image applied to it of the second image. Then put an inline image inside it.
<div id="kitten">
<img src="http://cdn.css-tricks.com/images/kitten.jpg" alt="Kitten" />
</div>Fading the inline image in and out will reveal/hide the second (background) image.
$("#kitten").hover(function(){
$(this).find("img").fadeOut();
}, function() {
$(this).find("img").fadeIn();
});
Let's say you want to attach a click handler to every link on a page. The function for that click handler turns all the other links a different color.
var $allLinks = $("a");
$allLinks.click(function() {
$allLinks.not(this).css("color", "red");
});You can use the .not() function to remove elements from a set, so padding this to that function will remove the current element before the color change.
var maxHeight = 0;
$("div").each(function(){
if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
});
$("div").height(maxHeight);