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.
Related
I am using MasterSlider.js to make the carousal, I want to give it partialview on desktop and fillwidth view on tablet and mobile. I am trying to change it through detecting the window width but there is something wrong in my code.
<script type="text/javascript">
var slider = new MasterSlider();
slider.setup('masterslider' , {
width:700,
height:466,
space:5,
loop:true,
view:'fadeFlow',
layout:'partialview',
grabCursor:false,
centerControls:false,
autohide:false,
view:"fadeBasic",
});
slider.control('arrows' , {autohide:false});
if ($(window).width() < 1024) {
slider.setup('masterslider' , {
layout:'fillwidth',
grabCursor:false,
centerControls:false,
});
}
</script>
One more thing I am using fadeBasic option to make the previous and next image fade out by default it is applying opactiy 0.4, is there any way I make it 0.8. Opacity is applying on run time.
Just for reference I am using this slider:
http://www.mercurycustom.com/wp-content/uploads/2014/05/partialview/partialview3.html
Here is a running demo: http://codepen.io/anon/pen/dopNrM
Try this instead:
var slider = new MasterSlider();
slider.control('arrows');
if ($(window).width() < 1024) {
slider.setup('masterslider', {
layout: 'fillwidth',
grabCursor: false,
centerControls: false,
});
} else {
slider.setup('masterslider', {
width: 760,
height: 400,
space: 10,
loop: true,
view: 'fadeFlow',
layout: 'partialview',
});
}
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)
})
I have a thumbnail slider on my web page which i am developing. Now when i go into the website it shows only a little block of the picture but once i refresh the page all is good, any ideas why this happens
http://www.ap2x.gbes.co.za/1/1.html
that is the page in question
i have tested on firefox, chrome and IE. Error does not seem to be browser specific
Slider works perfectly fine off line with no such problem.
I have no idea what could be causing this
$(function() {
// wrap all thumbs in a <div> for the 3x3 grid
$div = null;
$('#thumbs').children().each(function(i) {
if ( i % 9 == 0) {
$div = $( '<div />' );
$div.appendTo( '#thumbs' );
}
$(this).appendTo( $div );
$(this).addClass( 'itm'+i );
$(this).click(function() {
$('#images').trigger( 'slideTo', [i, 0, true] );
});
});
$('#thumbs img.itm0').addClass( 'selected' );
// the big-image carousel
$('#images').carouFredSel({
direction: 'up',
circular: false,
infinite: false,
width: 500,
height: 281,
items: 1,
auto: false,
scroll: {
fx: 'directscroll',
onBefore: function() {
var pos = $(this).triggerHandler( 'currentPosition' );
$('#thumbs img').removeClass( 'selected' );
$('#thumbs img.itm'+pos).addClass( 'selected' );
var page = Math.floor( pos / 9 );
$('#thumbs').trigger( 'slideToPage', page );
}
}
});
// the thumbnail-carousel
$('#thumbs').carouFredSel({
direction: 'up',
circular: false,
infinite: false,
width: 550,
height: 150,
items: 1,
align: false,
auto: false,
});
});
It sounds like it doesn't work until the images have been loaded so you either need to tell the slider how big the images will be once they are loaded or wait till they are loaded before running your script.
Does adding the following CSS solve the problem?
#images img {
height: 281px;
width: 500px;
}
I can't get the bug again to test it myself.
I bet you're viewing this website with Chrome.
There is a nasty bug with this browser when he cannot determine the height of an element.
A workaround would be setting width and height to each slider image manually through css.
I've got quite an issue with positioning of colorbox. The methods described on official website http://www.jacklmoore.com/colorbox/ are not quite enough for my purpose. The thing is that I have button opening the colorbox and I need to position it "over the button" (button is 50px height, colorbox is something about 700px height so I need to center it over the button (something like 300px top of the button).
I have tried basic repositioning with jquery in onOpen and onLoad function in colorbox like:
onOpen:function() {
$('#colorbox').removeAttr('top');
$('#colorbox').css('top','200px');
},
It works but colorbox settings automatically overwrite those settings right after onOpen or onLoad and colorbox is positioned in center of the viewport again.
So I am basically calling for help, colorbox positioning settings like top, left etc. are simply not enough for positioning on top of the button element.
Thanks in advance!
Edit: full code below
$(".reserve_").live('click',function() {
var loadUrl = $(this).attr("href");
$.colorbox({
innerWidth:660,
innerHeight:720,
returnFocus: true,
overlayClose: true,
fixed: false,
iframe: true,
href: loadUrl,
opacity: 0.6,
reposition: true,
onOpen:function() {
$('#colorbox').removeAttr('top');//test
$('#colorbox').css('top','200px');//test
},
onLoad: function() {
$('#colorbox').removeAttr('top');//test
$('#colorbox').css('top','200px');//test
},
onClosed:function() {
}
});
return false;
});
EDIT 2: link on jsfiddle: http://jsfiddle.net/zS8J8/8/ (sorry about the messy code in CSS and HTML)
The jsfiddle was helpful, I was able to use the same code as you and get it working.
This was tested in firefox 20, chrome 26, IE 9 on Win 7. The "Open Colorbox" link isn't visible in IE using your HTML, but if you move your mouse in that area, you'll see the cursor change and if you click, Colorbox will open in the correct location.
Here's the HTML, I changed class="rezervuj" to id="rezervuj" because we're keying on a single element rather than a bunch of images:
<h3 style="margin-bottom: 300px;">TOP OF THE PAGE</h3>
<div class="unitKontejner">
<div style="float:right;">
<a id="rezervuj" href="http://www.imgur.com">
<div class="reserveIt">
<div class="reserveIt-content">
open colorbox ยป
</div>
</div>
</a>
</div>
</div>
Here's the script that you can put in the head:
<script>
$(document).ready(function(){
// I removed the options that were set to the default.
// The top and left can be left out or set to a default,
// I used them as a test to see the difference when the event hook is used.
$("#rezervuj").colorbox({
iframe:true,
innerWidth:660,
innerHeight:720,
opacity: 0.6,
top: 0,
left: 0
});
// Use the "cbox_complete" event hook.
// It allows the colorbox div to be positioned after it opens,
// but before the content is loaded.
$(document).bind('cbox_complete', function(){
// Grab the position of the button,
// colorbox can be positioned relative to it.
var pos = $(rezervuj).position();
//console.log(pos);
// Set the position of the colorbox div
// You can add to or subtract from the pos values
// Example: top: (pos.top + 20) + "px"
$("#colorbox").css({
position: "absolute",
top: pos.top + "px",
left: pos.left + "px"
}).show();
});
});
</script>
you can also try this.
$.colorbox({
width: "600px", height: "500px", inline: false, overlayClose: false, escKey: true, iframe: true,
onComplete: function () {
$('#colorbox').removeAttr('top');//test
$('#colorbox').css('top', '100px');//test
$('#colorbox').removeAttr('display');//test
$('#colorbox').css('display', 'block');//test
},
onLoad: function () {
$('#colorbox').removeAttr('display');//test
$('#colorbox').css('display', 'none');//test
},
});
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 });
}