Develop Reference

get_footer(); and Google maps conflicts - javascript

My website doesn't display Google maps. The Console says that I include the API multiple times and I didn't.
After that I decided to delete all the javascript and use a Google Maps plugin, and I still having the same error.
I suspect that it has to be calling the get_footer(); function because if I delete >? from my footer.php, the map shows up but I lose the video on the header and the animation that I created for my nav.
Here's the code of my footer.php
</footer>
<!-- Map -->
<!-- Bootstrap JavaScript -->
<script src="<?php bloginfo('template_directory');?>/assets/js/jquery.js"></script>
<script src="<?php bloginfo('template_directory');?>/assets/js/bootstrap.min.js"></script>
<!-- Bx Slider JS -->
<script src="<?php bloginfo('template_directory');?>/assets/js/jquery.bxslider.min.js"></script>
<!-- Add JS counter lib -->
<script src="<?php bloginfo('template_directory');?>/assets/js/jquery.waypoints.min.js"></script>
<script src="<?php bloginfo('template_directory');?>/assets/js/jquery.counterup.min.js"></script>
<!-- Add wow js lib -->
<script src="<?php bloginfo('template_directory');?>/assets/js/wow.min.js"></script>
<!-- Custom Js -->
<script src="<?php bloginfo('template_directory');?>/assets/js/custom.js"></script>
<?php wp_footer(); >?
</body>
</html>
and page-home.php
</section>
<aside class="clients">
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-4">
<a href="https://shucksfishhouse.com" target="_blank">
<img src="<?php bloginfo('stylesheet_directory');?>/assets/images/shucks.jpg" class="img-responsive img-centered" alt="">
</a>
</div>
<div class="col-md-4 col-sm-4">
<a href="https://www.absolutelyfresh.com/" target="_blank">
<img src="<?php bloginfo('stylesheet_directory');?>/assets/images/abs.jpg" class="img-responsive img-centered" alt="">
</a>
</div>
<div class="col-md-4 col-sm-4">
<a href="https://baileysbreakfast.com/" target="_blank">
<img src="<?php bloginfo('stylesheet_directory');?>/assets/images/baileys.jpg" class="img-responsive img-centered" alt="">
</a>
</div>
</div>
</div>
</aside>
<?php get_footer();
Here is the website: http://dundeedell.com/

Related

I've load the the style and the js in my function.php (you can see it in the last of each group)
function recursos_ah6studio(){
wp_enqueue_style('bootstrap', get_theme_file_uri('/css/bootstrap.min.css'));
wp_enqueue_style('slick', get_theme_file_uri('/slick/slick.css'));
wp_enqueue_style('slick-theme', get_theme_file_uri('/slick/slick-theme.css'));
wp_enqueue_style('magnific-popup', get_theme_file_uri('/magnific-popup/magnific-popup.css'));
wp_enqueue_style('font-awesome', get_theme_file_uri('/fontawesome-5.5/css/all.min.css'));
wp_enqueue_style('estilo_ah6studio', get_stylesheet_uri());
wp_enqueue_style('leaflet_style', 'https://unpkg.com/leaflet#1.8.0/dist/leaflet.css'); //here!
wp_enqueue_script('chartjs', 'https://cdn.jsdelivr.net/npm/chart.js', NULL, '1.0', true);
wp_enqueue_script('chartdatalabel', 'https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels#2.0.0/dist/chartjs-plugin-datalabels.min.js', NULL, '1.0', true);
wp_enqueue_script('jquery', get_theme_file_uri('/js/jquery-3.5.1.min.js'), NULL, '1.0', true);
wp_enqueue_script('popper', get_theme_file_uri('/js/popper.min.js'), NULL, '1.0', true);
wp_enqueue_script('boostrap', get_theme_file_uri('/js/bootstrap.min.js'), NULL, '1.0', true);
wp_enqueue_script('slickJS', get_theme_file_uri('/slick/slick.min.js'), NULL, '1.0', true);
wp_enqueue_script('magnific-popup', get_theme_file_uri('/magnific-popup/jquery.magnific-popup.min.js'), NULL, '1.0', true);
wp_enqueue_script('easingJS', get_theme_file_uri('/js/easing.min.js'), NULL, '1.0', true);
wp_enqueue_script('singlePageJS', get_theme_file_uri('/js/jquery.singlePageNav.min.js'), NULL, '1.0', true);
wp_enqueue_script('tool-tip', get_theme_file_uri('/js/tooltip.js'), NULL, '1.0', true);
wp_enqueue_script('leaflet_js','https://unpkg.com/leaflet#1.8.0/dist/leaflet.js', NULL, '1.0', true); // and here
}
add_action('wp_enqueue_scripts', 'recursos_ah6studio');
And put the code in my index.php I've even put some js that the official quick start of Leaflet tells you to start with
<div id="map"></div>
<script>
var map = L.map('map').setView([51.505, -0.09], 13);
</script>
But it does not load the map. Am I doing something wrong?
My footer.php looks like this (someone ask for it):
<div class="container">
<div class="tm-gallery-container">
<div class="row">
<div class="col-lg-2"></div>
<div class="col-lg-8 footer_text"><p>Copyright © 2021 | Todos los derechos reservados | By DALF</p></div>
<div class="col-lg-2"></div>
<div class="col-lg-4"></div>
<div class="col-lg-4 social_icon">
<a href="https://www.facebook.com/ah6studio">
<img src="<?php echo get_theme_file_uri('/images/logo_fb.svg')?>" alt="facebook logo"></a>
<a href="https://www.youtube.com/channel/UCgPsU_qjhhbCFNETiT7OCWg">
<img src="<?php echo get_theme_file_uri('/images/logo_yt.svg')?>" alt="youtube logo"></a>
<a href="https://www.instagram.com/ah6studio/">
<img src="<?php echo get_theme_file_uri('/images/logo_ig.svg')?>" alt="instagram logo"></a>
<a href="https://www.linkedin.com/company/77211866/">
<img src="<?php echo get_theme_file_uri('/images/logo_Lin.svg')?>" alt="linkedin logo"></a>
</div>
<div class="col-lg-4"></div>
</div>
</div>
</div>
<?php wp_footer(); ?>
</body>
</html>

