FORUM D’ENTRAIDE INFORMATIQUE (FEI)
Site d’assistance et de sécurité informatique

Entraide pour le programmation en général (tous langages).
Règles du forum : Entraide concernant la programmation informatique en général, tous langages : recherche ou correction d'un code ou d'une fonction, aide à la réalisation d'un projet...
Pour la programmation web (HTML, CSS, PHP, MySQL...), il est conseillé de s'orienter dans le forum Webmastering.
Merci de lire et de respecter la charte générale du forum.
  • Avatar du membre
Avatar du membre
par PATAPIERRE
#202783
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 :
Code : Tout sélectionner
<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 déroulant et responsive :
Code : Tout sélectionner
<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>


		
		
Mon soucis est donc de faire fonctionner ces deux codes dans une même page. Ce que je n'arrive pas à faire...
Merci pour votre aide si possible
Patpierre
Pilote SIS 661

Je ne fais que déconner avec des piè[…]

Tchao FEI

Et je rajoute que malgré les mails, Faceboo[…]

Question sur les graphiques

J'ai donc récemment commencé à[…]

Bonjour Je me permets de demander de l'aide &agrav[…]