Member Avatar for davy_yg

Hello,

I update the nav.php - $('navbar-inverse') with $('.navbar-inverse')

and when I click the style - brown or red - nothing happen (the banner and the nav turns white).

I expect the navigation change colours.

Member Avatar for gentlemedia

That's because you remove all classes with .removeClass() so the class .navbar-inverse will also removed.

So better to add/remove the color classes on the body tag like in my example and then use those to change the nav colors.

body.brown .navbar-inverse {
    /* brown */   
    background-color:#c08663l
    border-color:#c08663;
}
body.red .navbar-inverse {
    /* red */  
    background-color:#ff005c;
    border-color:#ff005c;
}



$('#link1').click(function(e){
    e.preventDefault();
    $('body').removeClass().addClass('brown')
});

$('#link2').click(function(e){
    e.preventDefault();
    $('body').removeClass().addClass('red')
});
Edited by gentlemedia
Member Avatar for davy_yg

I updated my site and this is the result: http://www.innovation.web.id/One/

I wonder why when I press red and yellow, there is a space between the top and the navigation?

Member Avatar for diafol

You have serious issues with that server. It usually takes 30 seconds+ for your page to load. Now it doesn't finish loading. Opening that link just leads to a waste of time. Contact your host if it's a server issue or remove the offending resource(s). Check the banner2 and banner3 jpegs. They just don't finish downloading, even on page refresh. How big are these monsters??

EDIT: Over 2 minutes to download. Gah!

Member Avatar for gentlemedia

Indeed! Those slider images are huge!!! Optimize them if you want people to stay on that 'website'.

Not sure why you have them, but somewhere in style.css you have this:

.yellow, .grey, .red, .classy {
    padding: 8px;
}

Which is the space you see by 'yellow' and 'red'.

Use 'inspect element' in the browser and you can figure these things out yourself.

Member Avatar for davy_yg

Okay, I think because I am using Indonesia's server (It takes 2 seconds for me to load the whole website).

I market my website in Indonesia and less in oversees. 2 minutes is too much. How comes?

Maybe I should consider another thing later on since I will be marketing my website oversees in the future.

It works well for me.

Member Avatar for gentlemedia

Then you have to store your color setting in a cookie or perhaps to use a more modern way that is HTML5 local storage.

Member Avatar for davy_yg

Hello,

Any clue how to code the navigation so that it shows the correct style whenever I click select the style I want?

nav.php

<link rel="stylesheet" href="bootstrap-3.3.5/css/custom.css" media="screen">
<!-- <script type="text/javascript" src="http://www.google.com/jsapi"></script> -->


<script type="text/javascript">
            google.load("jquery", "1.7.1");
            google.setOnLoadCallback(function()
            {
                $('#link1').on('click', function(e){
                    e.preventDefault();
                    $('body').removeClass().addClass('brown')
                });
                $('#link2').on('click', function(e){
                    e.preventDefault();
                    $('body').removeClass().addClass('red')
                });
                $('#link3').on('click', function(e){
                    e.preventDefault();
                    $('body').removeClass().addClass('yellow')
                });
                 $('#link4').on('click', function(e){
                    e.preventDefault();
                    $('body').removeClass().addClass('green')
                });
                 $('#link5').on('click', function(e){
                    e.preventDefault();
                    $('body').removeClass().addClass('blue')
                });
            });
</script>  


<nav class="navbar navbar-inverse">
  <div class="container-fluid"> 
    <div class="navbar-header">
      <a class="navbar-brand" href="#"></a>
    </div> 
    <div>
      <ul class="nav navbar-nav">
        <li class="active"><a href="index.php">HOME</a></li>
        <li><a href="about.php">ABOUT</a></li>
        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">PORTFOLIO <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="portfolio-filter.php">Portfolio 1</a></li>
            <li><a href="portfolio-filter2.php">Portfolio 2</a></li>       
          </ul>
        </li>
        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">PAGES <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="product-category.php">Product Category</a></li>
            <li><a href="services.php">Services</a></li>
            <li><a href="faq.php">FAQ</a></li>
            <li><a href="team-members.php">Team Members</a></li>
            <li><a href="testimonial.php">Testimonial</a></li>
          </ul>
        </li>
        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">BLOG <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="blog.php">Blog 1</a></li>
            <li><a href="blog2.php">Blog 2</a></li>            
          </ul>
        </li>
        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="/">STYLES <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="/" id="link1">Brown</a></li>
            <li><a href="/" id="link2">Red</a></li>
            <li><a href="/" id="link3">Yellow</a></li>
            <li><a href="/" id="link4">Green</a></li>
            <li><a href="/" id="link5">Blue</a><li>
          </ul>
        </li> 
        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">CONTACT US <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="contact.php">Contact Us1</a></li>
            <li><a href="contact2.php">Contact Us2</a></li>      
          </ul>
        </li>               
      </ul>
    </div>
  </div>
