Discover solodev/clickable-pop-up-boxes Open Source project

hide-show-fields-form

Improve the user-experience of your forms by adding auto-complete functionality to your address fields, powered by Google Maps.

address-auto-complete

Showcasing your content on the web is more essential than ever but there's so much content and only so much real estate on a web page before the viewer stops scrolling. Web designers and developers have recognized this behavior in website visitors and implement different techniques to display content in the most intuitive way while still providing the volume of content some visitors may require. Your blog may have 1,000 entries but you don't want to show all of them on a single page or it will take an extremely long time to load and cause an information overload that may even increase your bounce rates. In the case of these 1,000 entries developers would likely "lazy load" any entries over a certain integer. In our example, we don't have 1,000 entries so a simple "Load More" and some JavaScript will suffice.

load-more-button

In today’s connected digital age, it’s important to ensure your content is as widely available as possible. Part of this requires making your site’s content available for language translation. By including a translation service, you have effectively expanded your site’s audience and reach.

google-translator

Adding search to your website, powered by Google's Custom Search Engine, adds a powerful dimension to your website. Solodev takes it a step further with some professional styling, making your search bar/page looks as good as the results it delivers.

google-custom-search

Official Solodev AWS Marketplace Launch Pad

aws

booking-form

In this article, we will walk you through building a booking (hotels, flights, rental cars, etc.) form for your website using jQuery UI.

Adding a scroll down anchor button to your website makes it easier for users to navigate through your website without having to manually scroll. This tutorial provides you with the code you need to add an anchor button to your website and the JavaScript to enable scroll down functionality when the button is clicked.

scroll-down-anchor

A mega menu is a drop down that is triggered by hovering over a link or defined area. This dropdown usually shows all options in one main, mega-panel and oftentimes groups related topics into categories. In this article, Solodev will show you how to add a mega menu to your website.

mega-menu

Maps are a great way to leverage your website to drive traffic to your doors. A majority of maps simply show the locations of a given entity as well as an address without any further context or interactivity. In our example, we've designed a map that displays locations you can learn more about by clicking on the location. Clicking on the location triggers a popup with further information related to that specific location. You can add any information you'd like to these popups that make the most sense for your business.

interactive-map

When it comes to content, video is king. It is the most consumed content on the web. If you had to choose from a range of media types to get a message across, a video should always be your first consideration. Visual communication is the top tier form of getting your messaging to stick. While graphics and copy can make the difference between a website visit and a sale, video can go even further. Why not have the best of both worlds? Simply making your hero a video or designing your hero with a graphic overlayed with some copy is the typical approach to homepage hero sections. There is a way to have both and it involves Magnific Popup, a jQuery plugin that displays content when an HTML element is clicked. In our example, the hero image and overlaying copy is still prominent. Our Call-to-Action (CTA), however, is a button. This button does not simply take them to another page with more copy and graphics, it opens a popup video. In this scenario, you can maintain your hero image and overlaying text and provide the option for website visitors to view a video further describing your product or service.

popup-video

infinite-logo-carousel

Twitter has become a standard social media channel for most online brands and Twitter feeds have become increasingly popular on websites. This tutorial aims to teach you how to add some styles to your website's Twitter feed. In order to use this tutorial you will need to navigate to your Twitter account and pull the code for your embeddable widget. Once you have done that we will use HTML and CSS to style the widget to match our own branding. We will explain every change along the way, beginning with Twitter's original embed widget code.

twitter-timeline-embed

Having a mobile responsive footer is essential in the mobile age and this article will walk you through adding a responsive footer to your website.

responsive-footer

Keeping your users and customers up to date and providing a medium for interaction is essential to success on the web. Although the concept sounds great, the design of the blog, and the quality of its content, will determine the success or failure of your blog. This article covers the design of the blog and will provide you with the steps to create a blog for your website.

blog-design

In this article, Solodev will teach you how to add Parallax Images with multiple backgrounds to your website.

parallax

bootstrap-lazy-load

Most sliders on the web rely on third party jQuery plugins to function. In this tutorial, you'll learn to build an animated slider with pure JavaScript.

pure-js-slider

Creating a custom signature is one of those details that can add professionalism to your emails and reinforce your brand. There are, however, complications that can arise when attempting to create a signature due to the intricacies of email clients. Some crafty HTML can help resolve these problems and create a functional email signature.

email-signature

bootstrap-accordions-faqs

Don't neglect the small elements of building a mobile-responsive website. Here's how to craft a collapsible footer to improve your visitors' navigation regardless of what screen they use.

collapsible-footer

Adding animation to elements in your slick slider creates an impressive and dynamic digital experience. Solodev demonstrates how to accomplish this using animate.css

slider-element-animation

transparent-overlay

slick-slider

Learn how to create video popup with Magnific Popup

video-popup

announcements-events

