0

For some reason with my code for a progress bar it won't show the colour. For instance if I put the class as "bar background-purple" it will make it a bar but not give it the class purple also. If I take out the bar part it will be purple and if I take out the background-purple part it stays the same. I will attach the code and a screenshot.

Using Bootstrap 3.

Btw this is the same code I have from a different page on my website where it does show colour. Any ideas?

         <div class="skill-container span8">
            <div class="row-fluid">

              <!-- BEGIN FIRST SKILL -->
              <div class="latest-skill first-skill skill-widget span6">
                <h4><i class="icon-bookmark"></i> Progress </h4>
                <div class="progress">
                  <div class="bar background-purple" data-score="85">
                      <span class="skill-title">HTML</span>
                      <span class="title-score"></span>
                  </div>
                </div><!-- .progress -->
                </div><!-- .progress -->
              </div><!-- .latest-skill .skill-widget -->
            </div><!-- row fluid -->            
          </div><!-- .skill-container --> 
        </div><!-- .big-element --> 
      </div><!-- .about .row -->

To make sure I didn't attach the CSS files wrongly, I copied and pasted the header from my other document.

http://gyazo.com/e8c19bd43f5e3b99f26d7a1b06a1d4ef.png

There must be another thing wrong with the CSS because the icons at the bottom of the page aren't centered and that code is copied from my other working page too.

If you need a snippet of the header, etc.. just let me know! Thanks!

Update!!

Error Google Chrome gives me!

GET http://localhost/js/jquery.min.map 404 (Not Found) public.php:15
Uncaught TypeError: Cannot read property 'offsetWidth' of null main.js:29

The scripts I have included:

<script type='text/javascript' src='js/jquery-1.9.1.min.js'></script> 
<script type='text/javascript' src='js/jquery.isotope.js'></script>
<script type="text/javascript" src="js/jquery.isotope-function.js"></script>
<script type='text/javascript' src='js/modernizr.js'></script>  
<script type='text/javascript' src='js/jquery.animateNumbers.js'></script> 
<script type='text/javascript' src='js/jquery.flexslider-min.js'></script> 
<script type="text/javascript" src="js/jquery.hoverflow.min.js"></script> 
<script type="text/javascript" src="js/jquery.scrollTo-1.4.3.1-min.js"></script> 
<script type="text/javascript" src="js/jquery.fitvids.js"></script> 
<script type="text/javascript" src="js/main.js"></script> 
<script type="text/javascript" src="js/sendmail.js"></script> 
<script type="text/javascript" src="js/welcome.js"></script>                                  
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript" src="js/maps.js"></script>
Anshad Vattapoyil
  • 23,145
  • 18
  • 84
  • 132
Kevin Harrison
  • 335
  • 1
  • 10
  • Anyone got an answer?! Please. – Kevin Harrison Sep 21 '13 at 23:21
  • Boot up your console, and make sure all files are loaded? – JofryHS Sep 21 '13 at 23:33
  • Look at the screenshot there and then look at the screenshot here. http://gyazo.com/f9983bbf46874c7d19d319ae19f55f1f – Kevin Harrison Sep 21 '13 at 23:35
  • Exact same code, but this one shows colour. It doesn't show the right colour though, not sure why. It used to but idk what happened. – Kevin Harrison Sep 21 '13 at 23:35
  • Are they both in the same server? Did you try opening the console to make sure no errors? You mention 'another document', so your first and second screenshot comes from different places? – JofryHS Sep 21 '13 at 23:40
  • They both come from different documents but they both include the same files and same code. They are all on my Xampp server and how do you check for errors? – Kevin Harrison Sep 21 '13 at 23:41
  • If you are using Chrome, press F12 (windows) to open your Developer Tools, and click on Console tab. And check on both documents to see what is logged in the console view. – JofryHS Sep 21 '13 at 23:43
  • The main difference between the two files is that there is one file that isn't included which is a JavaScript file. If I insert it the whole column with the profile information gets hidden. I can attach all the other ones that the other file also has without a problem but this single one causes problems. – Kevin Harrison Sep 21 '13 at 23:43
  • This is the error it shows. Uncaught TypeError: Cannot read property 'offsetWidth' of null main.js:29 GET http://localhost/js/jquery.min.map 404 (Not Found) /js/jquery.min.map:1 – Kevin Harrison Sep 21 '13 at 23:44
  • Don't worry about `jquery.min.map` for now. You have javascript error. You will need include back your .js file and figure out how to avoid getting your profile column hidden. – JofryHS Sep 21 '13 at 23:48
  • I think this is why it is hiding it. I tried moving it around and even searching the error. Uncaught TypeError: Cannot read property 'offsetWidth' of null It brought me to this page, which I don't understand. http://stackoverflow.com/questions/11740663/google-map-api-uncaught-typeerror-cannot-read-property-offsetwidth-of-null – Kevin Harrison Sep 21 '13 at 23:52
  • Are you using the geocode library? If yes, then follow the answer number 2 in the link you give, you need to initialise your geocode after DOM is ready. Consider updating/editing your current question at the top when you find new clues, it will help other people too. – JofryHS Sep 21 '13 at 23:57
  • That JS was from a different page. I copied all the JS inserts over to the new document that I'm having trouble with so I will delete the line that includes that. – Kevin Harrison Sep 22 '13 at 00:03
  • Updated my post showing more info! – Kevin Harrison Sep 22 '13 at 00:07
  • Try moving your `main.js` to the end of your ` – omma2289 Sep 22 '13 at 05:48

0 Answers0