</nav>

localStorageHTML5.php

<!DOCTYPE html>
<html>
<body>

<div id="result"></div>

<script>
// Check browser support
if (typeof(Storage) !== "undefined") {
    // Store
    localStorage.setItem("lastname", "green");
    // Retrieve
    document.getElementById("result").innerHTML = localStorage.getItem("lastname");
} else {
    document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage...";
}
</script>

</body>
</html>

Hello, I would like to find a way to select the navigation color of my choice and keep it the same way unless if I select another style color. How to do so? How to relate the code in nav.php and in localStorageHTML5 ?

Thanks in advance.

Member Avatar for davy_yg

I do not know how to keep my javascript remains at work evenif I click a new navigation button Pages - Team Members for example. It appears like if I click a new navigation button : Pages - Team Members for example then the color beginning to reset to it's original color (yellow - bootstrap.min.css). I have to re-click the style navigation in order to activate the custom.css . How to use localStorageHTML5 in order to remember the style click? I still do not quite understand. Please help.

team-members.php

<script type="text/javascript">
            google.load("jquery", "1.7.1");
            google.setOnLoadCallback(function()
            {
                $('#link1').on('click', function(e){
                    e.preventDefault();
                    $('body').removeClass().addClass('brown')
                });
                $('#link2').on('click', function(e){
                    e.preventDefault();
                    $('body').removeClass().addClass('red')
                });
                $('#link3').on('click', function(e){
                    e.preventDefault();
                    $('body').removeClass().addClass('yellow')
                });
                 $('#link4').on('click', function(e){
                    e.preventDefault();
                    $('body').removeClass().addClass('green')
                });
                 $('#link5').on('click', function(e){
                    e.preventDefault();
                    $('body').removeClass().addClass('blue')
                });
            });
</script>
Member Avatar for davy_yg

@gentlemedia: your suggestion looks good. Yet, I expect that the navigation color would stays the same evenif I click another navigation button that is not the style button.

Any other way to do that?

Member Avatar for gentlemedia

Just copy the code from that pen and use that or add custom data-attributes to your links and use those values to store in a variable for localStorage.

<a href="#" data-theme="red">red</a>

But easier to copy that pen!

Member Avatar for davy_yg

Hello,

I still do not understand how to write code for navigation that could works well like storing the style color eventhough someone change the navigation menu:

nav.php

<link rel="stylesheet" href="bootstrap-3.3.5/css/custom.css" media="screen">

<script type="text/javascript" src="http://www.google.com/jsapi"></script> 


<script type="text/javascript">
            google.load("jquery", "1.7.1");
            google.setOnLoadCallback(function()
            {
                $('#link1').on('click', function(e){
                    e.preventDefault();
                    $('body').removeClass().addClass('brown')
                });
                $('#link2').on('click', function(e){
                    e.preventDefault();
                    $('body').removeClass().addClass('red')
                });
                $('#link3').on('click', function(e){
                    e.preventDefault();
                    $('body').removeClass().addClass('yellow')
                });
                 $('#link4').on('click', function(e){
                    e.preventDefault();
                    $('body').removeClass().addClass('green')
                });
                 $('#link5').on('click', function(e){
                    e.preventDefault();
                    $('body').removeClass().addClass('blue')
                });
            });
</script>  


