!
This is the main content
Understand the use cases for jQuery
Be able to animate using jQuery
First, the $ sign represents the jQuery library. Any time you use jQuery, you start the statement with a $ sign.
The selection part is very important as it tells jQuery what you want to style, animate or modify. This is done using selectors like those found in CSS such as .main_text
The `on` part of the statement is telling jQuery what jQuery function to apply. There are loads of these! The `on` function is used to tell the browser how to respond to an event, in this case a click event.
Image copyright jamiebalfour.scot
First, the $ sign represents the jQuery library. Any time you use jQuery, you start the statement with a $ sign.
The selection part is very important as it tells jQuery what you want to style, animate or modify. This is done using selectors like those found in CSS such as .main_text
The `on` part of the statement is telling jQuery what jQuery function to apply. There are loads of these! The `on` function is used to tell the browser how to respond to an event, in this case a click event.
Image copyright jamiebalfour.scot
First, the $ sign represents the jQuery library. Any time you use jQuery, you start the statement with a $ sign.
The selection part is very important as it tells jQuery what you want to style, animate or modify. This is done using selectors like those found in CSS such as .main_text
The `on` part of the statement is telling jQuery what jQuery function to apply. There are loads of these! The `on` function is used to tell the browser how to respond to an event, in this case a click event.
Image copyright jamiebalfour.scot
First, the $ sign represents the jQuery library. Any time you use jQuery, you start the statement with a $ sign.
The selection part is very important as it tells jQuery what you want to style, animate or modify. This is done using selectors like those found in CSS such as .main_text
The `on` part of the statement is telling jQuery what jQuery function to apply. There are loads of these! The `on` function is used to tell the browser how to respond to an event, in this case a click event.
//Adds a click event to every button
$("button").click(function(){
alert("Button clicked");
//Animate the main content section
$("#main_content").animate({"opacity" : 0.2}, 2000);
})This is the main content
//Animation
$("#content").animate(
{
"margin-top" : 50px,
"margin-left" : 20px
}
);
//Changing HTML
$("#main_text").html("This is the new main text");
//Adding event handlers
$("button").on("click", function(){
alert("A button was clicked");
});Visit https://www.w3schools.com/jquery/ and work through the jQuery examples there.
Start by copying the examples, then trying them out in your web browser.
Your teacher will check in on you as you work through them.
The following are key shortcuts for using DragonSlides and reveal.js.
| Key combination | Action |
|---|---|
| →, PAGE DOWN, SPACE | Next slide |
| ←, PAGE UP | Previous slide |
| SHIFT + → | Last Slide |
| SHIFT + ← | First slide |
| B | Whiteboard |
| W | Widget Board/White Screen |
| C | Toggle Notes Canvas |
| DEL | Clears Whiteboard/Notes Canvas |
| S | Show Presenter Mode |
| SHIFT + D | Toggle Dark Mode |
| H | Goes to the Home Slide |
| META + P | Show Print options window |
In order to use the 'Start Remote' feature, you'll need to download JB Slide Controls from the Apple App Store. Once you have this you'll be able to control the slides using the app from you Apple Watch.
DragonSlides and jamiebalfour.scot are copyright © Jamie B Balfour 2017 - 2024, 2010 - 2024. Content is copyright © Jamie B Balfour