In WordPress, you don't add any code to index.php. The comment at the top of the page starts with "This file doesn't do anything..."
To make modifications, you add code to the theme's functions.php or any one of the template files. For illustration I'll use the footer.php template file that you have provided. I've not tested the code, but this should display the map in the Footer of the page:
<div class="container">
<div class="row">
<div class="col-lg-10">
<div id="map"></div>
<script>
var map = L.map('map').setView([51.505, -0.09], 13);
</script>
</div>
</div>
<div class="tm-gallery-container">
<div class="row">
<div class="col-lg-2"></div>
<div class="col-lg-8 footer_text"><p>Copyright © 2021 | Todos los derechos reservados | By DALF</p></div>
<div class="col-lg-2"></div>
<div class="col-lg-4"></div>
<div class="col-lg-4 social_icon">
<a href="https://www.facebook.com/ah6studio">
<img src="<?php echo get_theme_file_uri('/images/logo_fb.svg')?>" alt="facebook logo"></a>
<a href="https://www.youtube.com/channel/UCgPsU_qjhhbCFNETiT7OCWg">
<img src="<?php echo get_theme_file_uri('/images/logo_yt.svg')?>" alt="youtube logo"></a>
<a href="https://www.instagram.com/ah6studio/">
<img src="<?php echo get_theme_file_uri('/images/logo_ig.svg')?>" alt="instagram logo"></a>
<a href="https://www.linkedin.com/company/77211866/">
<img src="<?php echo get_theme_file_uri('/images/logo_Lin.svg')?>" alt="linkedin logo"></a>
</div>
<div class="col-lg-4"></div>
</div>
</div>
</div>
<?php wp_footer(); ?>
</body>
</html>

I am trying to use Zurb Foundation equalizer plugin for this grid layout below:
<div class="row eq-height" data-equalizer>
<div class="medium-3 columns" data-equalizer-watch>
<img class="img-responsive" src="http://placehold.it/800x1240" alt="">
</div>
<div class="medium-6 columns" data-equalizer-watch>
<img class="img-responsive" src="http://placehold.it/800x603" alt="">
</div>
<div class="medium-3 columns" data-equalizer-watch>
<img class="img-responsive" src="http://placehold.it/800x600" alt="">
<img class="img-responsive" src="http://placehold.it/800x600" alt="">
</div>
</div>
I have the plugin loaded:
<!-- Compressed CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/css/foundation.min.css">
<!-- Compressed JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/js/foundation.min.js"></script>
<!-- https://cdnjs.com/libraries/foundation/6.3.0 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/js/plugins/foundation.equalizer.js"></script>
And call the plugin:
<script>
$(function() {
$(document).foundation('equalizer', 'reflow');
});
</script>
But I get this error instead:
Uncaught ReferenceError: We're sorry, 'equalizer' is not an available method for this element.
at r.fn.init.a [as foundation] (foundation.min.js:1)
at HTMLDocument.<anonymous> (cdn.html:112)
at j (jquery.min.js:2)
at k (jquery.min.js:2)
Any ideas what i have missed?

