jquery4u.com - Archives (septembre 2015)
1 jQuery Fan Blog for your Daily News, Plugins, Tuts/Tips & Code Snippets.
The aim of this article is to cover the process of creating hints for a website. Firstly, we'll take a look at how we can create a single hint for a proper website element. Then, we’ll create a sequence of hints to make a guided tour of a website. To create the hints I'll use EnjoyHint. As an example, I’ve made a simple demo using the Bootstrap framework.
EnjoyHint depends on jQuery and it requires a version of the library grater than or equal to version 1.7. Another dependency is KineticJS v5.1.0 which is already included into EnjoyHint, so there’s nothing to worry about.
If you want to check out the source code of the demo, you can visit this GitHub repository.
Why Using EnjoyHint?
EnjoyHint’s main goal is to give you an opportunity to help a user in finding his way through your web pages features. It can be pretty useful in case of a big web application with tons of elements.
You can highlight a single element and add a description to it, or take a user by the hand to show him all the available features one by one. With this library is also possible to change the shape of the highlighted area or to use your own style for the hint text. Here’s a list of its key features:
- Free to use
- Automatic focus and highlighting of the area related to the hint
- Different shapes of the highlighted area
- Hint delay property
- Possibility to resume the interrupted hint sequence
- Cross-browser support
- Support for Android, iOS, and Windows touch screens
With this in mind, it’s now time to write some code to see this library in action.
Continue reading %Hints Creation with EnjoyHint%
A few months ago, I wrote an article that covered Bootstrap’s Affix and ScrollSpy components. This time though, I’ll be focused on a different Bootstrap component: I’ll go through the process of building two simple extensions for the the Bootstrap carousel.
First, I’ll create a full-screen slideshow and then I’ll show you how to randomize the first slide on page load.
But before digging into those extensions, let’s start by creating a carousel based on the default styles.
Building the Carousel
To create the carousel, we’ll take advantage of the basic code for the carousel component that Bootstrap provides:
[code language="html"]
<div id="mycarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#mycarousel" data-slide-to="0" class="active"></li>
<li data-target="#mycarousel" data-slide-to="1"></li>
<li data-target="#mycarousel" data-slide-to="2"></li>
<li data-target="#mycarousel" data-slide-to="3"></li>
<li data-target="#mycarousel" data-slide-to="4"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="1.jpg" data-color="lightblue" alt="First Image">
<div class="carousel-caption">
<h3>First Image</h3>
</div>
</div>
<div class="item">
<img src="2.jpg" data-color="firebrick" alt="Second Image">
<div class="carousel-caption">
<h3>Second Image</h3>
</div>
</div>
<!-- more slides here -->
</div>
<!-- Controls -->
<a class="left carousel-control" href="#mycarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#mycarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
[/code]
Notice that each of our images contains the custom data-color attribute. Later we’ll use its value as a fallback in case the corresponding image fails to load.
The next step is to initialize the carousel via JavaScript and modify the predefined values of the interval and pause configuration properties. Take note that we choose to set the value of the pause property to false because we always want the cycling to be active:
[code language="javascript"]
$('.carousel').carousel({
interval: 6000,
pause: "false"
});
[/code]
Having followed those simple steps (and of course imported the required files), we should now be able to build the first version of the carousel. Here’s how it looks so far:
See the Pen A Basic Bootstrap Carousel by SitePoint (@SitePoint) on CodePen.
Creating Full-screen Slides
At this point we’ll go one step further, converting the existing carousel into a full-screen slideshow. To implement this updated version we have to add some custom jQuery:
Continue reading %A Full Screen Bootstrap Carousel with Random Initial Image%