I was recently told all the cool kids use bootstrap so I'm playing around with it, it seems fun however there seems to be some sort of conflict somewhere I'm not sure where, when I put the code into jsfiddle it works on my own pages it doesn't

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="description" content="">
		<meta name="keywords" content="Blade of Heaven News, Myth of Soma News, Myth of Soma Beginners guide, Myth of Soma Help, Free MMORPG Guide, RPG Guide" />
		<meta name="author" content="Kevin Lockard">
		<script src="js/jquery-3.1.1.min.js"></script>	
		<link rel="stylesheet" href="bs/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
		<script src="bs/js/bootstrap.min.js"></script>	
		<script src="js/scripts.js"></script>
		<link rel="stylesheet" href="css/mystyle.css">
		<link rel="icon" type="image/png" href="images/favicons.png">
		<title>Myth of soma</title>
	</head>

<body>	
<?php include 'navbar.php';

function getUniqueVisitorCount($ip)
{
    session_start();
    if(!isset($_SESSION['current_user']))
    {
        $file = 'counter.txt';
        if(!$data = @file_get_contents($file))
        {
            file_put_contents($file, base64_encode($ip));
            $_SESSION['visitor_count'] = 1;
        }
        else{
            $decodedData = base64_decode($data);
            $ipList      = explode(';', $decodedData);

        if(!in_array($ip, $ipList)){
          array_push($ipList, $ip);
          file_put_contents($file, base64_encode(implode(';', $ipList)));
        }
        $_SESSION['visitor_count'] = count($ipList);
    }
    $_SESSION['current_user'] = $ip;
}
}

 ?>

<div class="header">
      <div class="container">
        <a href="http://myth-of-soma.com/"><img src="images/MythofSoma_668x227.jpg" class="img-responsive center-block"></a>
        <p class="col-md-10"><a class="btn btn-primary btn-lg pull-right" href="http://myth-of-soma.com/" role="button">Learn more &raquo;</a></p>
      </div>
    </div>

<div class="container">
  <!-- Example row of columns -->
  <div class="row">
    <div class="col-md-10 background">
      <h2>What is The Myth Of Soma?</h2>
       <p>The Myth of Soma is a 2d isometric free MMORPG in which 2 races battle to become the strongest race known to the lands of soma with weekly race wars. Also, Myth of Soma has an excellent guild system which gives great guild war PVP. Myth of Soma opens up a new world with the ability to take a new path for each of your characters. You task is to balance your strengths and weakness so you can survive in the lands of Soma.</p>
    </div>
    <div class="col-md-10 background">
      <h2>Myth of Soma Features</h2>
   </div>
    <div class="col-md-4 background">
	 <img src="images/crafting.jpg" alt="" class="img-fluid heading">
      <h2>Crafting</h2>
      <p>The ability to craft foods, waters, accessories, armours and weapons is available. You get to improve your crafting skill and make even better, incredible items thatll make you the one stop person to visit in the lands of Soma. </p>

    </div>
	<div class="col-md-4 background">
	 <img src="images/pve.PNG" alt="" class="img-fluid heading">
      <h2>PVE</h2>
      <p>Player VS EnvironmentThe Myth of Soma allows you to wander alone or hunt in groups to level to progress throughout the lands of Soma with many different areas and monsters to conquer, where will you start? </p>

    </div>
	<div class="col-md-4 background">
	 <img src="images/pvp.jpg" alt="" class="img-fluid heading">
      <h2>PVP</h2>
      <p>When starting the Myth of Soma you will be able to choose between one of two races. The humble human class, or their devil counterparts. Although the character levelling style is much different, these races clash each week at the war of the worlds fighting to obtain the possession of the Continental army area, which is an important part of the Myth of Soma. </p>

    </div>
	<div class="col-md-4 background">
	 <img src="images/guild.jpg" alt="" class="img-fluid heading">
      <h2>Guilds</h2>
      <p>Amongst your journeys in the Myth of Soma you will be able to create or join a guild which can war with other guilds through the Myth of Soma. A weekly guild village war challenges every guild to obtain the Guild Village Town of which only one guild can win at one time. Owning this will show which guild reigns supreme in the lands of soma. To win this war, you will need to have wits as well as strength. </p>

    </div>
	<div class="col-md-4 background">
	 <img src="images/progress.jpg" alt="" class="img-fluid heading">
      <h2>Character Progression</h2>
      <p>Your time playing the Myth of Soma will allow your character to progress through questing, levelling and of course player VS player combat. Your character will have to learn new spells obtain new auras and gain new weapons in order to survive in the Myth of Soma. </p>

    </div>
	<div class="col-md-4 background">
	 <img src="images/crafting.jpg" alt="" class="img-fluid heading">
      <h2>The History</h2>
      <p>The once globally popular game The Myth of Soma developed by Comnjoy lost its support when Comnjoy went into liquidation and disbanded the project. Soon after, the Chinese server shut down and unfortunately in 2007 theofficialEuropean server for the Myth of Soma shut down due to security issues. This left a great opening for the return of the Myth of Soma back to its original standard of greatness. That has been the task of somadev.</p>
    </div>

