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>
Related
for some reason I my index.html does not read the style.css. It is linked though. what is the issue ? I added the type, I did add the right path I think.
thank you
<!DOCTYPE html>
<html lang="en">
<head>
<title> </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="font-awesome.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!--Main Start-->
<div class='main'>
<!--Home Section Start-->
<section class='home-section'>
<div class='container'>
< div class ='row'>
<div class='home-text'>
<p> </p>
<h1> </h1>
<h2></h2>
</div>
<div class='home-img'></div>
</div>
</div>
</section>
<!-- Home Section End-->
</div>
<!--Main End-->
<script src="js/script.js"></script>
</body>
</html>
Issue solved, it was that I forgot one root variable.
Just Try :
<html>
<head>
<link rel="stylesheet" href="./style.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="font-awesome.css">
<!-- Here Head Content-->
</head>
<body>
<!-- Here Body Content-->
</body>
<html>
But also after you added screenshot for your CSS File you said in previous
answer that it the problem was from the CSS File not the linking (That mean if
there is something wrong with your CSS File the whole file not work)
One possible cause of such problems are browser cache.
If you are on windows, try running ctrl+f5 to reload the page.
Every thing is correct whith you, the only thing that may be wrong is that the css file is not in the same folder with the index, for no reason, also try removing type="text/css",it may work.
I need to be able to choose when the jquery dialog opens up but nothing i seem to do works.
so far ive tried this
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- Include meta tag to ensure proper rendering and touch zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Include jQuery Mobile stylesheets -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<!-- Include the jQuery library -->
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- Include the jQuery Mobile library -->
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="main" class="ui-content">
Open Dialog Popup
Test
<div data-role="popup" id="myPopupDialog">
<div data-role="header">
<h1>But wait theres more!</h1>
</div>
<div data-role="main" class="ui-content">
<h2 style="text-align: center;">Would you like an exclusive offer?</h2>
Sounds Good!
No Thanks, Take me back..
</div>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>
</div>
<script>
$(document).ready(function(){
console.log(document.body.scrollTop);
if(document.body.scrollTop === 0)
{
$.mobile.changePage('#myPopupDialog', 'pop', true, true);
}
});
</script>
</body>
</html>
which works but when i change the if statement in the javascript it breaks also if i remove the anchor tag at the top it just doesnt show... jQuery mobile has me confused.
So anyway my question is how do manually make a dialog box show on the page, i would prefer it to show on the same page and not another page.
use this:
$("#myPopupDialog").addClass("ui-page-active ui-page ui-page-theme-a")
I noticed that there is a problem if both popbox.css and bootstrap.css are used. Does anybody know a solution for that?
Here is a fiddle from somebody to show how popbox works.
http://jsfiddle.net/kbwood/sV4bY/
If you load the bootstrap library additional to the popbox libraries
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css
it will not work anymore.
Here is a not working example. Remove the bootstrap.min.css file to make it work
<!DOCTYPE html>
<head>
<meta http-equiv='Content-type' content='text/html; charset=utf-8'>
<title>PopBox</title>
<link href="../static/css/popbox.css" type="text/css" rel="stylesheet" media="screen" charset="utf-8">
</head>
<body>
<div class="container">
<h1>PopBox</h1>
<div class='popbox'>
<a class='open' href='#'>
<img src='' style='width:14px;position:relative;'> Click Here!
</a>
<div class='collapse'>
<div class='box'>
<div class='arrow'></div>
<div class='arrow-border'></div>
Content from first popup
</div>
</div>
</div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="../static/js/popbox.js" type="text/javascript" charset="utf-8"></script>
<link href="../static/css/bootstrap.min.css" rel="stylesheet">
<script type='text/javascript'>
$(document).ready(function(){
$('.popbox').popbox();
});
</script>
The problem is due to the collapse class you have applied to the div. In Bootstrap, these are hidden by default as it's part of the accordion feature. Either remove the class from that div or use a different name for it.
Example: http://jsfiddle.net/tpjjsqg6/
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');
});
I am trying to implement the parallax effect in the website WRT the following link
https://github.com/richardshepherd/Parallax-Scrolling
however
in the website one image(parkview) screen short added, I need to keep stationary so that I can add menu and sub menu in that ,currently its moving like other image .
I tried setting it as a background but the whole background changes.
How can I make it fix??
This is the working code
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Parallax Scrolling Tutorial</title>
<meta name="description" content="How to create a parallax scrolling effect with jQuery, HTML and CSS">
<meta name="author" content="Richard Shepherd, Smashing Magazine">
<!-- Mmmmm, Google Web Fonts. That's a paddlin'. -->
<link href='http://fonts.googleapis.com/css?family=Lobster+Two:700&v2' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="log">
<img src="images/logo.png">
</div>
<div id="main" role="main">
<!-- Section #1 / Intro -->
<section id="first" class="story" data-speed="8" data-type="background">
<div class="smashinglogo" data-type="sprite" data-offsetY="100" data-Xposition="50%" data-speed="-2"></div>
<article>
<img src="images/tutorial-title.png" alt="tutorial-title" width="711" height="242" />
<p>Words and pictures by Richard Shepherd / Twitter: #richardshepherd / Web: richardshepherd.com</p>
<p>GitHub: Fork it here!</p>
</article>
</section>
<script src='js/libs/jquery-1.6.1.min.js'></script>
<script src="js/script.js"></script>
</body>
</html>
You can add position: fixed to it or make another element with background and background-attachment: fixed.