AMPEDUPDESIGNS

CONSULTING CONCEPTS PERSONAL

A small blog.

A Simple Customizable Scroll-to-Top JQuery Plugin


Increasingly, more new sites are deploying a continuous single-page design with links that essentially scroll down to the content/section that a user wants to see.  One way to allow users a way to return to the top of a page is to add a scroll-to-top button which appears once a user scrolls past a certain offset from the top.  When clicked, the user will gracefully scroll back up to the top.  This is especially useful for mobile devices that have smaller screens view

I've created a super lightweight and configurable jquery-scrolltop-button plugin which allo ...
Read More ...
Tags:   project  jquery  scroll top button  plugin  

Unresponsive Footable Table when nested in a hidden tab


Footable is a great responsive table Jquery plugin that uses responsive breakpoints to gracefully collapse columns on different screen sizes.  One place I use Footable is within tabs where I display different tables using Bootstrap Tabs js.  What I found is that Footable doesn't quite work right on hidden tabs, i.e. the table show in the hidden tabs but remain initially unresponsive to the device screen (you could resize the window to trigger a resize event, but if a user is on the phone, this really isn't an option).  From a little snooping ...
Read More ...
Tags:   footable  jquery  bootstrap  tabs  responsive  

A Simple JQuery Keyword Highlight Plugin For Searches


For another project, I had a search bar for a blog, and when a user searched for a word or query term, the site would return a list of blogs containing the keyword being searched.  I wanted to take it a step further and highlight the searched keyword in the blog entry itself -- it's not a new idea but I wanted to extend it to the blog search I was working on.  

What I came up with was a simple JQuery plugin that you can use on any page or site that allows you to specify a target class containing content that you want to search on.  All words matching the keyword you ...
Read More ...
Tags:   Keyword  Search  Highlight  JQuery  Project  

A LIVE link preview window for links on hover over using Jquery and CSS3


For one of my projects, I set out to find a way to display a LIVE preview for links that would display when you hover over the link. It's a novel way to show the user what they're linking to prior to clicking on the link and also provides a little bit of a wow factor. It eliminates the need to create screenshots and you can depend on the view to always be up-to-date since it's a live version.  By simply adding a target class to the link or DOM element you want, you can immediately have a up-to-date preview window.

Here are several examples below:


Hover over this ...
Read More ...
Tags:   Jquery  Dialog  Live Preview  project