This question already has answers here:
Bootstrap 3 - Why is row class is wider than its container?
(6 answers)
Closed 3 years ago.
I have a problem with the use of Bootstrap.
The code is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Landing Page</title>
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
<link href="bootstrap/css/custom.css" rel="stylesheet" media="screen">
<!-- Javascript -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row" id="main_header">
</div>
</div>
</body>
</html>
But the result is that the row is larger than the container.
I leave you a picture to understand what I mean
In custom.css there are only the height and the colors of the div.
The row is not larger than the container. It is caused by the responsive design, which sets row margin-left to -30px on resolutions larger than 1200px. If you not want this, add
<style type="text/css">
.row {
margin-left: 0px;
}
</style>
before </head>.
Other issues :
Your header should be
<!DOCTYPE html>
<html>
You are using an oldschool HTML4 document definition. Use HTML5 (as bootstrap docs strongly recommend. With the above, your page will go in quirksmode in IE)
Also, use an updated jquery, your page will never work with 1.3 - "on" does not exists in 1.3, and bootstrap refers to jquery on many times. Use at least 1.7.1
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
Related
I'm practicing the basics from scratch on a new machine and I can't change the text within the header. For some reason it seems the app.js isn't linked up with my index.html file.
This is what i have in the app.js file:
document.getElementsByClassName("title1").innerHTML = 'Testing 123';
Did I link app.js correctly? Is it because I have also linked other js files (bootstrap, jquery and popper)?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 Website Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="app.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
.fakeimg {
height: 200px;
background: #aaa;
}
</style>
</head>
<body>
<div class="jumbotron text-center" style="margin-bottom:0">
<h1 class = "title1" id="testing11">My First Bootstrap 4 Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
I expected the text within the header to change.
Thanks!
getElementsByClassName returns an array with all specified elements within the document. You can access elements by their index. You can read more about that method from W3Schools.
In your case, you are accessing the first element with that attribute, so that element would be found with an index of 0. You can learn more about indexes and arrays from W3Schools.
document.getElementsByClassName('title1')[0]
I noticed you are using jQuery in your project which enables another method. You can learn more about this from learn.jQuery
$(".title1")[0].innerHTML = 'Testing 123';
I would also suggest you append your javascript to the bottom of the body of your page to minimize above the fold content to have your site load faster. You can learn more about that from Google's Developer Docs.
//app.js
document.getElementsByClassName("title1")[0].innerHTML = 'Testing 123';
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap 4 Website Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<style>
.fakeimg {
height: 200px;
background: #aaaaaa;
}
</style>
</head>
<body>
<div class="jumbotron text-center" style="margin-bottom: 0">
<h1 class="title1" id="testing11">My First Bootstrap 4 Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="app.js"></script>
</body>
</html>
getElementsByClassName("title1") returns an array-like object,
use getElementById("testing11") or getElementsByClassName("title1")[0] instead
getElementsByClassName function return an array.
So you need do approach the first element in that array and then you can access to the innerHTML property.
Try this...
document.getElementsByClassName("title1")[0].innerHTML = 'Testing 123';
Or..
Var header = document.getElementsByClassName("title1")[0];
header.innerHTML = 'Testing 123';
Although.. the best solution in this example is to approach to the h1 element by it's I'd that you gave him, and document.getElementById function return single element.
Like so...
document.getElementById('testing11').innerHTML = 'Testing 123';
1st solution: You have to be sure that index.html and app.js are saved in the same folder.
2nd solution: click on F12 and than go to console tab and verify if your html is calling your app.js or if there is any other problem.
The html looks good
You can move the script into end of the body
And check that you use document on ready in your js file
I'm new to jquery, and I've had a lot of trouble getting a full screen slideshow to work. I've tried downloading jquery 1.11.1. I've linked to 1.8, 1.9, and 1.11.1. The first image shows up with the numbers "123" on it, but it's not dynamic. The other two images aren't showing up.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv = "Content-Type" content = "text/html; charset=iso-8859-1">
<link href="css/styles.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="css/superslides.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
<style></style>
</head>
<body>
<div id="slides">//Slides container to control width
<div class="slides-container">//suggested form by superslides.com
<img src="images/dsc_0844-8x12.jpg" alt="">
<img src="images/dsc_0785-8x12.jpg" alt="">
<img src="images/dsc_0720-8x12.jpg" alt="">
</div>
</div>
<!-- include jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
//Additional superslides plug-ins
<script src="scripts/jquery.easing.1.3.js"></script>
<script src="scripts/jquery.animate-enhanced.min.js"></script>
<script src="scripts/application.js"></script>
<script src="scripts/jquery.superslides.js" type="text/javascript" charset="utf-8"></script>
//Initialize slideshow
<script type="text/javascript">
$(function() {
$('#slides').superslides({
animation: 'fade'
});
});
</script>
</body>
</html>
Your use of non-HTML comments is probably not helping, since you're essentially polluting the DOM with text nodes, and the slideshow script may not be resilient to that.
Comments in HTML look like this:
<!-- Initialise slideshow -->
not this:
// This is a JavaScript comment
I am implementing the Signature plugin in my demo. So I downloaded the plugin from [this url][1].
There demo html contains a class ie kbw-signature which is not applied to any elements in code. However, when I run it somehow it is applied to a given div. So I searched the file and there is no line where it is applied to the div.
Secondly: How to use jQuery signature plugin in jsfiddle?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>jQuery UI Signature Basics</title>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/themes/south-street/jquery-ui.css" rel="stylesheet">
<link type="text/css" href="jquery.signature.css" rel="stylesheet">
<style type="text/css">
.kbw-signature { width: 400px; height: 200px; }
</style>
<!--[if IE]>
<script type="text/javascript" src="excanvas.js"></script>
<![endif]-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.signature.js"></script>
<script type="text/javascript">
$(function() {
$('#sig').signature();
$('#clear').click(function() {
$('#sig').signature('clear');
});
$('#json').click(function() {
alert($('#sig').signature('toJSON'));
});
});
</script>
</head>
<body>
<h1>jQuery UI Signature Basics</h1>
<p>This page demonstrates the very basics of the
jQuery UI Signature plugin.
It contains the minimum requirements for using the plugin and
can be used as the basis for your own experimentation.</p>
<p>For more detail see the documentation reference page.</p>
<p>Default signature:</p>
<div id="sig"></div>
<p style="clear: both;"><button id="clear">Clear</button> <button id="json">To JSON</button></p>
</body>
</html>
Hi I was doing a simple expanding slider with jquery
and somehow the slider would expand to the full-width
of the window, then shrink to the desired width I assigned it to do ..
(if you reload the page a few times, it comes up sometimes)
the problem seems to disappear switch the loading order
of the and between jquery and my external stylesheet
but I am not sure why, I am wondering if anyone knows ????
here is the code that's causing the problem
html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<link type="text/css" href="screen.css" rel="stylesheet" media="screen" />
<script>
$(document).ready(function(){
$("#slider").animate({width:'100px'},1300);
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>TEST</title>
</head>
<body>
<div id="slider">
</div>
</body>
</html>
css:
#slider{
width:10px;
height:20px;
background:#09C;
}
after switch the order of and
the expanding issue disappear:
html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link type="text/css" href="screen.css" rel="stylesheet" media="screen" />
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script>
$(document).ready(function(){
$("#slider").animate({width:'100px'},1300);
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>TEST</title>
</head>
<body>
<div id="slider">
</div>
</body>
</html>
css:
#slider{
width:10px;
height:20px;
background:#09C;
}
Because scripts should always be loaded after static assets?
Most browsers render line by line from top to bottom so a change made on one line can be changed again on the next line.
If one loads the script first then the style will change the script.
I'm trying to implement a jQuery slider with increments. I've gone from, the actual project page, to a test page of the project with just the slider, to just the slider. In all cases I've been unable to get the handle to move. It also seems to have a width of 1px or similar.
My code is as follows,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>jQuery slider</title>
<link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.custom.css" type="text/css" media="screen" charset="utf-8" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.custom.min.js"></script>
<script type="text/javascript">
$(function() {
$("#slider").slider();
});
</script>
</head>
<body>
<div id="slider"></div>
</body>
</html>
I'm sure there is something very simple at fault here, but I really cannot see it for the life of me. The custom part of my download, was just clicking the 'select all components'.
i don't think the slider will show if there is no content and no fixed height ... dry this:
<div id="slider" style="width: 300px; height: 200px">
// Put a huge lorem ipsum text here ;)
</div>
I tried your exact code in a .html file...only replacing your includes with:
<link rel="stylesheet" type="text/css" media="screen" href="/css/ui-lightness/jquery-ui-1.7.2.bluetie.css" />
<script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui-1.7.2.custom.min.js"></script>
...and it worked...slider across the entire screen...easily movable...
non of my files were modified from what I got off the jquery site....
If you are not getting a javascript error,...my guess is that your .css file isn't being included.
Hope this helps,
Andrew