Try with $(document).foundation(); to definition foundation.
With $(document).foundation('equalizer', 'reflow'); you are trying to refresh equalizer but you don't have already defined.

I am following online tutorial for bootstrap lightbox thumbnail. I typed exact same code multiple times but it is not working. Whenever I click on the image, it opens up in new tab instead of popping up in the same window.
Here is the code,
<title>Lightbox</title>
<link href="css/lightbox.css" rel="stylesheet" type="text/css">
<script src="http//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="F:/LightBox/lightbox.js"></script>
<link href="css/lightbox.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!--
<link rel="stylesheet" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
-->
<link rel="stylesheet" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<img src="1.jpg" alt="" class="img-thumbnail"
</div>
</div>
</div>
<!--
<script src="F:/LightBox/lightbox.js"></script>
-->
</body>
I tried adding lightbox.js file at different positions but, still not working.

You have some errors in your HTML:
Your img tag isn'g closed.
You have this inside your a tag href="1.jpg"="image=1", just
link to the image path once.
You aren't using the data-attribute for the plugin:
data-lightbox="" on your a tag either.
Review the Docs: Lightbox2
Working Example
<link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.8.2/css/lightbox.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-sm-3">
<a class="img-thumbnail" href="http://placehold.it/350x350/f00" data-lightbox="example-set" data-title="title">
<img class="img-thumbnail" src="http://placehold.it/350x350/f00" alt="alt">
</a>
</div>
<div class="col-sm-3">
<a class="img-thumbnail" href="http://placehold.it/350x350/000" data-lightbox="example-set" data-title="title">
<img class="img-thumbnail" src="http://placehold.it/350x350/000" alt="alt">
</a>
</div>
<div class="col-sm-3">
<a class="img-thumbnail" href="http://placehold.it/350x350/ff0" data-lightbox="example-set" data-title="title">
<img class="img-thumbnail" src="http://placehold.it/350x350/ff0" alt="alt">
</a>
</div>
<div class="col-sm-3">
<a class="img-thumbnail" href="http://placehold.it/350x350" data-lightbox="example-set" data-title="title">
<img class="img-thumbnail" src="http://placehold.it/350x350" alt="alt">
</a>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.8.2/js/lightbox.min.js"></script>