<nav class="navbar navbar-inverse">
  <div class="container-fluid"> 
    <div class="navbar-header">
      <a class="navbar-brand" href="#"></a>
    </div> 
    <div>
      <ul class="nav navbar-nav">
        <li class="active"><a href="index.php">HOME</a></li>
        <li><a href="about.php">ABOUT</a></li>
        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">PORTFOLIO <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="portfolio-filter.php">Portfolio 1</a></li>
            <li><a href="portfolio-filter2.php">Portfolio 2</a></li>       
          </ul>
        </li>
        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">PAGES <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="product-category.php">Product Category</a></li>
            <li><a href="services.php">Services</a></li>
            <li><a href="faq.php">FAQ</a></li>
            <li><a href="team-members.php">Team Members</a></li>
            <li><a href="testimonial.php">Testimonial</a></li>
            <li><a href="sitemap.php">Sitemap</a></li>
          </ul>
        </li>
        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">BLOG <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="blog.php">Blog 1</a></li>
            <li><a href="blog2.php">Blog 2</a></li>            
          </ul>
        </li>
        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="/">STYLES <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="/" id="link1">Brown</a></li>
            <li><a href="/" id="link2" data-theme="red">Red</a></li>
            <li><a href="/" id="link3">Yellow</a></li>
            <li><a href="/" id="link4">Green</a></li>
            <li><a href="/" id="link5">Blue</a><li>
          </ul>
        </li> 
        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">CONTACT US <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="contact.php">Contact Us1</a></li>
            <li><a href="contact2.php">Contact Us2</a></li>      
          </ul>
        </li>               
      </ul>
    </div>
  </div>
</nav>
Member Avatar for gentlemedia

You've got with that codepen example everything you need in order to get this working.

Member Avatar for davy_yg

Hello,

I don't know how to utilize codepen into this navigation bar so that it works well. Can anyone help me? Thanks in advance.

index.html

<link href= "style.css" rel="stylesheet" type="text/css" media="screen">

<script src="javascript.js"></script>

<input type="radio" id="red1" name="color" value="red">
<input type="radio" id="blue" name="color" value="blue">
<input type="radio" id="green" name="color" value="green">

<ul class="dropdown-menu">
            <li><a href="#" id="link1">Brown</a></li>
            <li><a href="#" id="red" data-theme="red">Red</a></li>
            <li><a href="#" id="link3">Yellow</a></li>
            <li><a href="#" id="link4">Green</a></li>
            <li><a href="#" id="link5">Blue</a><li>
</ul>

<h1>[Experiment] CSS style switcher, with js localStorage</h1>

Choose your style (then close and re-open to see persistence)
<br><br>

<label for="red" onclick="saveTheme('red')">Redish</label>
<label for="blue" onclick="saveTheme('blue')">Bluish</label>
<label for="green" onclick="saveTheme('green')">Greenish</label>
<br><br>

<header>Navigation</header>

style.css

h1 {
  font-family:Arial;
}

header, section, footer {
  display:flex;
    align-items:center;
    justify-content:center;
  text-align:center;
  font-size:40px;
  font-family:verdana, sans-serif;
  color:#222;
  text-shadow:4px 4px 4px rgba(20,20,20,0.4);
}

header {
  height:160px;
  width:100%;
  background-image: linear-gradient(to bottom, rgba(0,200,0,0.6), rgba(0,100,0,1));
}

section {
  height:360px;
  width:100%;
  background-image: linear-gradient(to left, rgba(0,200,0,0.6), rgba(0,100,0,1));
}

footer {
  height:100px;
  width:100%;
  background-image: linear-gradient(to top, rgba(0,200,0,0.6), rgba(0,100,0,1));
}

input {
  display:none;
}

label {
  margin-right:8px;
  padding:4px 10px;
  color:#ddd;
  border-radius:4px;
  box-shadow:2px 2px 2px;
}

label[for="red"] {background-image: linear-gradient(to left, rgba(200,0,0,0.6), rgba(100,0,0,1));}
label[for="blue"] {background-image: linear-gradient(to left, rgba(0,0,200,0.6), rgba(0,0,100,1));}
label[for="green"] {background-image: linear-gradient(to left, rgba(0,200,0,0.6), rgba(0,100,0,1));}

/* Styles if Red is checked */
input[id="red"]:checked ~ header {background-image: linear-gradient(to bottom, rgba(200,0,0,0.6), rgba(100,0,0,1));}
input[id="red"]:checked ~ section {background-image: linear-gradient(to left, rgba(200,0,0,0.6), rgba(100,0,0,1));}
input[id="red"]:checked ~ footer {background-image: linear-gradient(to top, rgba(200,0,0,0.6), rgba(100,0,0,1));}

/* Styles if Blue is checked */
input[id="blue"]:checked ~ header {background-image: linear-gradient(to bottom, rgba(0,0,200,0.6), rgba(0,0,100,1));}
input[id="blue"]:checked ~ section {background-image: linear-gradient(to left, rgba(0,0,200,0.6), rgba(0,0,100,1));}
input[id="blue"]:checked ~ footer {background-image: linear-gradient(to top, rgba(0,0,200,0.6), rgba(0,0,100,1));}

