Decent Image Scraps: Ramadan Mubarak

Decent Image Scraps: Ramadan Mubarak: html code <center><a href="http://decentscraps.blogspot.com"><img src="http://3.bp.blogspot.com/_ewIxMRe5hLU/T...

Commentaires

NetKontoret - School - JavaScript - Samplepage - 4 button menu

SCHOOL - JavaScript -
Samplepage - Buttons

Sample of four buttons animated with javascript.

To the left you see four buttons.

Moving the mouse over them will cause each to change.

If you click any of the buttons you will be taken back to the javascript-page.

Below is the entire code for this page. It shows how the code on the javascriptpage,
can easily be used for making more than just a single button animated.

Choose View-->Pagesource to view the source of this page in Netscape 4.

Choose View-->Source to view the source of this page in Internet Explorer 4.

Easy Notification

Easy Notification plugin: Demo 1

This example is using default values.

Usage

$(function(){		   
    $.easyNotification();		
});

back to the article

Easy Notification plugin is brought to you by Css Globe, Easy front-end framework and supported by Css Templates by Templatica

Easy Notification

Easy Notification plugin: Demo 2

Easy notification triggered by event.

Click here to show notification!

Usage

$(function(){		   
    $('#clickable').click(function(){ 
        $.easyNotification('The paragraph has been clicked!'); 
    })
});

back to the article

Easy Notification plugin is brought to you by Css Globe, Easy front-end framework and supported by Css Templates by Templatica

Easy Notification

Easy Notification plugin: Demo 3

Cookie based notifications. Notification will only show on first page visit. If you don't see the notification above, you have already visited this page.

Usage

$(function(){		   
    $.easyNotification({
        cookieEnable: true,
        text: 'Cookie enabled notification. This is the only time you will see the notification!'
    }); 
});

back to the article

Easy Notification plugin is brought to you by Css Globe, Easy front-end framework and supported by Css Templates by Templatica

CSS Calculator

CSS Calculator

Start from left to right and use the up and down arrows to show a number from 0 - 9.
Once you have selected your number then click the number itself and the square will turn orange
Move to the middle box and again use the arrows to select the number to add and once chosen click the number itself
and the result will be shown in the box on the right

