I have some problem with my animation script after page call with AJAX. In this case I load that page if opened in mobile screen browser. I have 2 files called index.php and mobile.php. I put AJAX in index.php so when user openend www.example.com it will load index.php first and then check if user open that page in mobile browser it will make AJAX call to load mobile.php. In mobile.php there is some carousel slider animation and when it load with AJAX the slider animation not working anymore. It's maybe the JQuery not initialized when onload is triggered.
This is my AJAX in index.php :
<script>
window.mobilecheck = function() {
var check = false;
if(window.innerWidth<768){
check=true;
}
return check;
}
if(window.mobilecheck()){
$.ajax({
'type': 'POST',
'url': 'mobile.php',
'data': {test:'test'},
'success': function(response) {
//alert(response);
$("html").html(response);
}
});
}
</script>
And this is my mobile.php :
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
body {
background-color: #eaeaea;
}
</style>
</head>
<body>
<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="1.png" alt="Los Angeles" style="width:25%;">
</div>
<div class="item">
<img src="2.png" alt="Chicago" style="width:25%;">
</div>
<div class="item">
<img src="3.png" alt="New york" style="width:25%;">
</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>
</body>
</html>
I don't know why when mobile.php load with AJAX the animation not working. Please anyone can give me some advise to solve this. Thanks.
You need to redirect the page if you found user using mobile like below. One more thing, You have not added Carousel jquery plugin in mobile.php
<script>
window.mobilecheck = function() {
var check = false;
if(window.innerWidth<768){
check=true;
}
return check;
}
if(window.mobilecheck()){
window.location.href = 'mobile.php';
}
</script>
Related
I'm trying to stop my carousel to auto slide for mobile devices only. Can You please help me out from this query. I found some related questions in this portal but those are not working for me. Please suggest the answer. The below example is the sample bootstrap carousel code.
I'm trying to stop my carousel to auto slide for mobile devices only. Can You please help me out from this query. I found some related questions in this portal but those are not working for me. Please suggest the answer. The below example is the sample bootstrap carousel code.
<script>
// set breakpoint width
var BP = 362;
// start carousel
$('.carousel').carousel({ interval: (window.innerWidth<BP)?false:500 });
// if user rotates phone orientation | window resite
$(window).on('resize', function(ev){
if( window.innerWidth < BP ){
$('.carousel').carousel({ interval: false });
} else {
$('.carousel').carousel({ interval: 500 });
}
})
</script>
<html lang="en">
<head>
<title>Bootstrap 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.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<style>
/* Make the image fully responsive */
.carousel-inner img {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="demo" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://www.w3schools.com/bootstrap4/la.jpg" alt="Los Angeles" width="1100" height="500">
<div class="carousel-caption">
<h3>Los Angeles</h3>
<p>We had such a great time in LA!</p>
</div>
</div>
<div class="carousel-item">
<img src="https://www.w3schools.com/bootstrap4/chicago.jpg" alt="Chicago" width="1100" height="500">
<div class="carousel-caption">
<h3>Chicago</h3>
<p>Thank you, Chicago!</p>
</div>
</div>
<div class="carousel-item">
<img src="https://www.w3schools.com/bootstrap4/ny.jpg" alt="New York" width="1100" height="500">
<div class="carousel-caption">
<h3>New York</h3>
<p>We love the Big Apple!</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
Use .carousel's pause and cycle to do this.. as shown below.
// set breakpoint width
var BP = 362;
// start carousel
$('.carousel').carousel({
interval: (window.innerWidth < BP) ? false : 500
});
// if user rotates phone orientation | window resite
$(window).on('resize', function(ev) {
if (window.innerWidth < BP) {
$('.carousel').carousel('pause');
} else {
$('.carousel').carousel('cycle');
}
})
/* Make the image fully responsive */
.carousel-inner img {
width: 100%;
height: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<style>
/* Make the image fully responsive */
.carousel-inner img {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="demo" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://www.w3schools.com/bootstrap4/la.jpg" alt="Los Angeles" width="1100" height="500">
<div class="carousel-caption">
<h3>Los Angeles</h3>
<p>We had such a great time in LA!</p>
</div>
</div>
<div class="carousel-item">
<img src="https://www.w3schools.com/bootstrap4/chicago.jpg" alt="Chicago" width="1100" height="500">
<div class="carousel-caption">
<h3>Chicago</h3>
<p>Thank you, Chicago!</p>
</div>
</div>
<div class="carousel-item">
<img src="https://www.w3schools.com/bootstrap4/ny.jpg" alt="New York" width="1100" height="500">
<div class="carousel-caption">
<h3>New York</h3>
<p>We love the Big Apple!</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
I'm using a Bootstrap carousel to display images and their respective captions. The image can be portrait, landscape.
I'm able to correctly display landscape images in the carousel with their caption below. In case of Portrait images I'm trying to align the centre image to the right so that it does not overlap with the caption. I changed the CSS property in file bootstrap.min.css but it's not working.
CSS code...
.carousel-inner {
position: relative;
align: right;
width: 100%;
overflow: hidden;
Any idea how to align Portrait image to the right without affecting the other 2 images?
The obj parameter is contains the image src, caption details. The values are being returned by an ajax function being called to the back-end service.
HTML Code..
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<div id="carouselObject">
<div id="carousel-example-generic" class="carousel slide" data-pause="true" data-interval="5000000"> <!--data-interval= 5000 seconds-->
<div class="carousel-inner" role="listbox" id="carouselinner">
</div>
<a class="left carousel-control" href="#/carousel-example-generic" role="button"> <!--data-slide="prev"-->
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true" onclick="loadPrevSlide()" id="leftcarouselbutton"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#/carousel-example-generic" role="button"> <!--data-slide="next"-->
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true" onclick="loadNextSlide()" id="rightcarouselbutton"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
i have created code pen for similar carousel slider. have a look at once it may helpful for you.
<head> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="carosel-example">
<div id="carousel-example-captions" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-captions" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-captions" data-slide-to="1" class=""></li>
<li data-target="#carousel-example-captions" data-slide-to="2" class=""></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img alt="900x500" src="https://cdn.photographylife.com/wp-content/uploads/2014/06/Nikon-D810-Image-Sample-6.jpg">
<div class="carousel-caption">
<h3>First slide </h3>
<p> ContentContentContentContentContentContent</p>
</div>
</div>
<div class="item">
<img alt="900x500" src="https://cdn.photographylife.com/wp-content/uploads/2014/06/Nikon-D810-Image-Sample-6.jpg">
<div class="carousel-caption">
<h3>Second slide</h3>
<p>Content</p>
</div>
</div>
<div class="item">
<img src="http://a.static.trunity.net/files/299501_299600/299598/vertical-farming-chris-jacobs.jpg">
<div class="carousel-caption">
<h3>Third slide</h3>
<p>Content</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel-example-captions" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-captions" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
///// CSS code goes here
.carousel-caption {
color: #000;
}.carosel-example, .new-caption-area {
width: 600px;
margin: auto;
color: #000;
}
////////////// JS CODE
jQuery(function ($) {
$('.carousel').carousel();
var caption = $('div.item:nth-child(1) .carousel-caption');
$('.new-caption-area').html(caption.html());
caption.css('display', 'none');
$(".carousel").on('slide.bs.carousel', function (evt) {
var caption = $('div.item:nth-child(' + ($(evt.relatedTarget).index() + 1) + ') .carousel-caption');
$('.new-caption-area').html(caption.html());
caption.css('display', 'none');
});
});
http://codepen.io/srinivasr/pen/EPdxKG
I'm trying to use this template with a custom carousel.
I want the carousel to replace the default header, but when I put the carousel code there, nothing happens.
When I first tried it did appear, but the left and right arrows would not function properly.
Here is the carousel:
<header id="myCarousel" class="carousel slide">
<!-- 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">
<!-- Set the first background image using inline CSS below. -->
<div class="fill" style="background-image:url('');"></div>
<div class="carousel-caption">
</div>
</div>
<div class="item">
<!-- Set the second background image using inline CSS below. -->
<div class="fill" style="background-image:url('');"></div>
<div class="carousel-caption">
</div>
</div>
<div class="item">
<!-- Set the third background image using inline CSS below. -->
<div class="fill" style="background-image:url('');"></div>
<div class="carousel-caption">
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</header>
And these scripts are at the bottom of the body
// Closes the sidebar menu
$("#menu-close").click(function(e) {
e.preventDefault();
$("#sidebar-wrapper").toggleClass("active");
});
// Opens the sidebar menu
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#sidebar-wrapper").toggleClass("active");
});
// Scrolls to the selected menu item on the page
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') || location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
The reason the carousel wasn't showing up is that the carousel has to be inside the header, not the header itself. Change this
<header id="myCarousel" class="carousel slide">
...
</header>
To this
<header>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
...
</div>
</header>
The previous and next buttons aren't working because your page has a smooth scrolling plugin. Just change this line
$('a[href*=#]:not([href=#])').click(function() { ... }
So that it filters out the carousel buttons, like so
$('a[href*=#]:not([href=#]):not([href=#myCarousel])').click(function() { ... }
(Demo)
Take a look at this Fiddle.
I set the fiddle up with the template and have a Bootstrap carousel fullscreen in place of the image.
The issue why you could not get it to work was because the template site uses a scroll-to in the menu links.
It was a simple fix, all that was needed was to swap the tags to div.
You could use <button>but this would have a shaded gray edge area in from each side.
<!-- Left and right controls -->
<div 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>
</div>
<div 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>
</div>
What do you think is the problem in here?
<html>
<head>
<meta charset="utf-8"> <!-- for character ">>" -->
<!-- solve problem for icon's flat UI -->
<title>Welcome!</title>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-theme.css" rel="stylesheet">
<link href="css/bootstrap-theme.min.css" rel="stylesheet">
<script src="javascript/jquery.js"> </script>
<script src="javascript/jquery.validate.min.js"> </script>
<script src="javascript/jquery-ui-1.9.2.custom.min.js"></script>
<script src="javascript/bootstrap.js"></script>
<script src="javascript/carousel.js"></script>
</head>
<body>
. . . .
<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="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="..." alt="...">
<div class="carousel-caption">
...
</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>
It doesn't show the exact carousel. Instead it shows some missing links, but it has the features of scrolling. Does it have something to do with the .js and .css that must be included? Any ideas?
This looks like the exact code from the bootstrap website. Either way, the reason why missing links are showing up for you in this code is because you need to actually have a path set for your image source
...
<div class='item'>
<img src='<!-- whatever the path to your image is -->'> <!-- this is what is missing -->
<div class='carousel-caption'>
</div>
...
Furthermore, I would change the id of your carousel to something that makes sense for your webpage and that is easy to track for you. When doing don't forget to change the 'href' attribute on the controls to match the id of the new carousel id. Otherwise if it is scrolling and such, then it seems you have it set up correctly. Just make sure you actually add a path for your images.
Use this in your code, hope this may helpful
You need to initilize by using this:
$('.carousel').carousel()
trying to use a carousel on my webpage, but cannot get the code to come in. think it is something to do with calling the javascript from the bootstrap folder, but not sure. please see code below:
in 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>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">
<div class="row-fluid">
<div class="span12"><img src="images/Fiona & Catherine.jpg" alt="Ladies Dancing" style="max-width:100%; max-height: 75%;"></div>
</div><!--/row-fluid-->
</div><!--/item-->
<div class="item">
<div class="row-fluid">
<div class="span12"><img src="images/Group 1.jpg" alt="Group of Dancers" style="max-width:100%; max-height: 75%;"></div>
</div><!--/row-fluid-->
</div><!--/item-->
<div class="item">
<div class="row-fluid">
<div class="span12"><img src="images/Group 2.jpg" alt="Group of Dancers" style="max-width:100%; max-height: 75%;"></div>
</div><!--/row-fluid-->
</div><!--/item-->
</div><!--/carousel-inner-->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div><!--/myCarousel-->
before closing body tag to try to call the javascript:
<script src="js/bootstrap.js">
$('.carousel').carousel();
</script>
I am a beginner to web design, so thanks for help!!!
First of all I think you should use Twitter Bootstrap 3, since it's the newest version of Bootstrap.
About your problem, see if you're calling jquery before you call bootstrap.js file.
Two separate script tags, sir :)
<script src="js/bootstrap.js"></script>
<script>
$(function() {
$('.carousel').carousel();
});
</script>