Bootstrap | Broken Events, drop down menu and slide show - javascript

I have a issue with the Bootstrap framework and I am not sure why, essentially the drop down menu and the slide show don't work in my 'timeline.html', and when I hook the paths up as much as possible in the shown example they work perfectly. Any help would be great guys, I have used the files in these links:
Timeline.html (file with the issue): https://www.dropbox.com/s/ao38yl03zmrqc5n/timeline.html?dl=0
Example Code which I based the other html file off: https://www.dropbox.com/s/i1owz94vtt62y13/Theme%20Template%20for%20Bootstrap.html?dl=0
The source files can be found on getbootstrap.com and they are the basic ones I believe.

Please use the path for css and js files.
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"">
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>

make sure the css and js inside the Bootstrap_files folder and try.
<!DOCTYPE html>
<!-- saved from url=(0039)http://getbootstrap.com/examples/theme/ -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="http://getbootstrap.com/favicon.ico">
<title>Theme Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="Bootstrap_files/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap theme -->
<link href="Bootstrap_files/bootstrap-theme.min.css" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="Bootstrap_files/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="Bootstrap_files/theme.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="Bootstrap_files/ie-emulation-modes-warning.js.download"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>

Related

My Website is stuck on pre-loader loop (CSS broken)

Newbie here, and first time experiencing this issue. My website (www.kandomedia.co.za) works perfectly fine when i was developing it offline on my local machine as per attached image.
Kando Media Website Local Machine
But as soon as i upload it to my hosting account, its stuck on the preloader screen (if you visit www.kandomedia.co.za/new/ you can see this in action)
I have done quite a bit of research on google to try resolve this issue, but still cannot fix it. If i take away the preloader completely, the website is not formatted correctly like it looks on my local machine. It seems the site is not loading the CSS files etc.
I have checked, double checked and triple checked to make sure all the paths are correct, and that everything is where it is supposed to be. But still no luck.
This is the structure in the head tag:
<html lang="en-US" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- ===============================================-->
<!-- Document Title-->
<!-- ===============================================-->
<title>Kando Media (Pty) Ltd :: Website design, graphic design and website hosting services South Africa</title>
<!-- ===============================================-->
<!-- Favicons-->
<!-- ===============================================-->
<link rel="apple-touch-icon" sizes="180x180" href="assets/img/favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="assets/img/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="assets/img/favicons/favicon-16x16.png">
<link rel="shortcut icon" type="image/x-icon" href="assets/img/favicons/favicon.ico">
<link rel="manifest" href="assets/img/favicons/manifest.json">
<meta name="msapplication-TileImage" content="assets/img/favicons/mstile-150x150.png">
<meta name="theme-color" content="#ffffff">
<!-- ===============================================-->
<!-- Stylesheets-->
<!-- ===============================================-->
<link href="assets/lib/loaders.css/loaders.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway:100,300,400,500,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
<link href="assets/lib/remodal/remodal.css" rel="stylesheet">
<link href="assets/lib/remodal/remodal-default-theme.css" rel="stylesheet">
<link href="assets/lib/owl.carousel/owl.carousel.css" rel="stylesheet">
<link href="assets/lib/lightbox2/css/lightbox.css" rel="stylesheet">
<link href="assets/lib/semantic-ui-accordion/accordion.min.css" rel="stylesheet">
<link href="assets/lib/semantic-ui-transition/transition.min.css" rel="stylesheet">
<link href="assets/css/theme.css" rel="stylesheet">
<link rel="stylesheet" href="assets/css/theme.css" type="text/css">
</head>
Where am i going wrong here? I havent slept a whole day trying to figure this out. Even my friend who is an experienced developer cant figure it out (unless he doesnt want to help me haha)
Please help, id really appreciate it.
it seems to be an error with some data on theme.js
here is what i found on you site with f12 dev tools on crhome:
can you check this out first? :)

How to add date picker jquery plugins to bootstrab?

I need to add datepicker in my form. I want to use jquery with bootstrap. For the purpose, I googled and got free jquery plugins here. Now I am unable to get the functionality.
I am novice to bootstrap.
Please help me.
html code:
<!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">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="input-append date datepicker" id="dp3" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
<input class="span2" size="16" type="text" value="12-02-2012" />
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/google-code-prettify/prettify.js"></script>
<script src="js/jquery.js"></script>
<script src="js/bootstrap-datepicker.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function () {
$('.datepicker').datepicker();
});
</script>
</body>
</html>
There are plugins to do this which are adapted to work just fine with bootstrap like datepicker - Demo. Repository here.They even add snippets and are well documented.
I personally use the Bootstrap twitter datepicker plugin. It's relatively easy to setup and is one of the best looking pickers out there IMHO, also the possible customization is great.
This is the tutorial i used to set it up: http://develop.alpdesigns.ch/pages/other/bootstrap-datepicker.html
You can also use the bootstrap libs to theme your whole form like the plugin http://getbootstrap.com/components/

Twitter-Bootstrap respond.js not working for IE8

