I want to add carousel on my website but it seems that data-ride isn't highlighted in my code. It is perfectly highlighted in stackoverflow, but not in Notepad++. Lately I've noticed that other data-... attributes aren't highlighted also. I expect there to be carousel, but images are just stacked. Here is the picture https://i.stack.imgur.com/7BFhr.png
<!-- SLIDESHOW-->
<div class="container">
<div class="row">
<div class="col-sm-12">
<div id="my-slider" class="carousel slide" data-ride="carousel">
<!-- indicators dot nav-->
<!-- wrapper for slides-->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/tepih1.jpg" alt="tepisi" />
<div class="carousel-caption">
<h1> Tepih1 </h1>
</div>
</div>
<div class="item">
<img src="images/tepih2.jpg" alt="tepisi" />
<div class="carousel-caption">
<h1> Tepih2 </h1>
</div>
</div>
</div>
<!-- controls or next and prev buttons-->
Not sure what you mean about the data-ride attribute not being highlighted by Notepad++. If none of what follows solves your problem, please post a screenshot (the StackOverflow question editor has a toolbar button for uploading a picture).
Suggestions:
(1) Try referencing the bootstrap files from a CDN - that will test that it is not a "can't find the file" problem.
<head>
<!-- Other stuff in head... goes here... -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</head>
(2) do you have any errors in the dev console (F12) ?
If the same code works in place1 but does not work in place2, the problem isn't the code - it's the environment. Most likely, bootstrap files not being found.
(3) For bootstrap 4, you know that you need to load four files, right? (a) The css, (b) jQuery, (c) popper javascript file, and (d) bootstrap js (loaded in that order - at least, the jQuery must be loaded before the bootstrap js files)
Related
I am trying to implement LoadingBar.js on my website.
I tested a JSFiddle that works fine : https://jsfiddle.net/sg2uz3jx/
<link rel="stylesheet" type="text/css" href="https://loadingio.github.io/loading-bar/dist/loading-bar.css" />
<script src="https://loadingio.github.io/loading-bar/dist/loading-bar.js"></script>
<div class="ldBar" data-value="70" style="width:200px;height:100px" data-stroke="yellow" data-preset="line"></div>
But when I copy/paste it inside my website it just makes an empty space and does not show anything.
Here is an example of what it does in my website with source code highlight:
Do you have an idea why it would do that ?
Your snippet works on Vivaldi (which it looks like you're using) and Chrome fine. Without the rest of the code for your page it's hard to say why it isn't showing for you. Try temporarily removing any other scripts one by one that might be interfering with loading-bar.js and work back from there. Or post the full page code for further analysis.....
From what I can see in the image you included in the question, you are including the next plugin library code:
<link rel="stylesheet" type="text/css" href="https://loadingio.github.io/loading-bar/dist/loading-bar.css"/>
<script src="https://loadingio.github.io/loading-bar/dist/loading-bar.js"></script>
Inside the html markup structure where you want to create a progress bar, i.e, you are doing something like this (if we assume you create more than one progress bar):
<html>
<head>
<!-- Here are your head stylesheets and meta-tags -->
</head>
<body>
<!-- some code... -->
<!-- some code... -->
<!-- some code... -->
<div>
<h3>Apparence du compteur</h3>
<br>
<!-- Starts the wrong including of the plugin library -->
<link rel="stylesheet" type="text/css" href="https://loadingio.github.io/loading-bar/dist/loading-bar.css"/>
<script src="https://loadingio.github.io/loading-bar/dist/loading-bar.js"></script>
<!-- Ends the wrong including of the plugin library -->
<div class="ldBar" data-value="70" style="width:200px;height:100px;" data-stroke="yellow" data-preset="line"></div>
<div class="row">...</div>
</div>
<!-- some code... -->
<!-- some code... -->
<!-- some code... -->
<div>
<h3>Apparence du compteur 2</h3>
<br>
<!-- Starts the wrong including of the plugin library -->
<link rel="stylesheet" type="text/css" href="https://loadingio.github.io/loading-bar/dist/loading-bar.css"/>
<script src="https://loadingio.github.io/loading-bar/dist/loading-bar.js"></script>
<!-- Ends the wrong including of the plugin library -->
<div class="ldBar" data-value="50" style="width:200px;height:100px;" data-stroke="yellow" data-preset="line"></div>
<div class="row">...</div>
</div>
<!-- some code... -->
<!-- some code... -->
<!-- some code... -->
</body>
</html>
So, instead of the previous wrong (and maybe multiple including) of the plugin library, you have to put the plugin styleshet on the head tag (Discussion about this) and the plugin javascript file only one time on the body tag. Like on the next example:
<html>
<head>
<!-- Here are your head stylesheets and meta-tags -->
<!-- Include stylesheet of loading-bar plugin -->
<link rel="stylesheet" type="text/css" href="https://loadingio.github.io/loading-bar/dist/loading-bar.css"/>
</head>
<body>
<!-- Include Javascript needed for loading-bar plugin -->
<script src="https://loadingio.github.io/loading-bar/dist/loading-bar.js"></script>
<!-- some code... -->
<!-- some code... -->
<!-- some code... -->
<div>
<h3>Apparence du compteur</h3>
<br>
<div class="ldBar" data-value="70" style="width:200px;height:100px;" data-stroke="yellow" data-preset="line"></div>
<div class="row">...</div>
</div>
<!-- some code... -->
<!-- some code... -->
<!-- some code... -->
<div>
<h3>Apparence du compteur 2</h3>
<br>
<div class="ldBar" data-value="50" style="width:200px;height:100px;" data-stroke="yellow" data-preset="line"></div>
<div class="row">...</div>
</div>
<!-- some code... -->
<!-- some code... -->
<!-- some code... -->
</body>
</html>
If after this, the error persist, then check the developer console in search of some errors and update your question with a more precise explanation.
I am creating a simple Express webserver that serves a landing page made with bootstrap, but I can't get any Flexbox examples to work..
Below is my landing page, is there anything I am not seeing? I have checked that jQuery and Bootstrap links are working. I have also viewed the page in Firefox, Chrome and Edge.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Homepage</title>
<!-- STYLES -->
<link rel="stylesheet" href="../public/styleshee/bootstrap.min.css"/>
<link rel="stylesheet" href="../public/stylesheets/main.css" />
</head>
<body>
<div class="d-flex justify-content-around">
<div class="p-2">Flex item 1</div>
<div class="p-2">Flex item 2</div>
<div class="p-2">Flex item 3</div>
</div>
<button id="test-btn" class="btn btn-success">Button</button>
<!-- SCRIPTS-->
<script src="../public/javascripts/jquery.min.js"></script>
<script src="../public/javascripts/bootstrap.min.js"></script>
<script src="../public/javascripts/index.js"></script>
</body>
</html>
Here is a screenshot of the output:
As you can see justify-content-around is not behaving as expected. I have tried several Flexbox classes with the same results.
Can you check which version of bootstrap you use.
When I try your code with version 3.xx it gives output like this in your question, but when I include bootstrap 4 css it gives this ( picture bellow)
link for image
If you want something like this, just include this script for bootstrap css
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css
The first thing one has to check is always sintax and grammar spelling!
Here is probably your mistake:
YOU WROTE "styleshee" instead of stylesheeT (or stylesheeTS)
check this out and let me know
My overall intention is to over-ride the .click function of an element with a certain id, so that a button will replace only the contents of a specific element (not the whole page).
I am under the impression that I am running into trouble when embedding the script file, or in some of the coding in the script file.
I have come to this conclusion due to the fact that when my HTML and JS files are pasted into their respective windows on JSFiddle.net, that it works.
However, when I try to run the file from localhost, it is as though my .js file is not over-riding the .click function.
Any help is appreciated.
<!DOCTYPE html>
<html>
<head>
<title>NoteVote</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<link rel="stylesheet" href="./NV_home.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="./scripts/navScript.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<!-- COURSES page -->
<div data-role="page" id="noteVote">
<div data-role="header" align="middle" class="header">
<img src="./images/banner_post_it.png" align="middle" alt="Banner Image" height="100" width="250"/>
<!-- This is the Navbar -->
<div data-role="navbar" data-grid="c" id="navBar">
<ul>
<li><a class="ui-btn" id="coursesButton">Courses</a></li>
<li><a class="ui-btn" id="searchButton">Search</a></li>
<li><a class="ui-btn" id="submitButton">Submit</a></li>
<li><a class="ui-btn" id="accountButton">Account</a></li>
</ul>
</div>
</div>
<!-- This is the MAIN section -->
<div data-role="content" class="ui-content" id="coursesContent">
Main section
</div>
<!-- FOOTER -->
<div data-role="footer" class="footer">
SomeText
</div>
</div>
<!-- /COURSES -->
<!-- SEARCH -->
<div data-role="page" id="search">
<!-- This is the MAIN section -->
<div data-role="content" class="ui-content" id="searchContent">
<h1>Search Section</h1>
</div>
</div>
</body>
</html>
I believe I have linked the scripts in the correct order: JQuery, my_custom, JQuery Mobile.
So is it in my custom script that there is the error?
$("#searchButton").click( function() {
$('#coursesContent').html( $('#searchContent').html() )
});
If there is a better/easier way to do this, please let me know.
I have searched the internet for solutions, and I found that the order in which the scripts are loaded is important. I also tried inserting my script code inside a "$(document).bind("mobileinit", function(){ " function, which did not yield the results I'd hoped for.
I'm obviously quite new to JavaScript, and JQuery.
Thanks for your help, people.
You're right - order of the script is important (all lib's have to be loaded before you can refer to them).
You may use alternative javascript for this purpouse:
$(document).ready(function()
{
$(document).on("click","#searchButton",function(e)
{
e.preventDefault();
alert('And now what? Click will not take me anywhere...');
$('#coursesContent').html($('#searchContent').html());
});
});
Try to put this code at the bottom of the page (before </body>) and check browsers console for any other JS errors.
This is working example: http://jsfiddle.net/3Qaq7/1/
I cannot get Bootstrap Carousel to start, um, carousel-ing. Below is all the code that is involved with what I'm trying to do. When it renders in the browser, all I see are two images, one above the other, and a less-than and greater-than beneath them. It's just rendering the DIVs as defined by the HTML as opposed to rendering in a Carousel. I verified that the jQuery.ready function is being called, and is calling the code to initialize the carousel. I also tried this on multiple browsers - IE9, Chrome, and Firefox. I'm running out of ideas. Any help would be appreciated. Thanks!
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link type="text/css" href="styles/carousel.css" />
<script type="text/javascript" src="Scripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="Scripts/bootstrap-transition.js"></script>
<script type="text/javascript" src="Scripts/bootstrap-carousel.js"></script>
</head>
<body>
<script type="text/javascript">
$(function () {
$('#carousel').carousel();
});
</script>
<div id="carousel" class="carousel">
<div class="carousel-inner">
<div class="item active">
<img src="images/APM_icon_big.png" alt="Some Alt Text" />
<div class="carousel-caption">
Some caption
</div>
</div>
<div class="item">
<img src="images/appdev_icon_big.png" alt="Some Alt Text" />
<div class="carousel-caption">
Some caption
</div>
</div>
…
</div>
<a class="carousel-control left" href="#carousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#carousel" data-slide="next">›</a>
</div>
</body>
</html>
It seems to be working just fine in this fiddle
Be sure to include the styles defined by bootstrap for the carousel : the css included in the fiddle comes from the twitter-bootstrap custom download page selecting only the JS components > Carousel.
It might not hurt to put your <script> inside the <head> or at the end of your page.
I figured it out. I was missing a rel="stylesheet" in my LINK tag!
I'm trying to implement the Twitter Bootstrap carousel, and so far I've been unsuccessful. I have the following page:
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="utf-8">
<title>Fluxware: Play, learn and build games</title>
<meta name="description" content="Home page for Fluxware">
<meta name="author" content="Tim Butram">
<!-- CSS Stylesheets -->
<link href="../bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="../bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
<!--For shitty webbrowsers -->
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/sbn/trunk/html5.js></script>
<![endif]-->
<!-- Favicon -->
<link rel="favicon" href="images/favicon.ico">
</head>
<body>
<!-- Navbar -->
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="active">Home</li>
<li>Play</li>
<li>Learn</li>
<li>Build</li>
</ul>
</div>
</div>
</div>
<!-- Grid -->
<div class="container">
<div class="row">
<div class="span12">
<div class="hero-unit">
<div id="myCarousel" class="carousel">
<div class="carousel-inner">
<div class="active item"><img src="/images/1.png" /></div>
<div class="item"><img src="./images/2.png" /></div>
<div class="item"><img src="./images/3.png" /></div>
</div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
<div class="row">
<div class="span4">
<a class="btn btn-large">Play</a>
<p>Play games created with Fluxware.</p>
</div>
<div class="span4">
<a class="btn btn-large">Learn</a>
<p>Learn how to create games and game assets</p>
</div>
<div class="span4">
<a class="btn btn-large">Build</a>
<p>Use the Fluxware tools to create game.</p>
</div>
</div>
</div>
</div>
</div>
<script src="../bootstrap/js/jquery.js"></script>
<script src="../bootstrap/js/bootstrap-carousel.js"></script>
<script src="../bootstrap/js/bootstrap-transition.js"></script>
</body>
</html>
And everything seems to render correctly, except for the carousel. From reading the Bootstrap page, it appears that I need to stick a
$('.myCarousel').carousel();
somewhere, but I have no clue as to where, how or why. In addition to that, in the Firefox error console, I get the two errors
$ is undefined
in bootstrap-carousel.js [line 125] and
$ is not a function
in bootstrap-transition.js [line 22]
Clearly jQuery wasn't loaded correctly.
Try loading the two scripts in the page <head>.
The code to run the carousel is
<script>
// Load this when the DOM is ready
$(function(){
// You used .myCarousel here.
// That's the class selector not the id selector,
// which is #myCarousel
$('#myCarousel').carousel();
});
</script>
You can put it either in the <head> after the two other scripts
or where the other scripts are now.
Had the same problem.
For me i had to use jQuery 1.7.1 , as 1.6.4 didn't work.
i had to include bootstrap-transition
Recently had the same problem, it seems in the current version of Bootstrap, you must also include a class called slide.
<div id="myCarousel" class="carousel slide span12">
You defined as id not a class , So you should start carousel by this code of jquery , so replace
$('#myCarousel').carousel();
instead of
$('.myCarousel').carousel();
I was using Django's JQuery (I don't know the version) and it was not working.
However, it works with Jquery 1.7.1.
If you're struggling getting a Bootstrap carousel slideshow to work --
Here's a template with positionable controls, and a progress navbar at the bottom that tracks the slides.
[http://codepen.io/TheNickelDime/][1]
<div class="Slideshow_carousel-wrapper container-fluid">
<span class="Slideshow-ctl-L" onclick="carousel_left()"></span>
<div class="carousel slide" data-ride="carousel" ... </div>
<span class="Slideshow-ctl-R" onclick="carousel_right()"></span>
</div>
<div class="container-fluid Slideshow_progress-bar">
<ul id="slideshow_progress" class="Slideshow_progress"></ul>
</div>