A Full-screen Bootstrap Carousel with Random Initial Image

In this article, I’m going to build two simple extensions for the Bootstrap carousel. First, I’ll create a full-screen Bootstrap Carousel 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"]

<!– Indicators –>
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<!– Wrapper for slides –>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="1.jpg" data-color="lightblue" alt="First Image">
<div class="carousel-caption d-none d-md-block">
<h5>First Image</h5>
</div>
</div>
<div class="carousel-item">
<!– slide content –>
</div>
<div class="carousel-item">
<!– slide content –>
</div>
<!– more slides –>
</div>
<!– Controls –>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" 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 Basic Bootstrap Carousel by SitePoint (@SitePoint) on CodePen.

Continue reading %A Full-screen Bootstrap Carousel with Random Initial Image%

Link: https://www.sitepoint.com/full-screen-bootstrap-carousel-random-initial-image/

Getting Bootstrap Tabs to Play Nice with Masonry

On the Masonry website, we read that Masonry is …

a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall.

Bootstrap is one of the most widely adopted, open-source, front-end frameworks. Include Bootstrap in your project, and you’ll be able to whip up responsive web pages in no time.
If you tried using Masonry together with the Tabs widget, one of the many JavaScript components Bootstrap has to offer, chances are you’ve stumbled on some kind of annoying behavior.
I did, and this article highlights what the issue is and what you can do to solve it.
Bootstrap Tabs Explained
Bootstrap’s Tabs component includes two key, related pieces: a tabbed navigation element and a number of content panels. On page load, the first panel has the class .active applied to it. This enables the panel to be visible by default. This class is used via JavaScript to toggle the panel’s visibility via the events triggered by the tabbed navigation links: if .active is present the panel is visible, otherwise the panel is hidden.
If you have some web content that’s best presented in individual chunks, rather than crammed all in one spot, this kind of tabs component might come in handy.
Why Masonry?
In some cases, the content inside each panel is suited to being displayed in a responsive grid layout. For instance, a range of products, services, and portfolio items are types of content that can be displayed in grid format.
However, if grid cells are not of the same height, something like what you see below can happen.

A wide gap separates the two rows of content and the layout appears broken.
Nowadays, Bootstrap solves the equal-width issue with the brand new card component, which is based on Flexbox. Just adding the card-deck class to a group of card components is sufficient to achieve equal-width columns.
If you like your cards to be of uneven length, you could use CSS3 Multi Column Layout. (After all, even though there are some browser support bugs, overall it’s quite good.) This underlies the new card columns option that comes packaged with the card component. However, if you still love the nice animation that the Masonry JavaScript library provides out of the box, and its wide browser compatibility, JavaScript is still a viable option in this case.
Setting Up a Demo Page
Getting a demo page up and running helps to show how integrating Bootstrap’s Tabs with Masonry is not as straightforward as one might expect.
This article’s demo page is based on the starter template, available on the Bootstrap website.
Below is the skeleton of the markup for the tabs component:

Top JavaScript Libraries for Making AJAX Calls

AJAX is a set of web development techniques used by client-side frameworks and libraries to make asynchronous HTTP calls to the server. AJAX stands for Asynchronous JavaScript and XML. AJAX used to be a common name in the web development circles and many of the popular JavaScript widgets were built using AJAX. For instance, a particular user interaction such as a button press would invoke an asynchronous call to the server and the server would retrieve data and return it back to the client—all this without reloading the webpage.
A Modern Reintroduction to AJAX
JavaScript has evolved and, today, we have dynamic websites built using front-end libraries and/or frameworks like React, Angular, Vue, etc. The concept of AJAX has also undergone major changes because modern asynchronous JavaScript calls involve retrieving JSON instead of XML. There are many libraries out there that let you make asynchronous calls to the server from your client-side application. Some of them have made their way into the browser standards, whereas others have a large user-base because they are flexible and easy to use. Some of them support promises whereas others use callbacks. In this article, I’ve covered the top 5 AJAX libraries for fetching data from the server.

Link: https://dzone.com/articles/top-javascript-libraries-for-making-ajax-calls?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

jQuery 3.3.1 – fixed dependencies in release tag

We encountered an issue in the release for jQuery 3.3.0, so we’ve immediately released another tag. The code itself is identical, but our release dependencies (only used during release) were added to the dependencies of the jQuery package itself due to the new behavior of npm in version 5+. jQuery 3.3.1 is now recommended if … Continue reading →

Link: http://blog.jquery.com/2018/01/20/jquery-3-3-1-fixed-dependencies-in-release-tag/

jQuery 3.3.0 – A fragrant bouquet of deprecations and…is that a new feature?

It’s been a while since the last jQuery release, but the Core team hasn’t been idle. We’ve got an all new minor release for you, and it’s even got a new feature in it! The .addClass(), .removeClass(), and .toggleClass() methods now accept an array of classes. jQuery(elem).addClass([‘dave’, ‘michał’, ‘oleg’, ‘richard’, ‘jason’, ‘timmy’]); Generally, jQuery is … Continue reading →

Link: http://blog.jquery.com/2018/01/19/jquery-3-3-0-a-fragrant-bouquet-of-deprecations-and-is-that-a-new-feature/

jQuery Code Snippets for Responsive Websites

When building a responsive website or app, jQuery can be of great help. In fact, it can take the whole user experience to a new level. In this article, I have compiled my favorite jQuery tips and tricks for making and enhancing responsive sites.
Scroll to an Element
Scrolling endlessly isn’t the most fun thing ever. This is why it can be very useful to set scrolls so your visitors won’t need to take 10 seconds to reach the info they’re looking for.

Link: https://dzone.com/articles/jquery-code-snippets-for-responsive-websites?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

Why I Like JavaScript

Every programming language has its oddities and challenges. When it comes to JavaScript, it has probably more of those oddities. It’s not the just language itself but also browser support. Different vendors implemented slightly different JavaScript engines for years. It resulted in a ton of challenges. I dealt with these challenges myself. Thanks to jQuery, we had a breath of fresh air. Anyway, this isn’t the end of the story. Over the years, JavaScript improved a lot, really. In this post, I’ll go over JavaScript weirdnesses first and then try to explain why I like JavaScript.
The Weird Parts
I will go directly to the code as it’s better to demonstrate than talk.

Link: https://dzone.com/articles/why-i-like-javascript?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

Is jQuery still relevant?

Remy Sharp:
I’ve been playing with BigQuery and querying HTTP Archive’s dataset … I’ve queried the HTTP Archive and included the top 20 [JavaScript libraries] … jQuery accounts for a massive 83% of libraries found on the web sites.
This corroborates other research, like W3Techs:
jQuery is used by 96.2% of all the websites whose JavaScript library we know. This is 73.1% of all websites.
And BuiltWith that shows it at 88.5% of the top 1,000,000 sites they …

Is jQuery still relevant? is a post from CSS-Tricks

Link: https://remysharp.com/2017/12/15/is-jquery-still-relevant