I'm still having some problems getting my Twitter-Bootstrap page to display the desktop view correctly in IE8. I've been following a few threads here but the voted up advice is just not working for me.
Using the suggested meta tag
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Included local versions of bootstrap.css, html5shiv.js, respond.js, ie8-responsive-file-warning.js
Here is my head section:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="SunTrust Equity Line Options">
<meta name="author" content="">
<link rel="shortcut icon" href="favicon.ico">
<title>SunTrust – Your Equity Line is Maturing. What are your options?</title>
<!-- Bootstrap core CSS -->
<link href="dist/css/bootstrap.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="dis/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="dist/js/html5shiv.js"></script>
<script src="dist/js/respond.js"></script>
<![endif]-->
And the end of it:
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="dist/js/tooltip.js"></script>
<script src="dist/js/popover.js"></script>
<script>
$("a[rel=popover]")
.popover()
.click(function(e) {
e.preventDefault();
});
</script>
</body>
</html>
Try using local copy of bootstrap. This solved my problem with IE8.
Well I've asked several people and read a ton on this and still no answer on this. Seems like the only way to fix it is to call an IE8 only style sheet to get things to display correctly.
Event the getbootstrap.com examples don't work in IE8 they all stack the same way mobile first in IE8.
It's a shame really since I won't be able to use it for most projects.
Always make sure that you load the following scripts after loading jQuery.
Especially in WordPress and other frameworks some people tend to include jQuery just before the closing tag and therefore after the html5shiv.js and respond.js script, which causes issues in IE8
<!-- Include first -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.js"></script>
<![endif]-->
i see you are using "dis/js/..." in one place and "dist/js/" in other places. Are you sure your paths are correct? I would double check the browser is actually loading the files you think its loading.
or it could be the duplication of conditional comments, try this for grins: (of course fix the paths in the below code too if "dis" or "dist" is incorrect)
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]>
<script src="dis/js/ie8-responsive-file-warning.js"></script>
<script src="dist/js/html5shiv.js"></script>
<script src="dist/js/respond.js"></script>
<![endif]-->
I'm also not familiar with ie8-responsive-file-warning.js, i would try removing that if all else fails to be sure its not conflicting with respond.js. For that matter remove html5shiv as well just to rule out all conflicts.
We discovered that having css links outside of the "head" section (essentially that for the bootstrap css) broke respond.js's ability to provide the necessary media query support as required. Ensure that all your css links live within your "head" section.

Bootstrap 3 and IE8 issue

I'm using Bootstrap 3 framework for a new design. All works fine in Safari, Chrome and Firefox, but not in IE8. I've added respond.min.js and html5shiv.js in my functions.php file.
Those files get loaded as I can see in 'inspect-element -> resources" in Chrome.
Still, in IE8, the site is displayed as is is a mobile device, which isn't correct.
How to resolve this?
When Googling Bootstrap 3 IE 8 one of the top results is: http://www.telegraphicsinc.com/2013/10/using-bootstrap-3-with-internet-explorer-8-ie8/
Ultimately it says you need to add, "" which you can grab from here: https://code.google.com/p/css3-mediaqueries-js/
my head tag:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Bootstrap core CSS -->
<link href="css/modern-business.css" rel="stylesheet">
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/modern-business.js"></script>
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.js"></script>
<![endif]-->
</head>
If you want to try in local, try through localhost, or create a QA server and set the content and try.
We need respond.js for bootstrap 3 and it wont work in local machine if we just put it in js and append it to html in header.
It will say access denied, it works only through server as IE has security restriction.
Bootstrap will work in IE 8, to do the same follow below steps:
Add below mentioned Scripts
Dont use CDN for the same its worth to add those scripts from local folder
<!-- language: lang-html -->
<!--[if lt IE 9]>
<script src="../../scripts/IE8/html5shiv.js"></script>
<script src="../../scripts/IE8/respond.min.js"></script>
<![endif]-->
<!-- end snippet -->
Download Respond.js And Html5Shiv.js
Note: Adding Sequence would be very important
Add your css first then add those js
Bootstrap.css
YourCustom.css
Respond.js
html5shiv.js
Bootstrap IE Support details : http://getbootstrap.com/getting-started/#support

LESS 1.3.3, watch mode hogging a lot of CPU in espresso editor

I was using an older version of less (1.2.1) by accident and when I updated the .js to the most recent version (1.3.3) it seems that Espresso, my html/css editor, now takes 40% cpu and up to 90% when in development/watch mode. I've tried other versions and it seems like it happens with 1.3.1+. I've tried different variations of the watch mode and even disabling it completely and it's still using 40-50% cpu. I basically can't work with it now.
edit: It seems like it's mostly being caused by watch mode, which I highly depend on :(
This is what my site head looks like. Any suggestions would be appreciated as I do not understand js at all.
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>Article Sample</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<!-- Adding "maximum-scale=1" fixes the Mobile Safari auto-zoom bug: http://filamentgroup.com/examples/iosScaleBug/ -->
<!-- Link directly to LESS stylesheet first -->
<link rel="stylesheet/less" href="style/default.less" type="text/css" media="screen" />
<link rel="stylesheet/less" href="style/tablet.less" type="text/css" media="screen" />
<link rel="stylesheet/less" href="style/mobile.less" type="text/css" media="screen" />
<link rel="stylesheet/less" href="style/wide-mobile.less" type="text/css" media="screen" />
<!-- Then link to LESS, and enable development watch mode -->
<script src="js/less-1.3.3.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
less.env = "development";
less.watch();
</script>
<!-- Voilà! Instant LESS previews in Espresso -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
I think it is better to precompile first and then make the site read the already-compiled .css instead.
You can use Koala app for precompiling the less file or you can use grunt too, and get rid of the less.js.

Categories