CSS

Sass what is different between @include and @extend

August 4, 2016 Ning CSS, 0

For my understanding, extend not allowed customization, and include allowed. @extend

%button
  background-color: lightgrey
  &:hover, &:active
    background-color: white

a
  @extend %button

button
  @extend %button

%button

background-color: lightgrey

&:hover, &:active

background-color: white

@extend %button

button

@extend %button

@include

@mixin my-button($size: 15, $color: red) {
  @include inline-block;
  @include border-radius(5px);
  font-size: $size + px;
  background-color: $color;
}
%button {
  @include my-button;
}
%alt-button {
  @include my-button(15, green);
}
%big-button {
  @include my-button(25);
}

@mixin my-button($size: 15, $color: red) {

@include inline-block;

@include border-radius(5px);

font-size: $size + px;

background-color: $color;

}

%button {

@include my-button;

}

%alt-button {

@include my-button(15, green);

}

%big-button {

@include my-button(25);

}

jQuery large pictures with a loading spinner

November 13, 2013 Ning AJAX, CSS, JAVASCRIPT, JQUERY, 0

Basic Version In our basic version, we will have a single div containing a loading spinner and once our large image is loaded (in the background) we will remove the spinner and insert our image. There’s a few ways to approach the loading screen, two of which are: Use a background image on the holder […]

cool jQuery touch slider owl carousel

November 4, 2013 Ning CSS, JQUERY, 1

Here is link http://owlgraphic.com/owlcarousel/ Touch enabled jQuery plugin that lets you create beautiful responsive carousel slider. 1. Load jQuery and include Owl Carousel plugin files To use Owl Carousel, you’ll need to make sure both the Owl and jQuery 1.7 or higher scripts are included.

    <!-- Important Owl stylesheet -->
    <link rel="stylesheet" href="owl-carousel/owl.carousel.css">
     
    <!-- Default Theme -->
    <link rel="stylesheet" href="owl-carousel/owl.theme.css">
     
    <!-- jQuery 1.7+ -->
    <script src="jquery-1.9.1.min.js"></script>
     
    <!-- Include js plugin -->
    <script src="assets/owl-carousel/owl.carousel.js"></script>

2. Set up your HTML You don’t need any […]

Memory Game

July 21, 2013 Ning AJAX, CSS, JAVASCRIPT, JQUERY, MYSQL, PHP, 0

Game link: http://www.maning.ca/ats/memory-game/ Download Demo: http://www.maning.ca/ats/memory-game/memory-game-Demo.zip “Memory game is a card game in which all of the cards are laid face down on a surface and two cards are flipped face up over each turn. The object of the game is to turn over pairs of matching cards.” I used half day to program this […]

ps how to make custom pattern

July 25, 2012 Ning CSS, 0

1. Create a pattern image Fire up a new canvas. It should be small (in terms of height x width). Image you are creating here will duplicate itself to form your pattern in the later stage. For this example, I’ll be using 8×8 pixel canvas, zoomed them up and create a small pattern like this. […]

Hide the Target URL of a Link in Status Bar

March 10, 2012 Ning AJAX, CSS, JAVASCRIPT, 79

There are some instances where you have redirect the user through one page to get them to another page. There is a way to do this stealthily – without letting the user know that there was a redirect. Yes – it sounds evil – but it don’t have to be. Say you have a click […]

JQuery PHP MYSQL login panel example

January 3, 2012 Ning AJAX, CSS, JQUERY, MYSQL, PHP, 1

View demo click here Download demo This is a cool simple login / registration system. It will give you the ability to easily create a member-only area on your site and provide an easy registration process. It is going to be PHP driven and store all the registrations into a MySQL database. To add the […]

Ajax, JQuery, PHP

Ajax Jquery and PHP contact form example

December 31, 2011 Ning AJAX, CSS, JAVASCRIPT, JQUERY, PHP, 1

View demo click here Download demo

<?php

session_name("fancyform");
session_start();


$_SESSION['n1'] = rand(1,20);
$_SESSION['n2'] = rand(1,20);
$_SESSION['expect'] = $_SESSION['n1']+$_SESSION['n2'];


$str='';
if($_SESSION['errStr'])
{
	$str='<div class="error">'.$_SESSION['errStr'].'</div>';
	unset($_SESSION['errStr']);
}

$success='';
if($_SESSION['sent'])
{
	$success='<h1>Thank you!</h1>';
	
	$css='<style type="text/css">#contact-form{display:none;}</style>';
	
	unset($_SESSION['sent']);
}
?>

<?php

session_name("fancyform");

session_start();

$_SESSION['n1'] = rand(1,20);

$_SESSION['n2'] = rand(1,20);

$_SESSION['expect'] = $_SESSION['n1']+$_SESSION['n2'];

$str='';

if($_SESSION['errStr'])

{

$str='<div class="error">'.$_SESSION['errStr'].'</div>';

unset($_SESSION['errStr']);

}

$success='';

if($_SESSION['sent'])

{

$success='<h1>Thank you!</h1>';

$css='<style type="text/css">#contact-form{display:none;}</style>';

unset($_SESSION['sent']);

}

We use the $_SESSION array to populate the values of the input fields. This is done to insure that the data is not lost during page redirects, which occur when the form is submitted to submit.php during the regular form submit. Another important aspect are the classes assigned […]

JQuery gallery with pop up and next button

December 30, 2011 Ning AJAX, CSS, JAVASCRIPT, JQUERY, MYSQL, PHP, 0

View demo click here Download demo PHP The idea is simple – our PHP back-end is going to scan a folder that we’ve set up with our gallery images, and turn it into a fancy CSS & jQuery gallery. The great thing about this strategy is that it is incredibly easy to set up a […]

Twitter and weibo example by PHP JQuery and AJAX

December 29, 2011 Ning AJAX, CSS, JAVASCRIPT, JQUERY, MYSQL, PHP, 7

View demo click here Download demo Creating the DB If you’d like to run a working demo on your own site, you will have to create a MySQL table where all your tweets are going to be stored. You can run the following SQL code through phpMyAdmin (the code is also available in table.sql in […]

CSS