I am trying to experiment with Jquery by writing a small game where i am using html div's as game character, so i have this div with id bullet attach to another div with id player, so i have bind on click action to body so that when user click any part of the page body the player fires the button and i am using the Jquery animate method to do that and it works fine except the bullet goes and remain at the top of the page, whereas i want a case where player can fire many bullets at the same time so how can i achieve this. I do not want my bullet div to go and stick at the top.
app.js file
//Control mouse movement and bullet movement
$(document).ready(function(){
$('body').mousemove(function(event){
var msg = 'Handler for mouse called at'
//moves bullet to current mouse position and player position
$('#bullet').css({'left':event.pageX})
//moves player to the current mouse postion
$('#player').css({'left':event.pageX})
})
})
//Fires bullet
$('body').click(function(){
$('#bullet').animate({'bottom':'500px'})
})
Here is a sample that returns the bullet to the player after it reaches the top. It uses the done option of animate() and this answer to return the bullet.
It is important when the animation is done not to remove the entire style attribute with $("#bullet").removeAttr("style") or similar because that would remove the x-coordinate and place the bullet off to the left until the mouse moves again.
//Control mouse movement and bullet movement
$(document).ready(function() {
$('body').mousemove(function(event) {
var msg = 'Handler for mouse called at'
//moves bullet to current mouse position and player position
$('#bullet').css({
'left': event.pageX
})
//moves player to the current mouse postion
$('#player').css({
'left': event.pageX
})
})
})
//Fires bullet
$('body').click(function() {
$('#bullet').animate({
'bottom': '500px'
}, {
done: function() {
$('#bullet').attr('style', function(i, style) {
return style && style.replace(/bottom[^;]+;?/g, '');
});
}
});
});
#player {
height: 50px;
width: 50px;
background-color: red;
position: relative;
}
#bullet {
margin-top: 550px;
height: 25px;
width: 15px;
position: relative;
margin-left: 18px;
}
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body class="blue lighten-4" id="body">
<div class="orange darken-1" id="bullet">
</div>
<div class="" id="player">
</div>
<footer class="page-footer green lighten-1" id="footer">
<div class="container">
<div class="row">
<div class="col l6 s12">
<!-- <h5 class="green-text lighten-1">Footer Content</h5>
<p class="green-text lighten-1">You can use rows and columns here to organize your footer content.</p> -->
</div>
<div class="col l4 offset-l2 s12">
<!-- <h5 class="white-text">Links</h5>-->
<ul>
<!-- <li><a class="grey-text text-lighten-3" href="#!">Link 1</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Link 2</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Link 3</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Link 4</a></li> -->
</ul>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">
<!-- © 2014 Copyright Text
<a class="grey-text text-lighten-4 right" href="#!">More Links</a> -->
</div>
</div>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>
Related
I have a bootstrap4 `card' which is hidden and I want to display it with slide right to left slow animation on button click. Below is the markup
<div class="card" id="setup" style="display:none;">
<div class="card-header">Settings</div>
<div class="card-body">
Setup
</div>
</div>
</div>
Below is click event
$("#Finalize").click(function () {
$('#setup).show();
$("#setup").animate({ left: '0' }, 'slow');
});
With the above jquery code, I am just able to display the card, its animation effect is not working? What's wrong and how to make it work?
This worked for me:
$(function(){
$("#Finalize").click(function () {
$(".cardcontainer").show();
var left = $('#card').offset().left;
$("#card").css({left:left}).animate({"left":"0px"}, "slow");
});
});
.cardcontainer{
position:relative;
height: 220px;
display:none
}
.card{
position:absolute !important;
width:200px;
right:0px;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class="cardcontainer">
<div class="card" id="card">
<div class="card-header">Settings</div>
<div class="card-body">
Setup
</div>
</div>
</div>
</div>
<div>
<a id="Finalize" href="#" class="btn btn-primary">Go somewhere</a>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
Ok, here is the html:
<div class="card animatable" id="setup" style="display: none;">
<div class="card-header">Settings</div>
<div class="card-body">
Setup
</div>
</div>
</div>
here is the CSS (we need to define a width for the card. I just put 500px, you can make it however big you want it obviously)
#setup {
width: 500px;
}
And here is the javascript.
$("#Finalize").click(function () {
if ($('#setup').hasClass('animatable')) {
$('#setup').show();
$('#setup').css('margin-left', $(window).width());
$("#setup").animate({ right: "+=" + $(window).width()}, 'slow');
$('#setup').removeClass('animatable');
}
});
Note I know you said you didn't want a margin. According to the HTML code you posted, the card will appear on the left side of the screen with the DOM loads. So if you run the animation, it will fly off the screen because it's going to move to the left when it's already placed at the left. So we need to move it to the right, hence my margin-left. Now if you absolutely cannot have a margin, you can give the card an absolute position, and just left it over to the right side of the screen. Also, we need to give it a width so that the card won't crumple up when we move it to the right side of the screen.
I hope this helps!
I have a tabbed menu and I want the tabbed menu (the ul class="tabs") to be swipe-able in mobile view.
EDIT: I found a snippet on using Slick JS, I never knew about this JS but I want it to apply this codepen on my current tabbed menu.
How to combine with my current tabbed menu properly? I tried to combine it but the current UI design of my tabbed menu getting messed up.
Here's my codepen of tabbed menu
<section class="wrapper">
<ul class="tabs">
<li class="active"><span class="icons-tabbed icon-icon-tab-locator">Tab 1</span></li>
<li><span id="partner-store" class="icons-tabbed icon-icon-tab-howto">Tab 2</span></li>
<li><span id="partner-store" class="icons-tabbed icon-icon-tab-howto">Tab 3</span></li>
</ul>
<ul class="tab__content">
<li class="active">
<div id="tab1" class="content__wrapper">
</div>
</li>
If all you want to do is swipe horizontally on a menu, to reveal any other nav items not visible in the viewport, you can do that with css.
#media screen and (max-width: 768px) {
.tabs {
overflow-x: scroll;
white-space: nowrap;
}
}
Use jquery.mobile. This is ideal for your purpose. I wrote a sample of how it works. What you will have to do next is to bind the swipe event with your click tabs. I suggest you use next() for the right swipe and prev() for left swipe to target the tabs.
See this sample:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
$(document).on("pagecreate","#pageone",function(){
$("p").on("swipeleft",function(){
alert('swiped left');
});
$("p").on("swiperight",function(){
alert('swiped right');
});
});
</script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
</div>
<div data-role="main" class="ui-content">
<p style="background:red; height:250px; font-size:50px">If you swipe me in the left or right, an event will be triggered.</p>
</div>
</div>
</body>
</html>
Basically all anchor hrefs work except that the scrollspy is not working. Data-offset is not working also.On click only the first li 'Home' is changing its background all others are not working. When scrolling down to #search-nav #obqvi #about and so on menu buttons related to them are not getting colored also so this means my scrollspy is not working at all.
Also when i click one of the anchors the whole header menu buttons reload it happens for around 0.1s but its ugly.
http://getbootstrap.com/javascript/#scrollspy this is the link im using as template and i cannot see any difference compared to my code
HTML :
<body data-spy="scroll" data-target=".navbar" data-offset="0">
<header>
<nav class="navbar navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img id="logo-img" src="images/logo.png" alt="logo"></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Home</li>
<li><span class="glyphicon glyphicon-search"></span> Search</li>
<li><span class="glyphicon glyphicon-home"></span> Sales</li>
<li><span class="fa fa-cogs"></span> Services</li>
<li><span class="glyphicon glyphicon-comment"></span> Contact</li>
<li><span class="glyphicon glyphicon-link"></span> About Us</li>
</ul>
</div>
</div>
</nav>
</header>
....
Edited with Jquery script but it still does not work when i click on 'a' i get smooth scrolling to the position thats alright
but when i scroll with the scrollwheel the button related to the section doesnt get colored and on click also it doesnt get colored
JS:
<script>
$(document).ready(function(){
$('.btn-information').click(function(){
$('#myModal').modal('show');
});
// Add scrollspy to <body>
$('body').scrollspy({ target: ".navbar", offset: 50 });
// Add smooth scrolling on all links inside the navbar
$("#myNavbar a").on('click', function (event) {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function () {
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
});
});
</script>
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
body {
position: relative;
}
#search-nav {
padding-top: 50px;
height: 500px;
color: #fff;
background-color: #1E88E5;
}
#obqvi {
padding-top: 50px;
height: 500px;
color: #fff;
background-color: #673ab7;
}
#about {
padding-top: 50px;
height: 500px;
color: #fff;
background-color: #ff9800;
}
#footer-contact-form {
padding-top: 50px;
height: 500px;
color: #fff;
background-color: #ff9800;
}
#end-footer {
padding-top: 50px;
height: 500px;
color: #fff;
background-color: #ff9800;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Home</li>
<li><span class="glyphicon glyphicon-search"></span> Search</li>
<li><span class="glyphicon glyphicon-home"></span> Sales</li>
<li><span class="fa fa-cogs"></span> Services</li>
<li><span class="glyphicon glyphicon-comment"></span> Contact</li>
<li><span class="glyphicon glyphicon-link"></span> About Us</li>
</ul>
</div>
</div>
</div>
</nav>
<div id="search-nav" class="container-fluid">
<h1>Section 1</h1>
<p>Click on the different Section links in the navbar to see the smooth scrolling effect.</p>
</div>
<div id="obqvi" class="container-fluid">
<h1>Section 2</h1>
<p>Click on the different Section links in the navbar to see the smooth scrolling effect.</p>
</div>
<div id="about" class="container-fluid">
<h1>Section 3</h1>
<p>Click on the different Section links in the navbar to see the smooth scrolling effect.</p>
</div>
<div id="footer-contact-form" class="container-fluid">
<h1>Section 3</h1>
<p>Click on the different Section links in the navbar to see the smooth scrolling effect.</p>
</div>
<div id="end-footer" class="container-fluid">
<h1>Section 3</h1>
<p>Click on the different Section links in the navbar to see the smooth scrolling effect.</p>
</div>
<script>
$(document).ready(function () {
// Add scrollspy to <body>
$('body').scrollspy({ target: ".navbar", offset: 50 });
// Add smooth scrolling on all links inside the navbar
$("#myNavbar a").on('click', function (event) {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function () {
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
});
});
</script>
</body>
</html>
I don't know if it will help, but I had to include the following in my js when I was using a scroll spy function. Also - check that you have the required files for the scroll spy to work and that jquery is loaded and called into the page first.
// jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});
// Highlight the top nav as scrolling occurs
$('body').scrollspy({
target: '.navbar-fixed-top'
})
I create a webpage which is scroll horizontal from
http://www.pixxelfactory.net/jInvertScroll/
but now i am create a menu bar when i am click on menu bar the i will scroll left to div
my code is
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>The Hot Air Balloon</title>
<!--<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,700" rel="stylesheet" type="text/css" /> -->
<link rel="stylesheet" href="css/jInvertScroll.css" />
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" >
function changeonhover(a)
{
for(var i =1 ;i<=4;i++)
{
if(i==a)
{
document.getElementById("link"+i).style.color = "blue";
}
else
{
document.getElementById("link"+i).style.color = "white";
}
}
}
</script>
<style type="text/css">
#header {
position: fixed;
top: 0;
z-index: 500;
height: 45px;
}
</style>
</head>
<body>
<div id="header">
<a href="#div1" id="link1" >Div1 </a>
<a href="#div2" id="link2" >Div2 </a>
<a href="#div3" id="link3" >Div3 </a>
<a href="#div4" id="link4" >Div4 </a>
</div>
<div class="container">
<!--<div class="horizon scroll">
<img src="images/background.png" alt="" />
</div>
<div class="middle scroll">
<img src="images/cloudsandballoons.png" alt="" />
</div>
<div class="panel1">
-->
<div class="front scroll">
<h1 class="intro">Scroll down</h1>
<div id="div1" onmouseover="changeonhover('1')" class="panel1 page">
<h2>The Hot Air Balloon</h2>
<p>
The hot air balloon is the oldest successful human-carrying flight technology. It is part of a class of aircraft known as balloon aircraft.
</p>
<p>
On November 21, 1783, in Paris, France, the first untethered manned flight was performed by Jean-François Pilâtre de Rozier and François Laurent d'Arlandes in a hot air balloon created on December 14, 1782 by the Montgolfier brothers. Hot air balloons that can be propelled through the air rather than just being pushed along by the wind are known as airships or, more specifically, thermal airships.
</p>
</div>
<div id="div2" onmouseover="changeonhover('2')" class="panel2 page">
<h2>How they work</h2>
<p>A hot air balloon consists of a bag called the envelope that is capable of containing heated air. Suspended beneath is a gondola or wicker basket (in some long-distance or high-altitude balloons, a capsule), which carries passengers and (usually) a source of heat, in most cases an open flame.
</p>
<p>
The heated air inside the envelope makes it buoyant since it has a lower density than the relatively cold air outside the envelope.
</p>
</div>
<div id="div3" onmouseover="changeonhover('3')" class="panel3 page">
<h2>Practicalities</h2>
<p>As with all aircraft, hot air balloons cannot fly beyond the atmosphere. Unlike gas balloons, the envelope does not have to be sealed at the bottom since the air near the bottom of the envelope is at the same pressure as the air surrounding.
</p>
<p>
For modern sport balloons the envelope is generally made from nylon fabric and the inlet of the balloon (closest to the burner flame) is made from fire resistant material such as Nomex. </p>
</div>
<div id="div4" onmouseover="changeonhover('4')" class="panel4 page">
<h2>Modern ballooning</h2>
<p>
Beginning during the mid-1970s, balloon envelopes have been made in all kinds of shapes, such as rocket ships and the shapes of various commercial products, though the traditional shape remains popular for most non-commercial, and many commercial, applications.
</p>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="http://www.pixxelfactory.net/jInvertScroll/js/jquery.jInvertScroll.js"></script>
<script type="text/javascript">
(function($) {
$.jInvertScroll(['.scroll']);
}(jQuery));
</script>
<script type="text/javascript">
$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function () {
window.location.hash = target;
});
});
});
</script>
</body>
</html>
but when i click on link i does not work. please help me
Link
You should change this
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function () {
window.location.hash = target;
});
To this (you want the top value to change to the left position value. So scrollTop and position().left
$('html, body').stop().animate({
'scrollTop': $target.position().left
}, 900, 'swing', function () {
window.location.hash = target;
});
On your fiddle, the content div are all on the same "position" so when you click on the links it will not do anything because every div are already on sight.
Instead of trying to use the internal link which are normally used for vertically scrolling, would you mind trying to call your JinvertScroll function on Click on the div links with a parameter of the width from the internal div?
I implemented two different jquery scripts for a website. One is for "unslider" to view sliding photos in the banner div and the other is a hovering underline called magicline.js for the menu div. The problem is unslider stops working when I want to use magicline.js for the menu div. It looks like these two scripts are in conflict with each other. I can't figure out what is happening between these two scripts. Let me know if you have an idea
You can view the website that I am working on at bravodesignbc.com
Here is the html for the site:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<title>Untitled Document</title>
<script src="scripts/jquery-1.10.2.min.js"></script>
<script src="scripts/unsliderNew.js"></script>
<script src="scripts/magicLine.js"></script>
<script>
$(function() {
$('.banner').unslider();
});
$('.banner').unslider({
speed: 400, // The speed to animate each slide (in milliseconds)
delay: 3000, // The delay between slide animations (in milliseconds)
keys: true, // Enable keyboard (left, right) arrow shortcuts
dots: false, // Display dot navigation
fluid: false // Support responsive design. May break non-responsive designs
});
</script>
</head>
<body>
<!---
--->
<div id="header">
<div id="headerWrap">
<div id="brand">
<img style="position: absolute; top: 18px; left: 0px;" src="images/bdLogo.png" />
<h1>Bravo Design</h1>
<h3>Renovation & Construction</h3>
</div>
<p id=rightHead> contact us <br /> 604.723.6059</p>
</div>
</div>
<div class="menuWrap">
<ul class="group" id="menu">
<li class="current_page_item">Home</li>
<li>About</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</div>
<div id="feature">
<div class="banner">
<div class="buttonPrev">
<img src="images/prev.png" />
</div>
<div class="buttonNext">
<img src="images/next.png" />
</div>
<div class="bottomBanner">
<h2>Serving the lower mainland<br />
for over twenty years
</h2>
</div>
<script>
var unslider = $('.banner').unslider();
$('.unslider-arrow').click(function(event) {
event.preventDefault();
if ($(this).hasClass('next')) {
unslider.data('unslider')['next']();
} else {
unslider.data('unslider')['prev']();
};
});
</script>
<ul>
<li><img src="images/knappen.jpg" /></li>
<li><img src="images/closeupChandelier.jpg" /></li>
<li class="listBg"><h3>Slide 3</h3></li>
</ul>
</div>
</div>
<div id="content">
<div id="contentWrap">
<div id="desc"><p>Bravo Design was created by its founder Waldemar Slonina. Waldemar is pronounced “Valdemar” in Polish. Waldemar started Bravo Design unofficially in 1992 when he arrived in Vancouver from Europe. He originally worked for another larger company, at first, but did side jobs, where he first got a taste of owning a business. Then, he began with a small framing business, which quickly led to more work in renovations and construction around Vancouver. Soon, he started to gain business all around the Lower Mainland. Since, he has worked locally in the Tri-cities and Vancouver.<br /><br />
His former clients would classify him as reliable, on-budget, hard working, on-schedule, and diligent. These qualities have helped him sustain a successful small business for over two decades. He approaches each new project with enthusiasm!<p>
</div>
<div id="column">
<h3 style="padding-left: 10px; padding-top: 10px;">Testimonials</h3>
<p style="padding: 10px; padding-top: 0px;">"The job you did with our kitchen is amazing yayayayyayayda" <br />
<i>-Art Vandelay,</i> Maple Ridge</p>
</div>
</div>
</div>
<div id="footer">
<div id="footerWrap">
<div id="leftFoot"><img style="position: absolute; top: 10px; left: 0px;" src="images/logoMini.png" />
<p style="position: absolute; top: 10px; left: 40px;" > Bravo Design</p>
<p style="position: absolute; top: 28px; left: 40px; font-size: 11px; border-top:solid 1px #FFF;" > Renovation & Construction</p>
</div>
<div id="rightFoot"><p style="font-size: 12px;">Copyright 2013. Bravo Design. All rights reserved.<br />
Website design by think Chameleon</p></div>
</div>
</div>
</body>
</html>