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>
Related
So a friend of mine asked me if I knew why one of his old sites (made in 2014) wasn't working anymore. Googling a bit, I found out it's because of Chrome 61 version implemented the smooth scroll by default and if u try to load a script instead, it will break the browser behaviour.
On his site, I found he's using this script: https://github.com/themicon/smoothscroll/blob/master/smoothscroll.js
He has a menu with some buttons, each of them has a line of code that looks like this:
ABOUT US
And it should bring to a line of code that looks like this:
<section id="about">
<div class="container">
<div class="row">
</div>
</div>
</section>
The site still works perfectly with Firefox and other browser, so I don't know honestly would I would need to change, I tryed to search for an updated version of the script where maybe the author fixed the issue and found this:
https://github.com/galambalazs/smoothscroll-for-websites/blob/master/SmoothScroll.js
As you notice, the script hasn't been updated for quite long time, indeed even the latest version is prior to the Chrome 61 version update so I doubt that would solve the problem.
On the very end of site, these are the scripts loaded:
<!-- Bootstrap -->
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- Animation -->
<script type="text/javascript" src="js/animation/jquery.appear.js"></script>
<!-- AJAX Contact Form -->
<script type="text/javascript" src="js/contact/contact-form.js"></script>
<!-- Lightbox -->
<script src="lightbox/ekko-lightbox.js"></script>
<!-- Isotope -->
<script src="js/isotope/jquery.isotope.min.js"></script>
<script src="js/isotope/custom-isotope.js"></script>
<!-- Slider Revolution 4.x Scripts -->
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.plugins.min.js"></script>
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.revolution.js"></script>
<script>
var revapi;
jQuery(document).ready(function() {
revapi = jQuery('.tp-banner').revolution(
{
delay:9000,
startwidth:1170,
startheight:500,
fullScreen:"on",
forceFullWidth:"on",
minFullScreenHeight:"320",
videoJsPath:"rs-plugin/videojs/"
});
}); //ready
</script>
<!-- Custom -->
<script src="js/custom.js"></script>
<!-- Parallex -->
<script src="js/parallex/script.js"></script>
<!-- ScrollTo -->
<script src="js/nav/jquery.scrollTo.js"></script>
<script src="js/nav/jquery.nav.js"></script>
<!-- Sticky -->
<script type="text/javascript" src="js/sticky/jquery.sticky.js"></script>
<!-- Donut Chart -->
<script type="text/javascript" src="js/progress-bars/jquery.donutchart.js"></script>
<script>
$("#donutchart1").donutchart("animate");
$("#donutchart2").donutchart("animate");
$("#donutchart3").donutchart("animate");
$("#donutchart4").donutchart("animate");
$("#donutchart5").donutchart("animate");
$("#donutchart6").donutchart("animate");
$("#donutchart7").donutchart("animate");
$("#donutchart8").donutchart("animate");
</script>
<!-- Owl Carousel -->
<script src="owl-carousel/owl-carousel/owl.carousel.js"></script>
<!-- SmoothScroll -->
<script type="text/javascript" src="js/SmoothScroll/SmoothScroll.js"></script>
<!-- Retina -->
<script type="text/javascript" src="js/retina/retina.js"></script>
<!-- FitVids -->
<script type="text/javascript" src="js/jquery.fitvids.js"></script>
I am new to both html and javascript
I copied the these codes from codecademy, but they are not working well. I hope someone can explain to me why isn't the javascript working in my html. Thank you so much!
index.html
<html>
<head>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400;300' rel='stylesheet' type='text/css'>
<link href='style.css' rel='stylesheet'>
</head>
<body>
<div class="menu">
<!-- Menu icon -->
<div class="icon-close">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/close.png">
</div>
<!-- Menu -->
<ul>
<li>About</li>
<li>Blog</li>
<li>Help</li>
<li>Contact</li>
</ul>
</div>
<!-- Main body -->
<div class="jumbotron">
<div class="icon-menu">
<i class="fa fa-bars"></i>
Menu
</div>
</div>
<script src="app.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</body>
</html>
app.js
var main=function(){
$('.icon-menu').click(function(){
$('.menu').animate({left:'0px'},200);
$('body').animate({left:'285px'},200);
});
$('.icon-close').click(function(){
$('.menu').animate({left:'-285px'},200);
$('body').animate({left:'0px'},200);
});
};
$(document).ready(main);
Change
<script src="app.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
To
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="app.js"></script>
The code you have there in app.js is written using jQuery.
Even though you need jQuery, the $, i your app.js you have included your script tag for including jQuery after app.js.
Therefore when your app.js loads, you still do not have jQuery so your script fails.
The solution is to include jQuery first and then including your app.js.
While working with this .html page I found an annoying behavior. The moment I load the page it will load only some portion of the page ,if I refresh it,then loads properly.
Why is this happening ??
I have attached the images along with my html code.
The first image is what I am getting and the second one is the desired one.
This is the first image
and this is what I require
Here is my HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1" />
<title>Imperial</title>
<style>
.smooth_zoom_preloader {
background-image: url(zoom_assets/preloader.gif);
}
.smooth_zoom_icons {
background-image: url(zoom_assets/icons.png);
}
</style>
<link href="./css/style.css" type="text/css" rel="stylesheet" />
<link type='text/css' href='./js-disclaimer/basic.css' rel='stylesheet' media='screen' />
<script type='text/javascript' src='./js-disclaimer/jquery.js'></script>
<script type='text/javascript' src='./js-disclaimer/jquery.simplemodal.js'></script>
<script type='text/javascript' src='./js-disclaimer/basic.js'></script>
<script src="./js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="./js/custom.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="zoom_assets/jquery-1.9.1.min.js"></script>
<script src="zoom_assets/jquery.smoothZoom.min.js"></script>
<script>
jQuery(function($){
$('#yourImageID').smoothZoom({
width: '80%',
height: '70%',
/******************************************
Enable Responsive settings below if needed.
Max width and height values are optional.
******************************************/
responsive: false,
responsive_maintain_ratio: false,
max_WIDTH: '',
max_HEIGHT: ''
});
});
</script>
</head>
<body style="background:none">
<!-- home -->
<!---- menu area--->
<div class="menu_area"> <img src="./img/logo.png" alt=""> <br>
<ul>
<li class="current">Home</li>
<li>World above the world</li>
<li>Spaces</li>
<li>Safety & Security</li>
<li>Plans</li>
<li>Location</li>
<li>Enquiry</li>
<li>Contact Us</li>
<br>
<br>
<li>About SD Corp.</li>
<li>ebrochure</li>
</ul>
</div>
<div class="NorthMarker" id="North" style="position:absolute;top:66%;left:18%;width:10px;height:10px; z-index: 99;">
<img src="img/NorthView.png" id="northview">
</div>
<div class="SouthMarker" id="South" style="position:absolute;top:66%;left:97%;width:10px;height:10px; z-index: 99;">
<img src="img/SouthView.png" id="southview">
</div>
<div style="float:left; margin-top:5%; margin-left:5%;"><img id="yourImageID" src="img/plan.jpg" width="86%" height="70%"/>
<div class="intermediate" style="display:none;position:absolute;left:0%;top:0%;background-color:rgba(0, 0, 0, 0.0);width:100%;height:100%;z-index:104;"></div>
<div class="northviewpart" style="display:none;position:absolute;top:27%;left:0%;width:100%;height:10px; z-index: 109;">
<img src="img/40N.jpg" style="width:100%;height:250px;">
</div>
<div class="southviewpart" style="display:none;position:absolute;top:27%;left:0%;width:100%;height:10px; z-index: 109;">
<img src="img/40S.jpg" style="width:100%;height:250px;">
</div>
<div id="basic-modal" class="footer_for_plan">© SDCPL 2013. All Rights Reserved | Disclaimer</div>
</div>
<!-- modal content -->
<div id="basic-modal-content">
<h3>Disclaimer</h3>
<p>The content depicted herein is for general information and purely conceptual and is not legal offering nor will it be part of any binding document. The Developer reserves the right to delete, modify or supplement the content at any time for any reason without prior notification.</p>
</div>
</div>
</div>
</body>
</html>
The problem here is loading of JavaScript files.. Move all script tag at the end. Before closing body tag. hope it heps
If I had to guess (which I'm going to cuz I love gambling) I'd say it has something to do with...
Loading 3 copies of jQuery
Beginning all of your href="", src="" and url() attributes with a period
Here are the jQuery instances I found:
<script type='text/javascript' src='./js-disclaimer/jquery.js'></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="zoom_assets/jquery-1.9.1.min.js"></script>
I'm not 100% sure what the first one is since it's a local file but if it's file name is any indication...it's jQuery.
Long story short:
Delete this line:
<script type='text/javascript' src='./js-disclaimer/jquery.js'></script>
and delete this line:
<script src="zoom_assets/jquery-1.9.1.min.js"></script>
use this
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
instead of all these three...
<script type='text/javascript' src='./js-disclaimer/jquery.js'></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="zoom_assets/jquery-1.9.1.min.js"></script>
I think the Page is loaded the issue is with the smoothZoom zoom, If you see closely the image has been loaded but it is zoomed out completely
also change your
<img id="yourImageID" src="img/plan.jpg" width="86%" height="70%"/>
with
<img id="yourImageID" src="img/plan.jpg" style="width:86%; height:70%"/>
EDIT:
also your script has three jquery files included, you need to get rid of atleast of the them. select one file that you want to keep and move it to the top
I will suggest you to keep
<script src="zoom_assets/jquery-1.9.1.min.js"></script>
move the file to the root and move the line to the top
++ <script src="jquery-1.9.1.min.js"></script>
-- <script type='text/javascript' src='./js-disclaimer/jquery.js'></script>
<script type='text/javascript' src='./js-disclaimer/jquery.simplemodal.js'></script>
<script type='text/javascript' src='./js-disclaimer/basic.js'></script>
<script src="./js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="./js/custom.js" type="text/javascript"></script>
-- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
-- <script src="zoom_assets/jquery-1.9.1.min.js"></script>
<script src="zoom_assets/jquery.smoothZoom.min.js"></script>
When script loads its unable to find the div id you have created because you are loading a img before the img dom elemnet is created
I appreciate all for the efforts ,however my problem got solved only once I validated the document using chrome validator.
I had used "%" to display the image width and height.I had to put some numeric values(as per need).Now its working fine.
But I am still wondering how can I make it fit to different screen size and resolutions ??
Hey still new to JS/CSS/HTML well basicly webdevelopment.
I have a page, for which I'm loading most of the stuff dynamicly. If i goto it by window.location="mapmode.jsp" Then it doesn't load properly but if I do an <a href> tag it loads fine.
Also if I do pagerefresh on the fine page, it loads in badly again.
Could be a jquerymobile thing maybe, but I'm just not sure..
The way I initialize the dynamic stuff might also be relevant so here it is:
$(document).on("pageinit", "#mapmode", function(event) {
initPageHeader();
});
Any help would be appreciated.
edit: mapmode.jsp:
<%--
Document : mapMode
Created on : Jul 12, 2012, 10:36:22 AM
Author : ame
--%>
<!DOCTYPE html>
<html>
<head>
<title>Map</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="js/jquery.mobile-1.1.0.css" />
</head>
<body>
<!-- Start of first page -->
<div data-role="page" id="mapmode" name="mapmode">
<div data-role="header" id="header" name="header">
<p>TEEEST</p>
</div><!-- /header -->
<div data-role="content" id="mapmodePageContent" name="mapmodePageContent">
<p>I'm the first page in mapMode!.</p>
</div><!-- /content -->
</div><!-- /page -->
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.1.0.js"></script>
<script type="text/javascript" src="js/cordova-1.9.0.js"></script>
<script type="text/javascript" src="js/LocalAction.js"></script>
<script type="text/javascript" src="js/firstPage.js"></script>
<script type="text/javascript" src="js/MenuLoader.js"></script>
<script type="text/javascript" src="js/PageHeader.js"></script>
<script type="text/javascript" src="js/Mapmode.js"></script>
</body>
</html>
jQuery Mobile sidesteps your browsers linking and history. It automatically wires this up for links (<a href>). But for JavaScript you need to use their changePage method.
For example:
$.mobile.changePage('pagename.jsp');
See the linked documentation for more information and options when using changePage.
I've been freaking out for two days with this...
I've set up a page with the Bootstrap CSS, with the following code in the page head:
<link rel="stylesheet" href="bootstrap.min.css">
<script type="text/javascript" src="http://openclassifieds.googlecode.com/svn-history/r119/branches/2.0/themes/twitter/js/bootstrap-modal.js"></script>
<script type="text/javascript" src="http://openclassifieds.googlecode.com/svn-history/r119/branches/2.0/themes/twitter/js/bootstrap-transition.js"></script>
<script type="text/javascript" src="http://openclassifieds.googlecode.com/svn-history/r119/branches/2.0/themes/twitter/js/jquery.js"></script>
In my body I have this:
<button class="btn btn-large btn-primary" data-toggle="modal" data-target="#modal-signin" data-backdrop="true" data-keyboard="true">Launch Modal</button>
<div id="modal-signin" class="modal hide fade">
<div class="modal-header">
×
<h2>Sign in <small>or sign up</small></h2>
</div>
<div class="modal-body">
<h3>Teste</h3>
</div>
</div>
In the Bootstrap docs this is what I have to do to get this working but when I click the button it doesn't do anything...
I don't know what the problem is...
I need urgent help
Thanks.
jQuery will need to be included first as the twitter bootstrap depends on it.
<script type="text/javascript" src="http://openclassifieds.googlecode.com/svn-history/r119/branches/2.0/themes/twitter/js/jquery.js"></script>
<script type="text/javascript" src="http://openclassifieds.googlecode.com/svn-history/r119/branches/2.0/themes/twitter/js/bootstrap-modal.js"></script>
<script type="text/javascript" src="http://openclassifieds.googlecode.com/svn-history/r119/branches/2.0/themes/twitter/js/bootstrap-transition.js"></script>