I've created a simple accordion in JSfiddle (http://jsfiddle.net/Rnpb2/) and it works just fine. However when I try to replicate the result on my site, it just isn't working. Pressing on the elements just adds #first, #second and #third at the end of the URL. Probably because I am a rookie the problem is easily solvable but I cannot find it. Here is the whole code of my page:
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/bootstrap-theme.min.css"/>
<link rel="stylesheet" href="lib/jquery-ui-1.10.4/themes/base/jquery-ui.css"/>
<link rel="stylesheet" href="lib/jquery-ui-1.10.4/themes/base/jquery.ui.accordion.css"/>
<link rel="stylesheet" href="lib/jquery-ui-1.10.4/themes/base/jquery.ui.all.css"/>
<script src="lib/bootstrap.min.js"></script>
<script src="lib/fabric.min.js"></script>
<script src="lib/jquery-ui-1.10.4/jquery-1.10.2.js"></script>
<script src="lib/jquery-ui-1.10.4/ui/minified/jquery-ui.min.js"></script>
<script src="lib/jquery-ui-1.10.4/ui/jquery.ui.core.js"></script>
<script src="lib/jquery-ui-1.10.4/ui/jquery.ui.widget.js"></script>
<script src="lib/jquery-ui-1.10.4/ui/jquery.ui.accordion.js"></script>
</head>
<body>
<div id="page">
<header class="container">
<div id="menu" class="navbar navbar-default">
<ul class="nav navbar-nav">
<li class="nav active">Home</li>
<li class="nav">Login</li>
<li class="nav">About</li>
<li class="nav" >Contact</li>
</ul>
</div>
</header>
</div>
<div class="container">
<div class="row">
<div class="col-md-4">
<div id="accordion" class="panel-group">
<div class="panel panel-info">
<div class="panel-heading">
<div class="panel-title">
<a href="#first"
data-toggle="collapse"
data-parent="#accordion">Shape</a>
</div>
</div>
<div class="panel-collapse collapse" id="first">
<div class="panel-body">
<p> First <p/>
</div>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<div class="panel-title">
<a href="#second"
data-toggle="collapse"
data-parent="#accordion">Shape</a>
</div>
</div>
<div class="panel-collapse collapse" id="second">
<div class="panel-body">
<p> Second <p/>
</div>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<div class="panel-title">
<a href="#third"
data-toggle="collapse"
data-parent="#accordion">Shape</a>
</div>
</div>
<div class="panel-collapse collapse" id="third">
<div class="panel-body">
<p> Third <p/>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
</div>
</div>
</body>
</html>
I have added so many different sources in an attempt to make it work, but to no avail. I was adding them one by one.
You need to load jquery before you load bootstrap. If you look at your console you might see an error. Also you should place your scripts at the bottom of you html so that your scripts don't block the UI from loading.
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/bootstrap-theme.min.css"/>
<link rel="stylesheet" href="lib/jquery-ui-1.10.4/themes/base/jquery-ui.css"/>
<link rel="stylesheet" href="lib/jquery-ui-1.10.4/themes/base/jquery.ui.accordion.css"/>
<link rel="stylesheet" href="lib/jquery-ui-1.10.4/themes/base/jquery.ui.all.css"/>
</head>
<body>
<div id="page">
<header class="container">
<div id="menu" class="navbar navbar-default">
<ul class="nav navbar-nav">
<li class="nav active">Home</li>
<li class="nav">Login</li>
<li class="nav">About</li>
<li class="nav" >Contact</li>
</ul>
</div>
</header>
</div>
<div class="container">
<div class="row">
<div class="col-md-4">
<div id="accordion" class="panel-group">
<div class="panel panel-info">
<div class="panel-heading">
<div class="panel-title">
<a href="#first"
data-toggle="collapse"
data-parent="#accordion">Shape</a>
</div>
</div>
<div class="panel-collapse collapse" id="first">
<div class="panel-body">
<p> First <p/>
</div>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<div class="panel-title">
<a href="#second"
data-toggle="collapse"
data-parent="#accordion">Shape</a>
</div>
</div>
<div class="panel-collapse collapse" id="second">
<div class="panel-body">
<p> Second <p/>
</div>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<div class="panel-title">
<a href="#third"
data-toggle="collapse"
data-parent="#accordion">Shape</a>
</div>
</div>
<div class="panel-collapse collapse" id="third">
<div class="panel-body">
<p> Third <p/>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
</div>
</div>
<script src="lib/jquery-ui-1.10.4/jquery-1.10.2.js"></script>
<script src="lib/jquery-ui-1.10.4/ui/minified/jquery-ui.min.js"></script>
<script src="lib/jquery-ui-1.10.4/ui/jquery.ui.core.js"></script>
<script src="lib/jquery-ui-1.10.4/ui/jquery.ui.widget.js"></script>
<script src="lib/jquery-ui-1.10.4/ui/jquery.ui.accordion.js"></script>
<script src="lib/bootstrap.min.js"></script>
<script src="lib/fabric.min.js"></script>
</body>
</html>
In the jsfiddle you posted, if you inspect the results you'll see that bootstrap is loaded after jquery.
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.1.js"></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<style type="text/css">
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css');
.panel-heading {
cursor: pointer;
}
</style>
<script type="text/javascript">//<![CDATA[
$(window).load(function(){
});//]]>
</script>
</head>
Related
I started doing website now and I've known the bootstrap a little while ago. I'm here because I have a problem with navbar link's.
On the homepage the links work perfectly but on the following pages does not work. the same menu.
If anyone can help, I really appreciate it.
<!DOCTYPE html> <!--Index-->
<html lang="pt">
<head>
<title>Urbisouto - A tua imobiliaria</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes">
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="" />
<link rel="shortcut icon" type="image/ico" href="images/favicon.png">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,900|Oswald:300,400,700" rel="stylesheet">
<link rel="stylesheet" href="fonts/icomoon/style.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/jquery-ui.css">
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/owl.theme.default.min.css">
<link rel="stylesheet" href="css/owl.theme.default.min.css">
<link rel="stylesheet" href="css/jquery.fancybox.min.css">
<link rel="stylesheet" href="css/bootstrap-datepicker.css">
<link rel="stylesheet" href="fonts/flaticon/font/flaticon.css">
<link rel="stylesheet" href="css/aos.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body data-spy="scroll" data-target=".site-navbar-target" data-offset="300">
<div class="site-wrap">
<div class="site-mobile-menu site-navbar-target">
<div class="site-mobile-menu-header">
<div class="site-mobile-menu-close mt-3">
<span class="icon-close2 js-menu-toggle"></span>
</div>
</div>
<div class="site-mobile-menu-body"></div>
</div>
<header class="site-navbar py-4 js-sticky-header site-navbar-target" role="banner">
<div class="container">
<div class="row align-items-center">
<div class="col-6 col-xl-2">
<h1 class="mb-0 site-logo m-0 p-0">logo</h1>
</div>
<div class="col-12 col-md-10 d-none d-xl-block">
<nav class="site-navigation position-relative text-right" role="navigation">
<ul class="site-menu main-menu js-clone-nav mr-auto d-none d-lg-block">
<li>Inicio</li>
<li>Imoveis</li>
<li>Agentes</li>
<li>Sobre nós</li>
<!-- <li>News</li> -->
<li>Contactos</li>
</ul>
</nav>
</div>
<div class="col-6 d-inline-block d-xl-none ml-md-0 py-3"><span class="icon-menu h3"></span></div>
</div>
</div>
</header>
<div class="site-block-wrap">
<div class="owl-carousel with-dots">
<div class="site-blocks-cover overlay overlay-2" style="background-image: url(images/intro_1.jpg);" data-aos="fade" id="home-section">
<div class="container">
<div class="row align-items-center justify-content-center">
<div class="col-md-6 mt-lg-5 text-center">
<h1 class="text-shadow">123</h1>
<p class="mb-5 text-shadow">321</p>
<p> <a href="#properties-section" class="btn btn-primary px-5 py-3" class="smoothscroll arrow-down" class="nav-link" >go</a></p>
</div>
</div>
</div>
</div>
<div class="site-blocks-cover overlay overlay-2" style="background-image: url(images/intro_2.jpg);" data-aos="fade" id="home-section">
<div class="container">
<div class="row align-items-center justify-content-center">
<div class="col-md-6 mt-lg-5 text-center">
<h1 class="text-shadow">123</h1>
<p class="mb-5 text-shadow">321</p>
<p>go</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="site-section" id="properties-section">
<div class="container">
<div class="row large-gutters">
<div class="col-md-6 col-lg-4 mb-5 mb-lg-5 ">
<div class="ftco-media-1">
<div class="ftco-media-1-inner">
<img src="images/vieira/homepage.jpg" alt="#" class="img-fluid">
<div class="ftco-media-details">
<h3>Vieira do Minho</h3>
<p>Braga</p>
<strong>€1.150.000,00</strong>
</div>
</div>
</div>
</div>
<footer class="site-footer">
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-5">
<h2 class="footer-heading mb-4">Sobre nós</h2>
<p>Fundada em 1998, a Urbisouto caracteriza-se por ser uma agência imobiliária, com uma grande experiência no mercado, empenhada em satisfazer a necessidade de quem nos procura.
Fazemos pesquisas de mercado para garantir o melhor preço.</p>
</div>
<div class="col-md-3 mx-auto">
<h2 class="footer-heading mb-4">Quick Links</h2>
<ul class="list-unstyled">
<li>Sobre nós</li>
<li>Serviços</li>
<li>Testemunhos de clientes</li>
<li>Contactos</li>
</ul>
</div>
</div>
</div>
<!-- <div class="col-md-4">
<div class="mb-4">
<h2 class="footer-heading mb-4">Subscribe Newsletter</h2>
<form action="#" method="post" class="footer-subscribe">
<div class="input-group mb-3">
<input type="text" class="form-control border-secondary text-white bg-transparent" placeholder="Enter Email" aria-label="Enter Email" aria-describedby="button-addon2">
<div class="input-group-append">
<button class="btn btn-primary text-black" type="button" id="button-addon2">Send</button>
</div>
</div>
</form>
</div> -->
<div class="col-md-3 mx-auto">
<h2 class="footer-heading mb-4">Segue-nos</h2>
</span>
<!-- <span class="icon-twitter"></span>
<span class="icon-linkedin"></span>
<span class="icon-instagram"></span> -->
</div>
</div>
</div>
<div class="row pt-5 mt-5 text-center">
<div class="col-md-12">
<div class="border-top pt-5">
<p class="copyright"><small>© <script>document.write(new Date().getFullYear());</script> Urbisouto - Empreendimentos Copyrigth. Design by Albino Teixeira</small></p>
</div>
</div>
</div>
</div>
</footer>
</div>
<span class="icon-angle-double-up"></span>
<script tpye="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.countdown.min.js"></script>
<script src="js/bootstrap-datepicker.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/aos.js"></script>
<script src="js/jquery.fancybox.min.js"></script>
<script src="js/jquery.sticky.js"></script>
<script src="js/main.js"></script>
</body>
</html>
I remember than on desktop it works well, just in mobile dont work on second page
I'm trying to create a panel inside a col-sm-6 column.
is there a way to get the panel heading and panel content not going out of the 1st column ?
here is my code so far:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-6" style="background-color:lavender;">
.col-sm-6
<div class="container">
<h3>Panel Heading</h3>
<div class="panel panel-default">
<div class="panel-heading">Panel Heading
</div>
<div class="panel-body">Panel Content
</div>
</div>
</div>
</div>
<div class="col-sm-6" style="background-color:lavenderblush;">.col-sm-6</div>
</div>
</div>
</body>
</html>
I've tried to add this CSS but its not working
.container{
position: absolute;
}
plnkr link
Use this code for the body:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-sm-6" style="background-color:lavender;">
.col-sm-6
<div class="row">
<h3>Panel Heading</h3>
<div class="panel panel-default">
<div class="panel-heading">Panel Heading
</div>
<div class="panel-body">Panel Content
</div>
</div>
</div>
</div>
<div class="col-sm-6" style="background-color:lavenderblush;">.col-sm-6</div>
</div>
</div>
I'm trying to render simple bootstrap components using react.
This is index.html:
<!doctype html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/react/react.js"></script>
<script src="js/react/react-dom.js"></script>
<script src="js/browser.min.js"></script>
<meta charset="utf-8">
<title>To Do List</title>
<link href="css/bootstrap.css" rel="stylesheet">
</head>
<body>
<div class="container" id="headContainer">
<div class="row">
<div class="col-sm-1">
<img src="Panter.jpg" class="img-responsive">
</div>
<div class="col-sm-8">
<h1 style="color:Pink">To do, to do, to doooo</h1>
</div>
</div>
<div id="list">
</div>
</div>
<script type="text/babel" src="js/app.js" ></script>
</body>
</html>
This is app.js:
var ListOfActionsRendering=React.createClass({
render: function() {
return (
<div class="accordion" id="listOfActions">
<div class="accordion-group">
<div class="row">
<div class="col-sm-2">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#listOfActions" href="#defaultList">
<h4 id="nameOfGroup"> Основной список </h4>
</a>
</div>
<div class="col-sm-2">
<div class="btn-group">
<button class="btn" onclick="onEditListOfActionClick()"><i class="glyphicon glyphicon-pencil"></i></button>
<button class="btn"><i class="glyphicon glyphicon-remove"></i></button>
</div>
</div>
</div>
</div>
<div class="accordion-body collapse in" id="defaultList">
<div class="accordion-inner">
<a href="#defaultList">
<h5> </h5>
</a>
</div>
</div>
</div>
);
}
});
ReactDOM.render (
<ListOfActionsRendering />,
document.getElementById("list")
);
I dont have any errors in chrome console, but components are not shown.
In snipper I have an Error:
message: Uncaught SyntaxError: Unexpected token <,
filename: http://stacksnippets.net/js,
lineno: 16,
colno: 6
You need to include babel standalone script, to transcompile the code, use this script in head section:
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
Check the working example:
<!doctype html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
<meta charset="utf-8">
<title>To Do List</title>
<link href="css/bootstrap.css" rel="stylesheet">
</head>
<body>
<div class="container" id="headContainer">
<div class="row">
<div class="col-sm-1">
<img src="Panter.jpg" class="img-responsive">
</div>
<div class="col-sm-8">
<h1 style="color:Pink">To do, to do, to doooo</h1>
</div>
</div>
<div id="list">
</div>
</div>
<script type="text/babel" >
var App = React.createClass({
render: function(){
return <p>Hello</p>
}
})
ReactDOM.render(<App/>, document.getElementById('list'))
</script>
</body>
</html>
In JSX, just change class="" to className="":
var ListOfActionsRendering=React.createClass({
render: function() {
return (
<div className="accordion" id="listOfActions">
<div className="accordion-group">
<div className="row">
<div className="col-sm-2">
<a className="accordion-toggle" data-toggle="collapse" data-parent="#listOfActions" href="#defaultList">
<h4 id="nameOfGroup"> Основной список </h4>
</a>
</div>
<div className="col-sm-2">
<div className="btn-group">
<button className="btn" onclick="onEditListOfActionClick()"><i className="glyphicon glyphicon-pencil"></i></button>
<button className="btn"><i className="glyphicon glyphicon-remove"></i></button>
</div>
</div>
</div>
</div>
<div className="accordion-body collapse in" id="defaultList">
<div className="accordion-inner">
<a href="#defaultList">
<h5> </h5>
</a>
</div>
</div>
</div>
);
}
});
I'm building a site using a template and I think something is interfering with .hide() or .fadeIn(). When I click the image here.
<div id="menuCover">
<img src="SleepingMoonImages/sleepingmoonmenulogo.png" alt=""/>
</div>
nothing happens. It won't disappear or do anything. Also I know menu.js is being detected because I can document.write() and it works and also console.log works in F12 developer tools
Menu.js
$('#menuCover').click(function () {
$('#menuCover').fadeOut();
});
The image I'm trying to click is under
<div id="page2" class="content">
<div class="container_12">
<div class="grid_12">
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Home</title>
<link rel="icon" href="images/favicon.ico">
<link rel="shortcut icon" href="images/favicon.ico" />
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/camera.css">
<link rel="stylesheet" href="css/form.css">
<script src="js/jquery.js"></script>
<script src="js/jquery-migrate-1.1.1.js"></script>
<script src="js/superfish.js"></script>
<script src="js/forms.js"></script>
<script src="js/jquery.ui.totop.js"></script>
<script src="js/jquery.equalheights.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.ui.totop.js"></script>
<script type="text/javascript" src="js/menu.js"></script>
<script src="js/tms-0.4.1.js"></script>
<script type="text/javascript" src="/js/jssor.slider.mini.js"></script>
<script>
$(document).ready(function(){
$('.slider_wrapper')._TMS({
show:0,
pauseOnHover:false,
prevBu:'.prev',
nextBu:'.next',
playBu:false,
duration:800,
preset:'fade',
pagination:true,//'.pagination',true,'<ul></ul>'
pagNums:false,
slideshow:8000,
numStatus:false,
banners: 'fade',
waitBannerAnimation:false,
progressBar:false
});
});
$(document).ready(function(){
!function(){
var map=[]
,names=[]
,win=$(window)
,header=$('header')
,currClass
$('.content').each(function(n){
map[n]=this.offsetTop
names[n]=$(this).attr('id')
})
win
.on('scroll',function(){
var i=0
while(map[i++]<=win.scrollTop());
if(currClass!==names[i-2])
currClass=names[i-2]
header.removeAttr("class").addClass(names[i-2])
})
}(); });
function goToByScroll(id){
$('html,body').animate({scrollTop: $("#"+id).offset().top},'slow');
}
$(document).ready(function(){
$().UItoTop({ easingType: 'easeOutQuart' });
});
</script>
<!--[if lt IE 8]>
<div style=' clear: both; text-align:center; position: relative;'>
<a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode">
<img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." />
</a>
</div>
<![endif]-->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<link rel="stylesheet" media="screen" href="css/ie.css">
<![endif]-->
</head>
<body class="">
<!--==============================header=================================-->
<header class="page1">
<div class="container_12">
<div class="grid_12">
<div id="logoImage1"><img src="SleepingMoonImages/sleepingmoonwhite.png" alt=""/></div>
<div id="logoImage"><img src="images/logo.png" alt=""/> </div>
<!--<h1><img src="images/logo.png" alt="Gerald Harris attorney at law" height="50" width="1600"/></h1>-->
<div class="menu_block">
<nav class="">
<ul class="sf-menu">
<li class="current men"><a onClick="goToByScroll('page1'); return false;" href="#">Home </a> <strong class="hover"></strong></li>
<li class="men1"><a onClick="goToByScroll('page2'); return false;" href="#">Menu</a><strong class="hover"></strong></li>
<li class=" men2"><a onClick="goToByScroll('page3'); return false;" href="#">Events</a> <strong class="hover"></strong></li>
<li class=" men3"><a onClick="goToByScroll('page4'); return false;" href="#">Hours & Location</a> <strong class="hover"></strong></li>
<!--<li class=" men4"><a onClick="goToByScroll('page5'); return false;" href="#">Contact Us</a> <strong class="hover"></strong></li>-->
</ul>
</nav>
<div class="clear"></div>
</div>
</div>
<div class="clear"></div>
</div>
</header>
<!--=======content================================-->
<div id="page1" class="content">
<div class="ic">More Website Templates # TemplateMonster.com - September 9, 2013!</div>
<div class="container_12">
<div class="grid_12">
<div style="min-height: 50px;">
<!-- Jssor Slider Begin -->
<div id="slider1_container" style="display: none; position: relative; margin: 0 auto; width: 980px; height: 380px; overflow: hidden;">
...
</div>
<!-- Jssor Slider End -->
</div>
<div class="slider_wrapper">
<ul class="items">
<li>
<img src="images/spacer.gif" alt="">
<div class="caption banner">
<h2>Let Us Show You the Way to Success</h2>
</div>
</li>
<li>
<img src="images/spacer.gif" alt="">
<div class="caption banner">
<h2>Interminable Energy for Your Project</h2>
</div>
</li>
<li>
<img src="images/spacer.gif" alt="">
<div class="caption banner">
<h2>We know how to solve your problems!</h2>
</div>
</li>
<li>
<img src="images/spacer.gif" alt="">
<div class="caption banner">
<h2>Make your business a booming one!</h2>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div id="page2" class="content">
<div class="container_12">
<div class="grid_12">
<div class="slogan">
<h3>Our Menu</h3>
</div>
</div>
</div>
<div id="menuCover">
<img src="SleepingMoonImages/sleepingmoonmenulogo.png" alt=""/>
</div>
</div>
<div id="page3" class="content">
<div class="container_12">
<div class="grid_12">
<div class="slogan">
<h3>Upcoming Events</h3>
<div class="text1">
Events Information Text TBA
</div>
</div>
</div>
</div>
</div>
<div id="page4" class="content">
<div class="container_12">
<div class="grid_12">
<h3>Hours & Location</h3>
</div>
<div class="companies">
<div class="clear"></div>
</div>
</div>
</div>
<!--==============================footer=================================-->
<footer>
<div class="container_12">
<div class="grid_12">
<div class="copy">
</div>
</div>
<div class="clear"></div>
</div>
</footer>
</body>
</html>
You need to put your JS code in a Document Ready function because it is executing before the page loads.
The solution:
http://jsfiddle.net/m2sv4t7q/
$("document").ready(function {
$('#menuCover').click(function () {
$('#menuCover').fadeOut();
});
});
Adding that function allows the full html of the page to load before executing your javascript.
I am building a static web site with bootstrap. Working on local the layout looks fine, when deployed to the web, Safari OK, but Chrome and Firefox seem like if they dont support several bootstrap CSS rules or I am doing something wrong.
Safari OK
Chrome KO
Live code: (make sure to accept the certificate)
https://canales.paperplane.io/
Code (index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Canales Auty</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="container">
<!-- #Header -->
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10"><img src="img/header.png"></div>
<div class="col-md-1"></div>
</div>
<!--Navbar-->
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10">
<div class="navbar navbar-default">
<div class="container">
<div class= "navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>ABOUT THE FIRM</li>
<li>PROFESSIONALS</li>
<li>PRACTICE AREAS</li>
<li>NEWS ROOM</li>
<li>CAREERS</li>
<li>CONTACT US</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-1"></div>
</div>
<!--Mosiaco -->
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-4">
<img id="d1" src="img/mosaico_1.png">
<div class="contenthover container">
<h3>Lut</h3>
<p>Hola soy Lut!</p>
<p>Lorem ipsum</p>
</div>
</div>
<div class="col-md-3">
<img id="d2" src="img/mosaico_2.png">
<div class="contenthover container">
<h3>Lut</h3>
<p>Hola soy 2!</p>
<p>Lorem ipsum</p>
</div>
<img src="img/mosaico_3.png">
</div>
<div class="col-md-3"><img src="img/mosaico_4.png"><img src="img/mosaico_5.png"><img src="img/mosaico_6.png"></div>
<div class="col-md-1"></div>
</div>
<div class="row">
<div class="col-md-12 footer">
<p>hola</p>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/contentHover.js"></script>
<script type="text/javascript">
$('document').ready(function(){
$('#myTootTip').tooltip();
$('#myPopOver').popover();
$('#d1').contenthover({
overlay_background:'#000',
overlay_opacity:0.8
});
$('#d2').contenthover({
overlay_background:'#000',
overlay_opacity:0.8
});
});
</script>
</body>
</html>
Chrome won't load non-SSL scripts over a webpage open with https://.
The best way to reference your external scripts is to not specify the protocol.
As in:
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
...
<script src="//code.jquery.com/jquery.js"></script>
with //
Because your jQuery etc. is not loading, the site is breaking. Note: you will need to verify that your CDN will serve the files over https.