• Skip to primary navigation
  • Skip to main content

Sogwap Sandbox

Test Site

Menu

  • Home
    • Sample Page
  • Beaver Pages
    • Alt Home Page
    • Cobalt Sample Demo
    • MstrClss
    • BB 100% Height Demo
    • FullPage JS

The design goal for this page is to create a full width slider that sets above the header.

As the user scrolls down, the header/logo/menu will stick to the top of the page.

Several other element design goals include: the menu/button at the first break point appear inline with the logo.

 

The following is filler content

Scroll down after 5 seconds

By Info | August 27, 2018

This is content would be place before your main header Scroll down after 5 seconds Main Heading Content…

Gravity Forms Radio Buttons

By Info | July 27, 2018

GF & Flexbox

By Info | July 21, 2018

My Fine Gallery

By Michael | September 8, 2017

Using BB Gallery Module using Lightbox option Notice the light box images are limited to 1024 pixel width Using WordPress Gallery with custom jQuery Using the standard WordPress gallery, (created within Text Editor module) popup images display Full-size. jQuery shown below. Here’s my jQuery jQuery( function(){ jQuery( ‘.gallery-icon a’ ).magnificPopup({ type: ‘image’, gallery: {enabled: true}, …
Your custom read more text

Add Floating menu

By Michael | September 4, 2017

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

HTML in Excerpts

By Michael | July 17, 2017

A Paragraph

Another Paragraph

Filler code with
a break tag
Lets try a Strong Tag

How about an H1 Tag

How about an H2 Tag

How about an H3 Tag

GF Adaptive Placeholder #2

By Michael | June 12, 2017

Here’s the JQuery: jQuery(‘li.gfield input’).removeAttr(‘placeholder’); jQuery(‘li.gfield textarea’).removeAttr(‘placeholder’); jQuery(document).ready(function($) { $(“input[type=’text’], textarea”).focus(function(){ $(this).parents(“li”).removeClass(“Blur”); $(this).parents(“li”).addClass(“Focus”); }).blur(function(){ $(this).parents(“li”).removeClass(“Focus”); $(this).parents(“li”).addClass(“Blur”); }) $( “input[type=’text’], textarea” ).change(function() { if ( $( this ).is(“:valid”) ) { $(this).parents(“li”).addClass(“Valid”); } else { $(this).parents(“li”).removeClass(“Valid”); } //$(this).parents(“li”).toggleClass(“Valid”); }); $( “input[type=’text’], textarea” ).each(function( i ) { if ( $( this ).is(“:valid”) ) { $(this).parents(“li”).addClass(“Valid-1”); } else { …
Your custom read more text

GF Adaptive Placeholder

By Michael | June 10, 2017

Demo of Gravity Forms Adaptive Placeholders. This shows use of both labels and placeholder. Note label placed inline of input field. The advantage here is that both labels and normal placeholder text fits in compact area, although slightly clutter. Done entirely with CSS, this design only work with solid background and input fields.

Titles with Tags

By Michael | April 14, 2017

TrendingNOW Trending NOW TrendingNOW Trending NOW

Test Post

By Michael | March 7, 2017

No Images Here

  • 1
  • 2
  • 3
  • …
  • 7
  • Next »