jQuery Find and Replace String without HTML ID
I’m going to begin posting more day to day pieces of projects I’m working on, in particular solutions to problems I come across along the way.
I’ve been updating an e-commerce checkout page for a client, but since the store uses a hosted solution I often come across parts of pages I have no control over the HTML or content strings. For example, this specific hosted solution allows gift wrapping with a gift message input field, but my client only wishes to provide a gift message, no wrapping. Unfortunately the h4 element always says ‘Gift Wrap’ regardless if wrapping is turned off and messaging turned on. Therefore I used a combination of the jQuery contains selector with the jQuery replaceWith function to replace ‘Gift Wrap’ with ‘Gift Message’. Like so:
$(document).ready(function() { $("h4:contains('Wrap')").replaceWith("<h4>Gift Message</h4>"); });
I could have also used JavaScript find and replace by element ID, but the string I was looking to replace did not have a unique element ID that I could access. The jQuery solution above works around not using an HTML ID and instead focuses on the specific text.
Parallax Scrolling Portfolio Redesign
Finally got around to a portfolio spruce up, transforming my former website homepage into a single page parallax scrolling website. Since my new homepage only features a small selection of my web and graphic design work (along with some projects from architecture school), I’ll hopefully be able to focus some time this spring on a slight continued redesign of my remaining portfolio work in its current location for potential freelance clients interested in seeing my full range of work.
My new homepage is created using lots of custom JavaScript to attain the parallax effect, layers moving at different speeds to give the illusion of depth. Some jQuery plugins I am also using are QueryLoader v2 as a preloader, jQuery Cycle Plugin for a simple fade slideshow, and Slides as an additional slideshow plugin for my physical architecture models.
Kennedy Center Website Updates
Lots of exciting website updates were launched last week with the Washington National Opera and Kennedy Center affiliation on July 1st… which were also the primary reason why my blog has taken a back seat for the past month.
Two primary updates (among many) in which I focused on their design and implementation were the new contribute pages for Kennedy Center, WNO, and NSO; and the new event pages. Both gave me the opportunity to further my jQuery and JavaScript knowledge as well as get more familiar with ColdFusion.
JavaScript – Scrolling Sidebar & Offset
Learning JavaScript little by little, thought I’d start posting on my discoveries.
Early this week I was working on a secondary side navigation similar to this example. The accompany code tutorial works great, but the main problem I ran into was that the page content was separated via jQuery tabs. Also, the scrolling side navigation was located in an initially hidden tab via display=none (see diagrams below).
Continue reading “JavaScript – Scrolling Sidebar & Offset” »