I want my thumbnails to have the same height. Take a look at the picture:
I tried this code I foud there:
function equalHeight(group) {
var tallest = 0;
group.each(function() {
var thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.each(function() { $(this).height(tallest); });
}
But it doesn't count image size. Also it can't handle window size changings. How to fix that?
I suggest you the use of flexbox: http://www.w3schools.com/css/css3_flexbox.asp
Related
I have horizontal tabs 1 as,
How can I make tabs vertical on window resize than it has been overflowed?
like this:
I don't want usign #media because tabs are dinamic and may be only 1-2 tabs and it will display good in horizontal view
Use JS/jQuery to calculate total width of tabs and check if it's grater than container width.
var totalWidth = 0;
var availableWidth = $('.tabs-container').width();
$('.tabs').each(function () {
totalWidth += $(this).outerWidth(true);
});
$('.tabs-container')
.toggleClass('v-tabs', totalWidth >= availableWidth)
.toggleClass('h-tabs', totalWidth < availableWidth);
You could use Jquery to add a new class on a window resize
$( window ).resize(function() {
$("tabs").addClass("nice looking class");
}
other than this i would use a responsive grid.
Basically join Justinas and Troajans answers together:
function checkTabWidths(){
var totalWidth = 0;
var availableWidth = $('.tabs-container').width();
$('.tabs-container').removeClass('v-tabs h-tabs');
$('.tabs').each(function () {
totalWidth += $(this).outerWidth(true);
});
if (totalWidth >= availableWidth) {
$('.tabs-container').addClass('v-tabs');
} else {
$('.tabs-container').addClass('h-tabs');
}
}
$( window ).resize(function() {
checkTabWidths(); // Check widths on resize
}
checkTabWidths(); // To check on load
You can use jquery to do that:
//first get the container width
var container=$("#containID").width();
//then get the total width of each tabs
var totalWidthOfTabs=0;
$("#containID .tabs").each(function(){
totalWidthOfTabs+=$(this).width();
});
//when window resize, do something
$( window ).resize( function(){
if(totalWidthOfTabs>container){
$("#containID .tabs").css("width","100%");
}
});
just an idea to do what you want. I do not check it whether it is correct or not, you can change it if the example is wrong~
I'm using HTML2Canvas to convert my DIV to a PNG. It is going well, but when my DIV is larger than the screen, only the visible part of the DIV in the screen is rendered in the image.
Is there any workaround so I can render the whole DIV into the image?
Here is my code:
html2canvas(divDrop, {
onrendered: function (canvas) {
imgMap.style.display = "";
imgMap.src = canvas.toDataURL("image/png");
},
width: divDrop.clientWidth,
height: divDrop.clientHeight
});
As described in the comments, I'm posting the working link below:
JSFiddle example
$(function() {
$("#btnSave").click(function() {
html2canvas($("#widget"), {
onrendered: function(canvas) {
theCanvas = canvas;
document.body.appendChild(canvas);
// Convert and download as image
Canvas2Image.saveAsPNG(canvas);
$("#img-out").append(canvas);
// Clean up
//document.body.removeChild(canvas);
}
});
});
});
The max- and min-width attributes on an <img> tag are very useful, particularly the max width which can prevent an img from streching larger than its original size.
Now this is easy when you are using a specific image, so you can set it to be the same as the size of the image. But what if you want to apply this to a general image, for example one which is uploaded by a user? (so you don't know what the dimensions are) In other words, set the max/min width to the exact dimension of the image, for an arbitrary image.
this should do it...
<html>
<script src="http://code.jquery.com/jquery-1.11.1.min.js">
</script>
...
<div id="img-container"></div>
...
</html>
<script>
function loadImage(imgSrc) {
var newImg = new Image();
newImg.onload = function() {
var height = newImg.height;
var width = newImg.width;
$(newImg).css({
'max-width':width,
'max-height':height
});
$("#img-container").append(newImg);
}
newImg.src = imgSrc; // this must be done AFTER setting onload
}
loadImage('youimage.jpg');
</script>
you could also use server side code to get the image size.
try like this
var _URL = window.URL || window.webkitURL;
$("#file").change(function(e) {
var file, img;
if ((file = this.files[0])) {
img = new Image();
img.onload = function() {
alert(this.width + " " + this.height);
};
img.onerror = function() {
alert( "not a valid file: " + file.type);
};
img.src = _URL.createObjectURL(file);
}
});
Working demo:
http://jsfiddle.net/4N6D9/1/
I'm working on a website where if the browser window is smaller than a certain size, part of the background clashes with the text. Is it possible to change the background after a browser window becomes smaller than a certain amount?
You can hook into the window.onresize event to check the width and height of the window, then based on these values you can set the background color to what you desire.
window.onresize = function(event) {
var height = window.innerHeight;
var width = window.innerWidth;
}
This solution may have compatability issues in other browsers to IE and so the jQuery function is probably more prefered:
$( window ).resize(function() {
var height = $(this).height();
var width = $(this).width();
});
EDIT: (Example provided)
<script type="text/javascript">
window.onresize = function (event) {
var height = window.innereight;
var width = window.innerWidth;
if (width < 500 || height < 500) {
document.getElementById('Div1').style.backgroundColor = '#FF0000';
}
}
//OR WITH JQUERY
$(window).resize(function () {
var height = $(this).height();
var width = $(this).width();
if (width < 500 || height < 500) {
$('#Div1').css('background-color', '#FF0000');
}
});
</script>
<div id="Div1" style="width: 300px; height: 300px;">
test div
</div>
Please not that when using the innerHeight property in Chrome that the value is returned as undefined and so this does not seem to be supported. The jQuery method would be the preferred solution.
i'm working on a website and wondering if there is any code that I can add to a "Fixed in Window" Item that will be visible once a visitor has scrolled 200 Pixels, for example.
Couldn't find anything specifically for this in any other questions.
Cheers
My bad, I found this, perhaps this is what I'm looking for Use jQuery to show a div only when scroll position is between 2 points. Correct me if I'm wrong :-)
You can detect scrolling position with use of j Query and then if scroll is moved hide your div. Below given is example code. please review it and work on it little bit according to your requirement it is working fine with me.
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(function() {
$.fn.scrollBottom = function() {
return $(document).height() - this.scrollTop() - this.height();
};
var $el = $('#sidebar>div');
var $window = $(window);
var top = $el.parent().position().top;
$window.bind("scroll resize", function() {
var gap = $window.height() - $el.height() - 10;
var visibleFoot = 172 - $window.scrollBottom();
var scrollTop = $window.scrollTop()
if (scrollTop < top + 10) {
$el.css({
top: (top - scrollTop) + "px",
bottom: "auto"
});
} else if (visibleFoot > gap) {
$el.css({
top: "auto",
bottom: visibleFoot + "px"
});
} else {
$el.css({
//use your css property here if you want to display none a div
display: none,
bottom: "auto"
});
}
}).scroll();
});
});//]]>
</script>