Jump to content

metro alert script

piet bieruik

By piet bieruik
in HTML Help

 Share

Recommended Posts

piet bieruik Newbie

piet bieruik

Posted
Posted (edited)

Hello,

 

I want to get a jquery popup on my site.

from this site.

http://www.bamdaa.com/demo/metro-alert/

 

i used there source code, but its not working.

what do i wrong ?

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jQuery Metro Alert</title>
	<script src="www.bamdaa.com/demo/metro-alert/js/jquery.min.js"></script>
	<script src="www.bamdaa.com/demo/metro-alert/js/metroAlert.min.js"></script>
	<link rel="stylesheet" href="www.bamdaa.com/demo/metro-alert/css/metroAlert.min.css" />

	<link rel="stylesheet" href="www.bamdaa.com/demo/metro-alert/css/metroAlert-theme-sky.css" />
	<link rel="stylesheet" href="www.bamdaa.com/demo/metro-alert/css/metroAlert-theme-pumpkin.css" />
	<link rel="stylesheet" href="www.bamdaa.com/demo/metro-alert/css/metroAlert-theme-midnight.css" />
	<link rel="stylesheet" href="www.bamdaa.com/demo/metro-alert/css/metroAlert-theme-greensea.css" />

	<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,700,600,800|Open+Sans+Condensed:300,700&subset=latin,cyrillic-ext,cyrillic" rel="stylesheet" type="text/css"/>
	<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" rel="stylesheet">
	<style>
	body{ background: #1abc9c; font:12px Tahoma;}
	h1, h2, h3{ font-family: "Open Sans Condensed";}
	
	.documentation{
		width:960px;
		margin: auto;
		min-height: 200px;
		background: #ecf0f1;
		padding: 40px;
	}

	.documentation > div{
		background: #e0e4e5;
		padding: 20px;
		margin: 10px 0;
	}

	.btn{
		display: inline-block;
		background: #16a085;
		color: #fff;
		padding: 10px 20px;
		margin: 10px 0;
		text-decoration: none;
		font: 12px Tahoma;
	}
	
	.btn:hover{
		-moz-opacity: 0.9;
		opacity: 0.9;
		-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=90);
	}

	.c1{background: #9bbb59;}
	.c2{background: #8064a2;}
	.c3{background: #4bacc6;}
	.c4{background: #ff6600;}
	table{
		width:100%;
	}
	td{
		vertical-align: top;
		text-align: left;
		width:50%;
		padding: 0 20px 20px;
	}
	caption{
		text-align: left;
	}
	pre{ 
		tab-size: 4;
		-moz-tab-size: 4;
		-o-tab-size: 4;
		padding: 15px;
		background: #fff
	}
	.title{
		font-size: 48px;
		background: #f39c12;
		color: #fff;
		padding: 20px;
		margin: 0 -40px;
		text-align: center;
	}
	.fa-star{ color: #ff9900; text-shadow: 1px 1px 0 rgba(255,255,255,.5); }
	</style>
</head>
<body>

<div class="documentation">
<h1 class="title">jQuery Metro Alert 1.1</h1>
<h1><i class="fa fa-check fa-lg"></i> Features</h1>
<p>
	<ul>
		<li>Easy to use</li>
		<li>Four creative themes included (GreenSea, Midnight, Pumpkin, Sky)</li>
		<li>Crossbrowser (Firefox, Chrome, Safari, Opera, Internet explorer 6+)</li>
		<li>Compatible with every layout</li>
		<li>Responsive</li>
		<li>Fully themeable (Globally, Particle)</li>
		<li>Fully configurable</li>		
		<li>Localization (Globally, Particle)</li>		
	</ul>
</p>
<br>
<h1><i class="fa fa-gears fa-lg"></i> Installation</h1>

<h3><i class="fa fa-file-text-o fa-lg"></i> Javascript</h3>
<p>
I have included 'metroAlert.js'. Just include this on your html page after jQuery like this: 
<pre>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/metroAlert.js"></script>
</pre>
</p>
<h3><i class="fa fa-css3 fa-lg"></i> CSS</h3>
<p>
I have included 'metroAlert.css'. Just include this on your html page like this:
<pre>
<link type="text/css" rel="stylesheet" href="css/metroAlert.css"/>
</pre>
<p>
Include 'metroAlert-theme-midnight.css'. If you use any Theme.
<pre>
<link type="text/css" rel="stylesheet" href="css/metroAlert-theme-midnight.css"/>
</pre>
</p>

<h1><i class="fa fa-html5 fa-lg"></i> Usage</h1>
<div>
	<p>
	<h3><i class="fa fa-star fa-lg"></i> Alert</h3>
	<p><a href="#" id="defaultAlert" class="btn">Try it</a></p>
	</p>
	<p>
	<h3><i class="fa fa-code fa-lg"></i> Source</h3>
	<pre>
	$.alert({title:"Metro Alert", message:"Alert Example"});</pre>
	</p>
</div>
<div>
	<p>
	<h3><i class="fa fa-star fa-lg"></i> Confirm with Callback</h3>
		<p><a href="#" class="btn" id="defaultConfirm">Try it</a></p>
	</p><p>
	<h3><i class="fa fa-code fa-lg"></i> Source</h3>
	<pre>
	$.confirm({
		title:"Metro Confirm", 
		message:"Do you understand? Isn't it easy?<br>Your respond shown center.",
		callback: function(respond){ 
			if(respond) 
				$.notification({
					message:"Of course it is so Easy", 
					position:"cc"
				});
			else
				$.notification({
					message:"Why don't you understand?", 
					position:"cc"
				});
			}
	});</pre>
	</p>
</div>
<div>
	<p>
	<h3><i class="fa fa-star fa-lg"></i> Prompt with Callback, Placeholder</h3>
		<p><a href="#" class="btn" id="defaultPrompt">Try it</a></p>
	</p><p>
	<h3><i class="fa fa-code fa-lg"></i> Source</h3>
	<pre>
	$.prompt({
		title:"Metro Prompt",
		message:"How old are you?",
		placeholder: "Please type your age",
		callback: function(respond){
			if(respond !== false){
				$.notification({
					message: "You are so young. Just <b>"+ respond +"</b>",
					position: "tl",
					interval: 5000,
					theme: "midnight"
				});
			}
		}
	});</pre>
	</p>
</div>
<div>
	<p>
	<h3><i class="fa fa-star fa-lg"></i> Notification</h3>
		<p>
			Try it: 
			<a href="#" class="btn defaultNotification" data-position="tr" data-theme="greensea">Top Right</a>
			<a href="#" class="btn defaultNotification" data-position="br" data-theme="midnight">Bottom Rgiht</a>
			<a href="#" class="btn defaultNotification" data-position="bc" data-theme="pumpkin">Bottom Center</a>
			<a href="#" class="btn defaultNotification" data-position="bl" data-theme="sky">Bottom Left</a>
			<a href="#" class="btn defaultNotification" data-position="tl" data-theme="greensea">Top Left</a>
			<a href="#" class="btn defaultNotification" data-position="tc" data-theme="midnight">Top Center</a>
			<a href="#" class="btn defaultNotification" data-position="cc" data-theme="greensea">Center</a>
		</p>
	</p><p>
	<h3><i class="fa fa-code fa-lg"></i> Source</h3>
	<pre>
	$(".defaultNotification").click(function(e){
		e.preventDefault();

		$.notification({
			title:"Metro Notification", 
			message:"jQuery Metro Notification newly listed",
			position: $(this).data("position"),
			theme: $(this).data("theme")
		});
	});</pre>
	</p>
</div>

<div>
	<p>
	<h3><i class="fa fa-star fa-lg"></i> Callback / Theme / HTML Icon</h3>
		<p><a href="#" class="btn" id="defaultCallback">Try it</a></p>
	</p><p>
	<h3><i class="fa fa-code fa-lg"></i> Source</h3>
	<pre>
	$.alert({
		title:'<i class="fa fa-cog fa-2x"></i><br> Callback / Theme / HTML Icon', 
		message:"Callback loads when alert is closed. Focus on right bottom corner",
		theme: "pumpkin",
		callback: function(respond){ 
			$.notification({
				message: "Alert is closed!",
				position:"br",
				theme:"sky"
			});
		}
	});</pre>
	</p>
</div>

<div>
	<p>
	<h3><i class="fa fa-star fa-lg"></i> Custom buttons and Removing Close button and Title</h3>
		<p><a href="#" class="btn" id="defaultButtons">Try it</a></p>
	</p><p>
	<h3><i class="fa fa-code fa-lg"></i> Source</h3>
	<pre>
	$.alert({
		message:"We have three custom buttons. But without Title and Close button. Focus on top center.",
		buttons: {
			btnSome: "Some", 
			btnCustom: "Custom", 
			btnButtons: "Buttons"
		},
		close: false, // Removing Close button
		theme: 'midnight',
		callback: function(respond){ 
			$.notification({
				message: "You have clicked on <b>"+ respond +"</b>!", 
				position:"tc",
				theme: "midnight"
			});
		}
	});</pre>
	</p>
</div>

<div>
	<p>
	<h3><i class="fa fa-star fa-lg"></i> Backdrop / without Close button</h3>
		<p><a href="#" class="btn" id="defaultBackdrop">Try it</a></p>
	</p><p>
	<h3><i class="fa fa-code fa-lg"></i> Source</h3>
	<pre>
	$.alert({
		title:"BACKDROP",
		message:"Please click on the dark background to close Alert.",
		close: false,
		backdrop: true,
		theme: 'sky',
		vspace: 30
	});</pre>
	</p>
</div>

<div>
	<p>
	<h3><i class="fa fa-star fa-lg"></i> Custom HTML supported / vspace / ESC key</h3>
		<p><a href="#" class="btn" id="defaultYoutube">Try it</a></p>
	</p><p>
	<h3><i class="fa fa-code fa-lg"></i> Source</h3>
	<pre>
	$.alert({
		message:'<iframe width="560" height="315" src="..." frameborder="0"></iframe>',
		close: false,
		backdrop: true,
		theme: 'sky',
		vspace: 0,
		esc: true
	});</pre>
	</p>
</div>

<p>
	<h3><i class="fa fa-flag fa-lg"></i> Thanks to <a href="http://fortawesome.github.io/Font-Awesome/" target="black">Font Awesome</a> for the great icon library</h3>
	<h3><i class="fa fa-google-plus-square fa-lg"></i> Thanks to <a href="http://www.google.com/fonts" target="black">Google Fonts</a> for the great font library</h3>
</p>
</div>
<script>
	$(function(){

		$.notification({
			title: "Hey. Hi",
			message:"<b>Thanks for watching Demo.</b>",
			theme:"sky",
			position: "tc"
		});

		setTimeout(function(){
			$.notification({
				message:"<b>Please don't forget to rate if you like it.</b><br /><i class=\"fa fa-star\"></i> <i class=\"fa fa-star\"></i> <i class=\"fa fa-star\"></i> <i class=\"fa fa-star\"></i> <i class=\"fa fa-star\"></i>",
				theme:"sky",
				width: 300,
				position: "tc",
				interval: 5000
			});
		}, 1000);

		$("#defaultAlert").click(function(e){
			e.preventDefault();

			$.alert({
				title:"Metro Alert",
				message:"Alert Example"
			});
		});

		$("#defaultConfirm").click(function(e){
			e.preventDefault();
			$.confirm({
				title:"Metro Confirm", 
				message:"Do you understand? Isn't it easy?<br />Your respond shown center.",
				theme: "greensea",
				callback: function(respond){ 
					if(respond)
						$.notification({message:"Of course. It is so Easy", position: "cc"});
					else
						$.notification({message:"Why don't you understand?", position: "cc"});
				}
			});
		});

		$("#defaultPrompt").click(function(e){
			e.preventDefault();
			$.prompt({
				title:"Metro Prompt", 
				message:"How old are you?",
				placeholder: "Please type your age",
				callback: function(respond){ 
					if(respond !== false){
						$.notification({
							message: "You are so young. Just <b>"+ respond +"</b>",
							position: "tl",
							interval: 5000,
							theme: "midnight"
						});
					}
				}
			});
		});

		$(".defaultNotification").click(function(e){
			e.preventDefault();

			$.notification({
				title:"Metro Notification",
				message:"jQuery Metro Notification newly listed",
				position: $(this).data("position"),
				theme: $(this).data("theme")
			});
		});

		$("#defaultCallback").click(function(e){
			e.preventDefault();
			$.alert({
				title:'<i class="fa fa-cog fa-2x"></i><br />Callback / Theme / HTML Icon', 
				message:"Callback loads when alert is closed. Focus on right bottom corner",
				theme: "pumpkin",
				callback: function(respond){ 
					$.notification({message: "Alert is closed!", position:"br", theme:"sky"});
				}
			});
		});

		$("#defaultButtons").click(function(e){
			e.preventDefault();
			$.alert({
				message:"We have three custom buttons. But without Title and Close button. Focus on top center.",
				buttons: {
					btnSome: "Some", 
					btnCustom: "Custom", 
					btnButtons: "Buttons"
				},
				close: false,
				theme: 'midnight',
				callback: function(respond){ 
					$.notification({
						message: "You have clicked on <b>"+ respond +"</b>!", 
						position:"tc",
						theme: "midnight"
					});
				}
			});
		});

		$("#defaultBackdrop").click(function(e){
			e.preventDefault();
			$.alert({
				title:"BACKDROP",
				message:"Please click on the dark background to close Alert.",
				close: false,
				backdrop: true,
				theme: 'sky',
				vspace: 30
			});
		});

		$("#defaultYoutube").click(function(e){
			e.preventDefault();
			$.alert({
				message:'<iframe width="560" height="315" src="http://www.youtube.com/embed/dN1enxA9NxE?rel=0" frameborder="0" allowfullscreen></iframe>',
				close: false,
				backdrop: true,
				theme: 'sky',
				vspace: 0,
				esc: true
			});
		});
	});
</script>
</body>
</html>

http://scitec-sportvoeding.nl/test.html

 

Thanks !

Edited by piet bieruik
Link to comment
Share on other sites
kicken Prolific Member

kicken

Posted
Posted

You need to include the http:// part of the URL when referencing your files. Without it the browser is going to interpret your paths as being folders under your own domain so it is trying to load the jquery file from http://scitec-sportvoeding.nl/www.bamdaa.com/demo/metro-alert/js/jquery.min.js rather than http://www.bamdaa.com/demo/metro-alert/js/jquery.min.js as you intended. You can see this by checking your browsers error console

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.