jQuery is not working in webpage?

jQuery is not working in webpage? - javascript

I am using jQuery but its not working in my webpage.
jquery-1.10.2.min.js is used for TAB and jquery.lightbox-0.5.js" is used for Photo gallery with jquery.js scripting file.
Now though it shows the tab buttons and the thumbnails of the gallery, when I click on the tabs the tab doesn't work and photo gallery doesn't work too.
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery.opacityrollover.js" type="text/javascript"></script>
<!--[if lt IE 7]>
<div style=' clear: both; text-align:center; position: relative;'>
<img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" alt="" />
</div>
<![endif]-->
<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5.js"></script>
<link rel="stylesheet" href="css/ie.css" type="text/css" media="screen">
<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
<!-- / fim dos arquivos utilizados pelo jQuery lightBox plugin -->
<!-- Ativando o jQuery lightBox plugin -->
<script type="text/javascript">
$(function() {
$('#photog a').lightBox();
});
</script>
<style type="text/css">
/* jQuery lightBox plugin - Gallery style */
</head>
<body id="page1">
<!--==============================header=================================-->
<header>
<div class="row-2">
<div class="main">
<div class="container_12">
<div class="grid_9">
<div id="logom">
<img src="images/logo-iie.png" width="43" height="54" alt="IIE LOGO" />
</div>
<h1>
<a class="logo" href="index.html">Indian Institute of Entrepreneurship</a>
<span>Clusters in North East Region</span>
</h1>
An Organisation of the Ministry Of Micro, Small and Medium Enterprises(MSME),<br>
Govt.of India
An ISO 9001:2008 Certified Organisation
</div>
<div id="logor"><img src="images/logo-rrc.png" width="51" height="54" alt="IIE LOGO" /></div>
</div>
<div class="clear"></div>
</div>
</div>
<div class="row-1">
<div class="main">
<div class="container_12">
<div class="grid_12">
<!-- Main navigation -->
<nav class="main-navigation clearfix span12" role="navigation">
<ul>
<li>Home</li>
<li>About</li>
<li>RRC Team</li>
<li>
Clusters
<ul class="sub-menu">
<li>Assam
<ul class="sub-menu">
<li>Sipajhar Handloom Cluster</li>
<li>Dhamdhama Handloom Cluster</li>
<li>Pyranga Eri Cluster</li>
<li>Rontholi Jewellery Cluster</li>
<li>Bogulamari Jute Cluster</li>
<li>Asharikandi Terracotta Cluster</li>
<li>Japi Cluster</li>
<li>Incense Sticks cluster</li>
</ul>
</li>
<li>Manipur
<ul class="sub-menu">
<li>Kouna Grass Cluster</li>
<li>Imphal Handloom Cluster</li>
<li>Greater Imphal Jewellery Cluster</li>
</ul>
</li>
<li>Mizoram
<ul class="sub-menu">
<li>Baktwang Wood Carpentry Cluster</li>
<li>Bairabi Bamboo cluster</li>
</ul>
</li>
<li>Sikkim
<ul class="sub-menu">
<li>Okhrey Carpet Making Cluster</li>
</ul>
</li>
<li>Tripura
<ul class="sub-menu">
<li>Hapania Jute Cluster</li>
</ul>
</li>
<li>Meghalaya
<ul class="sub-menu">
<li>Strawberry Cluster, Ri-Bhoi</li>
<li>Umden Eri Cluster</li>
<li>Cashew Nut Cluster, Selsela</li>
</ul>
</li>
<li>Arunachal Pradesh
<ul class="sub-menu">
<li>Tawang Carpet Making Cluster</li>
<li>Dirang Food Processing Cluster</li>
</ul>
</li>
</ul>
</li>
<li class="current">Photo Gallery</li>
<li>Contact</li>
</ul>
</nav> <!-- #main-navigation -->
</div>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
</header>
<!-- content -->
<section id="content">
<div class="bg-top">
<div class="bg-top-2">
<div class="bg">
<div class="bg-top-shadow">
<div class="main">
<div class="gallery p3">
<div class="wrapper indent-bot">
<span class="title img-indent3">Gallery</span>
<div class="cleaner_h10"> </div>
<!--------------------------------------->
<div id="w" class="clearfix">
<ul id="sidemenu">
<li>
<i class="icon-info-sign icon-large"></i><strong>Assam</strong>
</li>
<li>
<i class="icon-lightbulb icon-large"></i><strong>Manipur</strong>
</li>
<li>
<i class="icon-envelope icon-large"></i><strong>Mizoram</strong>
</li>
<li>
<i class="icon-envelope icon-large"></i><strong>Sikkim</strong>
</li>
<li>
<i class="icon-envelope icon-large"></i><strong>Tripura</strong>
</li>
<li>
<i class="icon-envelope icon-large"></i><strong>Meghalaya</strong>
</li>
<li>
<i class="icon-envelope icon-large"></i><strong>Arunachal</strong>
</li>
</ul>
<div id="contab">
<div id="assam-content" class="contabblock">
<h1>Assam</h1>
</div><!-- #end -->
<div id="manipur-content" class="contabblock hidden">
<h1>Manipur</h1>
</div><!-- #end -->
<div id="mizoram-content" class="contabblock hidden">
<h1>Mizoram</h1>
</div><!-- #end -->
<div id="sikkim-content" class="contabblock hidden">
<h1>Sikkim</h1>
</div><!-- #end -->
<div id="tripura-content" class="contabblock hidden">
<h1>Tripura</h1>
</div><!-- #end -->
<div id="meghalaya-content" class="contabblock hidden">
<h1>MIzoram</h1>
</div><!-- #end -->
<div id="arunachal-content" class="contabblock hidden">
<h1>Arunachal Pradesh</h1>
</div><!-- #end -->
</div><!-- #end #content -->
</div><!-- #end #w -->
<!--------------------------------------->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--==============================footer=================================-->
<footer>
<div class="main">
<div class="container_12">
<div class="wrapper2">
<div class="grid_4">
<div>© 2014 All right reserved</div>
<!-- {%FOOTER_LINK} -->
</div>
<div class="grid_4">
<div>Powered by: Third Eye</div>
</div>
<div class="grid_4">
<ul class="list-services">
<li></li>
<li><a class="item-2" href="#"></a></li>
</ul>
</div>
</div>
</div>
</div>
</footer>
<script type="text/javascript">
$(function(){
$('#sidemenu a').on('click', function(e){
e.preventDefault();
if($(this).hasClass('open')) {
// do nothing because the link is already open
} else {
var oldcontent = $('#sidemenu a.open').attr('href');
var newcontent = $(this).attr('href');
$(oldcontent).fadeOut('fast', function(){
$(newcontent).fadeIn().removeClass('hidden');
$(oldcontent).addClass('hidden');
});
$('#sidemenu a').removeClass('open');
$(this).addClass('open');
}
});
});
</script>
</body>
</html>

