Skip to content

Commit 25c06c0

Browse files
author
VersatilityWerks
committed
version 3
0 parents  commit 25c06c0

File tree

10 files changed

+5127
-0
lines changed

10 files changed

+5127
-0
lines changed

README.md

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
jAlert v3
2+
======
3+
by Versatility Werks http://flwebsites.biz
4+
5+
![logo](http://flwebsites.biz/jAlert/index-assets/github-img.jpg)
6+
7+
Demo & Detailed Docs
8+
=======
9+
http://flwebsites.biz/jAlert/
10+
11+
What is it?
12+
=======
13+
Simple jQuery (Modal | Popup | Lightbox | Alert) Plugin
14+
15+
Whether you call it a lightbox, modal, popup, or window, jAlert is an excellent replacement / alternative for Simple Modal, FancyBox, or Reveal.
16+
17+
18+
Setup
19+
======
20+
Include the CSS files from the src folder in the head section:
21+
```html
22+
<link rel="stylesheet" href="jAlert-master/src/jAlert-v3.css">
23+
```
24+
25+
Include the JS file from the src folder before the `</body>`:
26+
```html
27+
<script src="jAlert-master/src/jAlert-v3.min.js"></script>
28+
```
29+
30+
Basic Use
31+
=======
32+
```javascript
33+
alert('hi'); //override is enabled by default
34+
```
35+
```javascript
36+
successAlert('Success!', 'You did it!'); //green alert
37+
```
38+
```javascript
39+
errorAlert('Error!', 'It didn't work!'); //red alert
40+
```
41+
```javascript
42+
confirm(function(){ //override is enabled by default
43+
console.log('confirmed!');
44+
}, function(){
45+
console.log('denied');
46+
});
47+
```
48+
```javascript
49+
$.jAlert({ //this is the normal usage
50+
'title': 'Test',
51+
'content': 'Howdy',
52+
'theme': 'green',
53+
'size': 'xsm'
54+
});
55+
```
56+
```javascript
57+
$.fn.jAlert.defaults.backgroundColor = 'white'; //override a default setting
58+
59+
$.fn.jAlert({ //same as $.jAlert when you're not passing an element - this alert will now have the white background color
60+
'title': 'Test',
61+
'content': 'Howdy',
62+
'theme': 'green',
63+
'size': 'xsm'
64+
//'backgroundColor': 'white' //you could also pass it here
65+
});
66+
67+
$.fn.jAlert.defaults.backgroundColor = 'black'; //set it back to black
68+
```
69+
```javascript
70+
$('.btn').alertOnClick({ //this function attaches an onclick handler to .btn and passes the options to jAlert
71+
'title': 'It worked!',
72+
'content': 'You clicked the button'
73+
});
74+
```
75+
```javascript
76+
$.alertOnClick('.btn', { //this function attaches an onclick handler to the body for .btn and kicks off jAlert
77+
'title': 'Like magic',
78+
'content': 'You clicked the button that was dynamically added'
79+
});
80+
```
81+
```javascript
82+
$.jAlert({ //creates a lightbox for the image - responsive and all
83+
'image': 'http://mysite.com/my-image.jpg'
84+
});
85+
```
86+
```javascript
87+
$.jAlert({ //creates a lightbox for the video - responsive and all
88+
'video': 'http://youtube.com/dflskd'
89+
});
90+
```
91+
```javascript
92+
$.jAlert({ //creates an alert that fills most of the height with a scrollable iframe
93+
'iframe': 'http://mysite.com'
94+
});
95+
```
96+
```javascript
97+
$.jAlert({ //gets content from another file with $.get()
98+
'ajax': 'my-ajax-content.php'
99+
});
100+
```
101+
102+
103+
Dependencies
104+
=======
105+
jQuery 1.7+
106+
107+
License
108+
=======
109+
M.I.T.
110+
111+
Copyright (c) 2015 Versatility Werks
112+
113+
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
114+
115+
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
116+
117+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

src/jAlert-FB.css

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
.jSave{
2+
-webkit-transform: rotate(-90deg);
3+
-moz-transform: rotate(-90deg);
4+
-ms-transform: rotate(-90deg);
5+
-o-transform: rotate(-90deg);
6+
transform: rotate(-90deg);
7+
8+
/* also accepts left, right, top, bottom coordinates; not required, but a good idea for styling */
9+
-webkit-transform-origin: 50% 50%;
10+
-moz-transform-origin: 50% 50%;
11+
-ms-transform-origin: 50% 50%;
12+
-o-transform-origin: 50% 50%;
13+
transform-origin: 50% 50%;
14+
15+
/* Should be unset in IE9+ I think. */
16+
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
17+
font-size: 110%; font-weight: bold; position: fixed; top: 20%; left: -54px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; background: red; color: white; padding: 5px 10px 5px 10px; cursor: pointer; z-index:9;
18+
}
19+
a.jSave:hover{
20+
color: white; text-decoration: none; background: #d01212;
21+
}
22+
a.jSaveBtn{
23+
background: #1562a8; color: white; cursor: pointer; padding: 5px 10px 5px 10px; border-radius: 5px; font-size: 110%;
24+
}
25+
a.jSaveBtn:hover{
26+
background: #12528d; text-decoration: none; color: white;
27+
}

src/jAlert-FB.js

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
function displayPromo(){ //display the promo code, you could get this from PHP to be more secure
2+
$('.fb-button').replaceWith('<div class="fb-already-connected" style="color: rgb(0, 88, 164);"><b>Thank you for sharing!</b><br> Use the <b>promo code "FB10"</b> during checkout to receive 10% off your plan!</div>');
3+
}
4+
5+
window.fbAsyncInit = function() {
6+
// init the FB JS SDK
7+
FB.init({
8+
appId : '591990517558339', // Replace with your Facebook APP ID
9+
channelUrl : '//flwebsites.biz/channel.html', // Replace with your domain //Channel file for x-domain comms
10+
xfbml : true // Look for social plugins on the page
11+
});
12+
13+
$processed = false;
14+
15+
$('.jSave').on('click', function(){
16+
$.jAlert({
17+
'title': 'Share and Save',
18+
'content': "<div style='font-size: 120%;'>It's Easy, Fast, and FREE.</div><br><b>1. <span style='color: rgb(0, 158, 255);'>Connect</span> via Facebook (below).<br><br>2. We'll <span style='color: rgb(0, 158, 255);'>auto-post</span> to your wall.<br><small><i>\"This is a preview of what we will be posting.\"</i></small><br><br>3. You'll get a coupon to <span style='color: rgb(0, 158, 255);'>save</span> 10%!</b><br><br><a class='fb-button jSaveBtn'> Connect & Post</a>",
19+
'theme': 'black',
20+
'size': 'sm'
21+
});
22+
});
23+
24+
$('body').on('click', '.fb-button', function(e){
25+
e.preventDefault();
26+
27+
FB.login(function(response) {
28+
if(response.authResponse) {
29+
FB.api('/me', function(userInfo) {
30+
if(userInfo.name){
31+
/* HERE YOU COULD OPTIONALLY USE THEIR NAME, EMAIL, ETC */
32+
// console.log(userInfo);
33+
var body = "Check that out. I just used http://flwebsites.biz/jAlert to post this to my wall!"; var link = 'http://flwebsites.biz/jAlert'; // you don't need to send link if you just want to post text
34+
FB.api('/me/feed', 'post', { message: body, link: link }, function(response) {
35+
if(response.error){ // if there was an error
36+
if(response.error.code != 200){ // 200 means they denied the permission to post to their wall, don't do anything
37+
if(response.error.code != 506){ //506 means the message was posted more than once and denied, just show the discount again
38+
alert(response.error.message); //show them the error that was returned by facebook for reporting
39+
}else{
40+
displayPromo();
41+
}
42+
}
43+
}else{
44+
displayPromo();
45+
}
46+
});
47+
}
48+
});
49+
}
50+
}, {scope: 'email, publish_actions'}); //you don't need the email permission, but I'd assume you'll want to store it somewhere
51+
52+
});
53+
54+
};
55+
// Load the SDK asynchronously
56+
(function(d, s, id){
57+
var js, fjs = d.getElementsByTagName(s)[0];
58+
if (d.getElementById(id)) {return;}
59+
js = d.createElement(s); js.id = id;
60+
js.src = "//connect.facebook.net/en_US/all.js";
61+
fjs.parentNode.insertBefore(js, fjs);
62+
}(document, 'script', 'facebook-jssdk'));

0 commit comments

Comments
 (0)