Using jQuery allows developers to:
1) Fix cross-browser problems and solve CSS shortcomings and limitations by extending CSS functionality with JavaScript.
2) Solve "real world" problems like creating hover effects, animations, and interactions that are not possible with CSS alone.
3) Benefit from a large community and ecosystem that continues to improve and expand jQuery's capabilities.
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Using jQuery to Extend CSS
1. Using jQuery
to Extend CSS
• Fix Cross Browser Problems
• Solve CSS Shortcomings
• Do Things CSS Can’t Do
• Solve ‘Real World’ Problems
• Get Your Site into an Environment with a Bright Future
9. Looks Simple?
Grids are hard
...when not
tabular data.
...and especially
with variable
height content
Div has a hover state
...with opacity change
...and is a link.
Need right margin Doesn’t need right margin
19. Animation is Easy
Regular State (overflow: hidden;)
Expanded State
var baseWidth = $("pre")[0].width(),
<pre><code>
rightPadding here...
... code in = 10;
</code></pre>
$("pre").hover(function() {
var codeInnerWidth = $("code", this).width() + rightPadding;
if (codeInnerWidth > baseWidth) {
pre
$(this)
{
overflow: hidden;
.stop()
width:
.css({
563px;
}
zIndex: "100",
code
{
position: "relative"
font-family: Courier, Monospace;
})
}
.animate({
width: codeInnerWidth + "px"
});
}
}, function() {
$(this).stop().animate({
width: baseWidth
});
});
20. Loading after Loading
Big ass movie
Starts loading right away,
slows down page.
$(window).bind(“load”, function() {
$('#movie-area').load('/movie.html');
});
Bonus
If users don’t have
JavaScript, the movie isn’t
going to play correctly
anyway. So nothing is shown.
21. Controlling Outside Content
Design is one thing...
Content is another. CSS was
able to control the new
graphics, but the change in
text was done with jQuery.
25. The FUTURE
• Huge community of people USING it.
• Huge community of DEVELOPERS.
• Loads of DOCUMENTATION.
• Plenty of SUPPORT available.
• Gosh darn it, people like it!