Archive for the ‘CSS’ Category

lightSlider drag opens magnificPopup stopped

Saturday, April 11th, 2020

We’re using lightSlider for just that, a photo slider.

We’re using magnificPopup in conjunction with lightSlider to open an image Popup Gallery.

The trouble is, dragging lightSlider (which is nice), fires the magnificPopup ondragend (not desired).

Solution: Checked for a body class before firing the magnificPopup. If it’s still there, don’t even attach it. The class is added by the lightslider library change below, onmouseout, and removed again with a slight delay onmouseup.


<a onclick="
if( jQuery('body').hasClass('dragging') ){								console.log('dragging now');
}else{{									items: MyArrayOfImagesToFeedToMagnific,									type: 'image',									gallery: {								      enabled: true								    },														callbacks: {										beforeOpen: function() {
// unused					   										 },									open: function() {										
// unused								},
}, ` + i + `); // i (index of the MyArrayOfImagesToFeedToMagnific Array) is the item the visitor clicked on


$(window).on('mousemove', function (e) {
if (isDraging) {

// Added

endCoords = (settings.vertical === true) ? e.pageY : e.pageX;
$this.touchMove(endCoords, startCoords);
$(window).on('mouseup', function (e) {
if (isDraging) {

// Added
}, 500);

isDraging = false;

Electron ReactJS PHP Oracle Service Cloud Multiple Interfaces Quick Deploy via Curl

Friday, December 1st, 2017


Electron application boilerplate based on ReactReduxReact RouterWebpackReact Transform HMR for rapid application development


  • Note: requires a node version >= 6 and an npm version >= 3.

First, clone the repo via git

Install dependencies with yarn

yarn install

:bulb: In order to remove boilerplate sample code, simply run yarn run cleanup. After this is run, the initial sample boilerplate code will be removed in order for a clean project for starting custom dev

$ yarn run dev

CSS Modules

This boilerplate out of the box is configured to use css-modules.

All .css file extensions will use css-modules unless it has .global.css.

If you need global styles, stylesheets with .global.css will not go through the css-modules loader. e.g.

If you want to import global css libraries (like bootstrap), you can just write the following code in .global.css:

@import "~bootstrap/dist/css/bootstrap.css";


To package apps for the local platform:

$ yarn run package

To package apps for all platforms:


$ yarn run package-all

To package apps with options:

$ yarn run package -- --[option]

Further commands

To run the application without packaging run

$ yarn run build
$ yarn start

To run End-to-End Test

$ yarn run build
$ yarn run test-e2e


See electron-builder CLI Usage

Module Structure

This boilerplate uses a two package.json structure.

  1. If the module is native to a platform or otherwise should be included with the published package (i.e. bcrypt, openbci), it should be listed under dependencies in ./app/package.json.
  2. If a module is imported by another module, include it in dependencies in ./package.json. See this ESLint rule.
  3. Otherwise, modules used for building, testing and debugging should be included in devDependencies in ./package.json.


Styling radio buttons

Monday, December 21st, 2015

Hide/replace radio buttons


[type="radio"] {
  border: 0; 
  clip: rect(0 0 0 0); 
  height: 1px; margin: -1px; 
  overflow: hidden; 
  padding: 0; 
  position: absolute; 
  width: 1px;

[type="radio"] + span {
  display: block;

/* the basic, unchecked style */
[type="radio"] + span:before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.25em;
  border-radius: .5em;
  border: 0.15em solid @base-gray-medium;
  box-shadow: 0 0 0 0.1em @base-gray-medium;
  margin-right: 0.75em;
  transition: 0.5s ease all;

/* the checked style using the :checked pseudo class */
[type="radio"]:checked + span:before {
  background: red;
  box-shadow: 0 0 0 0.1em @base-gray-medium;

/* never forget focus styling */
[type="radio"]:focus + span:after {
  content: '\0020\2190';
  font-size: 1.5em;
  line-height: 1;
  vertical-align: -0.125em;

Handlebars template markup:

<script id="dealer-list-template" type="text/x-handlebars-template">
	<label for="dealer{{id}}" class="col-xs-10 dealerItem">
		<input type="radio" value="{{title}}" name="dealers" id="dealer{{id}}">
			<span class="dealerTitle">{{title}}</span>
			<span class="dealerAddress">{{address}}</span>
	<div class="col-xs-2 distance">{{distance}}</div>

Foundation 5 Framework Animate Accordion (multiple, with dynamic AJAX content using reflow, and also nested)

Monday, January 27th, 2014

Out of the box there is no animation on these.  I tried for a CSS3 transition but couldn’t get one. If anyone finds one do tell. Anyhow, my current project has 3 accordion levels, the main off-canvas accordion, a second one loaded dynamically via AJAX into the main content area, and third level of accordions nested in each of the 2nd level accordions.

First, I gave them each an id, so that I could address them easily and individually:

<dl class=”accordion firstLevelAccordions” data-accordion> (in the ‘off-canvas’ left)

<dl class=’accordion secondLevelAccordions’ data-accordion> (in the main content right section, content thereof loaded dynamically via AJAX)

<dl class=’accordion thirdLevelAccordions’ data-accordion> (this one nested inside the secondLevelAccordions)

After the dynamic content load, Foundation makes you reflow to find/activate the new content:


The initialization of each accordion (you could merge these into one function, or parameter-ize the class piece, but for simplicity’s sake, this works just fine):

$(function(){ // onready

// first level off-canvas menu accordions
$(document).on(“click”, “.firstLevelAccordions > dd:not(‘.active’) > a”, function (event) {
$(“.firstLevelAccordions >”).removeClass(‘active’).children(“.content”).slideUp(1000);

$(document).on(“click”, “.firstLevelAccordions > > a”, function (event) {
$(“.firstLevelAccordions >”).removeClass(‘active’).children(“.content”).slideUp(1000);

// second level article list/detail accordions
$(document).on(“click”, “.secondLevelAccordions > dd:not(‘.active’) > a”, function (event) {
$(“.secondLevelAccordions >”).removeClass(‘active’).children(“.content”).slideUp(1000);

$(document).on(“click”, “.secondLevelAccordions > > a”, function (event) {
$(“.secondLevelAccordions >”).removeClass(‘active’).children(“.content”).slideUp(1000);

// third level nested accordions
$(document).on(“click”, “.thirdLevelAccordions > dd:not(‘.active’) > a”, function (event) {
$(“.thirdLevelAccordions >”).removeClass(‘active’).children(“.content”).slideUp(1000);

$(document).on(“click”, “.thirdLevelAccordions > > a”, function (event) {
$(“.thirdLevelAccordions >”).removeClass(‘active’).children(“.content”).slideUp(1000);


jQuery .hover change div background-position example

Wednesday, November 16th, 2011

example for reference:

backgroundPosition: ‘0px 0px’
}, function(){
backgroundPosition: ‘0px 30px’

CSS !important override

Tuesday, February 1st, 2011

A rule that has the !important property will always be applied no matter where that rule appears in the CSS document.


p { color: #ff0000 !important; }

CSS text-transform

Tuesday, February 1st, 2011


also consider:

CSS pseudo elements & pseudo classes

Tuesday, February 1st, 2011

CSS Pseudo Elements

Adds content after an element

Adds content before an element

Adds a style to the first character of a text

Adds a style to the first line of a text


Posted on 5 Oct 2009, 17:00 – Category: CSS

Pseudo Classes

Adds a style to an element that is activated

Adds a style to an element that is the first child of another element

Adds a style to an element that has keyboard input focus

Adds a style to an element when you mouse over it

Adds a style to an element with a specific lang attribute

Adds a style to an unvisited link

Adds a style to a visited link

CSS em

Tuesday, February 1st, 2011

h1 {font-size:2.5em} /* 40px/16=2.5em */
h2 {font-size:1.875em} /* 30px/16=1.875em */
p {font-size:0.875em} /* 14px/16=0.875em */

I always like to have a nice simple AJAX example on hand, you never know…

Tuesday, July 27th, 2010



<script type=”text/javascript”>
function showHint(str)
if (str.length==0)
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
{// code for IE6, IE5
xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);
if (xmlhttp.readyState==4 && xmlhttp.status==200)

<p><b>Start typing a name in the input field below:</b></p>
First name: <input type=”text” onkeyup=”showHint(this.value)” size=”20″ />
<p>Suggestions: <span id=”txtHint”></span></p>



// Fill up array with names

//get the q parameter from URL

//lookup all hints from array if length of q>0
if (strlen($q) > 0)
for($i=0; $i<count($a); $i++)
if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
if ($hint==””)
$hint=$hint.” , “.$a[$i];

// Set output to “no suggestion” if no hint were found
// or to the correct values
if ($hint == “”)
$response=”no suggestion”;

//output the response
echo $response;

CSS link rollover class change

Monday, March 8th, 2010

<a onMouseOver=”this.className=’on'” onMouseOut=”this.className=’off'” href=”10_9_08 MEETING.mp3″>October 9, 2008</a>

Inline Javascript CSS properties

Monday, March 1st, 2010

Inline Javascript CSS properties

dash replaced by capital


style=”color:#FFFFFF text-decoration:underline;”