Ok so I'm learning lightbox for the first time. I'm trying to use it with this bootstrap template I downloaded which made it easy to put in the images and customize the navbar. Right now when I click the image, it brings me to a page with JUST the image. No pop up. Right now I'm focusing on just gallery1.jpg if you look at the HTML. Am I missing something? Hope this isn't confusing, thanks.
I am trying to use fancyBox for the lightbox add on.
Do I have the javascript location typed up incorrectly? http://i.imgur.com/pCgZkKA.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>4 Col Portfolio - Start Bootstrap Template</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/4-col-portfolio.css" rel="stylesheet">
<!-- lightbox stuff -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<link rel="stylesheet" href="js/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="js/source/jquery.fancybox.pack.js?v=2.1.5"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation" style="background-color:#F60;">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs- example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="../startbootstrap4/index.html"><img src="logonav.png"</a></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
Home
</li>
<li>
Gallery
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Page Content -->
<div class="container">
<!-- Page Heading -->
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Gallery
</h1>
</div>
</div>
<!-- /.row -->
<!-- Projects Row -->
<div class="row">
<div class="col-md-3 portfolio-item">
<a class="fancybox" rel="group" href="images/gallery1.jpg" data-lightbox="fancybox" data- title="untitled"><img src="images/gallery1.jpg"></a>
</div>
<div class="col-md-3 portfolio-item">
<a href="#">
<img class="img-responsive" src="images/gallery2.jpg" alt="">
</a>
</div>
<div class="col-md-3 portfolio-item">
<a href="#">
<img class="img-responsive" src="images/gallery10.jpg" alt="">
</a>
</div>
<div class="col-md-3 portfolio-item">
<a href="#">
<img class="img-responsive" src="images/gallery4.jpg" alt="">
</a>
</div>
</div>
<!-- /.row -->
<!-- Projects Row -->
<div class="row">
<div class="col-md-3 portfolio-item">
<a href="#">
<img class="img-responsive" src="images/gallery5.jpg" alt="">
</a>
</div>
<div class="col-md-3 portfolio-item">
<a href="#">
<img class="img-responsive" src="images/gallery3.jpg" alt="">
</a>
</div>
<div class="col-md-3 portfolio-item">
<a href="#">
<img class="img-responsive" src="images/gallery9.jpg" alt="">
</a>
</div>
<div class="col-md-3 portfolio-item">
<a href="#">
<img class="img-responsive" src="images/gallery8.jpg" alt="">
</a>
</div>
</div>
<!-- /.row -->
<!-- Projects Row -->
<div class="row">
<div class="col-md-3 portfolio-item">
<a href="#">
<img class="img-responsive" src="images/gallery7.jpg" alt="">
</a>
</div>
<div class="col-md-3 portfolio-item">
<a href="#">
<img class="img-responsive" src="images/gallery6.jpg" alt="">
</a>
</div>
<div class="col-md-3 portfolio-item">
<a href="#">
<img class="img-responsive" src="images/gallery11.jpg" alt="">
</a>
</div>
<div class="col-md-3 portfolio-item">
<a href="#">
<img class="img-responsive" src="images/gallery12.jpg" alt="">
</a>
</div>
</div>
<!-- /.row -->
<hr>
<!-- Pagination -->
<div class="row text-center">
<div class="col-lg-12">
<ul class="pagination">
<li>
«
</li>
<li class="active">
1
</li>
<li>
2
</li>
<li>
3
</li>
<li>
4
</li>
<li>
»
</li>
</ul>
</div>
</div>
<hr>
<footer>
<div class="row">
</div>
</footer>
</div>
<!-- /.container -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>

You are loading jQuery twice:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
and at the end
<script src="js/jquery.js"></script>
remove the second one.

