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  

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