We Keep Coding

Media queries and height & width defined in variable

I found this plugin online:
https://github.com/frenski/quizy-memorygame
As you can guess, it's a memory game in which you can choose the images to display on the cards. And it's great. But the thing is I'm trying to use media queries to make it more responsive, and it worked great until I realized that the width and height of the cards are defined not only in the CSS but also in a variable.
var quizyParams = {itemWidth: 156, itemHeight: 156, itemsMargin:40, colCount:3, animType:'flip' , flipAnim:'tb', animSpeed:250, resultIcons:true, randomised:true };
$('#tutorial-memorygame').quizyMemoryGame(quizyParams);
$('#restart').click(function(){
$('#tutorial-memorygame').quizyMemoryGame('restart');
return false;
});
How can I change the itemWidth and itemHeight depending on the size of the screen? Is that even possible?
I tried using a function like:
if(screen.width <= 480){
//change width and height to this
}else if (screen.width <= 780){
//change width and height to that
}else (screen.width <= 960){
//change width and height to this
}
But it didn't work...
All ideas are welcome! And thank you for your help.

Using if (screen.width <= 480) might not work onload, try use window.matchMedia() to match your CSS media queries:
if (window.matchMedia('(max-width: 480px)').matches) {
//...
} else {
//...
}

try this hope helpful you ....
$(document).ready(function() {
function checkWidth() {
var windowSize = $(window).width();
if (windowSize <= 479) {
console.log("screen width is less than 480");
}
else if (windowSize <= 719) {
console.log("screen width is less than 720 but greater than or equal to 480");
}
else if (windowSize <= 959) {
console.log("screen width is less than 960 but greater than or equal to 720");
}
else if (windowSize >= 960) {
console.log("screen width is greater than or equal to 960");
}
}
// Execute on load
checkWidth();
// Bind event listener
$(window).resize(checkWidth);
});​

opacity on scroll with jquery

I'm trying make the opacity of my div gradually increasing, as will moving the scroll, like this
$(document).ready(function() {
$(document).scroll(function(e) {
opacidade();
});
var element = $('#element');
var elementHeight = element.outerHeight();
function opacidade() {
var opacityPercent = window.scrollY / 100;
if (scrollPercent <= 1) {
element.css('opacity', opacityPercent);
}
}
});
is working but the opacity is uping very fast i find example decrease opacity but no uping upacity if in my rule css my div is declared opacity 0 any knwo how should be

Altered:
jsFiddle
$(document).ready(function() {
$(document).scroll(function(e){
opacidade();
});
var element = $('#element');
var elementHeight = element.outerHeight();
function opacidade(){
var opacityPercent = window.scrollY / $(document).height();
console.log(window.scrollY, opacityPercent);
element.css('opacity', opacityPercent);
}
});
The scrollY is a pixel value, so unless you limit your possible scroll range [0 - 100], there's no reason to divide it by 100.
So what you need is divide the scroll by the total document's height (or whatever it's parent that contains it and display a scrollbar)

Keep aspect ratio of div when resizing window

I have an issue which is a little hard to explain. I have a div which has a 2:1 aspect ratio. And I want it to have a 100% width or height based on the browsers window size.
If the window height is greater than the divs height the the size should be based on 100% width.
And if window height is less than the divs height the size should be based on 100% height.
With my curren approach it is flashing when I size larger.
Look at this link http://acozmo.com/me/ for a demo.
HTML
<section id="container">
</section>
JQuery
function update() {
var $documentHeight = $(document).height();
var $windowHeight = $(window).height();
var $documentWidth = $(document).width();
var $windowWidth = $(window).width();
var $container = $('#container');
if ( $windowHeight >= $documentHeight ) {
$container.width($windowWidth);
$container.height($windowWidth / 2);
}
if ( $windowHeight < $documentHeight ) {
$container.width($windowHeight * 2);
$container.height($windowHeight);
}
}
$(document).ready(function() {
update()
});
$(window).resize(function() {
update();
})

