Is this possible? srcset does not work, so I thought about using background-images in combination with media queries. Good idea? How could this be done?
I found this code, but it only shows the url of the img and not the picture itself...somebody can help making the picture showing up? Thx!
$(document).on('beforeLoad.fb', function( e, instance, current ) {
current.type = 'html';
current.content = '<div class="fancybox-image" style="background-image:url(' + current.src + '); background-size: cover; background-position:50% 50%;background-repeat:no-repeat;height:100%;width:100%;" /></div>';
});
Related
I'd like to check if an image width has more than 400px I'd like this image to get full div width. if image is less than 400px just print it in its normal size.
any ideas how to do this?
<div id="volta">
<img src="/img/volta.jpg">
</div>
#volta{
width:500px;
}
As far as I know, this does not exist in CSS. What you should do instead is use classes.
Define some CSS class that applies the styles you want:
.long_width {
background: blue;
}
Then you would use Javascript to check the width of the image. You don't need jQuery to do this you can do it in vanilla Javascript (unless you already have jQuery imported and need it for other things). Maybe something like this:
let elm = document.querySelector('[src="/img/volta.jpg]"');
let width = window.getComputedStyle(elm).getPropertyValue('width');
And then you would use Javascript to add and remove styles accordingly:
if (width > 400) {
elm.classList.add("long_width");
}
else {
elm.classList.remove("long_width");
}
The specific answer to your question depends on what your intentions are. But to keep your code simple, you should use Javascript to handle the logic and not depend on CSS selectors for things this complicated. Instead, create a CSS class that contains the styles you need, and then use Javascript to apply it based on the size of the user uploaded image.
Additionally, if the user uploads the image, you should load it into memory and check its attributes in memory rather than by depending on a DOM element. Something like:
let img = new Image();
img.src = "{data URL of img}"
You will need javascript / jQuery to work. Something like this:
$('img').each(function(){
if($(this).width() > 400){
$(this).css('width', '100%');
}
});
Here is also working jquery example.
Apply an id to the image, and with jquery check its width
If it is greather than 400px modify his width or add a class that does the same.
Example
$(document).ready(function(){
if($("#image").width() > 400){
$("#image").css("width", "100%");
}
else{
$("#image").css("width", "10px");
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id = "image" src = "https://pm1.narvii.com/6919/98f453834b5d87a6c92118da9c24fe98e1784f6ar1-637-358v2_hq.jpg"/>
You can do it like FlokiTheFisherman (with %), or you can use "wv" instead of "%".
I recommend using vw.
img[width='400'] {
width: 100%;
}
For a better UX, I'm showing the empty profile image as a background until the real profile image is loaded, & I'm using Multiple Backgrounds feature to achieve this behavior, like in the following screenshot:
The html look something like:
<ul>
<li><span id='span-id' class="img-circle profile-image"><span></li>
<li ...
</ul>
The CSS look something like:
.img-circle {
border-radius: 150px;
}
.profile-image {
height: 100%;
display: block;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
The js look something like:
var url = 'profile-image-url-here';// depends on user's profile of course
var anonymousUrl = 'anonymous-profile-image-here';
var backgroundImage = "url(" + url + ") , url(" + anonymousUrl + ")";
$('#span-id').css('background-image', backgroundImage);
The Issue is:
While the previous code works fine in almost all scenarios/browsers, some android devices (their Chrome browser & even webviews) repeat the images in a very weird way like the following screenshot:
So, Why is this happening?!! .. & how to prevent it?
(I'm sure that the issue is not in the data, because each image has a link to the user's profile & links are already pointing to different profiles)
First off, let me say I am pretty new to coding in general, so please be specific in your responses =)
I am having an issue with borders around images on a site I am working on. You can see the site here: http://eventswithvizability.ca/
I have 10 images rotating on page reload, you can see the HTML here:
<SCRIPT LANGUAGE="Javascript">
function banner() { } ; b = new banner() ; n = 0
b[n++]= "<IMG name=randimg CLASS='aligncenter1'>"
b[n++]= "<IMG name=randimg CLASS='aligncenter2'>"
b[n++]= "<IMG name=randimg CLASS='aligncenter3'>"
b[n++]= "<IMG name=randimg CLASS='aligncenter4'>"
b[n++]= "<IMG name=randimg CLASS='aligncenter5'>"
b[n++]= "<IMG name=randimg CLASS='aligncenter6'>"
b[n++]= "<IMG name=randimg CLASS='aligncenter7'>"
b[n++]= "<IMG name=randimg CLASS='aligncenter8'>"
b[n++]= "<IMG name=randimg CLASS='aligncenter9'>"
b[n++]= "<IMG name=randimg CLASS='aligncenter10'>"
i=Math.floor(Math.random() * n) ;
document.write( b[i] )
</SCRIPT>
Basically I want no borders around my images. I have firebug installed, and I can see when inspecting the element that is is reading my style for the images (so no borders), but nothing I do is changing the fact that I still have a border displaying around my images.
media="all"
img[class*="align"], img[class*="wp-image-"] {
margin: auto;
border: none !important;
border-style: none !important;
border-width: 0 !important;
border-bottom-color: transparent !important;
/*test to see if I can get rid of bottom border*/
}
I have tried fixing my doctype, adding a reset stylesheet, adding !important all over the place, and reading everything I could track down on google, but it is still picking up this border-style:initial; script from somewhere. If it is the browser, then my reset stylesheet should have taken care of it..right?
Please help! I am going batty trying to figure this out.
Short answer
This is a bug in the rendering engine, which you're triggering by trying to give an img tag a transparent .PNG as a background and then re-scaling it. You can fix this by either:
Changing your img tags to div tags - then the browser doesn't have so much trouble giving them backgrounds.
Rather than setting the background property of the img tags, set their src to the image URLs instead.
Long answer
The border is not being created with CSS; you can tell this because if you add a border property like border:1px solid black the new border will coexist with the one causing you trouble. By the same token, border-style:initial is not at fault; that's just a side-effect of your stating border-none (initial just means that the element should take the default value for the attribute).
The technical cause has to do with bugs in browser rendering engines when re-scaling transparent .PNGs. Some examples of similar bugs being noticed elsewhere are here and here.
But in your case, the proximate cause of the issue seems to be the somewhat unorthodox method being used to display the images, specifically the use of transparent .PNGs as the background (rather than the source) of your img tags. This would be bad practice, even if it weren't the case that in the process of stretching the transparent .PNGs to fill the background of the img, the rendering engine is creating the grey artifacts that look like borders.
If you want to implement the second option in Javascript, the following should do the trick:
<script language="javascript">
i= Math.floor(1 + Math.random() * 9);
if (i < 10) {
i = "0" + i
}
document.write('<img src="http://eventswithvizability.ca/wp-content/themes/lugada/images/bottom' + i + '.png" class="random_image" id="random_image_' + i + '" alt="" />')
</script>
Note that rather than going to the trouble of creating an array with the code for each image stored separately, you can just generate the random variables and then use string concatenation to patch together an img tag on the fly.
Also, you'll save yourself trouble generally if instead of having 10 custom CSS classes for each image, all with the same content, you instead have one class applied to them all. Remember, id attributes must be unique, but not classes.
So, since I have problems deciding an absolute theme for my site, I'd like to let the user choose a theme from a dropdown menu, and when an option is clicked, it'll change the background image, background color, and background positioning.
eg. If the user chose the "Mario Bros 3" theme, they'd get
background-image:url('smb3.jpg');
background-repeat:repeat-x;
background-position:left bottom;
background-attachment: fixed;
background-color: #6899f8;
And if you select "Zelda LTTP" theme, you'd get
background-image:url('zeldalttp.jpg');
background-repeat:no-repeat;
background-position:left bottom;
background-attachment: fixed;
background-color: Black;
I'd like this to be in a dropdown menu, and have it remember your choice, so that it applies every time.
I have next to no idea how to do this, can anybody help?
I'd select the themes by different classes on the body, like that:
body.smb2{
background-image:url('smb3.jpg');
background-repeat:repeat-x;
background-position:left bottom;
background-attachment: fixed;
background-color: #6899f8;
}
body.zelda{
background-image:url('zeldalttp.jpg');
background-repeat:no-repeat;
background-position:left bottom;
background-attachment: fixed;
background-color: Black;
}
Then set the body class with javascript (or server-side) and save the choice in a cookie.
Exactly, put the css in a css file then you could change it like that:
HTML:
<select id="select">
<option value=""></option>
<option value="smb2">SMB 2</option>
<option value="zelda">Zelda</option>
</select>
pure JS:
var sel = document.getElementById('select');
sel.onchange = function(){
document.body.className = sel.value;
};
or jQuery if you prefer:
$('select').change(function(){
$('body').prop('class',$(this).val());
});
Ok the problem on your site is, that the body already has a bunch of other classes. And className overwrites all of them.
One solution would be to save the old classes and then add the new ones like that:
var saveclass = null;
var sel = document.getElementById('select');
sel.onchange = function(){
saveclass = saveclass ? saveclass : document.body.className;
document.body.className = saveclass + ' ' + sel.value;
};
or jQuery:
var currentclass = null;
$('select').change(function(){
$('body').removeClass(currentclass).addClass($(this).val());
currentclass = $(this).val();
});
If you look into WordPress' or numerous message boards' theming architecture, they'd normally serve separate css files depending on user selection. That would, however, be justifiable if you have significant difference styling both themes (i.e. more than one line background difference) making sure redundant css is not received by the client.
If the differences are minor, Andy's answer would work well. And yes, do save the choice in a cookie - this would allow for their preference to be saved even without a profile stored on the server, meaning they don't have to re-select the correct theme every time they visit the site.
I'm looking to set the background-image (or even render an image via the pseudo elements :after or :before) to the value, which will be a URL, of a rel attribute, but only in certain cases (this is a cloud file listing). For example:
HTML:
<div class="icon ${fileExtension}" rel="${fileURL}"></div>
It would be great if I could do something like this:
CSS:
.icon.png,
.icon.jpg,
.icon.jpeg,
.icon.bmp,
.icon.gif { background-image: attr(rel,url); }
... but obviously that doesn't work as, if I'm not mistaken, the attr() CSS function only works inside pseudo element blocks.
I know there are ways of doing this using conditional JSP or even jQuery logic, but I'd like to figure out a neat way of doing it via CSS3, since I'm only concerned with modern browsers at the moment anyway.
Also, I don't want to explicitly set the background image to the URL or create an <img> element, because by default if the file is not a supported image, I'd rather display a predetermined set of icons.
Using
.icon:after{ content: ""attr(rel)""; }
displays the rel value as text.
A jQuery solution is to add the background-image (taken from the rel value) as inline CSS:
jQuery(function($) {
$('.icon').each(function() {
var $this = $(this);
$this.css('background-image', 'url(' + $this.attr('rel') + ')');
});
});
I've tried to do something using jQuery but i don't exactly understand what you want so i can't go on with my code. So far i've done only this.
EDITED I hope it's exactly what you need
$(function(){
var terms = new Array('png','jpg','jpeg','bmp','gif');
$('.icon').each(function(){
var t = $(this),
rel = t.attr('rel'),
cls = t.attr('class');
cls = cls.split(' ');
for (var i=0; i < terms.length; i++) {
if (terms[i] == cls[1]) {
t.css('background-image','url('+rel+')');
}
}
});
});
if you can give me a better example, to undestand exactly what you want, i hope somebody from here will be able to solve your problem.
Regards,
Stefan
I've decided to go the jQuery route, and used a combination of #ryanve and #stefanz answers. Thanks guys
$(document).ready(function() {
$(".png,.jpg,.jpeg,.bmp,.gif,.tiff").each(function(n) {
var bg = 'url(' + $(this).attr("rel") + ')';
$(this).css('background-image', bg);
});
});
I think this is relatively neat/concise and works well for my needs. Feel free to comment on efficiency, methodology, etc.