The sequence only works from left to right and you must click each box in turn
(Doesn't work in Opera or IE6).

0
1
2
3
4
5
6
7
8
9

+

0
1
2
3
4
5
6
7
8
9

0
1
2
3
4
5
6
7

=

0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

The CSS3 Matrix Construction Set

The Matrix Construction Set

What is this? Hide UI

Advanced

	From	To
Point	(, )	(, )
Point	(-, )	(, )
Point	(, -)	(, )
Point	(-, -)	(, )

I want to use 3D transforms. Show Vendor Prefixes Change HTML and CSS

Using 3D transforms will allow greater control over the transform, but fonts may appear blocky compared to 2D transforms unless the object you are transforming is physically bigger that the size you are transforming to. The show vendor prefixes option will guarentee your transforms will work even on older browsers and devices (e.g. old iPhone and Android browsers). Change HTML and CSS will allow you to customize the HTML and CSS of the transformed objects.

Unfortunately, your browser doesn't support 3D transforms, so you will not be able to use this tool to manipulate them. Please upgrade your browser if you want to use this feature.

CSS Transform Code

Diagram

This is a block element.

This is a block element.

Unfortunately, this tool only works in browsers that support transform-origin (which doesn't include any present version of IE) and HTML5 Drag and Drop (which excludes Opera at the moment). When I update cssSandpaper with a transform-origin polyfill, I'll refactor this tool to use it so IE will work. Opera users will have to wait for HTML5 Drag and Drop support in the future.

Note: we only allow basic HTML here (e.g. no <script> tags) to avoid XSS attacks. See the Sanitize.js recipe we use for more information.

HTML Content	<p>This is a block element.</p>
CSS Content

test-cors.org

test-cors.org

Use this page to test CORS requests. You can either send the CORS request to a remote server (to test if CORS is supported), or send the CORS request to a test server (to explore certain features of CORS). Send feedback or browse the source here: https://github.com/monsur/test-cors.org.

Results
Code

var createCORSRequest = function(method, url) {
  var xhr = new XMLHttpRequest();
  if ("withCredentials" in xhr) {
    // Most browsers.
    xhr.open(method, url, true);
  } else if (typeof XDomainRequest != "undefined") {
    // IE8 & IE9
    xhr = new XDomainRequest();
    xhr.open(method, url);
  } else {
    // CORS not supported.
    xhr = null;
  }
  return xhr;
};

var url = '';
var method = '';
var xhr = createCORSRequest(method, url);

xhr.onload = function() {
  // Success code goes here.
};

xhr.onerror = function() {
  // Error code goes here.
};

xhr.send();

Ask me

Ask DRM REAL questions about Liquid
Format: "How can I use Liquid?"

<b>Sorry</b><br/><br/> I couldn't dig up anything, sorry.<br/> I was designed to answer questions about <b>Liquid</b>, but I can refer you to somebody who might know more on that subject on this live chat.<br/><br/> <a href="http://forums.webdeveloper.com">WebDeveloper Forums</a> <br /> JavaScripts.com - Your place for free JavaScripts. Enjoy! <b>Details</b><br/><br/> This technology depends on clientside XML, and is W3C-compatible, but doesn't support namespaces as of yet.<br/> This is only version 1.1, so we will add support for this later.<br/> Scripting <b>Liquid</b> is also compatible with the standards set by ECMA and DOM. <b>Design</b><br/><br/> This technology allows for any type of arcade-games to be created.<br/> Some games will require some scripting to adjust or organize the elements, but in most cases this wont be needed.<br/> The rights for these games belongs to you, the author, and we claim no ownership of these in any way. <b>Technology</b><br/><br/> This technology allows for multiplayer-modes since it's easy to hook up to a server.<br /> To do this, however, you'll need a commercial lincense.<br /> Flash and java is also compatible with this technology, and even adds to the strengths of both.<br /> This is also included in the commercial license.<br /> Also, note that <b>Liquid</b> is best run with <b>MIO</b>, which includes the resource-files, and in this format, <b>Liquid</b> handles sound very well and wont experience any problems with preloads. <b>Liquid</b><br/><br/> This is a new markup language that is already supported by your browser.<br/> It's defined for sophisticated animations and interactive 2D-games.<br/> (also known as arcade-games) <b>Nom</b><br/><br/> This is the <b>Node Object Model</b>, and you can tell by the name that it is using nodes as objects, data-objects, to be specific.<br/> The nodes are used to define contexts for the unique type of processing that runs <b>Liquid</b>, which we usually refers to as 'slicing'.<br/> It's like a poor mans version of multithreading.:-)<br/> <b>Extending Liquid</b><br/><br/> This is done using a version of javascript, that has been slightly tweaked to work with <b>Liquids</b> behaviour-model.<br/> <b>Rights and availability</b><br/><br/> <b>Liquid</b> and/or <b>DRM</b> are both free to use, but neither are open source.<br/> There is a commercial license for those who wishes to use it in commercial webapplications, and/or wish to add their own custom-defined elements to the collection. <b>About Liquid</b><br/><br/> <b>Liquid</b> is about creating animations and 2D-games real fast.<br/> By using XML, it's portable to other platforms as well. <b>About Me</b><br/><br/> I'm a <b>Dynamic Reply Mechanism</b> (DRM), and my purpose is to analyze and respond to your sentences and word-structure, and see if I happen to have anything of interest in my (currently very small) database corresponding to that. <b>DRM data</b><br/><br/> DRM means <b>Dynamic Reply Mechanism</b>.<br/> I was created the 25th, Mar, 2003<br/> I'm pretty smart already, but I am growing very fast now.<br/> My database is to small at this time, but it's going to be expanded before the end of Mars, according to my creator. <b>Adding Liquid</b><br/><br/> You simple add the required meta-tag in the documents header, looking like this:<br/><br/> <br/><br/> And then add the script-link that is required also:<br/><br/> <script src="//forums.webdeveloper.com"></script><br/><br/> And once this is done, you are all set to start coding.<br/> A common tag is:<br/><br/> <move x="1" y="1" >Moving text</move>

My web page

Tested under IE6 and Mozilla Firefox 1.0.3.

These four div elements were faded in/out individually by four simple JavaScript functions.

Syntax: fade(element id,time increment, "in" or "out");
The default value for the fade time is about 30 89 milisecond intervals; for the "in" or "out" values the default is "out", so the only real value that you have to set is the element's id that you want to fade. The others are optional.
NOTE: Be sure to set the css width property of the element you want to fade to a value before using the fade() function so it will work.

element 1 fades in at 100 89 milisecond increments

element 2 fades out at 50 89 milisecond increments

element 3 fades out at 20 89 milisecond increments

element 4 fades in at 20 89 milisecond increments

filter

Stretch filter

Stretch filter

Using:
HTML:	<ELEMENT STYLE="filter:progid:DXImageTransform.Microsoft.Stretch(sProperties)">
Script:	object.style.filter = "progid:DXImageTransform.Microsoft.Stretch(sProperties)"
sProperties
Duration:	Sets or returns duration of transformation in seconds.
StretchStyle:	Sets or returns the method of substituting for old maintenance of element of page new. For property the followings values are accessible: � Hide - new maintenance of element crawls on old on the left on a right (default value); � Spin - new maintenance of element of page crawls on old from the middle of element to to by sides; � Push is new maintenance of element of page moved apart from the left side, squeezes old maintenance.

Example using Stratch filter

A newer Mustang.

A modern Camaro.

An oldie but a goodie!

More old cars.

A good rendering of a classic race car.

If you find this demo useful, please consider donating $1 dollar for a coffee or purchasing one of my songs from iTunes.com or Amazon.com for only 0.99 cents each. I have also released CDs with my band Ivory Knight and Annihilator main-man Jeff Waters.

Rob uses and recommends MochaHost, which provides Web Hosting for as low as $1.95 per month, as well as unlimited emails and disk space!

A newer Mustang.

A modern Camaro.

An oldie but a goodie!

More old cars.

A good rendering of a classic race car.

If you find this demo useful, please consider donating $1 dollar for a coffee or purchasing one of my songs from iTunes.com or Amazon.com for only 0.99 cents each. I have also released CDs with my band Ivory Knight and Annihilator main-man Jeff Waters.

Rob uses and recommends MochaHost, which provides Web Hosting for as low as $1.95 per month, as well as unlimited emails and disk space!

Swipebox | A touchable jQuery lightbox

Swipebox.

A touchable jQuery lightbox

What is Swipebox ?
- Main Features
- Compatibility
Try it
Basic Usage
Advanced
Download

What is Swipebox ?

Swipebox is a jQuery "lightbox" plugin for desktop, mobile and tablet.

Main Features

Swipe gestures for mobile
Keyboard Navigation for desktop
CSS transitions with jQuery fallback
Retina support for UI icons
Easy CSS customization

Compatibility

Chrome, Safari, Firefox, Opera, IE9+, IOS4+, Android, windows phone.

Basic Usage

Javascript

Include jquery and the swipebox script in your head tags or right before your body closing tag.

<script src="lib/jquery-2.0.3.js"></script>
<script src="src/js/jquery.swipebox.js"></script>

CSS

Include the swipebox CSS style in your head tags.

<link rel="stylesheet" href="src/css/swipebox.css">

HTML

Use a specific class for your links and use the title attribute as caption.

<a href="big/image.jpg" class="swipebox" title="My Caption">
<img src="small/image.jpg" alt="image">
</a>

Fire the plugin

Bind the swipebox behaviour on every link with the "swipebox" class.

<script type="text/javascript">
;( function( $ ) {

	$( '.swipebox' ).swipebox();

} )( jQuery );
</script>

Advanced

Gallery

You can add a rel attribute to your links to seperate your galleries.

<!-- Gallery 1 -->
<a rel="gallery-1" href="big/image1.jpg" class="swipebox">
	<img src="small/image1.jpg" alt="image">
</a>
<a rel="gallery-1" href="big/image2.jpg" class="swipebox">
	<img src="small/image2.jpg" alt="image">
</a>
<!-- Gallery 2 -->
<a rel="gallery-2" href="big/image3.jpg" class="swipebox">
	<img src="small/image3.jpg" alt="image">
</a>
<a rel="gallery-2" href="big/image4.jpg" class="swipebox">
	<img src="small/image4.jpg" alt="image">
</a>

Video support

Simply paste a youtube or vimeo video URL in your href attribute. The script will automatically check if it's a youtube or vimeo URL and open the video in the swipebox.

<a class="swipebox-video" rel="vimeo" href="http://vimeo.com/29193046">My Videos</a>

Load slides dynamically

You can set your gallery dynamically by passing an array object to the swipebox.

$( '#gallery' ).click( function( e ) {
	e.preventDefault();
	$.swipebox( [
		{ href:'big/image1.jpg', title:'My Caption' }, 
		{ href:'big/image2.jpg', title:'My Second Caption' }
	] );
} );

Check open state

if ( $.swipebox.isOpen ) {
	// do stuff
}

Options

<script type="text/javascript">
;( function( $ ) {

	$( '.swipebox' ).swipebox( {
		useCSS : true, // false will force the use of jQuery for animations
		useSVG : true, // false to force the use of png for buttons
		initialIndexOnArray : 0, // which image index to init when a array is passed
		hideCloseButtonOnMobile : false, // true will hide the close button on mobile devices
		removeBarsOnMobile : true, // false will show top bar on mobile devices
		hideBarsDelay : 3000, // delay before hiding bars on desktop
		videoMaxWidth : 1140, // videos max width
		beforeOpen: function() {}, // called before opening
		afterOpen: null, // called after opening
		afterClose: function() {}, // called after closing
		loopAtEnd: false // true will return to the first image after the last image is reached
	} );

} )( jQuery );
</script>

Download View Source

960 Grid System — Demo

960 Grid System

12 Column Grid

940

60

860

140

780

220

700

300

620

380

540

460

460

60

60

60

60

60

60

60

60

60

60

60

60

60

380

220

220

220

220

60

380

16 Column Grid

940

40

880

100

820

160

760

220

700

280

640

340

580

400

520

460

460

40

40

40

40

40

40

40

40

40

40

40

40

40

40

40

40

40

400

220

220

220

220

40

400

أحاديث وأقوال مأثورة

من اقوال السلف في الإخلاص ما جاء عن بعض السلف في الإخلاص السلف والإخلاص قال سهل : ليس شيء أشق على النفس من الإخلاص لإنه ليس لها فيه نصيب قال ابن القيم : لا شيء أفسد للأعمال من العجب ورؤية النفس وقال الربيع : كل ما لا يراد به وجه الله يضمحل قال ابن المبارك : رب عمل صغير تكبره النية قال بشر بن الحارث : لا تعمل لتذكر ، اكتم الحسنة كما تكتم السيئة وقال الفضيل بن عياض : إنما يريد الله منك نيتك وإرادتك وقال سهل بن عبدالله : ليس شيء اشق من الإخلاص لأنه ليس لها فيه نصيب وقال سفيان الثوري : ما عالجت شيئاً أشد علي من نيتي وقال إبراهيم بن أدهم : ما صدق عبد أحب الشهرة وقال بشر الحافي : لا يجد حلاوة الآخرة رجل يحب أن يعرفه الناس وقال الشافعي : وددت أن الناس تعلموا هذا العلم ولا ينسب لي منه شيء وقال سعيد بن الحداد : ما صدّ عن الله مثل طلب المحامد وطلب الرفعة وجاء عن الشاطبي أنه قال : لا يقرأ أحد قصيدتي هذه إلا ينفعه الله لأني نظمتها لله والله أعلم المرجع / سير أعلام النبلاء - جامع العلوم والحكم