I require a reponsive, height adjustable carousel showing a hint of the next and previous content for a mobile website. After some research I came around the bxslider, which almost fullfills all my needs.
http://jsfiddle.net/8greL/1/
Unfortunately, I was unable to write a carousel and make it adapt to the width automatically. At the moment I was just able to force my way through ugly, static hacks suchs as this one...
$('.bx-wrapper').first().css('max-width', '240px');
Maybe my choice of library or my approach is wrong, but I have no clue how to get it done without writing a carousel by my own...
You will need to update the width(to max-width) of the bxslider so the responsive can go fluid...
But what I did to fix current state is this:
.galleryWrapper {
margin: 0 auto;
max-width: 240px;
}
.galleryWrapper .bx-viewport {
padding-left: 20px;
width: inherit !important
}
FIDDLE
Ok, I came up with a solution by adding/changing the calculation of the slide width and the amount the slides have to be slided inside of the library.
After I finalized my local changes I'll share it on github. :)
Update: I uploaded my changes into github ~> https://github.com/Gumbagubanga/bxslider-4/tree/develop
Related
Heads up - I'm new here, and new to some of the css-grid stuff. Bear with me if this isn't a peak Stack Overflow question.
I'm implementing the Slick jquery slider/carousel plugin into the website. However, I need the carousel slides to (a) all be the exact same height, and (b) be the same height as the slide with the tallest content. I'm getting two different responses on Firefox and Chrome when I try to modify the css to allow for this
I have copied the plugin's css straight into the css of the files I'm working with (so it becomes just part of the native css) so I have better control over it.
I've modified this new pasted css slightly from the original script slick.css file, but only by modifying one the display: none; to display: grid; on the .slick-list selector. This deals with the issue on Firefox, but not on Chrome.
All code that I am using is located here. I have added one line of code background-color: red; to the .slick-list selector to illustrate the space that SHOULD be taken up by slides that are shorter than the tallest slide: https://codepen.io/kyleshepherddev/pen/eqMOxm
I'm not sure what I'm expecting - the css I'm using may not be the right way to fix the problem. We have a client who used this plugin on their site, and I'm mucking around trying to figure out exactly how to fix it. The content of the slider shifts a bit from slide to slide, so the goal is to make ALL slides the SAME HEIGHT as the slide with the most content in it.
Works like a charm in Firefox; doesn't work at all in Chrome.
Simple update these two classes:
.slick-list to display: flex instead of display: grid
.slick-track to display: flex instead of display: block
I have tried to make my site tokyocomedy.com to be responsive design down to a minimum of 320 pixels wide. Most, if not all, pages, such as this top page look reasonably good down to that size, using Firefox's responsive design view:
However, this one page, the schedule page, is not working:
The width it gets stuck at seems to be around 530 pixels:
The only thing that is different on this page is the calendar, so I could be wrong, but my best guess is that something about the calendar CSS or JavaScript is holding some minimum width or padding space or something. I have gone through all the elements I can find using the Firefox web developer inspector:
Relevant CSS IDs and classes seem to be #calendar, fc-toolbar, fc-header-toolbar, fc-view-container, fc-view, fc-list-month-view, fc-widget-content, and fc-widget-header. However, I can't find any width declarations, padding, margins, or any other sizing declaration that would explain why the page will not shrink horizontally. It's possible that maybe there is JavaScript acting on the styling that is altering it in a way that is less easy to find.
The page uses the fullcalendar v3.9.0 JavaScript library. I've put the CSS in use on PasteBin for reference.
What is preventing this calendar page from shrinking down to 320 pixels like other pages on the site?
There is a small error in your code. You need to use word-break css property here as your email text is big. kindly refer to attached screenshot.
Hope it solves your problem.
please add below two property and check
* {
box-sizing: border-box;
}
#maincontent {
float: left;
width: 100%;
}
You used display:inline-block style.css line no. 60 ,use display:block rather than display: inline-block
#maincontent, #upcomingshows, #recentblog{
display:block;
vertical-align: top;
}
Here's the site:
http://philly.thedrinknation.com/mobile
On smartphones, the screen is too wide - allowing you to scroll to the right a little bit, rather than being exact fit.
On a desktop you can reproduce this in FF, make your browser about 350 px wide, then use the keyboard arrows to scroll right.
I have narrowed this down to the javascript from sharethis:
http://w.sharethis.com/button/buttons.js
If I take out that call, the page is fine. Add it back in (even on pages not using the widget), and the scrolling comes back.
It looks like they modified their code back in March, and I'm guessing that might be related. I asked them about it, but so far no response.
Can anyone give me pointers on debugging this further? I will copy the .js file locally to edit it if need be, but so far I can't see what is causing the problem.
Strictly speaking, your issue isn't caused by javascript. Rather, it's caused by styles that AddThis is using. The #stwrapper element used by AddThis has an explicit width of 354px that is causing your issue. The problem is caused by this css coming in an AddThis stylesheet (hosted by them):
.stwrapper {
position: absolute;
width: 354px; /* This is causing the issue. The width of this element ensures that the page can never be smaller than 354px */
z-index: 1000000;
margin: 0;
padding: 0;
top: 0;
left: 0;
visibility: hidden;
height: auto;
}
As this stylesheet is coming from AddThis and you don't have control over it, you need to override the styles in your own stylesheet while ensuring that AddThis still works as intended.
I can't see where you're actually using AddThis, so it's hard for me to suggest what style adjustment you should make that will fix the width issue and keep AddThis working, but something like the following would be a good start:
.stwrapper {
width:auto;
}
I have been working on a website and I'm very happy with the results.
The menu works quite well on mobile. However, I decided that I wanted to try a menu that disappears when viewd on smaller screens.
Here is the javascript plugin I used [Responsive-Nav][1]
I followed the directions, and when I finished, it messed up my navigation and didnt work.
Here are both versions
[Site before plugin][2]
[Site after plugin][3]
Im not sure what is causing
You must also define the rules for different screen sizes in css.
In responsive-nav.css line 11:
.nav-collapse li { width: 100%;
For desktop browser set width: auto. This way the menu items will be displayed inline.
I'm not pretty good in java. Still I guess that question is not too easy for pros as well.
As the header says I'm trying to find a solution how to change a background image gradually by scroll with jQuery.
The background should be responsive.
I found a website having a similar thing sojournnetwork.com
Since I'm no pro with java and jquery a jsfiddle example would be nice!
Thanks in advance
I think this is a perfect tutorial for your needs.
http://ianlunn.co.uk/articles/recreate-nikebetterworld-parallax/
This is the result of the tutorial:
http://ianlunn.co.uk/plugins/jquery-parallax/
The background image dont change, just is Fixed.
div.background {
background-image:url(xxx);
background-attachment: fixed;
}
And every "new" image is a container div who scroll like another.
Something like this must work.
I believe this effect is typically called "Parallax". You might find some of the following examples helpful:
http://wagerfield.github.io/parallax/
http://stolksdorf.github.io/Parallaxjs/
You can also search google for the word "Parallax" and find some simple scripts that don't require an external library if that is a requirement. I did find this JSFiddle which might be helpful as well. I believe it uses the following to setup the backgrounds:
background: url(http://www.webdesignermagazine.nl/files/2012/06/golf.jpg) 50% 0 no-repeat fixed;