I'm using bootstrap and joomla 3 to build a template (http://lucapadovani.com/tese-beta/) and having some issues with 2 responsive navbars: when I click on the toggle buttons the menus simply do not open. I guess there might be some kind of conflict between joomla "bootstrap.framework" and other js related stuff, but all of this is quite new for me, so I'm not sure how to solve the problem. Any help? Thx.
Index.php
<?php
defined('_JEXEC') or die;
// Add JavaScript Frameworks
JHtml::_('bootstrap.framework');
// Load optional Bootstrap bugfixes
JHtmlBootstrap::loadCss($includeMaincss = true);
// Check homepage
$defaultMenu = JFactory::getApplication()->getMenu()->getDefault()->id;
$currentMenu = JFactory::getApplication()->getMenu()->getActive()->id;
if($defaultMenu == $currentMenu){
$bodyId = 'id="home"';
$homePage = true;
}else{
$bodyId = '';
$homePage = false;
}
// Logo file or site title param
if ($this->params->get('logoFile'))
{
$logo = '<img src="'. JURI::root() . $this->params->get('logoFile') .'" alt=" Tese" />';
}
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Include optional regions in the template -->
<?php
$this->_scripts = array();
?>
<jdoc:include type="head" />
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="<?php echo $this->baseurl ?>/media/jui/js/html5.js"></script>
<![endif]-->
<!-- Stylesheets listed below
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />-->
<!-- Bootstrap styling -->
<link href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/bootstrap.css" rel="stylesheet" media="screen">
<link href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/custom.css" rel="stylesheet" media="screen">
<?php
// Header color
if ($this->params->get('headerColor'))
{
?>
<style type="text/css">
header{
background:<?php echo $this->params->get('headerColor');?>;
}
</style>
<?php
}
?>
<?php
// Top menu (active-item) color
if ($this->params->get('topColor'))
{
?>
<style type="text/css">
.topheader .navbar-inverse .nav .active>a,
.topheader .navbar-inverse .nav .active>a:hover,
.topheader .navbar-inverse .nav .active>a:focus {
background-color:<?php echo $this->params->get('topColor');?>;
}
</style>
<?php
}
?>
<?php
// Menu color
if ($this->params->get('menuColor'))
{
?>
<style type="text/css">
#mainnav.navbar-inverse .nav .active>a,
#mainnav.navbar-inverse .nav .active>a,
#mainnav.navbar-inverse .nav .active>a {
background-color:<?php echo $this->params->get('menuColor');?>;
}
</style>
<?php
}
?>
<script src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/js/respond.min.js"></script>
</head>
<body>
<div class="container all"><!--Page container-->
<!--===Top===-->
<div class="row topheader">
<div class="col-sm-12">
<nav class="navbar navbar-inverse" role="navigation" id="topnav">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand visible-xs" href="#">Tese</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<jdoc:include type="modules" name="topmenu" style="html5" />
<ul class="nav navbar-nav navbar-right">
<li><jdoc:include type="modules" name="socialnetworks" style="html5" /></li>
<li><jdoc:include type="modules" name="search" style="html5" /></li>
</ul>
</div>
</nav>
</div>
</div>
<!--===/top===-->
<!--===Header===-->
<header class="row">
<div class="col-sm-3 logo"><?php echo $logo;?></div>
<div class="col-sm-7">
<nav class="navbar navbar-inverse" role="navigation" id="mainnav">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex2-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand visible-xs" href="#">Menu</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex2-collapse">
<jdoc:include type="modules" name="menu" style="html5" />
</div><!-- /.navbar-collapse -->
</nav>
</div>
<div class="col-sm-2">
<jdoc:include type="modules" name="join" style="html5" />
</div>
</header>
<!--===/header===-->
<!--===Home-only layout===-->
<?php if($homePage == true): ?>
<div class="row">
<div class="col-sm-12"><jdoc:include type="modules" name="banner" style="html5" /></div>
</div>
<div class="row" id="areas">
<div class="col-sm-12"><jdoc:include type="modules" name="buttons" style="html5" /></div>
</div>
<div class="row" id="intro">
<div class="col-sm-12"><jdoc:include type="modules" name="about" style="html5" /></div>
</div>
<div class="row" id="news">
<div class="col-sm-12"><jdoc:include type="modules" name="content1" style="html5" /></div>
<div class="col-sm-12"><jdoc:include type="component" /></div>
</div>
<div class="row" id="partners">
<div class="col-sm-12"><jdoc:include type="modules" name="partners" style="html5" /></div>
</div>
<? endif; ?>
<!--===/home-only layout===-->
<!--===Page layout===-->
<?php if($homePage == false): ?>
<div class="col-sm-3 pull-right">
<jdoc:include type="modules" name="breadcrumb" style="html5" />
</div>
<!-- W/ module right: 2 columns layout -->
<?php if ($this->countModules('right')): ?>
<div class="row">
<div class="col-sm-9" id="main">
<jdoc:include type="modules" name="content1" style="html5" />
<jdoc:include type="component" />
<jdoc:include type="modules" name="content2" style="html5" />
</div>
<div class="col-sm-3" id="sidebar">
<jdoc:include type="modules" name="right" style="html5" />
</div>
</div>
<!-- Else: 1 column layout -->
<?php else : ?>
<div class="col-sm-9">
<jdoc:include type="modules" name="content1" style="html5" />
<jdoc:include type="component" />
<jdoc:include type="modules" name="content2" style="html5" />
</div>
<? endif; ?>
<? endif; ?>
<!--===/page layout===-->
<!--===Footer===-->
<footer class="row">
<div class="col-sm-9"><jdoc:include type="modules" name="footer1" style="html5" /></div>
<div class="col-sm-3"><jdoc:include type="modules" name="footer2" style="html5" /></div>
</footer>
<!--===/footer===-->
</div><!--/page container-->
<!--<script src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/js/jquery.js"></script>
<script src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/js/bootstrap.js"></script>-->
</body>
</html>

I went through the link provided by you.
There are couple of Javascript errors. That you have needed to fix.
JS Error: window.addEvent - addEvent method is undefined. Here, window.addEvent is mootool Javascript library method. I checked it, in your page, I couldn't able to find the reference of mootool library.
JS Error - autocompleter.js - "Uncaught ReferenceError: Class is not defined". This should be resolved after you will add mootools JS link.
You could find that in "media\system\js\mootools-core.js".
As, working with Jquery and mootools requires jquery-noconflict.js. You also need to take care of "jquery-noconflict.js", which you could find it in "media\jui\js\jquery-noconflict.js".
So, make sure to remove the Javascript errors to make your functionality.