I'm using the text-only carousel seen here:
jsFiddle
Here is my resize code:
window.addEventListener("resize", resetCarousel);
function resetCarousel(){
setCarouselHeight('#carousel-text');
$('#carousel-text').carousel({
interval: 15000
});
The problem is that when the screen resizes the div enclosing all the text items does not resize accordingly (i.e. it's not responsive). The setCarouselHeight function is used to determine the largest height required for all text items to display. I need the setCarouselHeight to be fired every time the screen resizes. When I do it manually (i,e, window.onresize=func), even after using a timeout, the item sizes reflect the ones used in the old position, not the resized position. Any insight would be greatly appreciated.
After two days of toying with this and coming oh so close, I tried the Owl carousel and got what I needed right away. In the end it is much simpler than bootstrap's. The key is to use the AutoHeight example and turn autoheight to false. It automatically sizes the div to the tallest text piece you have and is very responsive. http://owlgraphic.com/owlcarousel/index.html. Hope this helps someone.
I think no need to use js or owl plugin for responsive the slider. It's can be done by simple css query. My css is below:
.carousel-inner>.item{
min-height:350px;
}
#media screen and (max-width:767px){
.carousel-inner>.item{
min-height:250px;
}
}
#media screen and (max-width:569px){
.carousel-inner>.item{
min-height:200px;
}
}
Check my live demo on jsfiddle
Related
So I got this application in Vuejs that is divided with css grid into 3 divs basically: a sidebar, a configpanel and a preview. I would like to set the width of the preview div in the px unit according to the current screen size and when the screen gets resized
For clarification, I made a gif of a website that does pretty much EXACTLY what I want: https://gyazo.com/d667756474e7f4fa18e2d5d64a0dee5a
As you can see in the gif, every time the screen gets resized, the particular <div> gets assigned a new class for some reason (no idea why or how) and the div's width automatically gets updated with a new px value.
At first I thought I could do something like this in the created() hook:
window.addEventListener("resize", () => {
let preview = window.document.querySelector(".preview");
preview.style.width = `${preview.offsetWidth}px`;
});
But that doesn't work.
I got a really simple sample project set up in a codesandbox here.
Ideally, I would like to know how to dynamically set the width in pixels like the website does in the gif.
Additionally, just out of curiosity, I would like to know why and how that particular website generates a new class every time the screen gets resized (I've seen it a couple of times now and I wonder what it is).
If I have known what you mean correctly, your solution can be the code below (Add code below to your CSS file and add every class you want to it):
#media screen and (max-width: 750px) {
.selector {
some code here...
}
}
The code above will apply the styles defined to elements selected when the width of the device screen is 750 pixels or less.
I"m making a script for a portfolio. when you click on one of the portfolio items a div will appear with the jquery onclick function like this:
$('#portfolioItem').click(function() {
$('#divThatWillApear').show();
This all works fine. I also downloaded a slider called glide.js. this slider also work fine.
But as soon as I combine my script and the slider togheter the slider is acting wierd.
I've created a jsfiddle : http://jsfiddle.net/skunheal/fzftX/2/
the slides dont scale to the full width of the slider. but when you rescale the window they do. when I remove the display none from my parent element (portfolioOverlay) it suddenly works all fine...
any one has an idea whats going wrong and how to fix it?
Hope to hear from anyone!
An easy fix would be to initialize the slider after clicking show, to fix this problem.
$('#show').click(function () {
$('#portfolioOverlay').show();
$('.slider').glide();
});
Demo Fiddle
Your .slider width is messing up as the width of the display:none; parent.
I "fixed" it by adding to your .slider
width: 100%;
to
width: 500px; // same as parent element, this means you are joining the width to the width of the parent however
Updated jsFiddle:
http://jsfiddle.net/cB3Pn/
As the portfolioItem is display:none on load it's size/position can not be calculated by your code. Removing the display:none CSS and adding the following to the bottom of your JavaScript will fix this as it will hide the portfolioItem once the JavaScript has run.
$('#portfolioOverlay').hide();
You could trigger the resize event yourself after showing the slider:
$('#show').click(function() {
$('#portfolioOverlay').show();
$(window).resize();
});
First up, I know this question is probably asked several times, but everyone's layout is different!
I have a mapping application and with a left side tool bar. This tool bar has jquery tabs. I cant get a scroll bar on these tabs. even after overloading .ui-tabs-panel. I know just by adding a height:somepx here gives me scroll bars, but thats not what i want. I want the height to be always till all the way down. I have tried several things but nothing works :(
I suspect its because of my other layout properties which are there to keep the layout liquid (make map adjust to screen sizes and keep left side bar constant).
Here is the stripped down version in Jsbin:
http://jsbin.com/exeguw/edit#source
Can some one please help me get the vertical scroll bar?
Thanks!
If you set the tab div to the height of the #map div (adjusted for tab headers) after the tabs are created, then overflow will kick in and make the contents scrollable:
javascript:
function ResizeTabs() {
$("div.scroll-tab").height($("#map").height() - 80);
}
$(function() {
$(window).resize(ResizeTabs);
$('#tabs').tabs({
create: ResizeTabs
});
});
Updated jsBin.
EDIT: now handles window resizing as well!
Try this
http://jsbin.com/exeguw/9/edit#javascript,html,live
I'm trying to build a content slider for a client that displays their last four posts. Right now it's just plain HTML but I'm having a problem.
The slider box needs to be 180px high with a scrollbar when necessary. My slider seems to work except it makes the slide boxes all as tall as the tallest box. That leaves short posts with a ton of blank space under them.
Anyone know a fix?
http://jsfiddle.net/insitedesignlab/kQDcb/1/
I've seen that Quovolver does this, but I'd love to know how
The basic problem is #slidesContainer needs to be dynamically resized in order for it's parent to know how long to scroll for. One way to solve the problem is to change your animate call to include a callback:
$('#slideInner').animate({
'marginLeft' : slideWidth*(-currentPosition)
},null,null,
function(){
$('#slidesContainer').css('height', $(this).children(".slide:nth-child(" + parseInt((Math.ceil(-1*slideWidth*(-currentPosition) / $("#slideshow").width())) + 1) + ")").height() + "px");
}
);
There's probably a slightly better way to make that calculation, but this will work. You could alternatively hide all the other .slide divs that are not being displayed. Then #slidesContainer will auto-resize to only the visible (not display:none) slide.
I have updated your code here JS Fiddle. You need to remove the min-height property and set the background color to the slide div.
I realize there's already been several questions like this, but I think my case is a little different.
I have an div that I am absolutely positioning and floating on top of the page, and I'm setting an overlay behind it to grey out the rest of the page. I have it working okay until you scroll up and down the page.
The problem is, when the div appears, it is still populating with ajax data. So the height and width of the bg overlay has already been set, but once all the data loads into the floating div, it sometimes pushing the page down so the height increases. So, I can't calculate the height and width of the window or document because the floating div might not be fully loaded yet, and once it does, it pushes the screen down further, causing the bg overlay to not cover the whole page.
So for example, in the code it's going something like:
loadBoxContent = function(){
..DO AJAX HERE..
..PUT CONTENT INTO FLOATING DIV..
$('#floatDiv').show()
$('#darkOverlay').height($(window).height());
}
I verified this by adding an alert, so that by the time I've clicked the alert, the bg overlay was able to calculate the true page size, and it looks fine.
Sorry, if this sounds confusing but hopefully you get what I'm trying to achieve. I'm assuming this isn't too difficult, but I haven't been able to figure it out.
Any help would be appreciated, I'm using jquery.
Thanks
Overlay ;)
** update, setting position of all corners to 0 instead of using width/height 100% **
$("<div/>")
.css({
position:"fixed", // ze trick
background:"#000",
opacity:.5,
top:0,
bottom: 0,
left:0,
right: 0,
zIndex: 2999 // everything you want on top, gets higher z-index
})
.appendTo("body");
Or put the above css settings in a css stylesheet (opacity needs cross browser hacks).
$("#dark-overlay").show();
Here is the solution :
JQuery Show Loading Plugin
Don't try to invent the wheel !!!
Here is a demo :
Loading Demo
Now you just need to create a main container div for your page and just ask this simple plugin to do it for you.
Maybe you want to read the plugin source and find how it works...