Is there a way to show more than 1 panel at a time with the coda slider? I want to keep its original scrolling logic the same. The only difference, to show more than one panel at a time. Such as 2 or 3 or 4 panels in view.
How would we go about doing that?
Thanks
Here is a sample that heads in the direction of a working example of what you'd like. I'll explain why it seems to be more trouble than it's worth (Assuming you want flexible content in both panels) and tell you how I did it.
Here is the jsFiddle.
So, the initial issue is that the current slide is taken into account for height. Well, what if the next slide contains more content and requires a higher slider height? I suppose you'd need to compare the height of both for each height calculation. That's not so difficult, but it may lead you to more trouble if you had to fight with Niall's code.
The second issue is that you have to set a static width for two elements, which is normal in most cases for this slider, but potentially a drag depending on what your content is.
Anyhow:
.coda-slider-wrapper.arrows .coda-slider, .coda-slider-wrapper.arrows .coda-slider .panel { width: 230px }
.coda-slider { float: left; overflow: hidden; position: relative; width: 460px !important }
You should be able to locate these selectors using find in your editor. The !important is a drag, but required if you don't want to rework much code. Basically, you want to set .coda-slider .panel to the width you want each panel, then double the width of .coda-slider.
Let me know if I've missed anything here or failed to explain something properly. I'd be happy to go over this more! I've worked with this slider a lot due to inheriting a project at work that made extremely heavy use of it. I've since moved on to something custom.
Related
I am developing one website using Django. The website link is,
http://flooroof.com/listings/
You can see that the tiles on the website has got overlap on each other. This happened after I implemented infinite scroll. I found it at below link,
https://simpleisbetterthancomplex.com/tutorial/2017/03/13/how-to-create-infinite-scroll-with-django.html
If you scroll down you will see more and more properties are getting loaded. At a time I am loading 20 listings. But not sure what has gone wrong.
I know there is something wrong with CSS but I am not sure what it is.
Please guide.
Yes as I can see the CSS has issue especially in .grid-item present on after first .infinite-item. I .grid-item has absolute position and only first .infinite-item's .grid-item has proper left and top values. If you want a quick solution then you can do this.
a.grid-item
{
left: auto !important;
top: auto !important;
position: relative !important;
}
One more issue is with image size. your images size are very different from each other so best solution is to use a blank 1px trasparent image with fixed height and show current images as background image.
Please help with these two issues, I will happily pay$ to get these two obstacles out of my way. I got this template from envato and my skills are very slow progressing.
http://philpadilla.com/demo/project.html
Fashion Models
Mobile ยท Web
How do I edit the css to expand the image heights to 100%? My graphics will be stacked just like the template but they will vary in height and I need them to not have the tops and bottoms of the images clipped off. I have been digging and cant seem to find the solution. I also want to turn the rollovers off on all the project images. Does anyone have it in their heart to help please?
The images on your template are already with a predefined value, to change that, you can:
Edit the inline style of your image
Create a external stylesheet to change the height
You can try setting height to 100% (height:100%;)
The easiest way to turn the rollover of, is creating a new stylesheet (style.css) and including it on your code (<link rel="stylesheet" href="style.css">)
thumb-overlay { display: none; } /* This code will disable the rollovers */ }
img { height: 100%; } /* And this one will set all pictures height to 100% */
I use foundation 4 with SASS. but I can't really find how to change default font-size.
For my language, default font-size is too big.
I have tried to change some part. as you may know, it's related full-width as well.
1st of all I have changed full width size : $row-width: em-calc(1200)
1000 to 1200. I need wider. is it correct way to change full-width?
I have tried to change font size.
$base-font-size: 100% !default;
$em-base: 16px !default;
When I change these. it's related full width.
Then How Can I change font-size and full-width? if you have sass, please let me know which file I need modified.
Not 100% clear what you are asking for in your question, but I hope I got it right - you want to know how to change the font without changing the grid size right?
Then the answer can be found in the documentation:
/* Since the typical default browser font-size is 16px, that makes the calculation for grid size. */
/* If you want your base font-size to be a different size and not have it effect grid size too, */
/* set the value of $em-base to $base-font-size ($em-base: $base-font-size;) */
$em-base: 16px !default;
So basically just set:
#import "foundation/variables";
$base-font-size: 4px;
$em-base: $base-font-size;
Change the em-base back to the default and you'll see that the grid also changes accordingly to $base-font-size. You are also doing the right thing by setting the row-width.
If you'r having trouble getting the SASS function em-calc() to work, make sure you call it after #import "foundation/variables"; I don't know why em-calc() is used in the documentation, maybe the sourcecode on git is outdated - but I had to use emCalc(#px) - ie: emCalc(2000px);
This is currently an issue, Github repo.
Until it is fixed in a new version, this changes the font-size without changing the grid.
$base-font-size: 120% !default; // pixels to percent
body { font-size: $base-font-size; } // set the body font size to $base-font-size variable
I would like to have some kind of navigation for a slider when viewed on a mobile device. Since the directional arrows won't show on mobile (if anyone can tell how to make them, that would be awesome) I thought a good solution would be to have a different slider, same images, that is "show-for-small" and has bullets underneath.
It works, but there is an issue that's killing me. If you load the page with the browser window wide (desktop) and scale to a mobile width the sliders switch, but the bullets aren't centered. They appear shifted to the right. If you reload the page at that mobile width with they are fine, perfectly centered below the image.
Does anyone have any clue on how to fix this? I set up a page to demonstrate the problem. www.jonesco.com/_foundation/bullet_problem.html
Thanks
Add the following to your stylesheet:
.orbit-bullets {
display: table;
text-align: center;
}
I have a styled QScrollBar on my table which uses an image for the handle of the scroll bar. The handle is rounded at the edges (with transparency in the image around the edges, of course). Now the problem is that i can't seem to make it re-size nicely.
It's a vertical scroll-bar, so the only way I found to work so far is to set:
background-image: url(:/res/img/scrollbar-vhandle.png);
background-repeat: repeat-y;
in my stylesheet. Which does what it's supposed to, only my scroll bar looks ugly, especially because of the rounded corners.
The image could be 'stretched' nicely by repeating a 1px high line from it's y-center. But even y-stretching should be ok. I just can't find a good way to do it.
Something like a QPushButton, where 9 images can be used for 1 button in order to scale would work, but unfortunately doesn't seem like it does.
So, if anyone can let me know if it's a way to do it through stylesheets (or deriving from QScrollBar, and repainting the handle) i'd appreciate it very much.
If you need more info, please let me know.
Well, as you say, you could inherit from the scrollbar and overload the paintEvent function. Therein you can pretty much to whatever you want, for example compute your new pixmap by repeating that one line and painting it. There are actually a couple of functions in QPixmap that should make this relatively easy.