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.
Related
The carousel does this
On my page but I'm expecting this
(i know there is no actual image but that's because I don't have any placeholder image and its src is just "#")
this is the carousel part of the code:
<div class="container">
<h2>Carousel Example</h2>
<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>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="#" alt="img1" style="width:100%;">
</div>
<div class="item">
<img src="#" alt="img2" style="width:100%;">
</div>
<div class="item">
<img src="#" alt="img3" style="width:100%;">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
and I have the CSS loaded at the top and all the js at the end of the page (first jquery, and then popper.js and last is the bootstrap)
According to some of the class names you are using in the carousel, I assume you are using bootstrap 3. I tested your code with bootstrap 3 and it works. Since you did not indicate what version of bootstrap's cdn you are using I can only assume that might be the problem.
If you want to stay with the code you are using include the following in the head section:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
However
I suggest you switch to the latest bootstrap (version 4). Then include the following in your head section:
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" integrity="sha256-46qynGAkLSFpVbEBog43gvNhfrOj+BmwXdxFgVK/Kvc=" crossorigin="anonymous" />
Include the follwoing where you want the carousel to appear. This is bootstrap 4's carousel:
<h2>Carousel Example</h2>
<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>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" >
<div class="carousel-item active">
<img src="1.jpg" alt="img1" style="width:100%;">
</div>
<div class="carousel-item">
<img src="2.png" alt="img2" style="width:100%;">
</div>
<div class="carousel-item">
<img src="3.jpg" alt="img3" style="width:100%;">
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#myCarousel" data-slide="prev" role="button">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#myCarousel" data-slide="next" role="button">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Then include the following just before the end of your body tag (i.e. </body>)
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
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
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.
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.
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);
}