I am in a process to make a slideshow responsive. I am using simple jQuery to achieve this. My logic is:
If width of window is < 620, make the changes in CSS through jQuery.
else
set default(fixed) css
I have a element who has top:470px fixed css when the window is of normal size. If the size of the window goes below 620, I've changed this to be relative to the image size (which changes on window resize). Here is my code:
function resizeVideo() {
var width = $(window).width();
if(width < 620) {
$('#controls').css('top', $('img').height());
}
else {
$('#controls').css('top', '470');
}
}
$(window).resize(resizeVideo);
In this way, the controls would stick to the bottom of the image when size is less than 620. Some of the problems which are stopping me right now are:
Whenever I'm maximizing the window from a size which is less than 620, the images scale back to its original sizes, but the #controls element remains at the same height as it was before maximizing.
When I resize the window to a size greater than 620, then too the #controls stay somewhere around 345px when in actual, the height of the image is greater.
Whenever the image in the slideshow changes and I resize the window at that time, the #controls goes at the top of everything, i.e. it doesn't apply the top: property at all.
I have asked all these queries in on single question because all of them are about the #controls element and I believe that fixing one would automatically fix others. Any pointers would be highly appreciated!
You need the 'px' suffix when manipulating the css via jQuery.
function resizeVideo() {
var width = $(window).width();
if(width < 620) {
$('#controls').css('top', $('img').height()+'px'); // $.height() returns the height without 'px' - so we need to add it manually
} else {
$('#controls').css('top', '470px');
}
}
$(window).resize(resizeVideo);
Think you have to wrap a closure function inside .resize() e.g. $(window).resize(function(){ resizeVideo(); });.
Also because the function resizeVideo is not a reference you will have to call it with ()
For the jquery .css() function they've made some css hooks you can use without strings so to apply css it will be:
$('#controls').css({top: 470 + "px"});
Related
I am new to jQuery. And I can't figure out the solution to this problem.
So, the problem is that I want a fixed header on my website. I did that with CSS. But I want to give the main container div(right below the header) a margin-top of the height of the header.
For example, if the #masthead (header) height is 100px, I want to give a margin-top of 100px to .site-container.
I can easily do it with CSS, but due to some reason, there will be different header height on different pages. Or let's suppose that I don't know the height of the header.
So I want to do it using jQuery.
Here is the code -
jQuery(document).ready(function($) {
var header = document.getElementById("masthead");
var header_height = header.offsetHeight + "px";
$( '.site-content' ).css( {
'margin-top': header_height
} );
});
It works perfectly. But there is just one problem.
That, the header height on my website changes in different screen size. In Desktop Screen size, the #masthead height is 80px, in tablet, the screen size is 160px and in mobile, it's 60px.
But, the value of header height does not change with the change in screen size in jQuery.
In jQuery, I want the value of the variable header to change dynamically, with the change in screen size.
Please note that I am working on a WordPress website.
Please help me.
Thank you.
Use:
Use a window resize function
You could also use: (to make your life easier :)
jQuery selectors
.outerHeight() to "Get the current computed outer height (including padding, border, and optionally margin)"
Example code:
jQuery(document).ready(function($) {
// When the window resizes
$(window).on('resize', function () {
// Get the height + padding + border of `#masthead`
var mastHeight = $('#masthead').outerHeight();
// Add the height to `.site-content`
$('.site-content').css('margin-top', mastHeight);
});
// Trigger the function on document load.
$(window).trigger('resize');
});
Write the same function on window.resize.
By the way, after resize the screen reload the page, hope your code will work as it will get the document ready function.
You can execute the same function on both page load and window resize.
jQuery(document).ready(function($) {
function resizeContent(){
var header = document.getElementById("masthead");
var header_height = header.offsetHeight + "px";
$( '.site-content' ).css( {
'margin-top': header_height
});
}
resizeContent();
$(window).resize(resizeContent);
});
I have an image which is 100% of the window. Inside I have an absolutely positioned div (with the class caption) which displays a header and some text. This caption has a min-width of 36%. My website if fully responsive.
I am using media queries to reposition the caption on tablets and mobiles. However, sometimes the text inside the item is too large - the height of the caption is greater than the image.
I am using the following code to fix this using javascript, but it feels a big buggy (and it does not work when the user resizes the browser):
window.onload = function(){
setWidth();
};
var count = 0;
function setWidth() {
$('.item').each(function() {
if ( $(this).find('.caption')[0].scrollHeight > $(this).height() && count <= 100) {
$(this).find('.caption').css('width', $(this).find('.caption').width() + 10);
count++;
setWidth();
}
});
}
Is there a way I could achieve the same effect using just css. Something where max-height on the caption is 100%, the min-width is 36% and the width will change accordingly as the height of the caption changes.
Difficult to see whether CSS is feasible without markup for your example. As for the JavaScript, you want to attach your resize function to the window.onresize event, this will call whenever the window is resized.
See example on JSFiddle
window.onresize = updateDimensions;
function updateDimensions(e) {
document.getElementById('width').innerHTML = window.innerWidth;
document.getElementById('height').innerHTML = window.innerHeight;
}
updateDimensions();
I'm trying to responsively convert a list of images into a carousel. I am using the swipe.js (swipejs.com) libary as it's performs perfectly.
I want the carousel to be initiated when the body width reaches less than 540px but reversly if the window is resized to a body width that is greater than 540px this is reverted.
$(window).resize(function() {
var bodyWidth = $('body').width();
if(bodyWidth < 540){
loadCarousel();
}else if(bodyWidth > 540) {
unLoadCarousel();
}
});
function loadCarousel() {
window.deviceSwipe = new Swipe(
document.getElementById('device-slider')
);
}
function unLoadCarousel() {
}
Now this is close to how I want it (I believe), my real question is, how do I unload(disable?) this carousel and remove the inline styles swipe.js includes?
I can use the following line to remove the styles but this seems like a bit of a bodge job.
$('#slider-container li, #slider-container ul, #device-slider').attr('style', '')
This also doesn't stop swipe.js from just re-applying the styles on window resize (even if the bodyWidth is greater than 540px for some reason).
Any help would be greatly appreciated!
You can use method called kill as deviceSwipe.kill()
I'm trying to optimise my website for different resolutions. In the center of the website I have a DIV that currently has a fixed size. I'm trying to make its size (and contents) change according to the size of the browser window. How do I do that?
This is my website if you want to take a look at its code:
http://www.briefeditions.com
If you resize the page the div will resize with it and on load of the page.
$(window).on('load resize', function(){
$('#div').width($(this).width());
});
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
$(document).ready(function(){
var windowHeight = $(window).height();
$('#divID').css('min-height',windowHeight+'px');
});
UPDATE
If you want that site will resize based on browser resize then use % instead of px
CSS:
html {height:100%; overflow:hidden}
body {height: 100%;}
I guess you need screen width and height for client(users) machine.
at onload of page get screen width & height and set those values to divs using jquery/javascript
var userscreen_width,userscreen_height;
userscreen_width = screen.width;
userscreen_height = screen.height;
check this for more info
Keep in mind that in your example iframe also has fixed size. You should also resize it to the parents width. In your example this would work:
$(window).on('load resize', function(){
$('#content, #content > iframe').width($(this).width());
});
Keep in mind that you must remove all margins, as well as absolute positioning like: top, left, position:absolute from you element styles.
I checked the code from the provided link in question.
Change width to 80% in #content style.
And in .wrapper change width to 100%.
You have used mainly 920px for width, so whenever you will resize window the control will not re-size. Use equivalent % instead of 920px;
You can do like this
var width = $(window).width();
$("#divId").width(width);
jQuery UI v1.8.17 (testing in FF 10.0 on Ubuntu)
Update: I've put my script and html on jsFiddle: http://jsfiddle.net/JhqrX/3/
We are trying to fit large data tables into a fixed width design, and have opted for initially displaying a scaled down version of the table which can be clicked on to view at 100%.
I have found the jQuery UI size effect method, and it has a nice effect where it also scales everything inside the tables (cells, padding, text/font).
However, one problem is that we have to specify the new height and width (it would be great if we could just pass a width and it maintained aspect ratios) - but the other, much larger, problem is that it is not actually sizing to the specified dimensions.
For example - I have a table that is 502x60 and want that to fit into 300x36. Passing this height and width as parameters into the size method gets me a table that is about 354x40. When I reset to 502px in a subsequent size request, it actually is set to about 492px. Subsequent resizing seems to bounce between a width of 334 (when I want 300) and 492 (when I want 502).
$(document).ready(function() {
/* create a selector for all tables over the width limit */
$.expr[':'].wideTable = function(obj) {
return $(obj).width() > 300;
}
/* create an array of width table dimensions */
var wideTableWidths = [];
$('table:wideTable').each(function() {
wideTableWidths[$(this).attr('id')] = {
width: $(this).width(),
height: $(this).height(),
ratio: $(this).height() / $(this).width(),
scaled: false,
};
});
/* set up the click event to resize the tables */
$('table:wideTable').click(function() {
if (wideTableWidths[$(this).attr('id')].scaled) {
/* if the table is currently scaled, we can reset to original height and width as stored */
$(this).effect("size", {to: {width: wideTableWidths[$(this).attr('id')].width, height: wideTableWidths[$(this).attr('id')].height} }, 0);
wideTableWidths[$(this).attr('id')].scaled = false;
} else {
/* if the table requires scaling, we know we want a width of 300px and the height should be set to match the original aspect ratio */
$(this).effect("size", {to: {width: 300, height: 300 * wideTableWidths[$(this).attr('id')].ratio} }, 0);
wideTableWidths[$(this).attr('id')].scaled = true;
}
});
/* initialise the page so that all wide tables are scaled to fit */
$('table:wideTable').click();
});
Reviewing the jsFiddle you have provided, I found the solution to the problem.
The initial ratio calculation doesn't take into account the padding and border values of table td.
You need to subtract these from the height and width.
This updated jsFiddle demonstrates the solution.
Hope that helps.
I'm not sure this is related, but what is your doc type? I had issues with height/width calculations and not having a doctype defined with jqueryui. Try <!DOCTYPE html> if you dont already have one.
I noticed that you have not set the scale argument within your .effect call.
The default value for scale is both which means that the resize affects both border and padding values.
In obtaining your original height and width values, you have used:
width: $(this).width()
height: $(this).height()
which return the content width of the elements (ie, not including the border, padding, or margin).
You can try using the .outerWidth() and .outerHeight() methods which include the border and padding, or specify scale: 'content' in your call to the .effect method. For example:
$(this).effect("size", {to: {width: 300, height: 300 * wideTableWidths[$(this).attr('id')].ratio, scale: 'content'} }, 0);