I'd like to know what is a good pre-coded jquery slider, but specifically for a 960px site. Also its purpose would be just to auto slide, not worried about buttons so much
I plan to use it with the 960 grid system and have it span across 12 columns
Cheers ^_^
I would recommend http://nivo.dev7studios.com/ as a good slider. It can accomodate images of any size, so it will work regardless of being a 960px site.
Related
i am working on my website: http://www.antologiaoliveoil.com/ES/index.html
All looking good, however, when I preview this on Iphone, the image called Lataorganica.jpg does not display well on the first time it shows up on vertically, and the slider does not work. Once I rotate the iPhone horizontally, and then back vertically it works fine.
any idea anyone?
Many thanks
Part of the problem you have is that your text is in your image. On an iPhone or other mobile device where the width is very small, all the text is squish into the image because the image is squish into the mobile width.
One way to fix that is to create separate mobile slider image where there is less text and it is easier to read on a mobile. You can use CSS Media Queries to trigger the mobile slider to show if the width is small.
As for your question about the slider, are you using Owl Carousel (http://www.owlcarousel.owlgraphic.com/)? If you are, include the code you are using so we know how to troubleshoot.
Thanks!
He is using owl carousel. I see you are also using bootstrap. Is there a reason you are not using the bootstrap carousel? See here for reference
You have the required files to use the linked solution.
Greetings!
I am using wordpress Blog site http://www.seoindiarank.com . I am facing a problem with it into slider. The slider was showing full size but now it's not showing full height, Even I try other sliders too but all slider are showing same width and height.
I want to show slider as 2000px by 550px. But it's need to be mobile friendly too.
I hope friends will help me in my great problem.
Regards,
Sam
I would recommend using viewport or % width to make it mobile friendly. In terms of displaying the correct height, viewport and % heights do a much better job with finished aesthetics.
Okay, I'm trying to make a responsive grid, but it is a bit more complicated than that. It has to be able to:
Resize, be responsive
The grid should have as many elements in a row as it can fit, and
There have to to be at least two elements in a row
The minimum page size is 320px
A element should maintain aspect ratio
Here's a starter: http://codepen.io/loredonut/pen/KJDAE
A CSS-only solution would be great. Thanks for your help!
There is a lot of grids you can use.
Since it looks like you are going for mobile screens, too, have a look at
960 Grid
1140 Grid
Most of the grids will give you x number of responsive columns, which on smaller screen sizes collapse to 100% width.
Now if you really want to get fancy have a look at CSS-column-count and CSS-colum-gap - found here CSS tricks, (caniuse). Although you need some fallback for IE6-9, this should allow you to make colums with different row height - as in this fiddle.
I now used <img>s and made them responsive, here's a demo: http://codepen.io/loredonut/pen/FGneA
There are many grid frameworks that may fit your purpose:
Foundation
Semantic Grid
Golden Grid System
There are also:
CSS Grid (not fluid)
320 and Up (not fluid)
Columnal (not fluid)
Skeleton (not fluid)
SimpleGrid (not fluid)
Less Framework (not fluid)
Bootstrap (non-semantic classes)
Breakpoints.js (only breakpoints, too similar to media queries)
Adaptive images> (only images)
FitText (only text)
HTML5 Boilerplate (old)
See this related question.
My personal favorite is Foundation by the way. It is very actively developed and is based on Compass/Sass.
Try using twitter bootstrap.. http://twitter.github.io/bootstrap/
and u can also combine it with isotope http://isotope.metafizzy.co/ and get MAGIC effect :)
this also could save u hours in integrating isotope with bootstrap: http://mpezzi.github.io/bootstrap_isotope/
I'm working on my first responsive website and I want to know how to make all of the images resize dynamically. I've worked around it for now, but I'd really like to rethink how I did this. Is there a jquery plugin for this that is easy to implement (I don't know alot of js)? Is there a better way?
My site
You actually don't need any js for this - this could be achieved with CSS alone. As you figured out from looking at the source in the link in your comments, all that's needed for dynamically resizing an image is the max-width property set to 100%. However, if you want the image to increase in size dynamically as well then you'll have to use width:100%.
See the example in this jsFiddle. You'll notice max-width does not go past the image's resolution - on the otherhand width ensures the image fills the container (which some see as a disadvantage because they lose the resolution when the width exceeds it's original).
There is a catch though, max-width property is not supported in IE6 or below - it was only introduced in IE7. This article here provides a workaround for that though.
But resizing an image through css doesn't make an image responsive.
A 200 kb image will be 200 kb when it is 1000 px wide but also when it is resized by css to 50 px wide.
I would like to see you guys' faces when waiting untill that large images is loaded on your smartphone
I built a new .Net website which will fit nicely on 1200px width resolution.
The problem is that some of my users will browse this website with 1024px width.
Is there a way to fix this problem quick without changing all the design of the page? For example, to put some javascript that will do the trick.
Please keep in mind that the top banner of my site is 1200px wide, and I don't need to support less then 1024px resolution.
Thanks a lot.
It all depends on how 'properly' your web site was designed. You might need to change a few widths for the main containers (hopefully divs) and the whole content will reflow nicely.
However, if your website contains fixed widths for individual elements, or if there are some images / background images with fixed width, then you will have to amend them as well.
Relatively / absolutely positioned elements will need to by amended as well.
There is no silver bullet 'make my page look nice in smaller resolution', if that's what you're looking for.
I would use javascript. I'd check user's width with document.width, then use jQuery's css() element to change what's needed.
If you really don't need to support users with horizontal resolutions less than 1200px, then why not just let them have the horizontal scrollbars?
Wrap the whole structure of the site in a (div) container that has a min-width: 1200px and be done with it.
Otherwise, if you can't stomach some users having horizontal scrollbars and you really want to maintain the beauty of the site, then you really need to get out of your way and re-design the site in a way that it gracefully degrades in lower resolutions. It definitely is not easy but it can be beautiful.
Here's an article from alistapart that discusses the techniques involved.
You can use the following CSS:
min-width:600px;
max-width:2000px;
this code will set the webpage to all resolutions between 600px to 2000px.