I don't really know what your script does but just by reading it I see this problem:
var oldcontent = $('#sidemenu a.open').attr('href');
var newcontent = $(this).attr('href');
So oldcontent and newcontent are a bunch of strings containing links (URLs) like "http://....." etc.
Then you're trying to make those "strings" fade:
$(oldcontent).fadeOut('fast', function(){
$(newcontent).fadeIn().removeClass('hidden');
$(oldcontent).addClass('hidden');
});
I think something is missing in between...

Related

Bootstrap tab dropdown doesn't show after 1st click

In my sample code below, the dropdown tab contents does not show after it's viewed for first time.
(function($) {
$(function() {
$('a[data-toggle = "tab"]').on('shown.bs.tab', function(e) {
// Get the name of active tab
var activeTab = $(e.target).text();
// Get the name of previous tab
var previousTab = $(e.relatedTarget).text();
$(".active-tab span").html(activeTab);
$(".previous-tab span").html(previousTab);
});
});
})(jQuery);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<main class="main"></main>
<hr>
<p class="active-tab"><strong>Active Tab</strong>: <span></span></p>
<p class="previous-tab"><strong>Previous Tab</strong>: <span></span></p>
<hr>
<ul class="nav nav-tabs" role="tablist" id="myTab">
<li role="presentation" class="active">Home</li>
<li role="presentation">Details</li>
<li class="dropdown">
<a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">
Java
<b class="caret"></b>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
<li>
D1
</li>
<li>
D2
</li>
</ul>
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
<p>This is the home page</p>
</div>
<div role="tabpanel" class="tab-pane" id="account-details">
<p>Pane 1</p>
</div>
<div role="tabpanel" class="tab-pane" id="d1">
<p>Dropdown 1</p>
</div>
<div role="tabpanel" class="tab-pane" id="d2">
<p>Dropdown 2</p>
</div>
</div>
</main>
<!-- Page style-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
When the active tab becomes one of the dropdown values (D1/D2) and when you change the active tab to any other tab, the Previous Tab: value becomes empty.
Now if I select dropdown 1 again, I don't see the content.
Any feedback is appreciated.
Thank you.

You are mixing up between Bootstrap v3 and v4 which causing this conflict, just remove the v4 one, (Your code is compatible with v3)
(function($) {
$(function() {
$('a[data-toggle = "tab"]').on('shown.bs.tab', function(e) {
// Get the name of active tab
var activeTab = $(e.target).text();
// Get the name of previous tab
var previousTab = $(e.relatedTarget).text();
$(".active-tab span").html(activeTab);
$(".previous-tab span").html(previousTab);
});
});
})(jQuery);
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- Main -->
<main class="main">
<hr>
<p class="active-tab"><strong>Active Tab</strong>: <span></span></p>
<p class="previous-tab"><strong>Previous Tab</strong>: <span></span></p>
<hr />
<ul class="nav nav-tabs" role="tablist" id="myTab">
<li role="presentation" class="active">Home</li>
<li role="presentation">Details</li>
<li class="dropdown">
Java<b class="caret"></b>
<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
<li>
D1
</li>
<li>
D2
</li>
</ul>
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
<p>This is the home page</p>
</div>
<div role="tabpanel" class="tab-pane" id="account-details">
<p>Pane 1</p>
</div>
<div role="tabpanel" class="tab-pane" id="d1">
<p>Dropdown 1</p>
</div>
<div role="tabpanel" class="tab-pane" id="d2">
<p>Dropdown 2</p>
</div>
</div>
</main>
<!-- End main -->