/* Styles if Green is checked */
input[id="green"]:checked ~ header {background-image: linear-gradient(to bottom, rgba(0,200,0,0.6), rgba(0,100,0,1));}
input[id="green"]:checked ~ section {background-image: linear-gradient(to left, rgba(0,200,0,0.6), rgba(0,100,0,1));}
input[id="green"]:checked ~ footer {background-image: linear-gradient(to top, rgba(0,200,0,0.6), rgba(0,100,0,1));}

javascript.js

function saveTheme(colorChoice) {
  localStorage.setItem('theme', colorChoice);
}

/* Note that the above function doesn't include error handling. Full code is below, but it conflicts with copdepen source code in some way, so doesn't work. Use something like this in your dev environment though:

function setTheme(colorChoice) {
if ('localStorage' in window && window['localStorage'] !== null) {
    try {
      localStorage.setItem('theme', colorChoice);
    } catch (e) {
        if (e == QUOTA_EXCEEDED_ERR) {
            alert('Quota exceeded!');
        }
    }
    else {
        alert('Cannot store user preferences as your browser do not support local storage');
    }
}*/

window.onload = function() {
  var theme = localStorage.getItem('theme');
  if(theme === null) {
    theme = 'green';
  }
  else {
     radiobtn = document.getElementById(theme);
     radiobtn.checked = true;
  }
}
Member Avatar for davy_yg

nav.php

<link rel="stylesheet" href="bootstrap-3.3.5/css/custom.css" media="screen">

<script type="text/javascript" src="http://www.google.com/jsapi"></script> 


<script type="text/javascript">
            google.load("jquery", "1.7.1");
            google.setOnLoadCallback(function()
            {
                $('#link1').on('click', function(e){
                    e.preventDefault();
                    $('body').removeClass().addClass('brown')
                });
                $('#link2').on('click', function(e){
                    e.preventDefault();
                    $('body').removeClass().addClass('red')
                });
                $('#link3').on('click', function(e){
                    e.preventDefault();
                    $('body').removeClass().addClass('yellow')
                });
                 $('#link4').on('click', function(e){
                    e.preventDefault();
                    $('body').removeClass().addClass('green')
                });
                 $('#link5').on('click', function(e){
                    e.preventDefault();
                    $('body').removeClass().addClass('blue')
                });
            });
</script>  


<nav class="navbar navbar-inverse">
  <div class="container-fluid"> 
    <div class="navbar-header">
      <a class="navbar-brand" href="#"></a>
    </div> 
    <div>
      <ul class="nav navbar-nav">
        <li class="active"><a href="index.php">HOME</a></li>
        <li><a href="about.php">ABOUT</a></li>
        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">PORTFOLIO <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="portfolio-filter.php">Portfolio 1</a></li>
            <li><a href="portfolio-filter2.php">Portfolio 2</a></li>       
          </ul>
        </li>
        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">PAGES <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="product-category.php">Product Category</a></li>
            <li><a href="services.php">Services</a></li>
            <li><a href="faq.php">FAQ</a></li>
            <li><a href="team-members.php">Team Members</a></li>
            <li><a href="testimonial.php">Testimonial</a></li>
            <li><a href="sitemap.php">Sitemap</a></li>
          </ul>
        </li>
        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">BLOG <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="blog.php">Blog 1</a></li>
            <li><a href="blog2.php">Blog 2</a></li>            
          </ul>
        </li>
        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="/">STYLES <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="/" id="link1">Brown</a></li>
            <li><a href="/" id="link2" onclick="saveTheme('red')">Red</a></li>
            <li><a href="/" id="link3">Yellow</a></li>
            <li><a href="/" id="link4">Green</a></li>
            <li><a href="/" id="link5">Blue</a><li>
          </ul>
        </li> 
        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">CONTACT US <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="contact.php">Contact Us1</a></li>
            <li><a href="contact2.php">Contact Us2</a></li>      
          </ul>
        </li>               
      </ul>
    </div>
  </div>
</nav>

javascript.js

function saveTheme(colorChoice) {
  localStorage.setItem('theme', colorChoice);
}


