I have a slideshow with scrolling thumbnails that was created using jCarousel. The thumbnails scroll downwards (forward) as expected. But scrolling backwards has a quirk that I cannot find a solution to. When the last thumbnail has been selected, the scrollbar will only scroll backwards by 8 thumbnails when in reality there are 22. I have tried playing around with the wrap, scroll, itemFallbackDimension & initCallback parameters without any change in the backwards (or in this case, upwards) scroll.
The files are here: http://ers-dev.com/Novartis/Flashcards/Clinical_Trials/index.html. But hurry and take a look, because I will have to take them down next week.
The solution is not to have a scrollbar at all. That simply confuses the app because it loses its place. The solution is to use forward and back buttons. this way the carousel iterates through the slides one by one and it can keep track of where it is.
There are built in classes to take care of this. .connected-carousels .prev-navigation and
.connected-carousels .next-navigation
Related
I'm using angular-bootstrap-calendar and am having a difficult time getting horizontal scrolling to work properly. The plugin's demo page has the same issue I'm experiencing.
To reproduce the issue, visit the demo page, click the Day view, and add a bunch of events so that they stack in columns horizontally. Once the horizontal scrollbar appears, scroll to see the event containers cut off (notice the sudden loss of styling behind the newly created events).
Screenshot of issue in the demo:
And the issue gets worse when vertical scrolling is introduced:
I'm assuming that this has something to do with the way Bootstrap renders its columns, but I haven't been able to solve this issue yet. Does anyone know how to get around this problem?
Edit:
Here is a video of the issue
This is very strange and I'm pretty sure it's to do with some sort of width issue in CSS, but as you start to re-size the browser, it adds this strange gap to the right (Which is off screen).
Here is the page in question
I've tried looking through the CSS and I can't exactly find anything, I keep going over and over it but it's not sticking out to me.
The website is WordPress driven, so most of the CSS is in theme.css and lessframework.css. The Sidebar is a fixed width at 202px and the Content is next to it, which has different width sizes based on what screen size. I'm pretty sure it's something to do with that but I just need a second opinion/set of eyes!
Can anybody help?
I hope im not bringing an old question back to life, but i find Firefox's developer tools have been invaluable in ascertaining, on-the-fly, what elements are actually displaying.
The easiest way is to right click on the area in question, and choose the last option 'Inspect Element'. This will open up the source and CSS console and displays the elements current id/class and style.
To go one better, once the console is open, click on the 3D box icon on the right of the console bar to make Firefox render the page in 3D, which will allow you to spin and zoom in on the affected area.
I am experimenting with customizing a WordPress template and I have things close to the way I want them. One of the last issues is that I have a header that has position:fixed so it floats at the top the whole time. It works but when it floats past an image, it goes behind the image. How do I get it to stay in the foreground the whole time while scrolling? Here's a link:
http://miller-media.com/glossandglamblog/
Thanks!
You need to give it a z-index higher than the images' (eg, 1).
I have some problem in CSS. Check this page. If you click "Barcelona" link in that page you can see the whole page shifting to 10 pixels right and come back to normal. Why its happening? Any help? Thanks
It shifts because of vertical scrollbar showing up. Also the image corresponding to "barcelona" shows in wrong place in firefox. Maybe the old images isn't removed before next one shows, and that forces it to be displayed below?
Apart from the image positioning, a good thing is have overflow-y:scroll set on html. It will force the scrollbar to be always visible (I know maybe not the nicest look) but in exchange the page won't be shifting when navigating to different pages (some may be long, and thus scrollbar shows, some not and have no scrollbar)
Image which is loaded when you click "Barcelona" is wider than it's container. You either reduce width of that image or make the image container a bit wider.
I am working on this philippedecor.com site and I am having a difficulty in figuring out this css issue.
When I on mouse over on "Main categories" that appears on the right side, it shows a drop down with links in it.
Two things happens,
1) in IE(7) - the drop down hides behind another div
2) in both ie and ff, it pushes other div below that to go down and on mouse out, it looks fine.
I am not sure which css property can fix this.
please help me out
Next time, please make your URL clickable: http://philippedecor.com/
In Firefox, I also see a tiny bit of the background showing through the menu, as you can see. Mousing over this thing triggers a mouseout event, closing the menu. In IE 7, I don't see the push-down effect, only the hiding of the menu under the Flash panel and everything below it.
To prevent the menu pushing down other elements on your page, you should use position: absolute on #downmenu and probably incorporate it into the div containing "Main Categories" to position it in the right place. Use an appropiate z-index will likely prevent the drop down menu from popping under another div in IE (untested, as I don't have a debugging tool for IE at the university where I'm typing this message now).
Furthermore, I think you shouldn't use two menus containing exactly the same content, that can be confusing to visitors of your site (actually, I didn't read your post well enough and moused over the left instance). Also, you shouldn't put text in images without providing alternate texts, screen readers and the like can't "see" it this way (preferably use a suitable image replacement technique). And all those s in the lis are totally unnecessary and not according to rules for semantic HTML; just use padding on them or something. By the way, you should make the rounded cursors of 'Main categories' transparent (now two little white corners are shown). Just my $ 0.02...