I am trying to figure out how to create a FancyBox 3 gallery from, say a folder of 128 pictures for instance. How would I do that? I have tried to create it myself, but have had no luck. I read another StackOverflow answer, but it was from a earlier version of FancyBox, So I could not figure it out.
Here is the old link:
JS to automatically make a fancybox Gallery
Here is the new documentation for FancyBox 3 with the API Info:
https://fancyapps.com/fancybox/3/docs/#api
Here is my Example Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>FancyBox JavaScript Gallery from Folder</title>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="jquery.fancybox.min.css">
</head>
<body>
<!-- Your HTML content goes here -->
<a id="Gallery_A" href="javascript:;" class="btn btn-primary">Gallery A</a>
<!-- JS -->
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="jquery.fancybox.min.js"></script>
<script>
$("#Gallery_A").on('click', function() {
$.fancybox.open([
//Image 1
{
src : '_assets/_images/gallery_a/0.jpg',
type : 'image',
opts : {
//caption : 'Image 1',
//thumb : '_assets/_images/gallery_a/0.jpg'
}
},
// Lets say this folder has 128 images in it
// Clearly I dont want to do this 128 times
// So I need a JavaScript For Loop
//Image 128
{
src : '_assets/_images/gallery_a/127.jpg',
type : 'image',
opts : {
//caption : 'Image 128',
//thumb : '_assets/_images/gallery_a/127.jpg'
}
}
], {
loop : true,
thumbs : {
autoStart : true
}
});
});
</script>
</body>
</html>
Any help would be greatly appreciated.
Actually, you could easily port that answer to v3, you would just need to replace href with src and $.fancybox(..) to $.fancybox.open(..).
Here is a (slightly different) demo - https://codepen.io/anon/pen/MqKpPL?editors=1010
Related
I am currently working on a live tracking application for Cesium, but am having some issues when I display the point in the browser.
So far my Cesium viewer receives the data from the server (in JSON format) and displays the point properly on the map, but the only way to have it update the location on the map is to refresh the page. Note that the location.json file it is reading the location from is being updated with a new location every second or so from the server.
Now I figured it would do this, as the client side code has no "update" function to dynamically change the point location on the map.
So what is the easiest way to have Cesium constantly update the point on the map, without the user constantly refreshing the page? Based on my research I have found some examples that involve streaming of CZML files or making my JSON into a data source, but these seem a bit complex for what seems to be a simple task. Is there not a simple "update" function that will change the point dynamically?
Here is my client side code:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Use correct character set. -->
<meta charset="utf-8">
<!-- Tell IE to use the latest, best version (or Chrome Frame if pre-IE11). -->
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>Hello World!</title>
<script src="../Build/Cesium/Cesium.js"></script>
<style>
#import url(../Build/Cesium/Widgets/widgets.css);
html, body, #cesiumContainer {
width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
}
</style>
</head>
<body>
<div id="cesiumContainer"></div>
<script>
var viewer = new Cesium.Viewer('cesiumContainer');
Cesium.loadJson('/location.json').then(function(data) {
console.log(data);
viewer.entities.add({
name : data.name,
position : Cesium.Cartesian3.fromDegrees(data.lon, data.lat),
point : {
pixelSize : 5,
color : Cesium.Color.RED,
outlineColor : Cesium.Color.WHITE,
outlineWidth : 2
},
label : {
text : data.name,
font : '14pt monospace',
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
outlineWidth : 2,
verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
pixelOffset : new Cesium.Cartesian2(0, -9)
}
});
viewer.zoomTo(viewer.entities);
});
</script>
</body>
</html>
If you need any more information from me, I will be happy to provide it.
Thanks!
You will need to keep a reference to each of this points and then simply update that elements position according to some unique id. If a name is unique then you can use that, otherwise you need to implement some way to identify each point after update.
You can check if the point is a new one or existing one in a loadJSON callback function by calling var currentPoint = viewer.entities.getById(data.id). Then you can choose which one of these function will you call. First one for new points (when currentpoint == undefined):
function addNewPoint(
var point = new Cesium.Entity(
{
id : data.id,
name : data.name,
position : Cesium.Cartesian3.fromDegrees(data.lon, data.lat),
point : {
pixelSize : 5,
color : Cesium.Color.RED,
outlineColor : Cesium.Color.WHITE,
outlineWidth : 2
},
label : {
text : data.name,
font : '14pt monospace',
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
outlineWidth : 2,
verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
pixelOffset : new Cesium.Cartesian2(0, -9)
}
}
);
viewer.entities.add(point);
);
Otherwise you call updatePoint function that will just update position
function updatePosition(currentPoint, data)
{
var newPos = new Cesium.Cartesian3.fromDegrees(data.lon, data.lat);
currentPoint.position = newPos;
}
Basically I am i need of an Ext.Panel which contains an XML-Editor together with syntax-highlighting, line numbers and editing.
I have searched through the web and found the Javascript API CodeMirror.
I have implemented something, but the alignment of the CodeMirror-object-Textfield does not adjust itself to the Top/left of the Ext.Panel and also no line-numbers are seen:
<!DOCTYPE html>
<html>
<head>
<!-- ext imports -->
<script type="text/javascript" language="javascript" src="/ext-5.1.1/build/ext-all-debug.js"></script>
<link rel="stylesheet" type="text/css" href="/ext-5.1.1/build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css">
<script type="text/javascript" src="/ext-5.1.1/build/packages/ext-theme-neptune/build/ext-theme-neptune.js"></script>
<!-- codemirror imports -->
<script type="text/javascript" language="javascript" src="/CodeMirror-master/lib/codemirror.js"></script>
<link rel="stylesheet" href="/CodeMirror-master/lib/codemirror.css">
<script type="text/javascript" src="/CodeMirror-master/mode/xml/xml.js"></script>
<script type ="text/javascript">
Ext.onReady(function(){
var panel_1 = Ext.create('Ext.panel.Panel', {
frame:true,
id: 'panel_1_id',
title: 'panel_1',
padding: '10 10 10 10',
margin: '10 10 10 10',
autoScroll: true
});
var vp = new Ext.Viewport({
layout: 'fit',
items: [panel_1],
autoScroll: true,
renderTo : Ext.getBody()
});
var myCodeMirror = CodeMirror(panel_1.body, {
value: "<XXX><YYY><AAA>foo1</AAA></YYY><ZZZ>foo2</ZZZ></XXX>"
});
});
</script>
</head>
<body>
</body>
</html>
So the following questions arise:
1.) I thought about extending Ext.Component and somehow pack the CodeMirror object inside it?
Is this possible?
2.) Is it possible to adapt my little codeexample from above to align it correctly?
This can be solved with a few slight tweaks to your code.
The key point here is that the behaviour of CodeMirror will vary depending on the type of the first parameter you pass to the CodeMirror constructor. Passing a HTML element (as in your example) will result in the HTML DOM function appendChild() being called. And this is why there is a large space before your new element, because it is being appended after the body of the panel.
If you pass in a function (acting as a callback) to the CodeMirror constructor then you will be returned with the HTML element that is the CodeMirror. Constructing the element this way enables you to replace the body element of the panel with the new HTML element (rather than appending).
This can be achieved by creating a simple function. The code changes you require are as follows....
Create a function to pass to CodeMirror constructor
var codeMirrorCallbackFunction = function(codeMirrorEl) {
var panelDom = panel_1.el.dom;
// the node at index 1 is the body (index 0 is panel header)
panelDom.replaceChild(codeMirrorEl, panelDom.childNodes[1]);
};
Create the CodeMirror object passing the function as 1st parameter
var myCodeMirror = CodeMirror(codeMirrorCallbackFunction, {
value: "<XXX><YYY><AAA>foo1</AAA></YYY><ZZZ>foo2</ZZZ></XXX>"
});
Update the padding of the Panel
// without this change the panel header and codemirror html overlap
padding: '25 10 10 10'
You are doing good, you only need to add a property like
var myCodeMirror = CodeMirror(panel.body, {
value: "<XXX><YYY><AAA>foo1</AAA></YYY><ZZZ>foo2</ZZZ></XXX>",
lineNumbers: true
});
I am creating an Android app using Phonegap.
I have installed phonegap using the commands on their website.
Everything is up and running with the SDK and Emulator.
Now when I run the example camera script from their website to get it working before I start cusotmising it.
Everytime I run the code below (even though I have the file linked to phonegap.js) it keeps throwing an error. I mean the script runs as far as the HTML and showing the buttons, but when the button is clicked nothing happens and in the log it says: Cannot read property 'DATA_URL' of undefined.
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script type="text/javascript" src="phonegap.js"></script>
<link rel="stylesheet" href="css/foundation.css" />
<script src="js/vendor/modernizr.js"></script>
<title>Retouch</title>
<script type="text/javascript" charset="utf-8">
var pictureSource; // picture source
var destinationType; // sets the format of returned value
// Wait for PhoneGap to connect with the device
//
document.addEventListener("deviceready",onDeviceReady,false);
// PhoneGap is ready to be used!
//
function onDeviceReady() {
pictureSource=navigator.camera.PictureSourceType;
destinationType=navigator.camera.DestinationType;
}
// Called when a photo is successfully retrieved
//
function onPhotoDataSuccess(imageData) {
// Get image handle
//
var smallImage = document.getElementById('smallImage');
// Unhide image elements
//
smallImage.style.display = 'block';
// Show the captured photo
// The inline CSS rules are used to resize the image
//
smallImage.src = "data:image/jpeg;base64," + imageData;
}
// Called when a photo is successfully retrieved
//
function onPhotoFileSuccess(imageData) {
// Get image handle
console.log(JSON.stringify(imageData));
// Get image handle
//
var smallImage = document.getElementById('smallImage');
// Unhide image elements
//
smallImage.style.display = 'block';
// Show the captured photo
// The inline CSS rules are used to resize the image
//
smallImage.src = imageData;
}
// Called when a photo is successfully retrieved
//
function onPhotoURISuccess(imageURI) {
// Uncomment to view the image file URI
// console.log(imageURI);
// Get image handle
//
var largeImage = document.getElementById('largeImage');
// Unhide image elements
//
largeImage.style.display = 'block';
// Show the captured photo
// The inline CSS rules are used to resize the image
//
largeImage.src = imageURI;
}
// A button will call this function
//
function capturePhoto() {
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50,
destinationType: destinationType.DATA_URL });
}
function capturePhotoEdit() {
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true,
destinationType: destinationType.DATA_URL });
}
// A button will call this function
//
function getPhoto(source) {
// Retrieve image file location from specified source
navigator.Camera.getPicture(onPhotoURISuccess, onFail, {
quality: 50,
destinationType: navigator.camera.DestinationType.FILE_URI,
sourceType: pictureSource
});
// Called if something bad happens.
//
function onFail(message) {
alert('Failed because: ' + message);
}
</script>
</head>
<body>
<!-- Navigation bar -->
<div class="fixed">
<nav class="top-bar fixed" data-topbar>
<ul class="title-area">
<li class="name">
<h1 class="navmsg">
<script>
var Digital=new Date()
var hours=Digital.getHours()
if (hours>=5&&hours<=11)
document.write('<b>Good Morning.</b>')
else if (hours==12)
document.write('<b>Good Afternoon.</b>')
else if (hours>=13&&hours<=17)
document.write('<b>Good Afternoon.</b>')
else if (hours>=18&&hours<=20)
document.write('<b>Good Evening.</b>')
else if (hours>=21&&hours<=11)
document.write('<b>Hello!</b>')
else
document.write('<b>Hello!</b>')
</script>
</h1>
</li>
<li class="toggle-topbar menu-icon">Account</li>
</ul>
</nav>
</div>
<button onclick="capturePhotoWithData();">Capture Photo With Image Data</button> <br>
<button onclick="capturePhotoWithFile();">Capture Photo With Image File URI</button> <br>
<button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">From Photo Library</button><br>
<button onclick="getPhoto(pictureSource.SAVEDPHOTOALBUM);">From Photo Album</button><br>
<img style="display:none;width:60px;height:60px;" id="smallImage" src="" />
<img style="display:none;" id="largeImage" src="" />
<script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>`
I have tried to use the following:
<script type="text/javascript" src="phonegap.js"></script>
and
<script type="text/javascript" src="cordova.js"></script>
Nothing seems to work.
I have changed the following in capturePhoto() and capturePhotoEdit() from:
destinationType.DATA_URL
to
Camera.DestinationType.DATA_URL
Still no luck with the functionality. I suspect it has something to do with the cordova plugin and phonegap, as I only have phonegap.js included in the script. I'm also reading about settings in the config.xml, which I have done through command line (unless I have done it wrong) following the docs.
I have built the application by CL:
phonegap build android
The following code with cordova-2.5.0.js and destinationType.FILE_URI added has successfully enabled the getPhoto() functions and allows me to display the photos in library/album.
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script type="text/javascript" src="phonegap.js"></script>
<link rel="stylesheet" href="css/foundation.css" />
<script src="js/vendor/modernizr.js"></script>
<title>Retouch</title>
<script type="text/javascript" charset="utf-8" src="cordova-2.5.0.js"></script>
<script type="text/javascript" charset="utf-8">
var pictureSource; // picture source
var destinationType; // sets the format of returned value
// Wait for Cordova to connect with the device
//
document.addEventListener("deviceready",onDeviceReady,false);
// Cordova is ready to be used!
//
function onDeviceReady() {
pictureSource=navigator.camera.PictureSourceType;
destinationType=navigator.camera.DestinationType;
}
// Called when a photo is successfully retrieved
//
function onPhotoDataSuccess(imageData) {
// Uncomment to view the base64 encoded image data
//alert(imageData);
// Get image handle
//
var smallImage = document.getElementById('smallImage');
// Unhide image elements
//
smallImage.style.display = 'block';
// Show the captured photo
// The inline CSS rules are used to resize the image
//
smallImage.src = "data:image/jpeg;base64," + imageData;
}
// Called when a photo is successfully retrieved
//
function onPhotoURISuccess(imageURI) {
alert("inside large image")
// Uncomment to view the image file URI
// console.log(imageURI);
// Get image handle
//
var largeImage = document.getElementById('largeImage');
// Unhide image elements
//
largeImage.style.display = 'block';
// Show the captured photo
// The inline CSS rules are used to resize the image
//
largeImage.src = imageURI;
}
// A button will call this function
//
function capturePhoto() {
// Take picture using device camera and retrieve image as base64-encoded string
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50,
destinationType: destinationType.FILE_URI });
}
// A button will call this function
//
function capturePhotoEdit() {
// Take picture using device camera, allow edit, and retrieve image as base64-encoded string
navigator.camera.getPicture(onPhotoDataSuccess, onFail,
{ quality: 20, allowEdit: true,
destinationType: destinationType.FILE_URI });
}
// A button will call this function
//
function getPhoto(source) {
// Retrieve image file location from specified source
navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,
destinationType: destinationType.FILE_URI,
sourceType: source });
}
// Called if something bad happens.
//
function onFail(message) {
alert('Failed because: ' + message);
}
</script>
</head>
<body>
<!-- Navigation bar -->
<div class="fixed">
<nav class="top-bar fixed" data-topbar>
<ul class="title-area">
<li class="name">
<h1 class="navmsg">
<script>
var Digital=new Date()
var hours=Digital.getHours()
if (hours>=5&&hours<=11)
document.write('<b>Good Morning.</b>')
else if (hours==12)
document.write('<b>Good Afternoon.</b>')
else if (hours>=13&&hours<=17)
document.write('<b>Good Afternoon.</b>')
else if (hours>=18&&hours<=20)
document.write('<b>Good Evening.</b>')
else if (hours>=21&&hours<=11)
document.write('<b>Hello!</b>')
else
document.write('<b>Hello!</b>')
</script>
</h1>
</li>
<li class="toggle-topbar menu-icon">Account</li>
</ul>
</nav>
</div>
<button onclick="capturePhotoWithData();">Capture Photo With Image Data</button> <br>
<button onclick="capturePhotoWithFile();">Capture Photo With Image File URI</button> <br>
<button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">From Photo Library</button><br>
<button onclick="getPhoto(pictureSource.SAVEDPHOTOALBUM);">From Photo Album</button><br>
<img style="display:none;width:60px;height:60px;" id="smallImage" src="" />
<img style="display:none;" id="largeImage" src="" />
<script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
I tried adding 'destinationType.FILE_URI' to capturePhoto() and capturePhotoEdit() functions, but they still don't seem to work.
I have now tried the following three types:
destinationType.FILE_URI
destinationType.DATA_URI
Camera.desitnationType.DATA_URI
None of them seem to make a difference.
That is a Javascript error. You are trying to access a property of an undefined variable. This line (in the capturePhoto and capturePhotoEdit methods):
destinationType.DATA_URL
should be:
Camera.DestinationType.DATA_URL
One more thing: With Cordova it is always good to have the docs at hand, and have a look at them each time you are using a new plugin, or when you upgrade to a newer version (they tend to change the API frequently, hence the examples found in Google usually show legacy code). Here you have the Camera plugin documentation.
In my case when I pause the execution Camera has getPicture() method but not DestinationType and PictureSourceType propreties.
$scope.tomarFoto = function(){
$ionicPlatform.ready(function() {
var options = {
quality: 50,
destinationType: Camera.DestinationType.DATA_URL,
sourceType: Camera.PictureSourceType.CAMERA
};
$cordovaCamera.getPicture(options).then(function (imageData) {
$scope.cameraimage = "data:image/jpeg;base64," + imageData;
}, function (err) {
console.log('Failed because: ' + message);
});
});
UPDATED
Just I got recently the same problem.
If did you add the camera plugin and all the permissions needed, mainly you did all the Phonegap Api steps. I think you'r solution pass for go to you'r project folder and execute phonegap build or phonegap build app_platform.
First save you'r project data cause that command line reset the estructure of the project and delete the files you add.
Make me know if that works for you too, good luck.
I'm trying to display piechart in UIWebview of my iOS xcode project, for that I'm using jqplot with HTML, CSS and JavaScript, the issue I face is JavaScript file "devicepiechart.js" is loading from the html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="jquery.jqplot.css" />
<script>
function load()
{
alert("I am an loading scripts!");
}
</script>
<script src="devicepiechart.js"></script>
</head>
<body onload= "load()">
</body>
</html>
The load() function alert is shown properly without any problem. I could detect that my .js file is not loading as I have the alert("string"); function in my .js file too for debugging.
UPDATED devicepiechart.js, and I hope the external .js file may not have any error, because I have the source from this http://www.jqplot.com/tests/pie-donut-charts.php
$(document).ready(function()
{
alert("good");
var data = [
['Heavy Industry', 12],['Retail', 9], ['Light Industry', 14],
['Out of home', 16],['Commuting', 7], ['Orientation', 9]
];
var plot1 = jQuery.jqplot ('chart1', [data],
{
seriesDefaults: {
// Make this a pie chart.
renderer: jQuery.jqplot.PieRenderer,
rendererOptions: {
// Put data labels on the pie slices.
// By default, labels show the percentage of the slice.
showDataLabels: true
}
},
legend: { show:true, location: 'e' }
}
);
});
Include jquery before the other js loads
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
Just load all your .js files into "copy bundle resources" of project Targets "bulid phases" , now the piechart is running successfully in ios simulator.
i need some tweaking advice since i'm not familiar with javascript and jquery. i want to add a notification on top of my page when it loads. for example when i load my home page (index.html) i want the notification to appear.
the current example only pop up the notification when i click the button. i want it to appear when i load the page. can someone help me out? im kinda interested in this notification bar.
i got it from http://tympanus.net/Development/jbar/
my current code is like this (index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>jQuery Plugin jBar</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen"/>
</head>
<body>
<div class="content">
<a id="msgup" class="button">Demo Top</a>
</div>
<script src="jquery-1.3.2.js" type="text/javascript"></script>
<script src="jquery.bar.js" type="text/javascript"></script>
<script>
$("#msgup").bar({
color : '#1E90FF',
background_color : '#FFFFFF',
removebutton : false,
message : 'Your profile customization has been saved!',
time : 4000
});
</script>
</body>
</html>
and the jquery.bar.js file :
(function($) {
$.fn.bar = function(options) {
var opts = $.extend({}, $.fn.bar.defaults, options);
return this.each(function() {
$this = $(this);
var o = $.meta ? $.extend({}, opts, $this.data()) : opts;
$this.click(function(e){
if(!$('.jbar').length){
timeout = setTimeout('$.fn.bar.removebar()',o.time);
var _message_span = $(document.createElement('span')).addClass('jbar-content').html(o.message);
_message_span.css({"color" : o.color});
var _wrap_bar;
(o.position == 'bottom') ?
_wrap_bar = $(document.createElement('div')).addClass('jbar jbar-bottom'):
_wrap_bar = $(document.createElement('div')).addClass('jbar jbar-top') ;
_wrap_bar.css({"background-color" : o.background_color});
if(o.removebutton){
var _remove_cross = $(document.createElement('a')).addClass('jbar-cross');
_remove_cross.click(function(e){$.fn.bar.removebar();})
}
else{
_wrap_bar.css({"cursor" : "pointer"});
_wrap_bar.click(function(e){$.fn.bar.removebar();})
}
_wrap_bar.append(_message_span).append(_remove_cross).hide().insertBefore($('.content')).fadeIn('fast');
}
})
});
};
var timeout;
$.fn.bar.removebar = function(txt) {
if($('.jbar').length){
clearTimeout(timeout);
$('.jbar').fadeOut('fast',function(){
$(this).remove();
});
}
};
$.fn.bar.defaults = {
background_color : '#FFFFFF',
color : '#000',
position : 'top',
removebutton : true,
time : 5000
};
})(jQuery);
Im certain the index.html is in need of change as to how it loads the notification. but i dont know what to edit. please help as i want to learn this.
The quick and dirty way would be to call
$("#msgup").click();
right after you do all of your
$("#msgup").bar({
...
});
stuff.
I see the plugin only adds a click event listener. So you can fake a click in index.html, add this code immediately before </head>:
<script> $(document).ready(function(){ $("#msgup").trigger('click') }); </script>
And it will work.
$(document).ready(function(){
$("#msgup").bar({
color : '#1E90FF',
background_color : '#FFFFFF',
removebutton : false,
message : 'Your profile customization has been saved!',
time : 4000
});
});