I've been looking for answers, but everything I could find does not seem to fix my problem.
I have a jQuery carousel that lazy-load images on demand (Slick Carousel). My problem is that when you're sliding the images, a thin grey border appears around the img placeholder (most of all on chrome and webkit browsers, but sometimes in firefox with a dotted line). When you click anywhere on the screen, the lines disappear, but if you continue sliding they come around each image.
I've set CSS properties border and outline to 0 and none, I tried to disable the lazy-loading to have a src too, but nothing seemed to make the little border disappear.
Does anyone know how to get rid of it?
I have attached two screenshots, one with the lines and one without them (After clicking in the background, they disappear):
This is the border for the active link element. Quick & dirty solution: Listen for the click event, then focus() on something else.
I got inspiration when writing this, so I checked the issues in the GitHub page of the slider and found this:
https://github.com/kenwheeler/slick/issues/1636
putting outline:none; in the corresponding container fixes it.
Thanks also to Thomas Landauer, haven't I checked the GitHub issues, your answer would have definitely put me in the right direction.
Related
I have been searching about this problem from last week...all I could found is this " overflow-x :hidden "
Here is my site : seriesratings.com
when I open it in my iphone, it shows me horizontal scrollbar.
I tried this already:
html,body{overflow-x:hidden;overflow-y:scroll}
someone has told me this "You have inline styles all over your html that will not be properly fixed by using css"
I can not change style now because site is fully developed.
does someone has any other way, like hide horizontal scrollbar with jquery or JS or any other code.
At the sg-site-header-1 I found a H1 with an A tag in it, this thing causes the horizontal scroll-bar, why should you make a color #blank? This is not working, then make is display: invisible or something like that. Hopefully this will work for you!
#dutchsociety Thanks A Lot, you saved me, If you have time can you tell me how did you find out the solution to the problem, so I can do it by myself..
I opened my element inspector in Google Chrome and deleting sections of the website. So on that moment I deleted the header and saw that there was the long sized H1.
At my new website project I have a fullpage background image. Over this, there is a dynamic div. This div shall blur the background image. So that just behind the div, the background image is blurred. I've just found some solutions on the internet with fixed positions and something like that. But that's something I want to avoid, beacause it's a full dynamic and responsive site.
And the backdrop-filter I wan't to avoid aswell, because it is alsmot not supported. But I don't care about the older IE and so on. If it works in modern browsers it's ok.
In short: unfixed/dynamic div shall blur the background image behind it.
I know, that a lot of people asked related questions, but they are all old and so are the answers. I've searched the half internet on this questions, but couldn't find a modern/dynamic answer. I can't believe that there isn't a jquery trick or something like that, that does the job.
I'm realy grateful for every helpful answer!
To make it more clear I added a picture. The DIV in this case is dynamic.
With this great tutorial and some changings in the CSS I did it:
http://jordanhollinger.com/2014/01/29/css-gaussian-blur-behind-a-translucent-box/
And its all CSS only!
I GOT THE SOLUTION: Using a div with background instead of the img tag works like a charm.(But it would be nice to know why did this happen, so if you have an idea feel free to comment.)
I have a kinda strange problem. I have a png image on my site, resize from 280x280 px to 40x40px (in the CSS it's 40 x auto). The problem is that the image appears pixelated on the edges, but when I change it to an other picture with a jQuery click event (same size, just colored) it appears nicely width sharp edges. If I change the order and display the colored version first, and then change it, the colored one appears pixelated. So somehow the changing affects the image I guess, but when I click on it again to change it back it's pixelated again. I tried to add the img with jQuery, no effect. Has anybody seen something like this before? Any ideas? This happens in Firefox. In IE, the pic is pixelated in both states. In chrome it works fine.
UPDATE:
This is how it looks before click:
After click:
UPDATE 2:
I thought I found a workaround, but I just found half a workaround... So I made a gif image of the first png. I display that first, then on the click event, I switch between the two png-s, and they look good. But of course, the gif on the first load has the same issue. If I change it on document.ready the png becomes pixelated...
This is my first time doodling with jquery-mobile. I designed a theme, and now I'm trying to implement it...
Things aren't going as smooth as expected, while I've good understanding of jquery/javascript in general, I really don't like working with frameworks with their quirks and specific syntax.
Anyhow, please check: http://mac.idev.ge:800/html5-mobile/iradio.html
Problem:
Try to click in the area of the player, on the album cover for example, notice how blank space appears on the top of lyrics area? What is that? Same happens if you click near song title..
This is baffling...
Any ideas how to fix this unwanted behaviour? And what is it?
Add this attribute to your header/content div
data-tap-toggle="false"
There are a couple of questions related to this problem:
Jquery mobile: Disable "tap to toggle" fixed header and footer
How to fix jQuery Mobile's fixed footer?
They seem to depend on which version you are using but give them a try
I have an issue best shown by example: http://dont.net/DesigningIntro/index.html
Here the last "Car Exterior" is opened fully, but not properly opens as like other small bars. It gets hidden while hovering on other links.
I want it to be shown, and not get hidden even if I hover on other tabs.
Any suggestions?
Looks like the problem is the car_L.jpg image in the .jimgMenu ul li.car_ext a element is being moved to the next line when it animates somehow due to the min-width css tag. Removing that causes the image to be set to just 56px wide by the animation when not hovering on it. Not what you want.
However, I kind of made it work by setting the background image for the .jimgMenu Div. See the result here: http://jsbin.com/ayutu and code here: http://jsbin.com/ayutu/edit
I am not 100% sure whether this is causing your issue or not, but it looks like you have the ending of a comment tag before your tag. I would try removing that and see if it fixes the problem first.
When you first come into the page there are 9 accordion panels. when you hover over one there are only eight.
So, do you have the control setup for 9 panels even when you hover? maybe you need to clear out the last panel on hover so the control knows to reclaim the space and then put it back on mouse out.
the next issue then might be that the control will resize because now the last panel is missing so the max width will be less.
Maybe you are forgetting the image for "Car Exterior" of 56x330px? Also, you don't have an image with vertical letters for "Interior".
Then you are not referencing them well, because if I search images on your page with the Firefox's add-on Web Developer Toolbar it doesn't find the images Car Exterior or Interior.