Events/scroll – jQuery JavaScript Library
Events/scroll – jQuery JavaScript Library
|
|
… body); $(window).scroll(function () { $(“span”).css(“display”, “inline”).fadeOut … Retrieved from “http://docs.jquery.com/Events/scroll” …
Similar Posts
CSS/width – jQuery JavaScript Library
Set the CSS width of every matched element. … Set the CSS ‘width’ property to the specified value. … Retrieved from “http://docs.jquery.com/CSS/width” …css scroll – Pure css
It is possible to apply an inline scroll to some div inside a page without using … attribute will display a scroll box if content grows beyond specified height and …Find inline CSS and JavaScript with Inline Code Finder | 456 Berea Street
Inline Code Finder is a neat quality assurance tool that will find and highlight any elements that have inline events, inline styles, or javascript: links.Understanding CSS Positioning part 1 • CSS & (X)HTML • Kilian Valkhof
Without a doubt, positioning, or the layout, is the hardest part of CSS. … block, while a <span> has display:inline) or on what you specify in your CSS. …Beautiful CSS buttons with icon set
<a href=”#” class=”button”> <span class=”user”>Add to friends</span> </a> Step 2: CSS Code … http://sabbour.wordpress.com/2008/07/03/clean-css-buttons …Running jQuery with Other Frameworks Via noConflict
While jQuery is certainly a popular JavaScript framework, it’s by no means the only game in town. Other frameworks such as Prototype, MooTools, Dojo and many others all have their own strengths, weaknesses, and devoted groupies.
Generally speaking, these frameworks all play well together — you can mix and match framework functionality to your heart’s content, as long as you don’t mind the additional overhead of loading several libraries simultaneously. So you have a calendar widget in jQuery that you love, but you’re already using Prototype to animate your navigation bar? Don’t be shy… use both!
Of course, every once in a while you can run in to problems when combining JS frameworks — particularly (in my experience) when combining jQuery and Prototype. Luckily, jQuery was kind enough to provide us with a workaround.
The Problem: Sharing Syntax
The most common compatibility problem stems from both jQuery and Prototype using the same shortcut syntax: namely, the $().doSomething syntax. Here’s a sample line of code in jQuery:
$('#myelement').addClass('active');
And the same functionality in Prototype:
$('myelement').addClassName('active');
Note the basic similarity? Both frameworks claim the dollar sign notation for themselves, which can wreak havoc on snippets of code dropped willy-nilly into a website. If your jQuery code is grabbed up by Prototype, things will stop working fast. And similarly, if your Prototype code is snagged by jQuery, not even the awesome power of jQuery will be enough to overcome the code confusion.
The Solution: noConflict Mode
But not to worry! jQuery has provided us with a workaround called “noConflict mode.”
By default, there are two equally correct ways to call a jQuery function — the dollar sign notation, and “jQuery” notation:
$('#myelement').show();
jQuery('#myelement').show();
Both of the lines above do exactly the same thing. However, most people use and prefer the dollar sign notation. Why? Probably because it’s shorter, and if web developers didn’t care about brevity in their code, they probably wouldn’t have used a framework in the first place.
Of course, just using the longer jQuery notation isn’t enough. If jQuery has already claimed the dollar sign for itself, any Prototype functionality relying on that notation will still be grabbed by jQuery.
This is where the noConflict function comes in handy. Simply run the following line after both Prototype and jQuery have been loaded:
jQuery.noConflict();
This will cause jQuery to give up the dollar-sign notation, allowing the other library to take it over. And you can still use your jQuery snippet, provided you change all instances of $() to jQuery().
Keeping it Short
The noConflict mode does have one other bit of functionality that I’ve found useful in some of my projects: you can select a different variable to use instead of the standard “jQuery”. The usage looks like this:
var $j = jQuery.noConflict();
Now in addition to using the default jQuery() notation, I can also use the shorter $j() notation. This allows me to avoid running into problems with other frameworks, while still enjoying almost the same conciseness in my code.
CSS: Block and Inline elements
… between block and inline display property in CSS. … Inline display style … element has its natural display style, you can over-ride these in CSS. …RW042 – CSS Display Block or Inline | SupportCasts – 3 Dimensional Mac …
Creating an additional navbar using the CSS display: Block; and display: inline; property and values. … RW042 – CSS Display Block or Inline. RW040 …Fixing a Bad Feedburner Subscriber Count
Google’s Feedburner is a fantastic service for managing RSS feeds and delivering useful statistics on those feeds, and they have a great API (application programming interface) for pulling those statistics and displaying them on your site. But lately, I’ve run into occasional problems getting at the information that Feedburner collects. Here’s the solution that I’ve developed for dealing with Feedburner’s flops.
I’m using Francesco Mapelli’s Feed Count WordPress plugin to display the number of feed subscribers I’ve accrued. It’s a great little plugin that allows you to generate a custom message associated with your feed stats. For example, in the subscribe section of my sidebar, there’s a little message that, as I write this, reads, “Join 2449 other happy readers!” That’s the Feed Count plugin at work. I find it preferable to those little Feedburner “chicklets” that are scattered around the web these days.
But here’s the problem: when Feed Count makes a call to Feedburner to grab my latest subscriber stats, sometimes Feedburner drops the ball when it returns the number. Instead of returning the number of subscribers, it will sometimes return a “N/A” instead, suggesting Feedburner couldn’t find my stats, and resulting in a sentence that reads “Join N/A other happy readers!” Not quite the message I intended. And worse, sometimes Feedburner will return a big fat zero if it can’t find my stats — and “Join 0 happy readers!” is definitely not the impression I’m hoping to make on first-time visitors.
So what’s my solution? When in doubt, turn to JavaScript.
A JavaScript Solution
I first wrote this JavaScript solution in the last iteration of CSS Newbie when I finally got sick of being greeted every morning with my “not available” subscriber count:
$spans = document.getElementById('subbox').getElementsByTagName('span');
if($spans[4].innerHTML=="N/A" || $spans[4].innerHTML=="0") {
$spans[4].innerHTML = "thousands of";
}
This solution relies heavily on the XHTML structure generated by the Feed Count plugin, but the concept could be edited to work with most any solution. Basically, I’m using JavaScript to find the 5th span (counting starts at 0) inside the #subbox id, which is the span generated by Feed Count that holds my subscriber count. The code checks the contents of that span, and if it finds one of the two dreaded values — N/A or 0 — it replaces that content with the phrase “thousands of” instead. It’s not as specific as I’d like, but it certainly gets the point across.
A jQuery Option
When I rebuilt CSS Newbie recently, I decided to upgrade this script to work with jQuery. I was already using jQuery for a few other effects on the page, so it made sense to cut down on the size of my code where available. Here’s the much smaller jQuery solution:
if($(".subscribers").html() == "N/A" || $(".subscribers").html() == "0") {
$(".subscribers").html("thousands of");
}
This code does essentially the same as the JavaScript above but in fewer lines and, I personally think, with greater clarity. It looks for the contents of the element with the “.subscribers” class (which would have been an absolute bear to do with JavaScript due to the lack of a getElementsByClass function) and replaces it if it’s on our no-go list.
This is how I’ve gotten around the inconsistencies of the Feedburner API. If you have other solutions or ideas you’d like to share, I’d love to hear them in the comments!