To resize to fit inside the window while maintaining aspect ratio, set up your container with an initial size and then divide the area width by the container's width to get the scale. You then need a check to make sure that scale doesn't make the height too great. See code below and fiddle - I've added the case where the height is greater than the width too for completeness.
To stop the flashing, throttle your resize function using setTimeout. This will ensure that update is only called once every n milliseconds. You can play with the number until you find the right balance.
var container = $('#container'),
updateTimeout,
threshold = 100;
function update() {
var windowWidth = $(window).width(),
windowHeight = $(window).height(),
width = container.width(),
height = container.height(),
scale;
if ( windowWidth > windowHeight ) {
scale = windowWidth / width;
if ( height * scale > windowHeight ) {
scale = windowHeight / height;
}
}
else {
scale = windowHeight / height;
if ( width * scale > windowWidth ) {
scale = windowWidth / width;
}
}
container.width(Math.round(width * scale));
container.height(Math.round(height * scale));
}
$(document).ready(function() {
update();
});
$(window).resize(function() {
clearTimeout(updateTimeout);
updateTimeout = setTimeout(update, threshold);
});

It's probably happening because the fact that you are using a second if, instead of an else . . . it hits the first if, shrinks the height, and then hits the second if and increases it.
Try changing this (the second if):
if ( $windowHeight < $documentHeight ) {
. . . to this:
else {

Limit text length based on fitting text inside fixed width and height box

I am writting script which limits entered text inside by checking if text fits inside div box which height & width is fixed if not tries to lower font size and then again checks then reached minimum font size it limits text inside textarea. I have accomplished this but it sometimes reaches limit with over height and it do not allow overwrite text then selected.
Here is my script:
function onEdit(e) {
var notebox_tmp = $(".notebox_tmp");
var maxHeight = 120;
var minFontSize = 25;
notebox_tmp.css("font-size","50px");
notebox_tmp.text($(this).val());
var currentHeight = notebox_tmp.height();
var currentFontSize = parseInt(notebox_tmp.css("font-size"),10);
while (currentHeight > maxHeight && currentFontSize > minFontSize) {
notebox_tmp.css("font-size", currentFontSize);
currentFontSize -= 0.25;
currentHeight = notebox_tmp.height();
}
if (currentFontSize <= minFontSize) {
e.preventDefault();
}
};
$("textarea").keypress(onEdit);
Here is my current script demo:
http://jsfiddle.net/6pfCM/9/

JavaScript window resize with proportions

I open a window with w=window.open('','', 'width=1000,height=700'); than i want this window to be resized with proportion 10/7.
for example: 500/350; 100/70 ...
i've maximum and minimum sizes already:
var w;
function openwindow()
{
w=window.open('','', 'width=1000,height=700');
w.focus();
resize(w);
}
function resize(w_obj) {
w_obj.onresize = function(event) {
width = w_obj.innerWidth;
height = w_obj.innerHeight;
// if popup width is greather then 1000px
if (width > 1000) {
w_obj.resizeTo(1000,700);
}
// if popup height is greather then 700px
if(height >700) {
w_obj.resizeTo(1000,700);
}
if (width < 500) {
w_obj.resizeTo(500,350);
}
if(height < 350) {
w_obj.resizeTo(500,350);
}
}
}

You should use outerHeight as that's what resizeTo's arguments mean. A problem however is that you cannot know whether the user resizes the width or the height of the window. Thus, you do not know what dimension to use as the reference and which to calculate.
Anyway, what you want is the following:
Clamp width and height between its minimum and maximum size. You can use Math.min/Math.max for this.
Set height to width multiplied by the 7 / 10 ratio.
See http://jsfiddle.net/bSE9C/1/.
var width = w_obj.outerWidth;
var height = w_obj.outerHeight;
width = Math.min(width, 1000); // may not exceed 1000 maximum
height = Math.min(height, 700);
width = Math.max(width, 500); // may not exceed 500 minimum
height = Math.max(height, 350);
height = width * 7 / 10;
w_obj.resizeTo(width, height);