This is the website: http://www.bilocali.it/vendita/lazio/
The problem is regarding the Map on the left side with google chrome only.
Till June everything was working properly.
The map has a background image that sometimes disappear when I rollover and load a png over it with a simple function like this:
function rollover_region() {$('#region_div').attr('src',"/images/region/image.png");}
Sometimes when I do a refresh it works. I really can't understand.
On all other browser everything is fine. Any suggestion?
Thanks in advance
You have a js issue on your map.
To correct your roll over map problem, you can correct the js issue:
Uncaught TypeError: Cannot read property 'alpha' of undefined on index
Or, you can add this quick css trick:
CSS
.regione_attiva img {
position: absolute;
z-index: 1;
}
You'r welcome =)
Related
Today I was adding a Call To Action element in elementor and I set an image as the background and I changed the border radius to 5 (Under advanced> border> radius) and the border appears rounded on the editor and the preview but when I view the page from my device (iPhone) the image in the call to action is not rounded like it appears in the editor or preview. I tried playing around with it and I figured out that the border will apply if you have a color as a background of the call to action but will not apply if you have an image as a background. I've had the same issue before with the Slides Widget however I was able to resolve this by using some CSS
selector .swiper-slide-bg, selector .elementor-background-overlay { border-radius: 20px!important; }
,that I found on this article: https://mcstarters.com/blog/add-border-radius-to-the-elementor-slider-element/ . I then tried to create my own code:
selector .elementor-cta-background-overlay {
border-radius: 20px!important;
}
But this did not solve the issue. This is not a plugin or theme conflict I created brand new websites with nothing but Elemntor and pro installed and still had the same result. If anyone is able to figure this I would GREATLY appreciate it as I've spent HOURS online trying to find some CSS to solve this with no luck. Even reached out to Elemntor support out of desperation but even THEY can't figure it out. Any CSS Code Would be appreciated thanks.
[These Are Some Images To Help]
[What Elemntor Preview Looks Like]: https://i.stack.imgur.com/D7DiF.jpg
[What it looks like on my Device]: https://www.icloud.com/photos/#0e6G2hxKFShWs5dENCe5VGfpg
This worked for me:
.elementor-cta .elementor-cta__bg-wrapper {
border-radius: 12px!important;
}
I'm having a weird bug in Chrome, I'm applying the following CSS rule to an element:
#element {
background-color: #0E0F10;
background-image: url(images/the_background.jpg);
}
Now the first time I open a new page containing "#element", the background image isn't shown until I refresh the page cache with ctrl+f5.
I tried adding Pragma, Expires and Cache-control meta tags and it don't make any difference.
The only way to make the image to be shown at the first time is to put the absolute url in this way:
#element {
background-color: #0E0F10;
background-image: url(http://site.com/images/the_background.jpg);
}
Now the problem is that I can't hardcode a site url, I need to use a relative or relative to the root path.
Looking around I found a dirty trick for fixing a related bug in Chrome that coincidentally also fixs this problem: http://blog.andrewcantino.com/blog/2012/02/15/fixing-the-chrome-background-refresh-bug/
Basically when I open the page the first time, all the background images are reloaded through JavaScript and from here on it works fine.
However I would like to implement a more elegant fix or find the real cause of the problem.
I'll appreciate any advice.
try
background: #0E0F10 url('http://site.com/images/the_background.jpg');
also, be sure to add a width and a height to your selector!
use relative path in style rule solve my problem. such as image url is "http://site.com/images/the_background.jpg", and your css file url is "http://site.com/stylesheet/style.css", use "../images/the_background.jpg" instead of "/images/the_background.jpg" in your style rule.
I happened to run into the same problem just before I believe.
Since you haven't accepted any of the answers. You might want to try, what worked for me:
Instead of:
background-image: url(images/the_background.jpg);
Change it to:
background-image: url('images/the_background.jpg');
With ticks... It seems odd, but it did the trick for me. Since all of my url's also had an underscore, it might be related to this, though I am not sure.
Anyway, putting the url in quotes, should make it work.
See that this is old question. But just faced the same problem. My problem was related with z-index. Increased value for example z-index:2000; and now as if all works. Just need to check z-index for other elements
If your file structure is like this
Main Folder
css
img
index file
then type this syntax:
#element{
background-image: url(../img/example.jpg);
}
Wrtie this code your bug will be solved.
I'm using svg's as background-images for a responsive layout that recreates a complex brochure in online format.
Everything works perfectly for vector objects however if I embed images on the svg they don't appear on the background.
The strangest thing is if I check the svg on its own, the images are there, so this is kind of annoying!
Does anyone know if it has something to do with the svg configuration or something like that?
How can I solve this and still be able to use the svg as a background-image (background-size:cover rules!)?
Oh I should add that I've seen this "phenom" happen on chrome in my mac, if it's browser specific please say so!
The svg in question is this: http://nonstoptrip.limsomnium.com/img/fundoinfo1.svg
Unfortunately I'm not much of a jsfiddler so I couldn't create something to show you all.
Thanks in advance!
The images will appear if you load the svg at the document level. You can remove this element later and the images won't disappear. You can set it to load into a 1px x 1px element...
function loadSVG(svgpath){
if( /webkit/gi.test(navigator.userAgent.toLowerCase()) ){
var obj = document.createElement("object");
obj.setAttribute("type", "image/svg+xml");
obj.setAttribute("data", svgpath);
obj.setAttribute("width", "1");
obj.setAttribute("height", "1");
obj.setAttribute("style", "width: 0px; height: 0px; position: absolute;visibility : hidden");
document.getElementsByTagName("html")[0].appendChild(obj);
}
}
window.onload = function(){
loadSVG("../img/mySVG.svg");
}
The author of this technique is Dirk Weber, here are more details: http://www.eleqtriq.com/2012/01/enhancing-css-sprites-and-background-image-with-svg/
Webkit simply doesn't support this yet I'm afraid. https://bugs.webkit.org/show_bug.cgi?id=63548 is tracking this issue.
#Duopixel, using just "image/xml" for the type attribute also works (I've only tested it in chrome) and doesn't cause a "Resource interpreted as Document but transferred with MIME type image/svg+xml" error (while "image/svg+xml" does). Hope this helps get rid of that annoying error in the console you may be getting!
I must be doing something wrong. The image was exported from illustrator as an SVG and (I'm not sure whether this is relevant or not) it does have some pixel data in it.
Here's my JSFiddle example.
Note that going directly to the image, it shows up just fine:
http://ykcreations.com/tv.svg
Edit: This does not work in Chrome or Safari but DOES in Firefox. Webkit issue?
There is a problem with your source SVG. See this updated Fiddle pointing to a different SVG file that works correctly: http://jsfiddle.net/wdW2K/2/
.tv {
background: url("http://phrogz.net/svg/800x800.svg");
width: 400px; height: 400px;
}
Edit: Specifically, the problem appears to be that WebKit does not support <image> in an SVG used as a background. Modifying your file minimally to change the <image> to reference a local (non-data-uri) file, and adding a <circle/>, I was able to see both the image and circle when viewing the SVG directly in Chrome, but when used as a background image only the circle was visible.
This bug smells relevant.
It has to do with your image, try plugging the following into your CSS:
.tv
{
background-image: url("http://croczilla.com/bits_and_pieces/svg/samples/butterfly/butterfly.svg");
width: 400px;
height: 400px;
}
Perhaps your SVG is actually an SVGZ? SVGZ files are the compressed versions of SVG files. Usually you have to configure your server to handle that, but FF may just be able to deal with the compressed versions.
EDIT
See Phrogz's answer below (possibly above by the time you read this); it covers this and gives a better explanation.
Another possible cause is serving the SVG with the wrong MIME type. Setting it to 'image/svg+xml' may fix the issue.
In Rails, this can be done by adding the following to config/intializers/mime_types.rb:
Mime::Type.register 'image/svg+xml', :svg
I had a simmilar problem with rendering svg as background image in Chrome, but everything was fine in Firefox. I found out that there was a syntax error inside my svg files exported from Adobe:
wrong xlink attribute:
xlink:href="data:img/png;base64
correct xlink attribute:
xlink:href="data:image/png;base64
Article bellow:
Link to article from css-trick that helped me
I am trying to implement a js accordion I found and I'm having problems with it. The titles are supposed to cleanly slide up to the top of the page and drop the content below. That is not what is happening. There is some obvious jumpiness going on when you look at it. It's not smooth at all. I don't know much about js so please explain your answers carefully. Thanks so much!
http://imip.rvadv.com/accordion.html
EDIT:
After replacing the js with the default file from the site I got it from, nothing changed. Here is a jsfiddle for it
http://jsfiddle.net/imakeitpretty/ruwjn/
Check this: http://jsfiddle.net/luissanchezm86/ruwjn/4/
The problem wasn't the .js, and you don't have to write it all on jsfiddle, since it's JQuery UI, you can simple check it to include it, if it's another external .js, use it as a resource, check fiddle's documentation for that.
Besides that, the other problem was your CSS markup, you had a lot of duplicated classes in that fiddle, it was a bit of a mess.
The main problem with the jumping was the:
.st-accordion ul li.st-open > a{
margin-top: 70px;
}
I just commented that margin-top: 70px;, and it fixed 75% of the problem, I recommend you to use the css that I arrange on the jsfiddle.
Hope it helps you!
UPDATE
Now, if you want to scroll all the way up like http://jsfiddle.net/luissanchezm86/ruwjn/5/ you need to make the body higher on height:
body {
height: 2000px;
}
After looking at your code, you appear to be using this plugin:
http://tympanus.net/codrops/2011/10/12/flexible-slide-to-top-accordion/
If you go to that page, it has the javascript options you need to control the animation speeds, as well as a working example which is more smooth than yours.