need to learn the basics of bootstrap for a new project coming up but so far its hurting my brain.
For some reason, I cannot get basic jQuery to function on the website.
Heres a jsFiddle of the basic bootstrap:
http://jsfiddle.net/D2RLR/6891/
Here is the pay structure:
<!DOCTYPE html>
<?php
// require the database connection / action class
require('libs/PHP_Classes/class.database.php');
require('libs/PHP_Classes/class.table.php');
?>
<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">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>PHPGamble</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="sticky-footer-navbar.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="js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[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>
<!-- Begin page content -->
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Current Players On Table</h3>
</div>
<div class="panel-body" id="playerList">
Player 1 Player 2
</div>
</div>
</div>
<div class="footer">
<div class="container">
<p class="text-muted">Copyright Craig Lovelock 2014</p>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="js/ie10-viewport-bug-workaround.js"></script>
<script>
$(document).ready(function(){
$('#playerlist').html('ss');
});
</script>
</body>
</html>
The playerlist will not change the html, The .html() is just to test. Nothing I try is working...
A you can see in the example it doesnt work, have tested it in a blank fiddle and ofcourse it works fine.
Cannot see why this is failing, its so simple.
Craig.
You are calling playerlist when you should playerList. JavaScript is case sensitive:
http://jsfiddle.net/D2RLR/6892/
jQuery is working well just what you have to do is pass correct id to jQuery. Change
$(document).ready(function(){
$('#playerlist').html('ss');
});
to
$(document).ready(function(){
$('#playerList').html('ss');
});
Related
I have an HTML5 game built with NW.js that makes a GET request to my website to retrieve a static data file, file.json, hosted at www.example.com/file.json on Heroku.
One of my users can navigate to www.example.com/file.json and see the file properly, but when they open the game, this request returns HTML from a different site. After over 100,000 users, they are the first one to experience this.
The HTML response the user gets is this:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=980,user-scalable=yes,maximum-scale=2.0" />
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title></title>
<link rel="stylesheet" href="/steal-built/production.css" />
<script src="/js/thirdParty/jquery-1.8.3.min.js"></script>
<script src="/gui/js/jquery-utils.js"></script>
<script src="/gui/js/gui-core.js"></script>
<script src="/gui/js/gui-api.js"></script>
<script src="/js/thirdParty/modernizr.custom.js"></script>
<script src="/js/thirdParty/yepnope.1.5.4-min.js"></script>
<script src="/js/thirdParty/cssua.js"></script>
<script src="/js/thirdParty/moment.js"></script>
<!--noUI slider plugin: http://refreshless.com/nouislider/ -->
<script src="/js/thirdParty/jquery.nouislider.min.js"></script>
<!--jquery sort elements plugin: http://james.padolsey.com/javascript/sorting-elements-with-jquery/ -->
<script src="/js/thirdParty/jquery.sortElements.js"></script>
<!-- datepicker plugin: http://amsul.ca/pickadate.js/ -->
<![if gte IE 9]>
<script src="/js/thirdParty/pickadate.min.js"></script>
<![endif]>
<!-- datepicker: legacy for older browsers -->
<!--[if lte IE 8]>
<script src="/js/thirdParty/pickadate.legacy.js"></script>
<![endif]-->
<!-- jQuery plugin for parsing CSV file format: https://code.google.com/p/jquery-csv/ -->
<script src="/js/thirdParty/jquery.csv-0.71.min.js"></script>
<!-- MD5 encryption library -->
<script src="/js/thirdParty/md5.js"></script>
<!--ie polyfill for console.log and related -->
<script src="/js/modemUI/console-polyfill.js"></script>
<script src="/js/thirdParty/dust-full-0.3.0.js"></script>
<script src="/js/thirdParty/dust-helpers-1.1.1.js"></script>
<script src="/js/thirdParty/raphael.js"></script>
<!-- For calculating subnet masks https://github.com/franksrevenge/IPSubnetCalculator -->
<script src="/js/thirdParty/IPSubnetCalculator.js"></script>
</head>
<body>
<!--div that is used to identify if the user's browser is (likely) a mobile device. Will be hidden by css, then examined with js-->
<div id="div-is-smartphone"></div>
<div id="root-view"></div>
<!-- IE6 specific style here in case javascript disabled -->
<!--[if lte IE 6]><style type="text/css">#init-screen {position: absolute; height: 480px;}</style><![endif]-->
<!-- if we have no javascript, hide activity-indicator -->
<noscript><style type="text/css">#init-screen .activity-indicator{display: none}</style></noscript>
<div id="init-screen">
<div class="middle">
<div class="icon"></div>
<div class="title"></div>
<div class="activity-indicator"></div>
<div class="error-message">
<noscript>No javascript / Javascript absent</noscript>
</div>
</div>
<div class="logo"></div>
</div>
<div id="init-log" style="display: none;">
<div class="header">
<span class="close">x</span>
<span class="title">Initialization Log</span>
</div>
<div class="content">
<table></table>
</div>
</div>
<script src="/steal/steal.production.js?steal-built/production.js"></script>
</body>
</html>
Again, there is no chance that this is being served from my site. Could the user be affected by malware? They said they didn't mess with any configuration files in Windows, but I have my doubts. I checked their request headers, and everything looked completely normal.
<!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">
<!-- 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" type="image/png" href="images/favicon.png">
<title>Jquery alert example</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<!-- 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="js/ie-emulation-modes-warning.js"></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>
<body>
<div class="container-fluid">
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#event').click(function(){
alert("hello world");
});
});
</script>
<input type='button' id='event' class='btn btn-success' value='click me'>
</div><!--container ends here-->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')</script>
<script src="js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="js/ie10-viewport-bug-workaround.js"></script>
<script src="js/wow.min.js"></script>
</body>
</html>
When I am clicking on alert button event is not working. I have attached jQuery file also. One more doubt for me does jQuery syntax need to change if I upgrade from jQuery version 1 to version 3. Please notify me where I am doing a mistake and guide me how I can avoid this problem.
Yes put your jquery library at the top before your jquery code. It will work and the proper way of writing events is:-
jQuery('#event').on('click', function(){
alert("hello world");
});
Place the following script tag:
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#event').click(function(){
alert("hello world");
});
});
</script>
under the jQuery script tag:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
First import basic .js file after write code for jquery:
$('#btnID').click(function(){
alert('welcome')
});
I've tried a few different ways to get Bootstrap tooltips working. I can't seem to find what's wrong with this. I've used Bootstrap tooltips before and it seems I always have an issue getting them going. Am I missing something obvious here? I'm not getting any JS errors or anything.
<!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>Quick Links</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery
<script type='text/javascript' src='js/jquery-2.1.1.min.js'></script> -->
<!-- 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]-->
<style type='text/css'>
</style>
</head>
<body>
<div class="container" style='text-align:center;'>
<h1>Quick Links</h1>
<div class='well'>
Quick links
</div>
<div>
<div class='row'>
<div class='col-md-3 hidden-xs'>
</div>
<div class='col-md-3'><a target='_blank' class='qtooltip btn btn-primary btn-lg btn-block' data-toggle='tooltip' href='http://www.google.ca'>google</a></div>
<div class='col-md-3'><a target='_blank' class='qtooltip btn btn-primary btn-lg btn-block' data-toggle='tooltip' href='http://www.google.ca'>google</a></div>
<div class='col-md-3 hidden-xs'>
</div>
</div> </div>
</div><!-- /.container -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<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'>
$(document).ready(function () {
$('.qtooltip').tooltip({'placement': 'top'});
});
</script>
</body>
</html>
I have found the issue.
Working fiddle here: http://jsfiddle.net/8dfwcL98/
In your case you forgot to add a title property to your element. Title is what is displayed as the tooltip.
<a target='_blank' class='qtooltip btn btn-primary btn-lg btn-block' data-toggle='tooltip' href='http://www.google.ca' title="Awesome Tooltip">google</a>
Under BuildCOnfig.groovy i added the following
plugins {
...
runtime ":twitter-bootstrap:3.0.3"
...
}
Thereafter, i edited my index.html code to like like follows (I found this code example from bootstrap itself).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="../../assets/ico/favicon.ico">
<title>Cover Template for Bootstrap</title>
<r:layoutResources/>
<!-- Bootstrap core CSS -->
<!-- Custom styles for this template -->
<link href="cover.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="../../assets/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="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<r:layoutResources/>
<div class="site-wrapper">
<div class="site-wrapper-inner">
<div class="cover-container">
<div class="masthead clearfix">
<div class="inner">
<h3 class="masthead-brand">Cover</h3>
<ul class="nav masthead-nav">
<li class="active">Home</li>
<li>Features</li>
<li>Contact</li>
</ul>
</div>
</div>
<div class="inner cover">
<h1 class="cover-heading">Cover your page.</h1>
<p class="lead">Cover is a one-page template for building
simple and beautiful home pages. Download, edit the text, and add
your own fullscreen background photo to make it your own.</p>
<p class="lead">
Learn more
</p>
</div>
<div class="mastfoot">
<div class="inner">
<p>
Cover template for Bootstrap,
by #mdo.
</p>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</body>
</html>
First, you should upgrade your version of the plugin to 3.1.1:
plugins {
...
compile ":twitter-bootstrap:3.1.1"
...
}
Second, since you are using the bootstrap plugin for Grails you need to use the resource modules to include it. Also you don't need to manually include jQuery as it will be included by the plugin. Here is a simple example of a starter template which is setup correctly for the bootstrap plugin and Grails.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>My example bootstrap page</title>
<r:require modules="bootstrap"/>
<r:layoutResources/>
<link rel="shortcut icon" href="${resource(dir: 'images', file: 'favicon.ico'}">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<p>My fantastic site goes here.</p>
</div>
<r:layoutResources/>
</body>
</html>
I highly recommend you read up about the resource tag to get an understanding of how to include assets like CSS. It's also worth noting that the documentation for the plugin explains all of the above.
I am trying to use bootstrap scaffold for first time and wonder if I can do that.
<header class="row"></header> // this covers browsers width
<div id="main-container" style="maring:auto; max-width:1200px"> I want this to be centered and not more than 1200px
<div class="row" class="span12" id="main">
</div>
</div>
The idea is that I want to use the scaffolding feature in different areas inside my html document independently, can I do it or I am forced to go on a whole page perspective ?
Well.. the first thing you're going to want is to start with this:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<h1>Hello, world!</h1>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
You do not have to do the entire page, you only put it around whatever you want.
<!-- The container is necessary for your rows -->
<div class="container">
<!-- Each row will hold a row of 'spans' -->
<div class="row">
<!-- This will center whatever content you want. -->
<div class="offset2 span8">
</div>
</div>
</div>