I need to customize the carousel of Boostrap3.
Basically what I'm trying to do is:
Making the caption appear a while after the image was loaded (to give
the user the experience to see the pic a few secs, then the caption
comes in)
The caption should come from right to left.
The caption needs to fill the entire pic.
What have I tried?
The carrousel-caption shows up from bottom to top and it works only on the first slide.
Css markup
.carousel-caption {
display: none;
right: 0;
bottom: 0;
left: 0;
top: 0;
padding-bottom: 30px;
background: rgba(100, 100, 100, 0.5);
}
Followin a similar question, I'm using this .js
Js markup
var carouselContainer = $('.carousel');
var slideInterval = 3000;
function toggleCaption(){
var caption = carouselContainer.find('.active').find('.carousel-caption');
caption.slideToggle();
}
carouselContainer.carousel({
interval: slideInterval,
cycle: true,
pause: "hover"
}).on('slid slide', toggleCaption).trigger('slid');
Here's a live demo
To slide right to left you can add jQuery UI and use it in toggle for additional features, to wait a bit before start the animation you can use delay.
The correct event to hook in bootstrap3 is slid.bs.carousel, see http://getbootstrap.com/javascript/#carousel
Code:
var carouselContainer = $('.carousel');
var slideInterval = 3000;
function toggleCaption() {
$('.carousel-caption').hide();
var caption = carouselContainer.find('.active').find('.carousel-caption');
caption.delay(500).toggle("slide", {direction:'right'});
}
carouselContainer.carousel({
interval: slideInterval,
cycle: true,
pause: "hover"
}).on('slid.bs.carousel', function() {
toggleCaption();
});
Demo: http://jsfiddle.net/IrvinDominin/Y6WH7/
UPDATE
To fix the caption height add this height: 100% !important; to its css rule.
Demo: http://jsfiddle.net/IrvinDominin/Y6WH7/1/
Here is a simple snippet to fade the active caption, other animations such as sliding can be achieved using css transitions or other methods or js animation libs.
$('.carousel').carousel({
interval: 800000,
pause: 'true',
cycle: true
}).on('slide.bs.carousel', (e) => {
$(e.relatedTarget).find('.carousel-caption').fadeOut(500)
}).on('slid.bs.carousel', (e) => {
$(e.relatedTarget).find('.carousel-caption').fadeIn(500)
})
Related
I'm working on an application with Materialize. I'm trying to open and close a modal with a "linear transition".
I mean, I would like open it from top to center and, close it from center to bottom.
At the moment i succeed in the first case (open it from top to center) but i didn't find a way to close it as I want.
I tried to reach my goal through css, so I used this class:
.modal-slide-show {
transform: none !important;
}
I have searched a lot, but I didn't find a way for a custom close of modal.
Here, you can find a fiddle in order to check a simple example
Edit
I'm using materialize 0.97.7
If you could edit the plugin file just find this code and change the endingTop to 14%.
var methods = {
init : function(options) {
var defaults = {
opacity: 0.5,
inDuration: 350,
outDuration: 250,
ready: undefined,
complete: undefined,
dismissible: true,
startingTop: '4%',
endingTop: '14%'
};
This should apply the change throughout the website and all the modals should close to bottom and open from top and no worries about the method by which it is closed.
You have to add a class .bye which moves the position of your modal to top: 100% so that the modal vanishes from the center to the bottom.
The setTimeout is to remove the same class from your modal once the modal is gone so that when you click it the next time it appears from top to center.
Try this:
$(document).ready(function() {
$('#modal1').modal();
$(".modal-close").click(function() {
$(".modal").addClass("bye");
setTimeout(function() {
$(".modal").removeClass("bye");
}, 700);
});
});
.bye {
top: 100% !important;
}
.modal-slide-show {
transform: none !important;
transition: all .5s !important;
}
Check updated fiddle:
https://jsfiddle.net/nashcheez/nb5sv2x5/3/
You can check this JSFiddle link:
$('.modal').modal({
dismissible: true, // Modal can be dismissed by clicking outside of the modal
opacity: .5, // Opacity of modal background
inDuration: 300, // Transition in duration
outDuration: 200, // Transition out duration
startingTop: '70%', // Starting top style attribute
endingTop: '60%', // Ending top style attribute
ready: function(modal, trigger) { // Callback for Modal open. Modal and trigger parameters available.
}
}
);
I have a kiosk application running on Ubuntu server 14.04.3 and chrome. Currently I have some code which hides the mouse if there was no movement for 2 seconds and once the user attempts to move the mouse again it shows up again. The trick is by using a cursor:none and adding an overlay:
js:
var body = $('body');
function hideMouse() {
body.addClass("hideMouse");
body.on('mousemove', function(){
if(window.hiding) return true;
window.hiding = true;
body.removeClass("hideMouse");
$('div.mouseHider').remove();
clearTimeout(window.hideMouse);
window.hideMouse = setTimeout(function(){
body.addClass("hideMouse");
$('<div class="mouseHider"></div>').css({
position: 'fixed',
top: 0,
left: 0,
height: '100%',
width: '100%',
zIndex: 99999
}).appendTo(body);
redraw(document.body);
setTimeout(function(){
window.hiding = false;
}, 100);
}, 4000);
});
}
function redraw(e) {
e.style.display = 'none';
e.offsetHeight;
e.style.display = 'block';
}
css:
body.hideMouse *, body.hideMouse{
cursor: none;
}
body.hideMouse *{
pointer-events: none !important;
}
This code works perfectly fine but there is only 1 caveat. When the page first loading it attempts to hide the mouse with the same trick but the mouse is still sticking there since it just didn't repainted the layer I guess. If I want it to work, I have to move the mouse a little bit and from then on it will work as expected and hide the mouse. The thing is that the kiosk application is restarting every day which means I boot the X display again and the mouse is being reset to the middle of the screen and it just sticks there until I move it a little bit. I hope you understand what I mean.
Do you guys have any idea how I can fix this?
You don't need all that code to do what you want. You could do:
Create a setTimeout to hide the cursor after 2s as soon as the page is loaded
When someone moves the mouse, you:
2.1. Show the cursor again
2.2. Clear the current setTimeout
2.3. And create the setTimeout to hide the cursor after 2s again.
The code below should work for you:
document.addEventListener('DOMContentLoaded', function() {
var cursorNone = document.getElementById('cursor-none');
var t = setTimeout(hideMouse, 2000);
document.addEventListener('mousemove', function(e) {
showMouse();
clearTimeout(t);
t = setTimeout(hideMouse, 2000);
});
function hideMouse() {
cursorNone.classList.remove('hidden');
}
function showMouse() {
cursorNone.classList.add('hidden');
}
});
#cursor-none {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
cursor: none;
background-color: transparent;
}
.hidden {
display: none;
}
<body>
<div id="cursor-none" class="hidden"></div>
</body>
I have a simple div wrapper called .falling within this div I have 10 small images. I created a simple function that allows them to 'slide down' when I desire. That code is below.
JS:
function slide(){
$(".falling").delay(100).fadeIn().animate({opacity: 1, top:"300px"},'slow');}
slide();
CSS:
.falling {
width: 500px;
left: 600px;
top: 60px;
position: absolute;
display:none;
}
The problem is; 2 things. One, at the end of the 'slide down' I would like to have the .falling wrapper width to DECREASE so down to maybe 250px; because I want the illusion the images are grouping together at the end. Each img has a shared class called .imgfall I would like to use this to make the images smaller in width at the bottom as well. So, maybe max-width: 25px;
function slide(){
$(".falling").delay(100).fadeIn().animate({opacity: 1, top:"300px"},'slow');
$(".falling").css("width", "250px"); // tried this before and after slide but doesn't resize after slide but instead before, so not working!
}
slide();
By calling a function as the last parameter in jquery's animate function, you basically call an 'on complete'. See: http://api.jquery.com/animate/
var $fallingShell = $(".falling");
var animateSlides = function(){
function slide(){
$fallingShell.delay(100).fadeIn().animate({opacity: 1, top:"300px"},'slow', function(){
$fallingShell.animate({"width":"250px"}, 500);
});
}
}
And the replay needs the inline css create by the js reset. See: http://api.jquery.com/css/
I think this is everything you need to reset, but this is a best guess having not seen the code.
var resetSlides = function(){
$(".falling").css(
"width":"auto",
"opacity":"0",
"top":"0px"
);
}
So then you can tie it all together with a click or timer or something, or even call the reset at the start of animateSlides();
$('button').on('click', function(){
resetSlides();
animateSlides();
});
I have a big request for help with sth.
I need to set the height to 100% of html & body for owl carousel slider (Full screen). But I need also a little bit place above it.
This is what I did with other slider and what I need to have: http://lukaszradwan.com/
And example with owl carousel http://lukaszradwan.com/pl/
Please resize Your browser vertically to see effect.
Thank You!
EDIT//
It's almost done, but I have another issue. Below the slider there is an empty place, I don't know why lukaszradwan.com/pl
I need to have the same height to cd-main-content class as a viewport. Can You take a look?
$(document).ready(function() {
// carousel setup
$(".owl-carousel").owlCarousel({
navigation : true,
slideSpeed : 300,
pagination : true,
paginationSpeed : 400,
singleItem: true,
autoHeight: true,
afterMove: top_align,
navigationText : false,
afterAction: function(current) {
current.find('video').get(0).play();
}
});
function top_align() {
$(window).scrollTop(0);
console.log('move');
}
});
$(window).scroll(function(){
if ($(this).scrollTop() > 50) {
$('.owl-pagination').addClass('hidden');
} else {
$('.owl-pagination').removeClass('hidden');
}
});
I just added
position: absolute;
top: 289px;
bottom: 0;
left: 0;
right: 0;
to viewport and margin-bottom: 289px; to cd-main-content and everything works well.
I customize a collapsible sidebar from this article
(http://devheart.org/articles/jquery-collapsible-sidebar-layout/) for my own project But it looks a bit funky and not right.
Please take a look at the project here:
http://jsbin.com/oliluz/45
The sidebar seems animating properly, but the #mainContent isn't animating along with the sidebar. It's toggling in stiffly and harsh.
Also advice if the way i added my code are optimize.
Thanks!
The new width of the #mainContent is determined by CSS; which is why it isn't animated. To animate the width of the mainContent as well, try the following:
Remove the following line from the CSS:
#wrap.sidebar #mainContent { margin-right: 270px; }
Modify the JavaScript to add the appropriate animations:
// Variables
var objMain = $('#wrap'), objSidebar = $('#sidebar');
var objContent = $('#mainContent'); // << ADDED
// Show sidebar
function showSidebar(){
objMain.removeClass('nosidebar');
objMain.addClass('sidebar');
objSidebar.animate({ 'right' : '0'},'slow');
objContent.animate({ 'margin-right': 270}, 'slow'); // << ADDED
$.cookie('sidebar-pref2', 'use-sidebar', { expires: 30 });
}
// Hide sidebar
function hideSidebar(){
objMain.removeClass('sidebar');
objMain.addClass('nosidebar');
objSidebar.animate({ 'right' : '-254px'},'slow');
objContent.animate({ 'margin-right': 0}, 'slow'); // << ADDED
$.cookie('sidebar-pref2', null, { expires: 30 });
}