AIDE POUR INTEGRER 2 CODES DANS UNE MEME PAGE
Posté : dim. 19 avr. 2020 17:36
Bonjour,
Je bûche depuis plusieurs jours sur l'intégration de 2 codes pour mon site et je ne m'en sors pas... Les 2 codes fonctionnent parfaitement lorsqu'ils sont seuls mais pas ensemble sur une même page.
Le premier est une alerte cookies :
Merci pour votre aide si possible
Patpierre
Je bûche depuis plusieurs jours sur l'intégration de 2 codes pour mon site et je ne m'en sors pas... Les 2 codes fonctionnent parfaitement lorsqu'ils sont seuls mais pas ensemble sur une même page.
Le premier est une alerte cookies :
Code : Tout sélectionner
Et le deuxième un menu vertical déroulant et responsive :<html lang="en">
<head>
<meta charset="utf-8">
<title>COOKIESCODE</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- PureCookie -->
<link rel="stylesheet" type="text/css">
<style>
.cookieConsentContainer {
z-index: 999;
width: 350px;
min-height: 20px;
box-sizing: border-box;
padding: 30px 30px 30px 30px;
background: #E79D41;
overflow: hidden;
position: fixed;
bottom: 30px;
right: 30px;
display: none;
}
.cookieConsentContainer .cookieTitle a {
font-family: OpenSans, arial, "sans-serif";
color: brown;
font-size: 22px;
line-height: 20px;
display: block;
}
.cookieConsentContainer .cookieDesc p {
margin: 0;
padding: 0;
font-family: OpenSans, arial, "sans-serif";
color: brown;
font-size: 13px;
line-height: 20px;
display: block;
margin-top: 10px;
}
.cookieConsentContainer .cookieDesc a {
font-family: OpenSans, arial, "sans-serif";
font-size: 15px;
color: #FFFFFF;
text-decoration:none;
}
.cookieConsentContainer .cookieDesc a:hover {
color: #3E9B67;
text-decoration:none;
}
.cookieConsentContainer .cookieButton a {
display: inline-block;
font-family: OpenSans, arial, "sans-serif";
color: #FFFFFF;
font-size: 14px;
font-weight: bold;
margin-top: 14px;
background: #B22222;
box-sizing: border-box;
padding: 15px 24px;
text-align: center;
transition: background 0.3s;
}
.cookieConsentContainer .cookieButton a:hover {
cursor: pointer;
background: #3E9B67;
}
@media (max-width: 980px)
{
.cookieConsentContainer {
bottom: 0px !important;
left: 50px !important;
width: 50% !important;
}
.cookieConsentContainer .cookieTitle a {
font-size: 30px;
font-weight: bold;
}
.cookieConsentContainer .cookieDesc p {
font-size: 25px;
line-height: 28px;
}
.cookieConsentContainer .cookieDesc a {
font-size: 25px;
text-decoration:none;
}
.cookieConsentContainer .cookieButton a {
font-size: 32px;
}
</style>
<script>
// --- Config --- //
var purecookieTitle = "Cookies"; // Title
var purecookieDesc = "Pierres-Info utilise des cookies afin de faire évoluer ses rubriques.<br>En naviguant sur le site, vous en acceptez l'utilisation: "; // Description
var purecookieLink = '<a href="https://www.pierres-info.fr/mention_legales/index.html" target="_blank" >En savoir plus</a>'; // Cookiepolicy link
var purecookieButton = "Accepter"; // Button text
// --- --- //
function pureFadeIn(elem, display){
var el = document.getElementById(elem);
el.style.opacity = 0;
el.style.display = display || "block";
(function fade() {
var val = parseFloat(el.style.opacity);
if (!((val += .02) > 1)) {
el.style.opacity = val;
requestAnimationFrame(fade);
}
})();
};
function pureFadeOut(elem){
var el = document.getElementById(elem);
el.style.opacity = 1;
(function fade() {
if ((el.style.opacity -= .02) < 0) {
el.style.display = "none";
} else {
requestAnimationFrame(fade);
}
})();
};
function setCookie(name,value,days) {
var expires = "";
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days*24*60*60*1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + (value || "") + expires + "; path=/";
}
function getCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
function eraseCookie(name) {
document.cookie = name+'=; Max-Age=-99999999;';
}
function cookieConsent() {
if (!getCookie('purecookieDismiss')) {
document.body.innerHTML += '<div class="cookieConsentContainer" id="cookieConsentContainer"><div class="cookieTitle"><a>' + purecookieTitle + '</a></div><div class="cookieDesc"><p>' + purecookieDesc + ' ' + purecookieLink + '</p></div><div class="cookieButton"><a onClick="purecookieDismiss();">' + purecookieButton + '</a></div></div>';
pureFadeIn("cookieConsentContainer");
}
}
function purecookieDismiss() {
setCookie('purecookieDismiss','1',7);
pureFadeOut("cookieConsentContainer");
}
window.onload = function() { cookieConsent(); };
</script>
<!-- -->
</head>
</html>Code : Tout sélectionner
Mon soucis est donc de faire fonctionner ces deux codes dans une même page. Ce que je n'arrive pas à faire...<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Collapsible sidebar using Bootstrap 3</title>
<!-- Bootstrap CSS CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Our Custom CSS -->
<style>
/*
STYLE
*/
p {
font-family: 'Poppins', sans-serif;
font-size: 1.1em;
font-weight: 300;
line-height: 1.7em;
color: #999;
}
a, a:hover, a:focus {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
.navbar {
padding: 15px 10px;
background: #fff;
border: none;
border-radius: 0;
margin-bottom: 40px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}
.navbar-btn {
box-shadow: none;
outline: none !important;
border: none;
}
.line {
width: 100%;
height: 2px;
border-bottom: 1px dashed #ddd;
margin: 20px 0;
}
/* ---------------------------------------------------
SIDEBAR STYLE
----------------------------------------------------- */
.wrapper {
display: flex;
align-items: stretch;
}
#sidebar {
min-width: 250px;
max-width: 250px;
background: #7386D5;
color: brown;
transition: all 0.3s;
}
#sidebar.active {
margin-left: -250px;
}
#sidebar .sidebar-header {
padding: 20px;
background: #6d7fcc;
}
#sidebar ul.components {
padding: 5px 0;
border-bottom: 1px solid #47748b;
}
#sidebar ul p {
color: #fff;
padding: 10px;
}
#sidebar ul li a {
padding: 10px;
font-size: 1.1em;
display: block;
}
#sidebar ul li a:hover {
color: #7386D5;
background: #fff;
}
#sidebar ul li.active > a, a[aria-expanded="true"] {
color: #fff;
background: #6d7fcc;
}
a[data-toggle="collapse"] {
position: relative;
}
a[aria-expanded="false"]::before, a[aria-expanded="true"]::before {
content: '\e259';
display: block;
position: absolute;
right: 20px;
font-family: 'Glyphicons Halflings';
font-size: 0.6em;
}
a[aria-expanded="true"]::before {
content: '\e260';
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
background: #6d7fcc;
}
ul.CTAs {
padding: 20px;
}
ul.CTAs a {
text-align: center;
font-size: 0.9em !important;
display: block;
border-radius: 5px;
margin-bottom: 5px;
}
a.download {
background: #fff;
color: #7386D5;
}
a.article, a.article:hover {
background: #6d7fcc !important;
color: #fff !important;
}
/* ---------------------------------------------------
CONTENT STYLE
----------------------------------------------------- */
#content {
padding: 20px;
min-height: 100vh;
transition: all 0.3s;
}
/* ---------------------------------------------------
MEDIAQUERIES
----------------------------------------------------- */
@media (max-width: 768px), (max-width: 768px) {
#sidebar {
margin-left: -400px;
}
#sidebar.active {
margin-left: 0;
}
#sidebarCollapse span {
display: none;
}
}
</style>
</head>
<body>
<div class="wrapper">
<!-- Sidebar Holder -->
<nav id="sidebar">
<div class="sidebar-header">
<h3>MENU</h3>
</div>
<ul class="list-unstyled components">
<li class="active">
<a href="https://pierres-info.fr/accueil/index.html">ACCUEIL</a>
</li>
<li>
<a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false">FORMATIONS</a>
<ul class="collapse list-unstyled" id="homeSubmenu">
<li><a href="https://pierres-info.fr/les_metiers_de_la_pierre/index.html">Les Métiers de la Pierre</a></li>
<li><a href="#">Home 2</a></li>
<li><a href="#">Home 3</a></li>
</ul>
</li>
<li>
<a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false">CARRIÈRES</a>
<ul class="collapse list-unstyled" id="pageSubmenu">
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</li>
<li>
<a href="https://pierres-info.fr/vie_de_roche/index.html">VIE DE ROCHES</a>
</li>
<li>
<a href="#pagePros" data-toggle="collapse" aria-expanded="false">LES PROS</a>
<ul class="collapse list-unstyled" id="pagePros">
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</li>
<li>
<a href="#pageSculpteurs" data-toggle="collapse" aria-expanded="false">LES SCULPTEURS</a>
<ul class="collapse list-unstyled" id="pageSculpteurs">
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
</ul>
</li>
<li>
<a href="#">Portfolio</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</nav>
<!-- Page Content Holder -->
<div id="content">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" id="sidebarCollapse" class="btn btn-info navbar-btn">
<i class="glyphicon glyphicon-align-left"></i>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
</ul>
</div>
</div>
</nav>
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<!-- Bootstrap Js CDN -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#sidebarCollapse').on('click', function () {
$('#sidebar').toggleClass('active');
});
});
</script>
</body>
</html>
Merci pour votre aide si possible
Patpierre