</div> <!-- /container -->

<?php

$ip = $_SERVER['REMOTE_ADDR'];
getUniqueVisitorCount($ip);
echo 'Unique visitor count: ' . $_SESSION['visitor_count'];
?>

 </div>

</body>

</html>
 

navbar.php

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="index.php">Myth of soma</a>
    </div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav"> 
   <li class="active"><a href="index.php">Home</a></li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Human crafting<span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a href="harmour.php">Armour</a></li>
        <li><a href="hweapons.php">Weapons</a></li>
        <li><a href="hacc.php">Accessory</a></li>
        <li><a href="hpotion.php">Potion</a></li>
        <li><a href="hcooking.php">Cooking</a></li>
      </ul>
    </li>
	<li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Devil crafting<span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a href="dweapons.php">Weapons</a></li>
        <li><a href="dacc.php">Accessory</a></li>
        <li><a href="dpotion.php">Potion</a></li>
        <li><a href="dcooking.php">Cooking</a></li>
      </ul>
    </li>
	<li><a href="extract.php">Extraction</a></li>
	<li><a href="prepare.php">Prepare</a></li>
	<li><a href="upgrade.php">Upgrades</a></li>
	<li><a href="gems.php">Gems</a></li>
	<li><a href="tannin.php">Tannin</a></li>
  </ul>
</div><!-- /.navbar-collapse -->

  </div><!-- /.container-fluid -->
</nav>

In fiddle
https://jsfiddle.net/26wt5hb0/

Makes no sense to me :glare:

    I was recently told all the cool kids use bootstrap so I'm playing around with it, it seems fun however there seems to be some sort of conflict somewhere I'm not sure where, when I put the code into jsfiddle it works on my own pages it doesn't

    as seen in file, filters won't allow for post.
    http://gotsocial.co.uk/soma/index.txt

    navbar.php

    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="index.php">Myth of soma</a>
        </div>
    
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav"> 
       <li class="active"><a href="index.php">Home</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Human crafting<span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="harmour.php">Armour</a></li>
            <li><a href="hweapons.php">Weapons</a></li>
            <li><a href="hacc.php">Accessory</a></li>
            <li><a href="hpotion.php">Potion</a></li>
            <li><a href="hcooking.php">Cooking</a></li>
          </ul>
        </li>
    	<li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Devil crafting<span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="dweapons.php">Weapons</a></li>
            <li><a href="dacc.php">Accessory</a></li>
            <li><a href="dpotion.php">Potion</a></li>
            <li><a href="dcooking.php">Cooking</a></li>
          </ul>
        </li>
    	<li><a href="extract.php">Extraction</a></li>
    	<li><a href="prepare.php">Prepare</a></li>
    	<li><a href="upgrade.php">Upgrades</a></li>
    	<li><a href="gems.php">Gems</a></li>
    	<li><a href="tannin.php">Tannin</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
    
      </div><!-- /.container-fluid -->
    </nav>

    In fiddle
    https://jsfiddle.net/26wt5hb0/1/

    Makes no sense to me :glare:

      What's the problem exactly? Counter not working as expected? Or is this about the navigation menu? For what it's worth, I don't see any CSS in the JSFiddle, so that's a likely cause of issues??

        Ah it's the navigation, the active state isn't changing to the correct page,

        I did try, with no effect

        <head>
        		<meta charset="UTF-8">
        		<meta http-equiv="X-UA-Compatible" content="IE=edge">
        		<script src="js/jquery-3.1.1.min.js"></script>	
        		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
        		<meta name="description" content="">
        		<meta name="keywords" content="Blade of Heaven News, Myth of Soma News, Myth of Soma Beginners guide, Myth of Soma Help, Free MMORPG Guide, RPG Guide" />
        
        	<link rel="stylesheet" href="bs/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        	<script src="bs/js/bootstrap.min.js"></script>	
        	<script src="js/scripts.js"></script>
        	<link rel="stylesheet" href="css/mystyle.css">
        	<link rel="icon" type="image/png" href="images/favicons.png">
        	<title>Myth of soma</title>
        
        </head>

          Meh I cheated in the end

          var path = window.location.pathname.split("/").pop();
          	if ( path == '')
          	{
          		path = 'index.php';
          	}
          	var target = $('.nav a[href="'+path+'"]');
          	target.addClass('active');

            Well, the fiddle wasn't even working on iterations < 4, not here, in Chrome. Obviously the environment's different wherever the actual code is being used ....

              Your gotsocial source is just showing your PHP code. You probably don't want that?

                Oh I removed it in the end, not sure why there are two threads the same. I made one?

                  I'll merge the two threads; they do differ slightly in their content, so I'll keep both originals. Sorry if this confuses anyone.

                    6 days later
                    Weedpacket;11059109 wrote:

                    I'll merge the two threads; they do differ slightly in their content, so I'll keep both originals. Sorry if this confuses anyone.

                    Probably just me but I'm easily confused :rolleyes:

                      Write a Reply...