Learn how to create Expanding/collapsing FAQ tabs

expanding-faq-tabs

cookie-based-popup

Anyone with a website normally wants to keep people on the page as long as they possibly can with as few distractions as possible. However, there are moments when it’s necessary for a user to exit your page and visit a third-party organization linked through your website.

external-link-popup

Whether you're allowing users to schedule appointments, book a vacation, or schedule a rental online, using a DateTime picker improves their experience and ensures a standardized submission format.

datetime-picker

Search on the web has gone far beyond simply going to search engines to find information. In order to dig deeper and find content more relevant to search queries, website visitors are increasingly searching through actual websites themselves for that right piece of content they're looking for. To take that a step further, it is possible to add filters to your search inputs so your website visitors can further specify the content they are looking for. This allows you to deliver a better web experience that provides the visitor with the content they are looking for at a much faster rate. In this tutorial, we will teach you how to add a category filter to your search input to provide more relevant search results to website visitors.

search-filter

According to marketing giant HubSpot, 52% of visitors to your website want to see your "about us" page immediately. Your company's about us page says a lot about who you are and will no doubt be seen by at least half of your website's visitors. The design of your website's about us page is also a visual reflection of your company - an opportunity to increase the interest of site visitors - so leave no stone unturned. This article will provide you with an effective about us page design.

about-us

resizable-left-navigation

An animated sticky header helps maintain design integrity as your website loads, and yet preserves needed space while providing essential navigation options as a given user scrolls down the page.

animated-sticky-header

Learn how to add a dropdown navigation to replace your sidebar navigation on mobile devices.

mobile-sidebar-navigation

In this article, Solodev will teach you how to add pagination, an excellent way to navigate large amounts of content, to your website using a jQuery Bootstrap Plugin. Pagination allows you to make large amounts of content easy to find and breaks up several entries or web content into multiple pages, allowing you to toggle through content with ease.

website-pagination

In some cases, websites require an alert box at the top of the page if there is something urgent website visitors must know. If there is an outage in a company's services, a natural disaster, or a very important message, perhaps regarding website maintenance, an alert box is the way to go. In this article, Solodev provides you with a tutorial on adding an alert box to your website.

alert-bar

text-animations-slick-slider

recent-blog-posts

page-navigation-toolbar

cloud-documentation

disappearing-fixed-top-nav

form-posting-to-google-maps

hero-with-video-bg

flyout-bootstrap-modal

Your customers and clients love your brand, and they even admitted it online! Showcase those statements in this stylish testimonial slider tutorial.

testimonial-slider-fullwidth

cms-documentation

Using Slick Slider, we can add slider capabilities to a standard news module so your users can easily browse your most recent content.

realtime-news-slider

Increase social engagement by adding a sticky social share bar to your website. This allows visitors to share content on social media from wherever they are on your website. In this article, Solodev will show you how to add this functionality to your website.

cms

Solodev CMS

sticky-social-share

An additional way to display recent news is through the use of a box and grid based system. Using this method, you can create the needed space to include a news entry's featured image, the article's posting date, and it's title.

recent-news-boxes

An additional method of implementing site search calls for the search form to fade-in and fill the entire screen. This method, while certainly not applicable to every design, does have some benefits. First, the effect largely does not interfere with other design elements. Since the search from appears as a full-screen overlay, you do not have to perfrom any css jiu jitsu to accomodate the new element. Furthermore, with the search form full screen you give clear focus for your end users.

fade-in-search

back arrow How to Create a Parallax Hero Image by Matthieu McClintock A Parallax Hero Image creates a depth and transition effect when scrolling down to the main hero of your page to the content below. The following tutorial shows you how to add a parallax hero image to your website.

parallax-hero

Slider boxes give website managers the ability to showcase more content on a cool rotating visual element. Not only does it catch a visitor’s attention, it also improves UX by giving users the ability to access that content at their own pace by triggering the next slide.

slider-boxes

shopping-cart-dynamic-number

Forms -- they are one of the single most important elements for capturing leads on a website. But some forms are more engaging to your website’s visitors than others. One of the most effective form types are slide out forms. These simple sliders pop out when a visitor clicks a button (i.e. wants to sign up for more information or start a free trial).

slide-out-form

social-icons-with-hover

icon-background-color-on-hover

feature-list-with-fontawesome-icons

Chef Recipes to Launch Solodev CMS

solodev-chef

baguette-photo-gallery

Not all contact us pages are created equal. This tutorial provides instructions to design a beautiful contact us page, using Bootstrap and Font Awesome, which you can customize to your needs.

contact-us-page

There’s a ton of information floating around about the ‘perfect landing page,’ but don’t forget about your website’s most important page -- the pricing page! Design can boost your pricing strategy by a few visual tricks and simple CSS. And while this tutorial isn’t a one-size-fits-all solution, it can definitely help boost your click through rate and (hopefully) your bottom line!