window.onload = function() {
  var theme = localStorage.getItem('theme');
  if(theme === null) {
    theme = 'green';
  }
  else {
     radiobtn = document.getElementById(theme);
     radiobtn.checked = true;
  }
}

Hello,

I am looking for a way when someone click the red navigation style button - then it will access the javascript in order to alter the custom bootstrap css to change the navigation color. Any idea how to do so?

Thanks in advance.

Member Avatar for diafol

Confusing. How many references to jQuery do you need? I'd clean this up if I was you.

<head> 
<title>Testimonial</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">  
   <meta name="keywords" content="Our Portfolio">
   <meta name="description" content="This is One, a multipurpose website">
   <meta name="author" content="Davy Gunarso">   
   <link rel="stylesheet" type="text/css" href="css/style.css">
   <link rel="stylesheet" type="text/css" href="css/animate2.css">
   <link rel="stylesheet" media="all" href="css/main.css">
   <script src="js/modernizr.custom.37797.js"></script> 
   <link rel="stylesheet" href="bootstrap-3.3.5/css/bootstrap.min.css">
   <link rel="stylesheet" href="bootstrap-3.3.5/css/custom.css">
   <script src="bootstrap-3.3.5/js/jquery.min.js"></script>   ** HERE **
   <script src="bootstrap-3.3.5/js/bootstrap.min.js"></script>
   <!-- Grab Google CDN's jQuery. fall back to local if necessary --> 
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> ** HERE ** 
   <script>!window.jQuery && document.write('<script src="/js/jquery-1.6.1.min.js"><\/script>')</script>
   <script src="js/parallax.js"></script>
   <style>
    #space {
        height: 100px;
    }   

    </style> 

    <!-- jQuery library (served from Google) -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> ** HERE **

    <!-- bxSlider Javascript file -->
    <script src="jquery.bxslider.min.js"></script>

    <!-- bxSlider CSS file -->
    <link href="jquery.bxslider2.css" rel="stylesheet">

    <script>
    $(document).ready(function(){
        $('.bxslider').bxSlider({
            pager: false
        });
    });
    </script>

</head>

Three different calls to jQuery. It looks like you've just copy and pasted bits from different scripts, without looking over it.

Member Avatar for davy_yg

testimonial.php

    <head> 
    <title>Testimonial</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1">  
       <meta name="keywords" content="Our Portfolio">
       <meta name="description" content="This is One, a multipurpose website">
       <meta name="author" content="Davy Gunarso">   
       <link rel="stylesheet" type="text/css" href="css/style.css">
       <link rel="stylesheet" type="text/css" href="css/animate2.css">
       <link rel="stylesheet" media="all" href="css/main.css">
       <script src="js/modernizr.custom.37797.js"></script> 
       <link rel="stylesheet" href="bootstrap-3.3.5/css/bootstrap.min.css">
       <link rel="stylesheet" href="bootstrap-3.3.5/css/custom.css">
       <script src="bootstrap-3.3.5/js/jquery.min.js"></script>   ** HERE **
       <script src="bootstrap-3.3.5/js/bootstrap.min.js"></script>
       <!-- Grab Google CDN's jQuery. fall back to local if necessary --> 
       <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> ** HERE ** 
       <script>!window.jQuery && document.write('<script src="/js/jquery-1.6.1.min.js"><\/script>')</script>
       <script src="js/parallax.js"></script>
       <style>
        #space {
            height: 100px;
        }   
        </style> 
        <!-- jQuery library (served from Google) -->
        <!-- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> ** HERE ** -->
        <!-- bxSlider Javascript file -->
        <script src="jquery.bxslider.min.js"></script>
        <!-- bxSlider CSS file -->
        <link href="jquery.bxslider2.css" rel="stylesheet">
        <script>
        $(document).ready(function(){
            $('.bxslider').bxSlider({
                pager: false
            });
        });
        </script>
    </head>

javascript.js

    function saveTheme(colorChoice) {
      localStorage.setItem('theme', colorChoice);
    }
    window.onload = function() {
      var theme = localStorage.getItem('theme');
      if(theme === null) {
        theme = 'green';
      }
      else {
         // alter custom bootstrap css from javascript
      }
    }

Can you help me fix the javascript? I comment out one of the jquery references.

Member Avatar for diafol

Davy. Please look over this again. You still have 2 refs to jQuery - lines 14 and 17.

Where is the js you show being referenced? In the HEAD section? I can't see a reference to javascript.js

Member Avatar for davy_yg

