I am trying to upgrade the bootstrap from 3.3.4 to 4.1.3. To do that I have just replaced the contents of the bootstrap.js with the 4.1.3. I was hoping that this would be it, however, after doing this the slider does not work. Carousel comes up but the images do not slide and the controls also do not work.
I understand that a similar question has already been answered, but trust me they have not worked for me. It's been 3 days since I have been struggling with this, so putting out here in case someone can point me in the right direction.
jquery-v3.3.1.html
<script src='<%=Server.getApplURL()%>/../common/JS/jquery/v-3.3.1/jquery-3.3.1.min.js'></script>
Now this file is included in the header file
header.jsp
<%#include file="/../jshtml/jquery-v3.3.1.html"%>
<script src="<%=ServerSupportUtil.getApplURL() %>/kay/js/vendor/modernizr-2.8.3.min.js"></script>
<script src="<%=ServerSupportUtil.getApplURL() %>/kay/js/jquery.min.min.js"></script>
<script src="<%=ServerSupportUtil.getApplURL() %>/kay/js/popper.min.js"></script>
<script src="<%=ServerSupportUtil.getApplURL() %>/kay/js/bootstrap.js"></script>
<script src="<%=ServerSupportUtil.getApplURL() %>/kay/js/plugins.js"></script>
<!-- Scripts that run onLoad -->
<script>
$('.carousel').carousel({});
</script>
Now, this header file is included in the main jsp page which has the code for the carousel. I think this is enough for making sure bootstrap.js, popper.js, and jquery.js are available to the code.
I have changed few things and right now both the slides are same. This code as it is also does not work.
Question:
This carousel does not work and I do not see any errors also anywhere in Chrome dev tools. Any suggestion on how I can see the real error?
home.jsp
<%# include file="../common/header.jsp"%>
<div id="carousel-main" class="carousel slide" data-ride="carousel" data-interval="5000" data-pause="hover">
<!-- Indicators -->
<ul class="carousel-indicators">
<%
while(itr.hasNext())
{
com.SliderDetailsBn sliderbn = (com.SliderDetailsBn)itr.next();
if(sliderCounter == 0)
{
%>
<li data-target="#carousel-main" data-slide-to="<%=sliderCounter %>" class="active"></li>
<%
}
else
{
%>
<li data-target="#carousel-main" data-slide-to="<%=sliderCounter %>"></li>
<%
}
sliderCounter++;
}
%>
</ul>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<%
sliderCounter = 0;
itr = SliderDtlsList.iterator();
while(itr.hasNext())
{
com.SliderDetailsBn sliderbn = (com.SliderDetailsBn)itr.next();
String imagepath = sliderbn.getFilePath();
String sliderUrl = sliderbn.PathUrl();
String sliderType = sliderbn.getFileType();
DelimitedString altText = new DelimitedString( sliderbn.getAltText());
String actualAltText = altText.getString(1);
String headerAltText = altText.getString(2);
if(sliderCounter == 0)
{
if("Link".equalsIgnoreCase(sliderType))
{
%>
<div class="item" onclick="openWindow(this)" onKeyPress="openWindow(this)"
data-href="<%=sliderUrl%>" data-interaction="true" tabindex="0"
aria-label="<%=actualAltText%>">
<div class="carousel-image"
style="background-image: url('<%=imagepath%>')">
<div class="carousel-caption">
<h3><%=headerAltText%></h3>
<p><%=actualAltText%></p>
</div>
</div>
</div>
<div class="item" onclick="openWindow(this)" onKeyPress="openWindow(this)"
data-href="<%=sliderUrl%>" data-interaction="true" tabindex="0"
aria-label="<%=actualAltText%>">
<div class="carousel-image"
style="background-image: url('<%=imagepath%>')">
<div class="carousel-caption">
<h3><%=headerAltText%></h3>
<p><%=actualAltText%></p>
</div>
</div>
<%
}
}
sliderCounter++;
}
%>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-main"
role="button" data-slide="prev"> <span
class="fa-chevron-left" aria-hidden="true"></span> <span
class="sr-only">Previous</span>
</a> <a class="right carousel-control" href="#carousel-main"
role="button" data-slide="next"> <span
class="fa-chevron-right" aria-hidden="true"></span> <span
class="sr-only">Next</span>
</a>
</div>
</div>
<!-- END: Slider container -->
</div>
</div>
<%
}
%>
<!-- END: slider -->
If you have updated to BS4 from BS3 then you need to change the classes for slides in your code from item to carousel-item as in BS4 they have made few changes.
So you can simply do this to all your slide divs
<div class="carousel-item" onclick="openWindow(this)" onKeyPress="openWindow(this)"
data-href="<%=sliderUrl%>" data-interaction="true" tabindex="0"
aria-label="<%=actualAltText%>">
and make sure to add active class also to first slide in the carousel code.
Hope it helps
Related
I'm trying to scrape some files off of a website which has files organized like this:
<div id="CourseContent">
<div class="tab-content coursecontentnotes" id="content_210485ac8-16e8-11ed-9075-0a45a3083c9c">
<!-- Text Content -->
<!-- End Text Content -->
<!-- Video Content -->
<!-- Video Content End -->
<!-- File Content Start -->
<div class="content-type-area">
<div class="row">
<div class="col-md-12">
<div href="javascript:void(0)" class="link-preview" onclick="downloadcoursedoc('4d2d6bd0-077a-4bda-80be-cf7483c9f606')">
<span class="pesu-icon-unlink" aria-hidden="true"></span>
Web Form 2.0 & Form Controls
<span class="pesu-icon-arr-right pull-right" aria-hidden="true"></span>
</div>
</div>
</div>
</div>
<!-- File Content End -->
<!-- Web Link Content End -->
<!-- Web Link Content End -->
<!-- Text Content -->
<!-- End Text Content -->
<!-- Video Content -->
<!-- Video Content End -->
<!-- File Content Start -->
<div class="content-type-area">
<div class="row">
<div class="col-md-12">
<div href="javascript:void(0)" class="link-preview" onclick="downloadcoursedoc('a7bdfc1e-d7cd-40ac-9b02-a688fc684e6e')">
<span class="pesu-icon-unlink" aria-hidden="true"></span>
HTML5 (New Tags, Inputs, Elements and Controls),
<span class="pesu-icon-arr-right pull-right" aria-hidden="true"></span>
</div>
</div>
</div>
</div>
<!-- File Content End -->
<!-- Web Link Content End -->
<!-- Web Link Content End -->
<!-- END of for loop -->
<!-- For Study Material -->
<!-- End of Study Material -->
<!-- For Forums -->
<!-- For Forums End -->
</div>
The code I used in puppeteer's page.evaluate function is as follows:
let downloadObj = document.querySelectorAll(
"#CourseContent .tab-content .content-type-area div"
);
// filter selected elements belonging to same content row
downloadObj = Array.from(downloadObj).filter((el) =>
el.querySelector(".col-md-12")
);
downloadObj.forEach((ele) => {
eval(ele.querySelector(".link-preview").getAttribute("onclick"));
});
The problem is, only only the second file is getting downloaded.
But if I manually do
eval(downloadObj[0].querySelector(".link-preview").getAttribute("onclick"));
the file downloads normally.
Does this have to do something with the click opening a new tab?
Thank you for your time.
Try this instead - it gives each click a second
const elements = [...document.querySelectorAll("#CourseContent .tab-content .content-type-area div .col-md-12")]
.map(ele => ele.querySelector(".link-preview");
const length = elements.length;
let cnt = 0;
let tId;
const clickIt = () => {
if (cnt >= length) return; // stop
elements[cnt].click();
cnt++
setTimeout(clickIt,1000);
});
clickIt();
I am currently trying to remove the arrows from the carousel when there is no image present. The reason for me trying to do so, is simply because I am trying to load several images into a carousel from a database into a given section. This section is recreated multiple times and it doesn't always contain images.
The issue that I am having is that, whenever the bootstrap carousel doesn't have any images loaded, it just displays the carousel arrows on the side. This gives a bad look to the current section and I would like to dispose of that.
How can I remove the carousel arrows when there aren't any images
loaded in the carousel?
Here is a JsFiddle which contains what I've done so far, it is heavy inspired by several other posts. This only removes the left arrow on the first slide and the right arrow on the last slide.
Here you can preview how does the carousel look whenever there are absent images. I have set a black background of 400px in order for the arrows to be more easily spotted. Absent Images JsFiddle
Here is the code I have so far:
<div class="container">
<div id="main_area">
<!-- Slider -->
<div class="row">
<div class="col-xs-12" id="slider">
<!-- Top part of the slider -->
<div class="row">
<div class="col-sm-8" id="carousel-bounding-box">
<div class="carousel slide" id="myCarousel">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item" data-slide-number="0">
<img src="http://placehold.it/770x300&text=one"></div>
<div class="item" data-slide-number="1">
<img src="http://placehold.it/770x300&text=two"></div>
<div class="item" data-slide-number="2">
<img src="http://placehold.it/770x300&text=three"></div>
<div class="item" data-slide-number="3">
<img src="http://placehold.it/770x300&text=four"></div>
<div class="item" data-slide-number="4">
<img src="http://placehold.it/770x300&text=five"></div>
<div class="item" data-slide-number="5">
<img src="http://placehold.it/770x300&text=six"></div>
</div><!-- Carousel nav -->
<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" id="arrow-right">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
</div>
</div>
</div><!--/Slider-->
</div>
JQuery Code:
jQuery(document).ready(function($) {
$('.carousel').carousel({
interval: false,
})
$(document).ready(function () { // on document ready
checkitem();
});
$('#myCarousel').on('slid.bs.carousel', checkitem);
function checkitem() // check function
{
var $this = $('#myCarousel');
if ($('.carousel-inner .item:first').hasClass('active')) {
$this.children('.left.carousel-control').hide();
} else if ($('.carousel-inner .item:last').hasClass('active')) {
$this.children('.right.carousel-control').hide();
} else {
$this.children('.carousel-control').show();
}
}
$("img").error(function(){
$(this).hide('#arrow-right');
});
});
Here are the answers that I've already checked for solutions:
Link 1Link 2
Thank you in advance.
Using jQuery you could try something like..
$(document).ready(function(){
if($('.carousel-inner .item img').attr('src') == '') {
$('.carousel-control').css('display', 'none');
}
});
fiddle
I have a bootstrap carousel with a progress bar that fill up and triggers the next slide. My problem is that right now the carousel pauses when i hover the mouse over the slides and i want it to not pause and keep going.
Here is my code:
$(document).ready(function(){
var percent = 0,
interval =35//it takes about 6s, interval=20 takes about 4s
$bar = $('#progress-bar'),
$crsl = $('#carousel-hero');
$('.carousel-indicators li, .carousel-control').click(function (){$bar.css({width:0.5+'%'});});
/*line above just for showing when controls are clicked the bar goes to 0.5% to make more friendly,
if you want when clicked set bar empty, change on width:0.5 to width:0*/
$crsl.carousel({//initialize
interval: false,
pause: false
}).on('slide.bs.carousel', function (){percent = 0;});//This event fires immediately when the bootstrap slide instance method is invoked.
function progressBarCarousel() {
$bar.css({width:percent+'%'});
percent = percent +0.5;
if (percent>=100) {
percent=0;
$crsl.carousel('next');
}
}
var barInterval = setInterval(progressBarCarousel, interval);//set interval to progressBarCarousel function
if (!(/Mobi/.test(navigator.userAgent))) {//tests if it isn't mobile
$crsl.hover(function(){
clearInterval(barInterval);
},
function(){
barInterval = setInterval(progressBarCarousel, interval);
}
);
}
});
And my HTML :
<div id="carousel-hero" class="carousel slide" data-ride="carousel"><!-- Main Slider -->
<ol class="carousel-indicators">
<li data-target="#carousel-hero" data-slide-to="0" class="active"></li>
<li data-target="#carousel-hero" data-slide-to="1"></li>
<li data-target="#carousel-hero" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active"><!-- First Slide -->
<div class="overlay"></div>
<img src="images/hero1.jpg" alt="hero-image" class="img-responsive">
<div class="carousel-caption"><!-- Tagline -->
<h1 class="tagline">WE ARE <span class="colored">NIXO</span> CREATIVE</h1>
<h5>Branding | Design | Developement</h5>
</div>
</div>
<div class="item"><!-- Second Slide -->
<div class="overlay"></div>
<img src="images/hero2.jpg" alt="hero-image" class="img-responsive">
<div class="carousel-caption"><!-- Tagline -->
<h1 class="tagline">WE <span class="colored">ALWAYS</span> DELIVER</h1>
<h5>UX | Marketing | Ideas</h5>
</div>
</div>
<div class="item"><!-- Third Slide -->
<div class="overlay"></div>
<img src="images/hero3.jpg" alt="hero-image" class="img-responsive">
<div class="carousel-caption"><!-- Tagline -->
<h1 class="tagline">WE <span class="colored">LOVE</span> DESIGN</h1>
<h5>Beautiful | Clean | Inspiring</h5>
</div>
</div>
<!-- Carousel Controlls -->
<a id="hero-control-left" class="control-hero control-left" href="#carousel-hero" role="button" data-slide="prev">
<span class="pe-7s-angle-left pe-4x" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a id="hero-control-right" class="control-hero control-right" href="#carousel-hero" role="button" data-slide="next">
<span class="pe-7s-angle-right pe-4x" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div id="progress-bar"></div> <!-- Carousel Progress Bar -->
</div>
THINGS I'VE TRIED:
in the js file setting pause: 'none'
adding data-pause="false" to the carousel
having puase: false and data-pause="false" at the same time
Any help is apreciated.
Set Pause to null and data-pause="false"
$crsl.carousel({//initialize
interval: false,
pause: null
})
<div id="carousel-hero" class="carousel slide" data-ride="carousel" data-pause="null">
Read more about the carousel options here
https://v4-alpha.getbootstrap.com/components/carousel/#options
For avoiding the progress bar stop remove the code for crsl.hover which clears interval for the progress bar and restart it on blur.
Working Example : https://jsfiddle.net/ne9x9Lp1/
I had the same problem. Just solved it by changing the bootstrap js file (in my case bootstrap.bundle.min.js)
ctrl+f=pause to make it easy to find, it was pause:"hover" and I change it for:
pause:"false"
hope this helps.
So I have an image with a glyphicon lying on top of it. On click, I want to change the image and the glyphicon. More clicking should just switch them back and forth between the two states.
(imgA + glyphiconA <--click--> imgB + glyphiconB)
I used to have the image chaning on click working, but when I tried to add in changing the glyphicon with it, it began to have issues.
Currently, I can click the glyphicon and it will switch to the second image but the glyphicon won't change and upon further clicking it will not switch back to the original image.
NOTE: it's currently a one-image carousel, more will be added later so I need to keep this functionality with the fix
var image_tracker1 = 'main';
function click1() {
var image = document.getElementById('ImageButton1');
if(image_tracker1=='main'){
image.src = 'img/index-splash/1blur.jpg';
$(a).find(".glyphicon")
.removeClass("glyphicon-triangle-bottom")
.addClass("glyphicon-triangle-top");
image_tracker1 = 'blur';
}else{
image.src = 'img/index-splash/1main.jpg'
$(a).find(".glyphicon")
.removeClass("glyphicon-triangle-top")
.addClass("glyphicon-triangle-bottom");
image_tracker1 = 'main';
}
}
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
<div id="mySplash1Mobile" class="carousel-splash slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="first-slide" src="//placehold.it/900x300/c69/f9c/?text=First%20slide" id="ImageButton1" width="100%">
</div>
</div>
<a class="glyphicon-read-more" href="#mySplash1Mobile">
<span class="glyphicon glyphicon-triangle-bottom" id="ImageButton1" onClick="click1();" aria-hidden="true" ></span>
<span class="sr-only">More</span>
</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
You can remove the onclick from the span and put it in the link tag itself. Like change
<a class="glyphicon-read-more" href="#mySplash1Mobile">
to
<a class="glyphicon-read-more" href="javascript:click1();">
And in your js, change
$(a).find(".glyphicon") to $('a').find(".glyphicon")
I ultimately fixed it by toggling rather than removing classes.
Javascript:
var image_tracker1 = 'main';
function click1() {
var image = document.getElementById('ImageButton1');
if(image_tracker1=='main'){
image.src = 'img/index-splash/1blur.jpg';
$('#GlyphiconButton1').toggleClass("glyphicon-triangle-top");
image_tracker1 = 'blur';
}else{
image.src = 'img/index-splash/1main.jpg';
$('#GlyphiconButton1').toggleClass("glyphicon-triangle-top");
image_tracker1 = 'main';
}
}
HTML:
<div id="mySplash1Mobile" class="carousel-splash slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="first-slide" src="img/index-splash/1main.jpg" id="ImageButton1" width="100%">
</div>
</div>
a class="glyphicon glyphicon-triangle-bottom glyphicon-read-more" href="javascript:click1();" id="GlyphiconButton1">
<span class="sr-only">More</span>
</a>
</div>
I've seen a lot of questions like mine here in stack just like these three: 1, 2 and 3. But I tried their way but it didn't work.
I am looking for a more simple way.
Using Javascript in-line in html, I tried to have this code (which I found in one of those questions here in stack)
<script>
function FetchData() {
$("#pack").animate({
left: '-1000px'
}, 'slow');
}
setTimeout(FetchData, 7000); </script>
and have this as well...
<img id="pack" src="image.jpg">
but it seems to not work. Nothing happened. I have looked and stared at the photo for over a minute and it did not move at all. What was wrong? Do I lack some codes? I have no css code that relates to this by the way.
Try to use carousel using bootstrap and put this on the topmost part of your code:
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
This is the code for the slides in html:
<div class="carousel slide" id="myCarousel" data-ride="carousel">
<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>
</ol>
<div class="carousel-inner">
<div class="item active">
<%= image_tag 'image_1.jpg' %>
</div>
<div class="item">
<%= image_tag 'image_2.jpg' %>
</div>
<div class="item">
<%= image_tag 'image_3.jpg' %>
</div>
</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>
and this is the javascript in-line code:
<script type="text/javascript">
$(document).ready(function(){
$("#myCarousel").carousel({
interval : 7000,
pause: false
});
});
</script>
When your teacher says "separate js and html", and that you shouldn't use inline javascript, they probably mean that you should have something like this setup:
in your layout, include a javascript file (this might be included by default). It's best to put these down the bottom. If there's a default layout it might have a place for javascript includes already.
<%= javascript_include_tag "application" %>
in your view
<img id="pack" src="image.jpg">
in application.js
$(function() {
//run on dom ready
console.log("about to setTimeout");
setTimeout(FetchData, 7000);
console.log("done setTimeout");
});
function FetchData() {
console.log("in FetchData, about to animate, $('#pack').size() = "+$('#pack').size());
$("#pack").animate({
left: '-1000px'
}, 'slow');
}