Search code examples
javascriptphpcssmessagebox

Issue Closing Message Boxes cookie

I'm having some issue to implement a Closing Message Boxes fonction to my button.
I'm quite a beginner and i don't totally understand the fonction. To generate my button i'm using php and css.

Here is the PHP code (this code is inside a div with the class "ajouer2"):

[php]
require_once('lib/Browser.php');
$browser = new Browser();
if( $browser->getBrowser() == Browser::BROWSER_FIREFOX) {
echo ("<img src='http://www.monsite.fr/wp-content/uploads/2015/03/Firefox_2013_logoXS.png' height='50' width='50'><a onclick='addEngine()' class='firefox'> Ajouter à firefox</a>");
}else if( $browser->getBrowser() == Browser::BROWSER_EDGE) {
echo ("<img src='http://www.monsite.fr/wp-content/uploads/2016/01/edge_blue_logoXS.png' height='50' width=50'><a href='http://www.monsite.fr/ajouter-a/' target='_blank' class='firefox'> Ajouter à Edge</a>");
}else if( $browser->getBrowser() == Browser::BROWSER_CHROME) {
echo ("<img src='http://www.monsite.fr/wp-content/uploads/2015/03/chrome_2013_logoXS.png' height='50' width=50'><a href='https://chrome.google.com/webstore/...' target='_blank' class='firefox'> Ajouter à >Chrome</a>");
}else if( $browser->getBrowser() == Browser::BROWSER_SAFARI) {
echo ("<img src='http://www.monsite.fr/wp-content/uploads/2015/05/safari_logoXS2.png' height='50' width='50'><a class='firefox'> Bientôt sur Safari</a>");
}else if( $browser->getBrowser() == Browser::BROWSER_IE) {
echo ("<img src='http://www.monsite.fr/wp-content/uploads/2015/03/explorer_logoXS.png' height='50' width='50'><a onclick='AddSearch ()' class='firefox'> Ajouter à Int. Explorer</a>");
}else if( $browser->getBrowser() == Browser::BROWSER_OPERA) {
echo ("<img src='http://www.monsite.fr/wp-content/uploads/2015/03/opera_2013_logoXS.png' height='50' width='50'><a class='firefox'> Bientôt sur Opera</a>");
}
[/php]

The CSS that go with it to style the button: 

.ajouter2
{
    display: inline-block;
    border-radius: 0px;
    width: 173px;
    height: 47px;
    margin-left:20px;
    background-color: #f7f7f7;
    border-color: #f7f7f7;
}

My javascript to do the fonction:

    <script>
function closeBox(toClose) {
   document.getElementById(toClose).style.display = "none";
   setCookie(toClose, "closed", 365);
}
function setCookie(cName, value, expiredays) {
   var expDate = new Date();
   expDate.setDate(expDate.getDate()+expiredays);
   document.cookie=cName + "=" + escape(value) +
   ";expires=" + expDate.toGMTString();
}
function loadMsg(msgClass) {
   msg = document.getElementsByTagName("div");
   for (i=0; i<msg.length; i++) {
      if(msg[i].className == msgClass) {
         if(document.cookie.indexOf(msg[i].id) == -1) {
            msg[i].style.display = "block";
         }
      }
   }
}
</script>

The div that goes with it:

<body onload="loadMsg('msgbox');">
   <div id="message-1" class="msgbox">
      <a href="#" class="close" onclick="closeBox('message-1'); return false;" title="Close This">X</a>
</div>
</body>

My problem is to mix all that together.
I would like to give this fonction to my PHP (ajouter2) button, but I can't figure it out.
I don't know how to edit the "loadMsg(msgClass)" part to make it target my button.

If someone could help me to understand the function or mix it with my code.
Thanks.

Solution

  • I solved the problem, that was a syntax problem...i'm a beginner and that took me a long time to see it but now that's ok ! :)

    [php]
require_once('lib/Browser.php');
$browser = new Browser();
if( $browser->getBrowser() == Browser::BROWSER_FIREFOX) {
echo '<div id="message-1" class="msgbox"><img src="http://www.monsite.fr/wp-content/uploads/2015/03/Firefox_2013_logoXS.png" height="50" width="50"><a onclick="addEngine()" class="firefox"> Ajouter</a><a href="#" class="close" onclick="closeBox(\'message-1\')" title="Fermer">x</a></div>';
}else if( $browser->getBrowser() == Browser::BROWSER_EDGE) {
echo '<div id="message-1" class="msgbox"><img src="http://www.monsite.fr/wp-content/uploads/2016/01/edge_blue_logoXS.png" height="50" width="50"><a href="http://www.monsite.fr/ajouter-a/" target="_blank" class="firefox"> Ajouter</a><a href="#" class="close" onclick="closeBox(\'message-1\')" title="Fermer">x</a></div>';
}else if( $browser->getBrowser() == Browser::BROWSER_CHROME) {
echo '<div id="message-1" class="msgbox"><img src="http://www.monsite.fr/wp-content/uploads/2015/03/chrome_2013_logoXS.png" height="50" width="50"><a href="https://www.monsite.fr" target="_blank" class="firefox"> Ajouter</a><a href="#" class="close" onclick="closeBox(\'message-1\')" title="Fermer">x</a></div>';
}else if( $browser->getBrowser() == Browser::BROWSER_SAFARI) {
echo '<div id="message-1" class="msgbox"><img src="http://www.monsite.fr/wp-content/uploads/2015/05/safari_logoXS2.png" height="50" width="50"><a href="http://www.monsite.fr/ajouter-a/" target="_blank" class="firefox"> Ajoute</a><a href="#" class="close" onclick="closeBox(\'message-1\')" title="Fermer">x</a></div>';
}else if( $browser->getBrowser() == Browser::BROWSER_IE) {
echo '<div id="message-1" class="msgbox"><img src="http://www.monsite.fr/wp-content/uploads/2015/03/explorer_logoXS.png" height="50" width="50"><a onclick="AddSearch ()" class="firefox"> Ajouter</a><a href="#" class="close" onclick="closeBox(\'message-1\')" title="Fermer">x</a></div>';
}else if( $browser->getBrowser() == Browser::BROWSER_OPERA) {
echo '<div id="message-1" class="msgbox"><img src="http://www.monsite.fr/wp-content/uploads/2015/03/opera_2013_logoXS.png" height="50" width="50"><a href="http://www.monsite.fr/ajouter-a/" target="_blank" class="firefox"> Ajouter</a><a href="#" class="close" onclick="closeBox(\'message-1\')" title="Fermer">x</a></div>';
}

[/php]