four-pricing-boxes

clickable-bootstrap-rows

bootstrap-form-validation

image-transitions-on-hover

icon-box-slider

In this article, Solodev shows you how to add further ease of navigation to your website using scrollspy, a tool that automatically updates links in your website navigation based on the scroll position of your website.

scrollspy

absolutely-positioned-images

This article will teach you how to add a countdown widget to your website using HTML, CSS, and JavaScript.

countdown-widget

A responsive jQuery slider, sliderPro features touch-swipe, text thumbnails, slide loops, animated layers, and JavaScript breakpoints. sliderPro has emerged as one of the go-to jQuery sliders on the web.

slider-pro

Designing your home page can make or break your success online.

engaging-homepage

hero-text-transitions

The Lunar XP starter theme

lunarxp

It's usually the details that set websites apart. Solodev shows how to add a dynamic state dropdown to your forms using selectize.js so that your users can quickly find their dropdown selection.

dynamic-state-dropdown

contact-page

A major trend in web design is parallax scrolling, which involves the background moving at a slower rate to the foreground thus creating a 3D effect as you scroll down the page. Solodev shows how to incorporate this subtle element of depth to the background images of your web pages.

parallax-scrolling

A transitioning sticky navigation allows you to display two different navigations based on where the viewer is on the page. This article gives you the code to add a sticky transitioning navigation to your website which you can customize to meet your needs.

transitioning-nav

bootstrap-tabs-portfolio

Solodev's customized Slick Slider with agency approved styling. Feel free to use in your web design project for a professional and responsive homepage slider.

homepage-slick-slider

covid-hero-banner

gdpr-banner-consent

image-filling-page-margins

clickable-map-overlay

jquery-form-validation

Learn how to create images with text overlays

news-images-with-text-overlays

fontawesome-slickslider-links

Sometimes a graphic isn't enough for the hero of your homepage. In this article, Solodev shows you how to add a hero video to your homepage.

hero-video

Solodev's expandable side navigation, also known as a Hamburger Menu, adds a unique design aesthetic while preparing your site for the need for responsive solutions.

side-navigation-popout

In Part III of our User Portal Series, we will walk you through building a forgot password page. Your forgot password page is likely to receive more traffic than you may anticipate so make it as intuitive and user friendly as possible.

forgot-password

One of the biggest tricks to successful mobile design is ensuring that your navigation remains functional and user-friendly even if the design changes.

horizontal-nav-mobile

We're obsessed with Star Wars: The Last Jedi. A LEGO Darth Vader hangs out between desks; we play the soundtrack over our office speakers; and for our Christmas party, we saw The Last Jedi in theaters. We're also obsessed enough to write a Star Wars-themed post on adding parallax with multiple backgrounds to your website using jQuery Parallax by Ian Lunn.

star-wars-the-last-parallax

Having a prominent slider is often key to implementing a visually exceptional design. It must, however, be balanced with the need to maintain your site's performance. Solodev shows how to lazy load images using built in Slick Slider functions.

lazy-loading-images-with-slick-slider

Contemporary web design often blends fixed-width containers with full-width sectionals. By utilizing a full-width sectional, you can highlight specific content pieces, reinforced by an appropriate image that captures your audience's attention. Determining which content to place in a fixed-width container or a full-width sectional is mainly dependent on two things - the importance of the content and messaging as well as its supporting visual medium (graphic, video, icons, slider). Determining what content should be placed where should feel intuitive to you, simply align your content and messaging placement with its level of importance to your organizational goals.

full-width-sectional

Images are some of the specific drivers of increased page load times. With Echo.js, you can institute graceful lazy loading that significantly improves your sites functional accessibility.

lazy-load-images-with-echo-js

Oftentimes, hero text can be boring or perhaps you have more to say than just one fragment of a sentence. In some cases, you may provide multiple services or products that can't be summed up in one header. That's where animated hero text comes in. Using the example in the tutorial below, you can have your hero text alternate to describe different aspects of your business. In this article, Solodev will show you how to add animated hero text to your website using jQuery.

animated-hero-text

Forms are only as good as the data they accept and that's where validation comes in. There are various kinds of validation. In one case, you may just want to make sure the email input was filled out. In another, you want it filled out and to make sure it is valid and contains an @ symbol. What you don't see often is telephone number validation because it's difficult. Not anymore. This tutorial will teach you how to add validation to your phone number input fields using jQuery.

phone-validation

In Part II of our User Portal Series, we will walk you through building a login page. Your login page is the most frequented web page of your website so make it as intuitive and user friendly as possible. Solodev provides you with the code required to build an intuitive login page for your website.

A slide down menu provides more in-depth navigation than offered by traditional nav bars. By simply clicking a button, your top nav gives way to a more granular view of your website's navigation.

100

slide-menu