Recherche aide programmateur pour integrer 2 scripts (cookies + menu)

invite15f4b62a · 19/04/2020, 16h29

Bonjour,
Je bûche depuis plusieurs jours sur l'intégration de 2 codes pour mon site et je ne m'en sors pas...
Le premier est une alerte cookies

Code HTML:

<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>

Et le deuxième un menu vertical responsive que je veux intégrer dans la même page :

Code HTML:

<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>

J'ai deux soucis : le plus important, intégrer les 2 scripts dans la même page, et le suivant, améliorer l'aspect du responsive dans la position "mobile" (le menu reste visible sur l'écran)...
Je suis prêt à payer (sur devis) pour une aide qui tient la route tellement ça me prend la tête...

Merci pour votre intérêt
Patpierre

J'ai trouvé apparemment pour le deuxième problème (2 fois : <meta name="viewport" content="width=device-width, initial-scale=1.0">dans la même page...)

Recherche aide programmateur pour integrer 2 scripts (cookies + menu)

Recherche aide programmateur pour integrer 2 scripts (cookies + menu)

Discussions similaires

[Brun] TV SAMSUNG : Entre-aide sur le menu caché/menu service ES55F6510

arduino aide pour un menu sur lcd

[Brun] TV SAMSUNG : Entre-aide sur le menu caché/menu service

[Brun] Aide sur le menu service pour téléviseur Samsung

recherche aide d'un programmateur expérimenté