Ok, here's a problem I've never run into before. I would like to use CSS to specify that an elements width should always be in 10 pixel intervals. So, for example, if the width of an element is 11, it would get bumped up to 20, 56 => 60, 138 => 140, etc...
I doubt CSS has a way to do this but thought I'd ask anyway. Something like this would be nice:
div { width-interval: 10px; }
The problem with this is that block-level elements are always the size of the window unless you specify otherwise. Once you specify a more specific width, you don't need a width inverval.
The two cases this would be different are;
If the block level element is shrink wrapped (in the case of floats and inline-blocks)
If the element has a relative width, ie a percentage.
But if you are setting it to be relative, you wouldn't need intervals, because it's supposed to be relative to other things on the page, so that would get complicated when other things had to be adjusted to compensate. For instance, if I had two divs:
<div id="one"></div>
<div id="two"></div>
and a rule:
#one {
width: 50%;
width-interval: 25px;
}
#two {
width: 50%;
width-interval: 27px;
}
Which one wins? If it's important for lining up pictures or text, you probably don't want either to trump the other, but it can't ignore both.
I think the idea is good, but would probably be better handled by javascript, since you are requiring it to be both dynamic and based on the "nearest" interval. This could work:
$(function () {
$(div).each(function() {
var cur_width = $(this).width();
var inverval_diff = cur_width % 10;
$(this).width(cur_width + inverval_diff);
});
});
The above is in jquery, in case you don't use that as your js framework.
css doesn't have such property, but you are able to style width of elements with additional JavaScript such as:
<script type="text/javascript">
$(function(){
var widthInterval = 20;
$('div').each(function(){
var $this = $(this);
var divisions = parseInt($this.width() / widthInterval) + 1;
var resWidth = (divisions * widthInterval) + "px";
$this.css('width', resWidth);
console.log("Resulted width: " + resWidth);
});
});
</script>
Hope it helps.
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%;
}
I have an idea to make sticky header of table and I have tried with position:sticky. It's
working fine on Chrome but on Firefox and IE not working as I think. Below is my CSS
.myTable--mof thead th {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index:100;
}
position:sticky is not supported for child table elements in some browsers. The 'why' I don't know.. Will it be supported in the future? I sure hope so!
I recently wrote this jQuery solution. It'll work for simple tables with simple headers. Does not look for colspans or multiple rows in thead!
I tried some plugins before, but they all listened for the scroll event which throws alerts in some browsers. They caused flickering/jumping in some cases, and a delay was noticable when hitting the position to stick at.
Using position:sticky for other elements and liking those transitions more, I came up with the following piece of code.
jQuery.fn.stickTableHeaders = function() {
return this.each(function()
{
var table = $(this),
header = table.find('thead'),
sticked = $('<table></table>').addClass('table').append(header.clone()); // Needs to be wrapped in new table since table child elements can't be sticky? (FF)
sticked.find('th').css({ // You'll have to copy the original thead (th's) CSS manualy
'backgroundColor': '#DEE5EA',
'color': '#606060',
'padding':'8px',
'color':'#606060'
}).removeAttr('width'); // And remove the width attr from the clone th's since we'll be setting them again later
sticked.find('th:not(:last-child)').css({ // More CSS
'borderRight': '1px solid #ddd'
});
sticked.find('a').css({ // More CSS
'color':'#606060'
});
// I tried different things, most of the original th's should have a width attribute set (not in CSS and avoid percent) for best results
$(window).resize(function() {
sticked.width(table.width());
sticked.find('th').each(function() {
var headerTH = header.find('th').eq($(this).index());
if(headerTH.is('[width]') || headerTH.is(':first-child') || headerTH.is(':last-child')) { // First and last th are allready calculated by another function in my app. See what suits for you here...
$(this).width(header.find('th').eq($(this).index()).width());
}
else {
var cellWidth = header.find('th').eq($(this).index()).width(true),
tableWidth = table.width(true),
percent = 100*(cellWidth/tableWidth);
$(this).css({'width':percent+'%'});
}
});
// We keep the original thead to avoid table collapsing, we just slide the whole table up.
table.css({
'marginTop':-header.height()
});
}).trigger('resize');
// Apply stickyness
sticked.css({
'display':'table',
'position':'sticky',
'top':$('#header-menu').height(), // My sticky nav is my top position, adjust this to your needs
'zIndex':'10'
});
// Insert clone before original table
$(this).before(sticked);
});
};
Now I just use this on each page load:
$("table").stickTableHeaders();
You might want to filter out nested tables from the above selector...
Hope this helps someone.
I'm looking to set up twitter's embedded timeline, it's quite easy when you're having a fixed design, but that's not my case and I'm actually building a fluid and responsive design for a new website.
My question is, how can I set up twitter's embedded timeline with a fluid width since its an iframe and you're supposed to set up the with in px in your twitter account ?
Thanks :)
This seems to work for me:
#twitter-widget-0 {
width:100%;
}
where #twitter-widget-0 is the iframe it generates, placed in an appropriately-styled container.
It's not perfect: the widget generates its contents a bit differently depending on width, and margins, etc. won't be exactly the same after resizing; but this seems minor.
I'm curious as to why simple CSS didn't work for you - sorry if I'm missing something.
Thanks to all of you I found my way through:
It was almost as lack said, but we had to focus on the iframe instead:
.MyClassForTheDivThatContainTheiFrame iframe{
width:100%;
}
of course .MyClassForTheDivThatContainTheiFrame is also fluid with a % width
This logic will work to change at least the width and height:
#twitter-widget-0, #twitter-widget-1 {
float: none;
width: 100% !important;
height: 250px !important;
}
The only problem with shortening the height is that it hides the text box for people to send tweets but it does shorten the height. My guess is that if you want to add other CSS styling you can just put the !important clause. I also assume that if you have three widgets you would define #twitter-widget-2, etc.
Super hacky, but you can also do this :
<script type="text/javascript">
var checkTwitterResize = 0;
function resizeTwitterWidget() {
if ($('#twitter-widget-0').length > 0) {
checkTwitterResize++;
if ($('#twitter-widget-0').attr('width') != '100%') checkTwitterResize = 0;
$('#twitter-widget-0').attr('width', '100%');
// Ensures it's checked at least 10 times (script runs after initial resize)
if (checkTwitterResize < 10) setTimeout('resizeTwitterWidget()', 50);
} else setTimeout('resizeTwitterWidget()', 50);
}
resizeTwitterWidget();
</script>
This was a helpful thread, thanks. I'm working on a site that uses an older Twitter profile Widget, which I find easier to customise. So an alternative method, uses this to display the feed (customised to suit):
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 5,
interval: 6000,
width: 300,
height: 400,
theme: {
shell: {
background: 'transparent',
color: '#151515'
},
tweets: {
background: 'transparent',
color: '#151515',
links: '#007dba'
}
},
features: {
shell: false,
scrollbar: true,
loop: false,
live: true,
hashtags: true,
timestamp: true,
avatars: true,
behavior: 'all'
}
}).render().setUser('BlueLevel').start();
</script>
Then override the width by adding this to your stylesheet:
.twtr-doc {
width:100% !important;
}
You can see the various classes to modify by using IE9 in compatibility mode, then using F12 Developer Tools to see the html/css.
Hope that helps someone!
You can give your iframe a class, and try to apply CSS to it. At least to change the width to %.
This is not possible. You can set an exact width and height using the html width and height in the anchor tab. Other than that you are out of luck. No responsive or fluid capabilities.
It also has a min-width of 220px and a max-width of 520px.
<a class="twitter-timeline" width="520" height="700" data-dnt=true href="https://twitter.com/vertmob" data-widget-id="WIDGET_ID_HERE">Tweets by #vertmob</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
If you absolutely must do a fluid, you can code a javascript that changes that iframe's width after a resize event or using some javascript timers.
Can we see some code of yours to make some js code for this?
Attribute selector should work:
iframe[id*="twitter-widget"] {
width: 100%;
}
More here.
I'm trying to make an image fit nicely on different screen sizes without breaking the layout. The following bit of CSS helps:
.viewer .main img {
max-width: 100%;
height: auto;
}
But the trouble is this image changes. I use a bit of Javascript to create a new img element each time the image changes, instead of reusing the existing one. (This seems a little more reliable for what I'm doing). The browser doesn't know the image's size until it is loaded, creating an obvious flicker in the interim. I deal with that by setting the image's width and height attributes in HTML. Without the above CSS rule, that works fine.
With that CSS, the flickering is still there. For some reason, when I create a new img element, the CSS seems to be causing the browser to ignore its width and height attributes, so. It ends up as ignorant of the aspect ratio as it was before.
Here's a jsfiddle to illustrate the situation:
http://jsfiddle.net/7sDtN/
One of the images in there is very very big (138 MB), so be careful if you're on a metered connection :)
What I would love is to get the image to scale according to those dimensions I set in HTML. Preferably in a nice way. A Javascript solution isn't the end of the world (I'm already using it, for course), but if there's an elegant CSS solution that would be very nice.
I ended up solving this in a roundabout way by wrapping the image in a dedicated container, along with some strange looking javascript to keep it in place as the image loads. The dimensions for that container are calculated as in Sven's answer, but ultimately it lets the browser take over. This way layout changes are kept fairly minimal and we end up only doing this crazy stuff for the bit of time between images.
Here's a big wad of code, for completedness:
function Viewer(container) {
var viewer = this;
container = $(container);
var pictureBox = $('.picture', container);
var img = $('<img>').appendTo(pictureBox);
var hide = function() {
/* [snip] */
}
var getPictureDisplayHeight = function(picture) {
var ratio = picture.data.h / picture.data.w;
var displayWidth = Math.min(pictureBox.width(), picture.data.w);
var displayHeight = Math.min(displayWidth * ratio, picture.data.h);
return displayHeight;
}
var stopLoadingTimeoutId = undefined;
var stopLoadingTimeout = function() {
container.removeClass('loading');
}
var showPicture = function(picture) {
var imgIsChanging = img.data('picture') != picture;
container.show();
/* This code expects to be cleaned up by stopLoadingTimeout or onImgLoaded, which will not fire if img src doesn't change */
if (imgIsChanging) {
container.addClass('loading');
window.clearTimeout(stopLoadingTimeoutId);
stopLoadingTimeoutId = window.setTimeout(stopLoadingTimeout, 3000);
}
pictureBox.css({
'min-height' : pictureBox.height()
});
var displayHeight = getPictureDisplayHeight(picture);
if (displayHeight > pictureBox.height()) {
/* Grow pictureBox if necessary */
pictureBox.stop(true, false);
pictureBox.animate({
'height' : displayHeight
}, 150);
}
/* I wish I could set width and height here, but it causes the current image to stretch */
img.attr({
'src' : picture.fullPath
}).data('picture', picture);
}
var onImgLoaded = function(event) {
/* The load event might not be fired, so nothing here should be essential */
var picture = img.data('picture');
container.removeClass('loading');
var displayHeight = getPictureDisplayHeight(picture);
pictureBox.stop(true, false);
pictureBox.animate({
'min-height' : 0,
'height' : displayHeight
}, 150, function() {
pictureBox.css('height', 'auto');
});
window.clearTimeout(stopLoadingTimeoutId);
}
var onImgClicked = function(event) {
selectNextPicture();
}
var onPictureSelectedCb = function(picture) {
if (picture) {
showPicture(picture);
} else {
hide();
}
}
var init = function() {
img.on('click', onImgClicked);
img.on('load', onImgLoaded);
}
init();
}
Relevant HTML:
<div class="viewer" style="display: none;">
<div class="picture"></div>
<div class="caption"><div class="caption-text"></div></div>
</div>
And CSS:
.viewer .picture img {
display: block;
margin: 0 auto;
max-width: 100%;
height: auto;
}
This way we leave space around the image that is either the size of the next image or the size of the current image, and never the smaller size that seems to happen before a new image is loaded (which kept happening for some reason). There are probably a million solutions to this, and mine doesn't feel especially straight-forward, so I'm certainly curious to see others :)
If I understand you right, you can achieve your goal by using the following code
HTML
<div id="Wrapper">
<img id="MyPic" src="http://www.davidstorey.tv/wp-content/uploads/2012/05/image.php_.jpeg" alt="" width="300" height="200" />
</div>
CSS
body{
width:100%;
}
#Wrapper{
width:98%;
border:1px solid red;
}
jQuery
$("document").ready(function(){
var ratio=$("#MyPic").width() / $("#MyPic").height();
$("#MyPic").css("width","100%");
$("#MyPic").css("height", $("#MyPic").width()/ratio+"px");
});
Here is the link to jsfiddle
Consider the following markup:
<div id="container">
<div id="top">
<img />
</div>
<div id="bottom">
Some text, there we go.
</div>
</div>
<img> has fixed height. Width of top and bottom is dynamic. top's content may be wider than bottom's content and vice versa. I need to make it so that bottom's width is equal to top's width at all times.
Can this be done with pure CSS? Or is JS neccessary?
There is a way to do this via pure CSS (courtesy of Artem Polikarpov (in Russian))
<style>
.ap-pic {
display: table-cell;
width: 1px;
}
.ap-pic .caption {
display: block;
}
</style>
<div class="ap-pic">
<img src="pic.jpg">
<span class="caption">long text that has to go on the next line blah blah blah</span>
</div>
The #top and #bottom elements are'nt really related in any way, other than having a common parent, so me thinks you're going to have some trouble setting the width of one element to be exactly the same as the other element unless you place one element inside the other etc.
A quick jQuery fix would be :
$("#bottom").css('width', $("#top").width());
Isn't it what you want? http://jsfiddle.net/HgGjW/
Ok I have been fighting with this solution for a couple weeks and fine tuning it for the better part of four months. Essentially I use JQuery to stay on top of it and make sure that no matter what two elements are the same width.
JSFiddle
/**
* Determine basic dimensions of an element
* #author PseudoNinja (email at pseudoninja dot com)
* #returns object
*/
jQuery.fn.getDimensions = function () {
var $this = $(this),
dimensions = {
width: 0,
paddingLeft: 0,
paddingRight: 0,
borderLeft: 0,
borderRight: 0,
getOuterWidth: function () {
return parseInt(this.width) + parseInt(this.paddingLeft) + parseInt(this.paddingRight) + parseInt(this.borderLeft) + parseInt(this.borderRight);
}
};
dimensions.width = $this.width();
dimensions.paddingLeft = $this.css('padding-left').replace(/[^-\d\.]/g, '');
dimensions.paddingRight = $this.css('padding-right').replace(/[^-\d\.]/g, '');
dimensions.borderLeft = $this.css('border-left-width').replace(/[^-\d\.]/g, '');
dimensions.borderRight = $this.css('border-right-width').replace(/[^-\d\.]/g, '');
dimensions.outerWidth = $this.outerWidth();
return dimensions;
};
/** size element to width if target
* #author PseudoNinja (email at pseudoninja dot com)
* #param {string} target - selector of element to clone width
*/
jQuery.fn.sizeTo = function (target) {
var $this = $(this),
$target = $(target),
myDimensions = $this.getDimensions(),
targetDimensions = $target.getDimensions(),
difference = targetDimensions.outerWidth - myDimensions.outerWidth,
adjOuterWidth = 0
;
if (difference > 0) {
myDimensions.width = myDimensions.width + difference;
adjOuterWidth = myDimensions.getOuterWidth();
$this.width(myDimensions.width);
}
// Add persistance to size change
setTimeout(function () {
$this.sizeTo(target);
}, 100);
return $this;
};
// USAGE EXAMPLE
// $(function(){
// $("#div1").sizeTo($("#div2"));
// });
It is possible to do it with pure CSS. Set both element's width as 100%.
If your doing it that way, then I wouldn't use div's, I would use a list.