Bootstrap toggleable tab menu pushing content down

I am trying to implement a toggleable tab menu through bootstrap and also using Material Design for bootstrap
I have a issue with the tabs after the first one always pushing its content down (below where the 1st tab content would be)
I have searched around and found a similar issue discussed here and also tried the solution provided but it didn't seem to work for me
$('#toggle-tabs a').click(function(e) {
e.preventDefault()
$(this).tab('show')
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript">
</script>
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,700' rel='stylesheet' type='text/css'>
<script src="https://use.fontawesome.com/abacba2780.js">
</script>
<div class="container-fluid">
<!-- Content -->
<div class="row">
<!-- Nav tabs -->
<div class="col-sm-2">
<ul class="nav nav-tabs md-pills pills-secondary flex-column" role="tablist">
<li class="nav-item elegant-color-dark">
<a class="nav-link active" data-toggle="tab" href="#test1" role="tab"><br>
<h3>Test1</h3>
</a>
</li>
<li class="nav-item elegant-color-dark">
<a class="nav-link" data-toggle="tab" href="#test2" role="tab"><br>
<h3>Test2</h3>
</a>
</li>
<li class="nav-item elegant-color-dark">
<a class="nav-link" data-toggle="tab" href="#test3" role="tab"><br>
<h3>Test3</h3>
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- Tab panels -->
<div class="tab-content vertical col-sm-10" id="toggle-tabs">
<!--Panel 1-->
<div class="tab-pane fade in show active" id="test1" role="tabpanel">
<h3>Test1</h3>
</div>
<!--Panel 2-->
<div class="tab-pane fade in" id="test2" role="tabpanel">
<h3>Test2</h3>
</div>
<!--Panel 3-->
<div class="tab-pane fade in" id="test3" role="tabpanel">
<h3>Test3</h3>
</div>
</div>
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.1/css/mdb.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.1/js/mdb.min.js" type="text/javascript">
</script>

You need to remove the show class from the default active tab, so tab-pane fade in show active becomes tab-pane fade in active:
$('#toggle-tabs a').click(function(e) {
e.preventDefault()
$(this).tab('show')
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js">
</script>
<!-- Latest compiled and minified CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- Optional theme -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript">
</script>
<script src="main.js" type="text/javascript">
</script>
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,700' rel='stylesheet' type='text/css'>
<script src="https://use.fontawesome.com/abacba2780.js">
</script>
</head>
<body>
<div class="container-fluid">
<!-- Content -->
<div class="row">
<!-- Nav tabs -->
<div class="col-sm-2">
<ul class="nav nav-tabs md-pills pills-secondary flex-column" role="tablist">
<li class="nav-item elegant-color-dark">
<a class="nav-link active" data-toggle="tab" href="#test1" role="tab"><br>
<h3>Test1</h3>
</a>
</li>
<li class="nav-item elegant-color-dark">
<a class="nav-link" data-toggle="tab" href="#test2" role="tab"><br>
<h3>Test2</h3>
</a>
</li>
<li class="nav-item elegant-color-dark">
<a class="nav-link" data-toggle="tab" href="#test3" role="tab"><br>
<h3>Test3</h3>
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- Tab panels -->
<div class="tab-content vertical col-sm-10" id="toggle-tabs">
<!--Panel 1-->
<div class="tab-pane fade in active" id="test1" role="tabpanel">
<h3>Test1</h3>
</div>
<!--Panel 2-->
<div class="tab-pane fade in" id="test2" role="tabpanel">
<h3>Test2</h3>
</div>
<!--Panel 3-->
<div class="tab-pane fade in" id="test3" role="tabpanel">
<h3>Test3</h3>
</div>
</div>
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.1/css/mdb.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.1/js/mdb.min.js" type="text/javascript">
</script>
</body>
</html>

Remove the show class from the first tab pane
<div class="tab-pane fade in show active" id="test1" role="tabpanel">
<h3>Test1</h3>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js">
</script>
<!-- Latest compiled and minified CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- Optional theme -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript">
</script>
<script src="main.js" type="text/javascript">
</script>
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,700' rel='stylesheet' type='text/css'>
<script src="https://use.fontawesome.com/abacba2780.js">
</script>
</head>
<body>
<div class="container-fluid">
<!-- Content -->
<div class="row">
<!-- Nav tabs -->
<div class="col-sm-2">
<ul class="nav nav-tabs md-pills pills-secondary flex-column" role="tablist">
<li class="nav-item elegant-color-dark">
<a class="nav-link active" data-toggle="tab" href="#test1" role="tab"><br>
<h3>Test1</h3>
</a>
</li>
<li class="nav-item elegant-color-dark">
<a class="nav-link" data-toggle="tab" href="#test2" role="tab"><br>
<h3>Test2</h3>
</a>
</li>
<li class="nav-item elegant-color-dark">
<a class="nav-link" data-toggle="tab" href="#test3" role="tab"><br>
<h3>Test3</h3>
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- Tab panels -->
<div class="tab-content vertical col-sm-10" id="toggle-tabs">
<!--Panel 1-->
<div class="tab-pane fade in active" id="test1" role="tabpanel">
<h3>Test1</h3>
</div>
<!--Panel 2-->
<div class="tab-pane fade in" id="test2" role="tabpanel">
<h3>Test2</h3>
</div>
<!--Panel 3-->
<div class="tab-pane fade in" id="test3" role="tabpanel">
<h3>Test3</h3>
</div>
</div>
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.1/css/mdb.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.1/js/mdb.min.js" type="text/javascript">
</script>
</body>
</html>

drop down menu not work after including in a div

I have a header with dropdown menu on my home page but if i put the header div into another html file and after that if i include it in my home page using jquery load function than the drop-down menu is not working.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<link rel="stylesheet" type="text/css" href="css/font-awesome.css"/>
<link rel="stylesheet" type="text/css" href="css/component.css" />
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
</head>
<body>
<div id="myid">
</div>
<script>
$(function(){
$("#myid").load("header.html");
});
</script>
<script src="js/cbpHorizontalMenu.js"></script>
<script>
$(function() {
cbpHorizontalMenu.init();
cbpHorizontalMenu1.init();
});
</script>
</body>
</html>
*****The header content*****
<header class="header">
<div class="layout">
<div class="top-header">
<div class="top-right">
<div class="nav-toggler">
<button class="toggle-link hidden-bar-opener" data-pixel=".top-menu">Top Menu</button>
</div>
<div class="layout">
<div class="top-menu cbp-hrmenu1">
<ul>
<li><span class="fa fa-plus"></span> Our Services
<div class="service-drop cbp-hrsub">
<div class="cbp-hrsub-inner">
<ul>
<li>football</li>
<li>cricket</li>
<li>hockey</li>
</ul>
</div>
</div>
</li>
<li>
<span class="fa fa-plus"></span> Contact Us
<div class="service-drop cbp-hrsub">
<div class="cbp-hrsub-inner">
<ul>
<li><i class="fa fa-phone-square" aria-hidden="true"></i> +91-99863355333</li>
<li><i class="fa fa-whatsapp" aria-hidden="true"></i> +91-124382428</li>
<li><i class="fa fa-skype" aria-hidden="true"></i> skype</li>
<li><i class="fa fa-envelope" aria-hidden="true">mail me </i></li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="main-menu">
<div class="layout">
<div class="nav-toggler">
<button class="toggle-link hidden-bar-opener" data-pixel=".main-menu1"><i class="fa fa-bars"></i></button>
</div>
<nav class="main-menu1 cbp-hrmenu">
<ul>
<li>
Category one
<div class="cbp-hrsub">
<div class="cbp-hrsub-inner">
<div>
<ul>
<li>test </li>
<li>test </li>
<li>test </li>
<li>test </li>
<li>test</li>
</ul>
</div>
</div><!-- /cbp-hrsub-inner -->
</div><!-- /cbp-hrsub -->
</li>
<li>
Category two
<div class="cbp-hrsub">
<div class="cbp-hrsub-inner">
<div>
<ul>
<li>test 2</li>
<li>test 2</li>
<li>test 2</li>
<li>test 2</li>
<li>test 2</li>
</ul>
</div>
</div><!-- /cbp-hrsub-inner -->
</div><!-- /cbp-hrsub -->
</li>
</ul>
</nav>
</div>
</div>
</header>
if i copy the content of header in the div than it is working fine. But i want to include it on every page of my site.
Here is the live example http://plnkr.co/edit/51vGFoI7aJF1HUE3Wim9

The issue is because the content is loaded asynchronously, and you try an initialise the menu before it's in the DOM. You need to instead put the initialisation in the callback of load(). Try this:
<head>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<link rel="stylesheet" type="text/css" href="css/font-awesome.css"/>
<link rel="stylesheet" type="text/css" href="css/component.css" />
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
<script src="js/cbpHorizontalMenu.js"></script>
<script>
$(function(){
$("#myid").load("header.html", function() {
cbpHorizontalMenu.init();
cbpHorizontalMenu1.init();
});
});
</script>
</head>
<body>
<div id="myid"></div>
</body>

if it's in PHP you can name it like header.php
2.then include it <? include('header.php'); ?>
put that line of code in the top or where div you want

TypeError: $element.epoch is not a function

I'm using AngularJS and Epoch with ng-epoch directive wrapper.
Here is my module file
angular.module('RDash', ['ui.bootstrap', 'ui.router', 'ngCookies','ng-oboe','ng.epoch'])
.config(function (oboeProvider) {
/* If we were so inclined, we could change the oboe defaults here - headers, etc. */
// oboeProvider.defaults = {};
});
I didn't make any changes in controller. Because I want to show just chart outline without data at page.
Here is my template file:
<div class="row" ng-controller="StatsCtrl">
<div class="col-lg-12">
<rd-widget>
<rd-widget-header icon="fa fa-line-chart" title="Cpu">
</rd-widget-header>
<rd-widget-body classes="medium no-padding">
<epoch-live-line chart-height="200" chart-data="" chart-stream=""> </epoch-live-line>
</rd-widget-body>
</rd-widget>
</div>
<div class="col-lg-12">
<rd-widget>
<rd-widget-header icon="fa fa-area-chart" title="Memory">
</rd-widget-header>
<rd-widget-body classes="medium no-padding">
</rd-widget-body>
</rd-widget>
</div>
</div>
Also here is my index
<!doctype html>
<html lang="en" ng-app="RDash">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>RDash AngularJS</title>
<!-- STYLES -->
<!-- build:css lib/css/main.min.css -->
<link rel="stylesheet" type="text/css" href="components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="components/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="components/rdash-ui/dist/css/rdash.min.css">
<link rel="stylesheet" type="text/css" href="components/epoch/epoch.min.css" />
<!-- endbuild -->
<!-- SCRIPTS -->
<!-- build:js lib/js/main.min.js -->
<script type="text/javascript" src="components/angular/angular.min.js"></script>
<script type="text/javascript" src="components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script type="text/javascript" src="components/angular-cookies/angular-cookies.min.js"></script>
<script type="text/javascript" src="components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script type="text/javascript" src="components/oboe/dist/oboe-browser.min.js"></script>
<script type="text/javascript" src="components/ng-oboe/dist/ng-oboe.js"></script>
<script type="text/javascript" src="components/d3/d3.min.js"></script>
<script type="text/javascript" src="components/epoch/epoch.min.js"></script>
<script type="text/javascript" src="components/ng-epoch/ng-epoch.js"></script>
<!-- endbuild -->
<!-- Custom Scripts -->
<script type="text/javascript" src="js/dashboard.min.js"></script>
</head>
<body ng-controller="MasterCtrl">
<div id="page-wrapper" ng-class="{'open': toggle}" ng-cloak>
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar">
<li class="sidebar-main">
<a ng-click="toggleSidebar()">
Dashboard
<span class="menu-icon glyphicon glyphicon-transfer"></span>
</a>
</li>
<li class="sidebar-title"><span>NAVIGATION</span></li>
<li class="sidebar-list">
Dashboard <span class="menu-icon fa fa-tachometer"></span>
</li>
<li class="sidebar-list">
Tables <span class="menu-icon fa fa-table"></span>
</li>
</ul>
<div class="sidebar-footer">
<div class="col-xs-4">
<a href="https://github.com/rdash/rdash-angular" target="_blank">
Github
</a>
</div>
<div class="col-xs-4">
<a href="https://github.com/rdash/rdash-angular/README.md" target="_blank">
About
</a>
</div>
<div class="col-xs-4">
<a href="#">
Support
</a>
</div>
</div>
</div>
<!-- End Sidebar -->
<div id="content-wrapper">
<div class="page-content">
<!-- Header Bar -->
<div class="row header">
<div class="col-xs-12">
<div class="user pull-right">
<div class="item dropdown">
<a href="#" class="dropdown-toggle">
<img src="img/avatar.jpg">
</a>
<ul class="dropdown-menu dropdown-menu-right">
<li class="dropdown-header">
Joe Bloggs
</li>
<li class="divider"></li>
<li class="link">
<a href="#">
Profile
</a>
</li>
<li class="link">
<a href="#">
Menu Item
</a>
</li>
<li class="link">
<a href="#">
Menu Item
</a>
</li>
<li class="divider"></li>
<li class="link">
<a href="#">
Logout
</a>
</li>
</ul>
</div>
<div class="item dropdown">
<a href="#" class="dropdown-toggle">
<i class="fa fa-bell-o"></i>
</a>
<ul class="dropdown-menu dropdown-menu-right">
<li class="dropdown-header">
Notifications
</li>
<li class="divider"></li>
<li>
Server Down!
</li>
</ul>
</div>
</div>
<div class="meta">
<div class="page">
Dashboard
</div>
<div class="breadcrumb-links">
Home / Dashboard
</div>
</div>
</div>
</div>
<!-- End Header Bar -->
<!-- Main Content -->
<div ui-view></div>
</div><!-- End Page Content -->
</div><!-- End Content Wrapper -->
</div><!-- End Page Wrapper -->
</body>
</html>
Why I am getting this error? I can't figure out.
TypeError: $element.epoch is not a function
at h.$scope.renderEpoch (http://localhost:4444/lib/js/main.min.js:434:28)
at liveLineFunction (http://localhost:4444/lib/js/main.min.js:504:28)
at http://localhost:4444/lib/js/main.min.js:65:60
at K (http://localhost:4444/lib/js/main.min.js:55:142)
at g (http://localhost:4444/lib/js/main.min.js:47:397)
at http://localhost:4444/lib/js/main.min.js:47:17
at http://localhost:4444/lib/js/main.min.js:48:359
at w (http://localhost:4444/lib/js/main.min.js:52:291)
at za.link (http://localhost:4444/lib/js/main.min.js:206:239)
at K (http://localhost:4444/lib/js/main.min.js:55:142) <div class="epoch ng-scope ng-isolate-scope" chart-height="200" chart-data="" chart-stream="">

As per the preparation section here, you need to load jQuery first and then epoch.js like below.
If you do not already have jQuery and AngularJS included:
<script src="[PATH_TO_BOWER_COMPNENTS]/jquery/dist/jquery.min.js"></script>
<script src="[PATH_TO_BOWER_COMPNENTS]/angular/angular.min.js"></script>
After you load those two libraries, include:
<script src="[PATH_TO_BOWER_COMPNENTS]/d3/d3.min.js"></script>
<script src="[PATH_TO_BOWER_COMPNENTS]/epoch/epoch.min.js"></script>
<script src="[PATH_TO_BOWER_COMPNENTS]/ng-epoch/ng-epoch.js"></script>

How do I force an element in webkit to go back to original size?

I have an element that on focus via javascript changes to display absolute and covers its parent element. Then on blur back to default a table-cell.
What seems to happen is that the element just sits below the first table-cell, it doesn't go back to its original position?
This only appears to happen in webkit and I'm stuck for things to search for. Any help would be greatly appreciated.
The effect can be found on the search at the top.
Thanks in advance
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!doctype html>
<!--[if lt IE 7]><html class="no-js ie6 oldie" lang="en"><![endif]-->
<!--[if IE 7]><html class="no-js ie7 oldie" lang="en"><![endif]-->
<!--[if IE 8]><html class="no-js ie8 oldie" lang="en"><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js" lang="en"><!--<![endif]-->
<head>
<link rel="shortcut icon" href="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/favicon.png?4100640853928591395" type="image/png" />
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
<meta name="geo.region" content="GB-DNC" />
<meta name="geo.placename" content="Doncaster" />
<meta name="geo.position" content="53.540019;-1.148724" />
<meta name="ICBM" content="53.540019, -1.148724" />
<title>Jazz Shoes</title>
<meta name="msvalidate.01" content="2586BFC237E15118F8BA18EF91E843A0" />
<meta name="p:domain_verify" content="9c7f882b38741d1a00862559ee7a8614"/>
<meta property="og:image" content="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/logo.png?4100640853928591395" />
<link rel="stylesheet" href="http://detc.s3.amazonaws.com/assets/stylesheets/bootstrap/bootstrap.css">
<link href="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/styles.scss.css?4100640853928591395" rel="stylesheet" type="text/css" media="all" />
<link href="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/custom.scss.css?4100640853928591395" rel="stylesheet" type="text/css" media="all" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/modernizr.js?4100640853928591395" type="text/javascript"></script>
<script src="//use.typekit.net/fuf1mwq.js"></script>
<script>try{Typekit.load();}catch(e){}</script>
</head>
<body>
<!-- Begin toolbar -->
<header class="navbar-fixed-top top-banner toolbar-wrapper">
<div class="container">
<nav class="de-nav">
<a class="logo" href="/">
<div class="de-logo"></div>
</a
><ul class="nav-primary"><li class="nav-item">
<div class="dropdown">
<span>Whats New</span>
<div class="dropdown-menu">
<div class="menu-container">
<div class="wrapper">
<ul>
<li>New In
<ul class="submenu">
<li>Mirella Leotards</li>
<li>Pointe Shoes</li>
<li>Accessories</li>
</ul>
</li>
<li>Don't Miss
<ul class="submenu">
<li>Jozette by Mirella Laser Cut Camisole Leotard</li>
</ul></li>
</ul>
</div>
</div>
</div>
</li><li class="nav-item">
<div class="dropdown">
<a href="#" role="button">
<span>Bodywear</span>
</a>
<div class="dropdown-menu">
<div class="menu-container">
<div class="wrapper">
<ul>
<li><a class="subhead" href="http://www.dance-etc.co.uk/collections/leotards">Leotards</a>
<ul class="submenu">
<li>Basic</li>
<li>Classic</li>
<li>Fashion</li>
<li>Premium</li>
<li>Regulation</li>
<li>Catsuits</li>
</ul>
</li>
<li>
<a class="subhead" href="#">Dancewear</a>
<ul class="submenu">
<li>Tops</li>
<li>Warmups</li>
<li>Underwear</li>
<li>Shorts</li>
</ul>
</li>
</ul>
</div>
<div class="wrapper">
<ul>
<li><a class="subhead" href="#">Childrens Dancewear</a></li>
<li><a class="subhead" href="#r">Street Dancewear</a></li>
<li><a class="subhead" href="#">Gymnastics</a></li>
<li><a class="subhead" href="#">Tutu's & Dresses</a></li>
</ul>
</div>
<div class="divider"></div>
<div class="wrapper featured">
<div class="subhead">Dont Miss...</div>
<ul>
<li class="featured-item">
<img src="#" alt="Tappers & Pointers Leotard"><p>tappers & pointers</p>
</li>
<li class="featured-item">
<img src="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/sodanca-tank-leotard-with-striped-mesh.jpg?4100640853928591395" alt="Dodanca tank leotard with striped mesh"><p>sodanca<br></p>
</li>
</ul>
</div>
</div>
</div>
</div>
</li><li class="nav-item">
<div class="dropdown">
<span>Footwear</span>
<div class="dropdown-menu">
<div class="menu-container">
<div class="wrapper">
<ul>
<li><a class="subhead" href="#">Ballet Shoes</a>
</li>
<li>
<a class="subhead" href="#">Pointe Shoes</a>
<ul class="submenu">
<li> By Bloch</li>
<li> By Capezio</li>
<li> By Freed</li>
<li> By Merlet</li>
<li> By Russian Pointe</li>
<li> Warm Up Boots</li>
<li> Pointe Accessories</li>
</ul>
</li>
<li>
<a class="subhead" href="#">Modern, Lyrical & Contemporary</a>
</li>
<li>
<a class="subhead" href="#">Dance Sneakers</a>
</li>
</ul>
</div>
<div class="wrapper">
<ul>
<li>
<a class="subhead" href="#">Jazz Shoes</a>
</li>
<li>
<a class="subhead" href="#">Tap Shoes</a>
</li>
<li>
<a class="subhead" href="#">Character Shoes</a>
</li>
<li>
<a class="subhead" href="#">Ballroom</a>
</li>
</ul>
</div>
</div>
</div>
</div></li></ul>
<ul class="nav-primary mobile">
<li class="nav-item"
><div class="dropdown">
<a href="#">
<span>Shop</span>
</a>
<div class="dropdown-menu">
<div class="menu-container">
<div class="wrapper">
<ul>
<li><a class="subhead" href="#">All Dancewear</a>
<li><a class="subhead" href="#">Bodywear</a>
</li>
</ul>
</div>
<div class="wrapper">
<ul>
<li>
<a class="subhead" href="#">Footwear</a>
</li>
</ul>
</div>
<div class="wrapper">
<ul>
<li>
<a class="subhead" href="#">Legwear</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
</ul
>
<div id="global-search" class="nav-search">
<form class="site-search" role="search" method="get" action="/search">
<div class="wrapper">
<label for="q"><i class="fa fa-search"></i></label>
<input type="text" id="q" name="q" class="">
</div>
<input type="hidden" name="type" value="product" />
</form>
</div><ul class="nav-secondary"><li class="nav-item nav-item-account">
<div class="dropdown">
<span>My Account</span>
<div class="dropdown-menu">
<div class="menu-container">
<div class="wrapper">
<ul>My Account</ul>
<ul>My Orders</ul>
</div>
</div>
</div>
</div>
</li><li class="nav-item nav-item-cart">
<div class="dropdown">
<span>£0.00<i class="bag-count">0</i></span>
</div>
</li></ul>
</nav>
</div>
</header>
<!-- End toolbar -->
<script src="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/jquery.flexslider-min.js?4100640853928591395" type="text/javascript"></script>
<!-- <script src="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/jquery.zoom.js?4100640853928591395" type="text/javascript"></script> -->
<script src="http://detc.s3.amazonaws.com/bower_components/bootstrap-sass/assets/javascripts/bootstrap.min.js" type="text/javascript"></script>
<script src="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/jquery.bootplus.js?4100640853928591395" type="text/javascript"></script>
<script src="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/cloudzoom.js?4100640853928591395" type="text/javascript"></script>
<script src="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/jquery.tweet.js?4100640853928591395" type="text/javascript"></script>
<script src="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/jquery.fancybox.js?4100640853928591395" type="text/javascript"></script>
<script src="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/scripts.js?4100640853928591395" type="text/javascript"></script>
</body>
</html>

You have a table like structure, but you don't have any table row. Setting display to table-row on your de-nav element seems to fix your problem.
.de-nav {
display: table-row
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!doctype html>
<!--[if lt IE 7]><html class="no-js ie6 oldie" lang="en"><![endif]-->
<!--[if IE 7]><html class="no-js ie7 oldie" lang="en"><![endif]-->
<!--[if IE 8]><html class="no-js ie8 oldie" lang="en"><![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="en">
<!--<![endif]-->
<head>
<link rel="shortcut icon" href="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/favicon.png?4100640853928591395" type="image/png" />
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
<meta name="geo.region" content="GB-DNC" />
<meta name="geo.placename" content="Doncaster" />
<meta name="geo.position" content="53.540019;-1.148724" />
<meta name="ICBM" content="53.540019, -1.148724" />
<title>Jazz Shoes</title>
<meta name="msvalidate.01" content="2586BFC237E15118F8BA18EF91E843A0" />
<meta name="p:domain_verify" content="9c7f882b38741d1a00862559ee7a8614" />
<meta property="og:image" content="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/logo.png?4100640853928591395" />
<link rel="stylesheet" href="http://detc.s3.amazonaws.com/assets/stylesheets/bootstrap/bootstrap.css">
<link href="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/styles.scss.css?4100640853928591395" rel="stylesheet" type="text/css" media="all" />
<link href="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/custom.scss.css?4100640853928591395" rel="stylesheet" type="text/css" media="all" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/modernizr.js?4100640853928591395" type="text/javascript"></script>
<script src="//use.typekit.net/fuf1mwq.js"></script>
<script>
try {
Typekit.load();
} catch (e) {}
</script>
</head>
<body>
<!-- Begin toolbar -->
<header class="navbar-fixed-top top-banner toolbar-wrapper">
<div class="container">
<nav class="de-nav">
<a class="logo" href="/">
<div class="de-logo"></div>
</a>
<ul class="nav-primary">
<li class="nav-item">
<div class="dropdown">
<span>Whats New</span>
<div class="dropdown-menu">
<div class="menu-container">
<div class="wrapper">
<ul>
<li>New In
<ul class="submenu">
<li>Mirella Leotards
</li>
<li>Pointe Shoes
</li>
<li>Accessories
</li>
</ul>
</li>
<li>Don't Miss
<ul class="submenu">
<li>Jozette by Mirella Laser Cut Camisole Leotard
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="nav-item">
<div class="dropdown">
<a href="#" role="button">
<span>Bodywear</span>
</a>
<div class="dropdown-menu">
<div class="menu-container">
<div class="wrapper">
<ul>
<li><a class="subhead" href="http://www.dance-etc.co.uk/collections/leotards">Leotards</a>
<ul class="submenu">
<li>Basic
</li>
<li>Classic
</li>
<li>Fashion
</li>
<li>Premium
</li>
<li>Regulation
</li>
<li>Catsuits
</li>
</ul>
</li>
<li>
<a class="subhead" href="#">Dancewear</a>
<ul class="submenu">
<li>Tops
</li>
<li>Warmups
</li>
<li>Underwear
</li>
<li>Shorts
</li>
</ul>
</li>
</ul>
</div>
<div class="wrapper">
<ul>
<li><a class="subhead" href="#">Childrens Dancewear</a>
</li>
<li><a class="subhead" href="#r">Street Dancewear</a>
</li>
<li><a class="subhead" href="#">Gymnastics</a>
</li>
<li><a class="subhead" href="#">Tutu's & Dresses</a>
</li>
</ul>
</div>
<div class="divider"></div>
<div class="wrapper featured">
<div class="subhead">Dont Miss...</div>
<ul>
<li class="featured-item">
<a href="#">
<img src="#" alt="Tappers & Pointers Leotard">
<p>tappers & pointers</p>
</a>
</li>
<li class="featured-item">
<a href="#">
<img src="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/sodanca-tank-leotard-with-striped-mesh.jpg?4100640853928591395" alt="Dodanca tank leotard with striped mesh">
<p>sodanca
<br>
</p>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="nav-item">
<div class="dropdown">
<span>Footwear</span>
<div class="dropdown-menu">
<div class="menu-container">
<div class="wrapper">
<ul>
<li><a class="subhead" href="#">Ballet Shoes</a>
</li>
<li>
<a class="subhead" href="#">Pointe Shoes</a>
<ul class="submenu">
<li> By Bloch
</li>
<li> By Capezio
</li>
<li> By Freed
</li>
<li> By Merlet
</li>
<li> By Russian Pointe
</li>
<li> Warm Up Boots
</li>
<li> Pointe Accessories
</li>
</ul>
</li>
<li>
<a class="subhead" href="#">Modern, Lyrical & Contemporary</a>
</li>
<li>
<a class="subhead" href="#">Dance Sneakers</a>
</li>
</ul>
</div>
<div class="wrapper">
<ul>
<li>
<a class="subhead" href="#">Jazz Shoes</a>
</li>
<li>
<a class="subhead" href="#">Tap Shoes</a>
</li>
<li>
<a class="subhead" href="#">Character Shoes</a>
</li>
<li>
<a class="subhead" href="#">Ballroom</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
</ul>
<ul class="nav-primary mobile">
<li class="nav-item">
<div class="dropdown">
<a href="#">
<span>Shop</span>
</a>
<div class="dropdown-menu">
<div class="menu-container">
<div class="wrapper">
<ul>
<li><a class="subhead" href="#">All Dancewear</a>
<li><a class="subhead" href="#">Bodywear</a>
</li>
</ul>
</div>
<div class="wrapper">
<ul>
<li>
<a class="subhead" href="#">Footwear</a>
</li>
</ul>
</div>
<div class="wrapper">
<ul>
<li>
<a class="subhead" href="#">Legwear</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
</ul>
<div id="global-search" class="nav-search">
<form class="site-search" role="search" method="get" action="/search">
<div class="wrapper">
<label for="q"><i class="fa fa-search"></i>
</label>
<input type="text" id="q" name="q" class="">
</div>
<input type="hidden" name="type" value="product" />
</form>
</div>
<ul class="nav-secondary">
<li class="nav-item nav-item-account">
<div class="dropdown">
<span>My Account</span>
<div class="dropdown-menu">
<div class="menu-container">
<div class="wrapper">
<ul>My Account
</ul>
<ul>My Orders
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="nav-item nav-item-cart">
<div class="dropdown">
<span>£0.00<i class="bag-count">0</i></span>
</div>
</li>
</ul>
</nav>
</div>
</header>
<!-- End toolbar -->
<script src="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/jquery.flexslider-min.js?4100640853928591395" type="text/javascript"></script>
<!-- <script src="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/jquery.zoom.js?4100640853928591395" type="text/javascript"></script> -->
<script src="http://detc.s3.amazonaws.com/bower_components/bootstrap-sass/assets/javascripts/bootstrap.min.js" type="text/javascript"></script>
<script src="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/jquery.bootplus.js?4100640853928591395" type="text/javascript"></script>
<script src="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/cloudzoom.js?4100640853928591395" type="text/javascript"></script>
<script src="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/jquery.tweet.js?4100640853928591395" type="text/javascript"></script>
<script src="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/jquery.fancybox.js?4100640853928591395" type="text/javascript"></script>
<script src="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/scripts.js?4100640853928591395" type="text/javascript"></script>
</body>
</html>

Develop Reference

JavaScript is the programming language of the Web.

jQuery is not working in webpage? - javascript

Related

Bootstrap tab dropdown doesn't show after 1st click

Bootstrap toggleable tab menu pushing content down

drop down menu not work after including in a div

TypeError: $element.epoch is not a function

How do I force an element in webkit to go back to original size?

Categories

Resources