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.

Fix:

<a onclick="
if( jQuery('body').hasClass('dragging') ){								console.log('dragging now');
}else{
jQuery.magnificPopup.open({									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
}">

lightslider.js

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

// Added
$('body').addClass('dragging');

endCoords = (settings.vertical === true) ? e.pageY : e.pageX;
$this.touchMove(endCoords, startCoords);
}
});
$(window).on('mouseup', function (e) {
if (isDraging) {
$slide.find('.lightSlider').removeClass('lsGrabbing').addClass('lsGrab');

// Added
setTimeout(function(){
$('body').removeClass('dragging');
}, 500);

isDraging = false;
...

quick-deploy

Electron application boilerplate based on React, Redux, React Router, Webpack, React Transform HMR for rapid application development

Install

• 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. app.global.css

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";

Packaging

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

Options

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.

Hide/replace radio buttons

CSS:

[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>
	</label>
	<div class="col-xs-2 distance">{{distance}}</div>
</script>

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:

$(document).foundation(‘reflow’);

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 > dd.active”).removeClass(‘active’).children(“.content”).slideUp(1000);
$(this).parent().addClass(‘active’).children(“.content”).slideToggle(1000);
})

$(document).on(“click”, “.firstLevelAccordions > dd.active > a”, function (event) {
$(“.firstLevelAccordions > dd.active”).removeClass(‘active’).children(“.content”).slideUp(1000);
$(this).parent().removeClass(‘active’);//.find(“.content”).slideToggle(“fast”);
})

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

$(document).on(“click”, “.secondLevelAccordions > dd.active > a”, function (event) {
$(“.secondLevelAccordions > dd.active”).removeClass(‘active’).children(“.content”).slideUp(1000);
$(this).parent().removeClass(‘active’);//.find(“.content”).slideToggle(“fast”);
})

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

$(document).on(“click”, “.thirdLevelAccordions > dd.active > a”, function (event) {
$(“.thirdLevelAccordions > dd.active”).removeClass(‘active’).children(“.content”).slideUp(1000);
$(this).parent().removeClass(‘active’);//.find(“.content”).slideToggle(“fast”);
})

});

example for reference:

$(“#formButtonSubmit“).hover(function(){
$(this).css({
backgroundPosition: ‘0px 0px’
});
}, function(){
$(this).css({
backgroundPosition: ‘0px 30px’
});
});

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

example:

p { color: #ff0000 !important; }

{text-transform:uppercase}
{text-transform:capitalize}
{text-transform:lowercase}

also consider:
{font-variant:small-caps}

CSS Pseudo Elements

:after
Adds content after an element

:before
Adds content before an element

:first-letter
Adds a style to the first character of a text

:first-line
Adds a style to the first line of a text

example:
h1:after
{
content:url(smiley.gif);
}

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

Pseudo Classes

:active
Adds a style to an element that is activated

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

:focus
Adds a style to an element that has keyboard input focus

:hover
Adds a style to an element when you mouse over it

:lang
Adds a style to an element with a specific lang attribute

:link
Adds a style to an unvisited link

:visited
Adds a style to a visited link

pixels/16=em
example:
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 */

reference:

http://w3schools.com/php/php_ajax_php.asp

HTML:

<html>
<head>
<script type=”text/javascript”>
function showHint(str)
{
if (str.length==0)
{
document.getElementById(“txtHint”).innerHTML=””;
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById(“txtHint”).innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open(“GET”,”gethint.php?q=”+str,true);
xmlhttp.send();
}
</script>
</head
<body>

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

</body>
</html>

Script:

<?php
// Fill up array with names
$a[]=”Anna”;
$a[]=”Brittany”;
$a[]=”Cinderella”;
$a[]=”Diana”;
$a[]=”Eva”;
$a[]=”Fiona”;
$a[]=”Gunda”;
$a[]=”Hege”;
$a[]=”Inga”;
$a[]=”Johanna”;
$a[]=”Kitty”;
$a[]=”Linda”;
$a[]=”Nina”;
$a[]=”Ophelia”;
$a[]=”Petunia”;
$a[]=”Amanda”;
$a[]=”Raquel”;
$a[]=”Cindy”;
$a[]=”Doris”;
$a[]=”Eve”;
$a[]=”Evita”;
$a[]=”Sunniva”;
$a[]=”Tove”;
$a[]=”Unni”;
$a[]=”Violet”;
$a[]=”Liza”;
$a[]=”Elizabeth”;
$a[]=”Ellen”;
$a[]=”Wenche”;
$a[]=”Vicky”;

//get the q parameter from URL
$q=$_GET[“q”];

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

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

//output the response
echo $response;
?>

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

Inline Javascript CSS properties

dash replaced by capital

<a
href=”#”
onmouseover=”this.style.textDecoration=’none'”
onmouseout=”this.style.textDecoration=’underline'”
style=”color:#FFFFFF text-decoration:underline;”
>
Details
</a>