I have a slider that is finished, but I have 1 issue.
I need to re-size the container to the windows size.
As you can see here
jQuery(document).ready(function(){
$(".toggle_window").click(function(){
$("#content").slideToggle("slow");
});
});
the slider disappear and I dont have any change to press the button so collapse the container again.
The problem I think is here #left and the high of this (height: 880px;), but I need to expand this guy at 95% of the webpage.
Which will be the best way to re-size the container?
I will appreciate your help.
Thnx in advance!
Cheers.
element #left height is set wrongly in your fiddle. Try setting the element height on document ready as
$("#left").height($( window ).height() - $("footer").position().left + 10);
If you want exactly 95% try like this,
$("#left").height($(window).height() /100 * 95 - $("footer").position().left);
Related
I have a script JS:
function thoat() {
var sples = $(window).width();
if (sples >= 320 && sples <= 480) {$('.projects').slice(0, 9).css('margin', '10px');
} else {$('.projects').slice(3, 6).css('margin', '10px');
}
}thoat();
Its when screen size btw 320 and 480 then select all elements if not select the three from bottom.
Its looks like work great but i try on a responsive screen test size with 320px and its not select all element not understand why? On 320px what write there not work
responsive test site where not work with 320px : screenfly
jsfiddle
Whats the problem? with script?
It works fine actually. The only problem is that you run your function just on DOM.ready(), but when you change the resolution on screenfly it does not cause the page reload, so DOM.ready() event is not fired, but $(window).resize() is. So you can add followingl line to your code
$(window).on('resize', thoat);
and it works!
jsfiddle
Screenfly
Just resize the screen to some mobile device and you'll see the result.
UPD It doesn't work at 320px cause of scrollbar, it's width is like 17px, and .width() method returns window width without scroll bar witdh, so , in your case it's out of range.
My background image loads blocky for some reason (i.e., the center doesn't load horizontally), but after any tiny window resize it snaps into full form. I wanted to add a small bit of Javascript to adjust the window size by 1 pixel to remedy this. Unfortunately, I'm getting no results with the below code:
<script>
$(document).ready(function(){
window.resizeTo(window.outerHeight, window.outerWidth + 1);
}
</script>
Anyone have any ideas why?
Thanks!
Try to close the DOM ready function:
$(document).ready(function(){
window.resizeTo(window.outerHeight, window.outerWidth + 1);
}); // <-- Here
I'm working on a snippet for a swipe gallery for mobile.
You can see it here http://codepen.io/piatra/full/Edtlq
[].forEach.call(slides, function(s){
s.style.width = mainContainer.offsetWidth + 'px';
});
My problem: Because the content is made up of multiple panels they need to be on the same line to the right. The size of a panel should be 100% of the screen so you only see one panel at a time. But i cannot set the size of the panel in css to 100% because that would push each panel on its own row.
Currently I am solving this in JS, ontouchstart I get the size of the main parent and set each slide to that width but I don't like this solution because when switching for landscape to portrait you have to touch the gallery for it to update, and even if I add an event lister to the change its still not a pretty solution.
Can I achieve this effect in CSS only? A gallery of panels on the same row with the width variable based on the parent ?
PS : Chrome dev tools > Emulate touch events
PPS :
Wrote down a simplified version http://codepen.io/piatra/pen/usaHo
Any improvement to this version is very much welcomed :)
A nice example is http://csscience.com/responsiveslidercss3/ but when adding a new panel you have to edit the CSS
I think this cant be done with pure css, especially since you want it to be easyly maintainable without need to change css when adding more panes.
One solution would be to use jquery to count the panes, then set the wrappe width and panes width accordingly to achieve the desired effect:
http://jsbin.com/idufaj/6/edit
You can add as many panes as you like, and the effect will allways presist.
$(document).ready(function() {
var panes = $(".pane").length;
var width = panes * 100 + "%";
var panewidth = 100/panes + "%";
$("body").css({ width : width });
$(".pane").css({width: panewidth });
});
In this example i use body as the wrapper, but it can be any element. In this case, as there are 3 panes the body width is set to 300% and the panes width is set to 33.3%. If you add another pane the body width will be 400%, and the pane width will be 25% and so on.
I am working in javaScript an jquery-ui an want to ask a question about resizing.Is it possible to resize only diagonally i.e Suppose I have a rectangle having width 200 and height 100 and I want to resize it by grabbing it one corner only in such a way that both height and width will increase together keeping the width/height ratio same and I am not allowed to increase only height or only width.
I have tried it using the handle option of resizable
$("#resizable").resizable({
handles: 'se'
});
JSFiddle example is here Resizing only diagonally
But still I am able to increase only height or only width changing my width/height ratio.
I am sorry if I am not clear.
Thanks Any help will be appreciated.
user like
<script>
$(function() {
$( "#resizable" ).resizable({
aspectRatio: 16 / 9 //(in your case it should be 2/1)
});
});
</script>
http://jqueryui.com/demos/resizable/aspect-ratio.html
updated demo
http://jsfiddle.net/bx2mk/765/
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);