Bootstrap 3 Carousel works locally but won't slide on Server - javascript

I have this for the html
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/1200x315" alt="...">
<div class="carousel-caption">
<h3>Caption Text</h3>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x315" alt="...">
<div class="carousel-caption">
<h3>Caption Text</h3>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x315" alt="...">
<div class="carousel-caption">
<h3>Caption Text</h3>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div> <!-- Carousel -->
I've added the hosted jquery and local bootstrap.js as below to the head of the html file
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
After the carousel didnt work, I moved the jquery reference to the bottom of the html page to see if it would load since html loads from top to bottom but still no luck. Any ideas on how I can get this to work?I'm new to JQuery so please kindly be descriptive.

Try this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

Check if jquery
if (typeof jQuery != 'undefined') {
alert("jQuery library is loaded!");
}else{
alert("jQuery library is not found!");
}
and also check in chrome hit f12 for developer mode and check under sources if jquery and boostrap are properly loaded. Check console tab if some errors occurred

Related

Bootstrap Full Page Slider Autoplay doesn`t work with more than 3 pictures

On the website I am currently working on there seems to be a problem with the full page slider from starbootstrap.com: When just replacing the placeholders with images all works fine however when adding a fourth item to the slideshow the autoplay stops working.
Here`s what I did: I added a fourth li-tag.
<!-- Indicators -->
<ol class="carousel-indicators">
<li class="active" data-slide-to="0" data-target="#myCarousel">
</li>
<li data-slide-to="1" data-target="#myCarousel"></li>
<li data-slide-to="2" data-target="#myCarousel"></li>
<li data-slide-to="3" data-target="#myCarousel"></li>
</ol>
Copied the Item with new image
<div class="item">
<!-- Set the fourth background image using inline CSS below. -->
<div class="fill" style=
"background-image:url('images/index/4.JPG');"></div>
<div class="carousel-caption">
<div class="wow fadeIn" data-wow-delay="1.5s">
<!--Caption-->
</div>
</div>
</div>
added Javascript to the bottom, just before the close-body tag
<script type='text/javascript'>
$(document).ready(function() {
$('.carousel').carousel({
interval: 5000
})
});
</script>
Now as mentioned before this works perfectly with only three items in the slider, but as soon as I make the written changes autoplay stops working...
All the other items look exactly the same as the "fourth item".
I really can`t figuer out what the error is, there are no js-errors in the console...
Thank you very much in advance!
Write proper structure.
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img_chania.jpg" alt="Chania">
</div>
<div class="item">
<img src="img_chania2.jpg" alt="Chania">
</div>
<div class="item">
<img src="img_flower.jpg" alt="Flower">
</div>
<div class="item">
<img src="img_flower2.jpg" alt="Flower">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
and use <div class="carousel slide" data-ride="carousel" data-interval="true">
source from w3school
hope this will help you.

Bootstrap Carousel fails to slide

Here's the code I currently have, I'm not sure why the carousel isn't working. The previous/next buttons don't work and the slides wouldn't automatically slide.
Used on Safari 7.0.6
<!-- Carousel
============================================-->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/Slide 1.jpg" alt="image">
<div class="container">
<div class="carousel-caption">
<h1>Heading</h1>
<p>Paragraph</p>
<p><a class="btn btn-large btn-primary" href="http://pmilessyr.github.io/index.html">Link</a></p>
</div>
</div>
</div>
<div class="item">
<img src="img/Slide 2.jpg" alt="image">
<div class="container">
<div class="carousel-caption">
<h1>Heading</h1>
<p>Paragraph</p>
</div>
</div>
</div>
<div class="item">
<img src="img/Slide 3.jpg" alt="image">
<div class="container">
<div class="carousel-caption">
<h1>Heading</h1>
<p>Paragraph</p>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<script src="js/jquery-2.1.1.js"></script>
<script src="js/bootstrap.js"></script>
<script src="javascripts/scale.fix.js"></script>
It really depends on the error you are throwing. I tried out your code with putting in my cdns and images and it works fine. So your html for the carousel portion looks fine.
You are calling static libraries in your script sources so make sure those files are there or use the sites cdn.
ex: http://jquery.com/download/
provide more information about the error you are throwing if you can.

BootStrap 3 carousel is not working

here is the code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="Images/Design/facebook.png" alt="..."/>
<div class="carousel-caption">
<h3>...</h3>
<p>...</p>
</div>
</div>
<div class="item ">
<img src="Images/Design/linkedin.png" alt="..."/>
<div class="carousel-caption">
<h3>...</h3>
<p>...</p>
</div>
</div>
<div class="item ">
<img src="Images/Design/yahoo.jpg" alt="..."/>
<div class="carousel-caption">
<h3>...</h3>
<p>...</p>
</div>
</div>
<div class="item ">
<img src="Images/Design/Mahdi_Hesari#YMail.com.jpg" alt="..."/>
<div class="carousel-caption">
<h3>...</h3>
<p>...</p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
<script src="js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery.js"></script>
</body>
</html>
i think every thing is ok and it have to work. but it's not working even when i click on next and prev buttons.
where is the problem?
i'm using bootsrap version v 3.0.3 in visual studio 2012.
thank you very much
You have to include first jQuery library, then bootstrap.js:
<script src="https://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
Likely, you are currently getting this error: Uncaught ReferenceError: jQuery is not defined
You need to reverse the order in wihch you include the jquery/boostrap js files. Bootstrap has jquery as a prerequisite, so it needs to find it there by the time it's loaded.

Cannot load bootstrap carousel

I have tried doing carousel in bootstrap but it does not load on Firefox or Google chrome in Windows 8.This is the code I wrote,so can someone please explain to me what i did wrong.
<html>
<body>
<div id="mycarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#mycarousel" data-slide-to="0" class="active"></li>
<li data-target="#mycarousel" data-slide-to="1"></li>
<li data-target="#mycarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item">
<img src="img/Capture.PNG" />
<div class="item">
<img src="img/img1.PNG" />
<div class="item">
<img src="img/img3.PNG" />
</div>
<a class="left carousel-control" href="#mycarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#mycarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
</body>
</html>
You should include carousel.js in bootstrap3 and close your div item
Please include carousel.js in your html document
Refer to download carousel.js:
http://getbootstrap.com/javascript/#carousel
Close your div "item" tag, then set the first "item" to "active"
<div class="carousel-inner">
<div class="active item">
<img src="Capture.PNG" />
</div>
<div class="item">
<img src="img1.PNG" />
</div>
<div class="item">
<img src="img3.PNG" />
</div>
</div>
Then the most important thing, is don't forget to load "bootstrap.css"
=> http://getbootstrap.com/2.3.2/assets/css/bootstrap.css.
Because bootsrap used that css file.

Apps Script htmlservice form processing examples jquery

Just looking for some examples on how to implement Apps Script htmlservice form processing examples jquery. Google docs are not sufficient for me (https://developers.google.com/apps-script/guides/html-service).
In the link bellow you will find an example of using JQuery and Carousel in Html Service.
https://script.google.com/d/1Qk3-RG9ilqeOsDgQIC5xcMXNs8Y5hhoViNptCry5GRhlFGu14JaPmzWy/edit?usp=sharing
Any troubles just let me know.
-- Raw code:
-- THe page
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-carousel.js"></script>
<div id="carousel-example-generic" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="https://si0.twimg.com/profile_images/2042490978/SRC_HiRes_RGB_Twitter.jpg" alt="Teste">
<div class="carousel-caption">
Abc
</div>
</div>
<div class="item ">
<img src="https://www.src.org/web/img/src-logo-print.png" alt="Teste 2">
<div class="carousel-caption">
Abc 2
</div>
</div>
<div class="item ">
<img src="https://si0.twimg.com/profile_images/2042490978/SRC_HiRes_RGB_Twitter.jpg" alt="Teste 3">
<div class="carousel-caption">
Abc 3
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
<script>
$('.carousel').carousel();
</script>
-- The Apps Script
function doGet() {
return HtmlService.createTemplateFromFile("pag.html").evaluate().setSandboxMode(HtmlService.SandboxMode.NATIVE);
}

Categories