Okay,

I comment out both of the jquery references.

http://www.innovationusa.web.id/One/testimonial.php

javascript.js

        function saveTheme(colorChoice) {
          localStorage.setItem('theme', colorChoice);
        }
        window.onload = function() {
          var theme = localStorage.getItem('theme');
          if(theme === null) {
            theme = 'green';
          }
          else {
             // alter custom bootstrap css from javascript
          }
        }

What code should I replace // alter custom bootstrap css from javascript
with?

Member Avatar for davy_yg

Hello, This is my code. I try to revise it and change the brown color css with javascript but it does not work yet. It suppose to remains brown, evenif I click another navigation button - such as about for example.

nav.php

<link rel="stylesheet" href="bootstrap-3.3.5/css/custom.css" media="screen">

<script type="text/javascript" src="http://www.google.com/jsapi"></script> 


<script type="text/javascript">
            google.load("jquery", "1.7.1");
            google.setOnLoadCallback(function()
            {
                $('#link1').on('click', function(e){
                    e.preventDefault();
                    $('body').removeClass().addClass('brown')
                });
                $('#link2').on('click', function(e){
                    e.preventDefault();
                    $('body').removeClass().addClass('red')
                });
                $('#link3').on('click', function(e){
                    e.preventDefault();
                    $('body').removeClass().addClass('yellow')
                });
                 $('#link4').on('click', function(e){
                    e.preventDefault();
                    $('body').removeClass().addClass('green')
                });
                 $('#link5').on('click', function(e){
                    e.preventDefault();
                    $('body').removeClass().addClass('blue')
                });
            });
</script>  


<nav class="navbar navbar-inverse">
  <div class="container-fluid"> 
    <div class="navbar-header">
      <a class="navbar-brand" href="#"></a>
    </div> 
    <div>
      <ul class="nav navbar-nav">
        <li class="active"><a href="index.php">HOME</a></li>
        <li><a href="about.php">ABOUT</a></li>
        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">PORTFOLIO <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="portfolio-filter.php">Portfolio 1</a></li>
            <li><a href="portfolio-filter2.php">Portfolio 2</a></li>       
          </ul>
        </li>
        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">PAGES <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="product-category.php">Product Category</a></li>
            <li><a href="services.php">Services</a></li>
            <li><a href="faq.php">FAQ</a></li>
            <li><a href="team-members.php">Team Members</a></li>
            <li><a href="testimonial.php">Testimonial</a></li>
            <li><a href="sitemap.php">Sitemap</a></li>
          </ul>
        </li>
        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">BLOG <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="blog.php">Blog 1</a></li>
            <li><a href="blog2.php">Blog 2</a></li>            
          </ul>
        </li>
        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="/">STYLES <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="/" id="link1">Brown</a></li>
            <li><a href="/" id="link2" onclick="saveTheme('red')">Red</a></li>
            <li><a href="/" id="link3">Yellow</a></li>
            <li><a href="/" id="link4">Green</a></li>
            <li><a href="/" id="link5">Blue</a><li>
          </ul>
        </li>

javascript.js

function saveTheme(colorChoice) {
  localStorage.setItem('theme', colorChoice);
}


window.onload = function() {
  var theme = localStorage.getItem('theme');
  if(theme === null) {
    theme = 'green';
  }
  else {
     document.getElementById("body.brown .navbar-inverse").style.background-color = "#c08663";
  }
}
Member Avatar for diafol

I'm confused by your snippets. I was asking where the javascript.js file was being referenced in your page as I can't see a link to it in your head section. Also the nav.php file seems to show refs to css and js files and a script outside the HEAD area. Is this right?

Member Avatar for davy_yg

Okay, I already updated my testimonial.php

testimonial.php

    <script src="javascript.js"></script>


    <!-- jQuery library (served from Google) -->
    <!--<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> -->

    <!-- bxSlider Javascript file -->
    <script src="jquery.bxslider.min.js"></script>

    <!-- bxSlider CSS file -->
    <link href="jquery.bxslider2.css" rel="stylesheet" />

    <script>
    $(document).ready(function(){
        $('.bxslider').bxSlider({
            pager: false
        });
    });
    </script>

</head>

Above is apart of the head section of testimonial.php.

And yes, I have some js and css references link in nav.php is that not okay?

Since I need to references the link repeatedly in every pages that use nav.php

Any other way to do it and make my code works as I expected?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.