We Keep Coding

How to disable parallax wagerfield on small resolution?

I use this parallax, but can't disable it on mobile?
I found some methods like this:
scene = $('#scene').parallax();
scene.parallax('disable');
But it didn't work. Can anybody help?

I would rather go in different direction. Instead of making something disable on small screens make it working only on larger devices:
if ($(window).width() > 640) { //set up breaking point
$('#scene').parallax(); // this or any other code you need
}

If you want to disable parallax straight after it's been initialized you should wrap your scene.parallax('disable'); in a setTimeout function. If you look at the source code of Parallax.js you will see that there's supportDelay: 500 value which is used as an argument in enable function. According to that your code for disabling would look like this:
var scene = $('#scene').parallax();
setTimeout(function () {
scene.parallax('disable');
}, 500);
Update:
Just found an article that explains different perspective on disabling parallax.js on small devices.

Moving content blocks using javascript for responsive design

I'm working on a highly responsive website at the moment and I hit 2 areas where certain blocks of content need to move to others areas of the site. It would not be possible to do so purely with CSS. I suppose I could relatively reposition the blocks but as the dimensions change this isn;t really possible.
The option I am thinking of is, when a media query gets triggered, to then pull a block out of the page and append it in elsewhere where I need it.
I realise this is not ideal bit what I am wanting to ask is if this is a reasonable thing to so.
I know some of you may say reorder some of the markup but that is not possible. As stated above, I know falling back to javascript is not ideal but it would suit this and I don't particularly wish to duplicate content just so I can avoid the use of javascript.
Flexbox would be perfect but support is not where I want it to be currently for me to use that.
What do people here think? Any other solutions?

The right way is to listen to media queries using MediaQueryList:
var mql = window.matchMedia("(max-width: 320px)");
mql.addListener(function(event) {
if(event.matches) {
// Window width is less than or equal to 320, do something cool.
} else {
// Window width is more than 320, do something else.
}
});
The events will trigger when the query is either met or 'unmet'.
Alternatively, you can listen to a resize event, but note your function will get triggered for every new dimension. (Assuming jQuery in the code below.)
$(window).resize(function() {
if($(window).width() <= 320) {
// Window width is less than or equal to 320, do something cool.
} else {
// Window width is more than 320, do something else.
}
});
Like you said yourself though, using JS to make your layout responsive is generally NOT advisable. You can never assume all your users have JS enabled and all goes well.
I would rather see you solve this by restructuring your HTML and CSS. If the content layout has to change a lot, try outputting a block of content in two different places in your HTML and toggling visibility with CSS media queries (setting one to display:none; and the other to display:block;). You should be able to solve most responsive layout issues by rethinking your website structure.

Others looking for a solution may be interested in the Bootstrap Toolkit JS library available here: https://github.com/maciej-gurban/responsive-bootstrap-toolkit
Responsive Bootstrap Toolkit provides an easy way of breakpoint
detection in JavaScript, detecting changes in currently active
breakpoint, as well as executing any breakpoint-specific JavaScript
code.
The SASS module enables quick and simple styling for elements needing
different property values for each screen resolution.
Then you can do things like:
(function($, document, window, viewport){
// Listen to resize event
$(window).bind('resize', function() {
// Default 300ms poll delay
viewport.changed(function() {
// Debug
console.log( 'Current breakpoint: '+ viewport.current() );
// Trigger custom event
$('body').trigger('viewportChanged', [viewport.current()]);
}, 300)
});
// Register event listener
$(document).on('viewportChanged', 'body', function(event, current) {
console.log('Current breakpoint: '+ current);
}
})(jQuery, document, window, ResponsiveBootstrapToolkit);

You could check out some of the already available responsive design HTML boilerplates like Twitter Bootstrap or Zurb Foundation. Maybe their existing configurations satisfy your need.

I have a similar problem on two websites and i do:
JavaScript/jQuery with the window re size event and have breakpoints in JavaScript to. I then remove the item and append/prepend it where i want it to be.
On my other website i use Twitter Bootstrap which is very responsive and looks nice.
I would personally go with Twitter Bootstrap as its a nice grid system. If your site is very complex and cant be done using Twitter Bootstrap them capturing the window re size event is the best way.
$(window).resize(function() {
//Use $(window).width() and maybe some ifs/a switch to handle break points
if($(window).width()<700){
//Move it here
}
});

With CSS and JS it can be done :) You can clone the content to another section with jquery (append), then using media queries you can control what shows.
Here is what I do:
I do the appendTo:
$( $('.goto').html() ).appendTo('.mobile')
Here's an example I did:
http://jsfiddle.net/Riskbreaker/vkfWd/
This might not be what you are looking for (since its really not moving it but cloning the content )but this is the way I do it.

Complications using Javascript onresize function

I am working on a prototype of a project in which I need to adjust the look and feel of site content according to the browser window size.
Now for the prototype I am using a sample image and I want to adjust the height and width of the image as per window's height and width.
Here's the code that I am using:
$(window).resize(function() {
document.write("<img src='sample_image.jpg' border='0' height='"+window.innerHeight+"' width='"+window.innerWidth+"'>");
});
The above code doesn't work properly. I want to dynamically change the image height and width as user resizes the window. I also tried implementing this solution. But that didn't work either. Any ideas how can I solve this?

Well, since this is needed for testing purposes only, and it seems that you use jQuery, try this code:
<img src="sample_image.jpg" border='0' height="1" width="1" style="display: block;">
<script>
var resize = function() {
$("img").width($(window).width()).height($(window).height());
};
$(window).resize(function() {
resize();
});
resize();
</script>​
DEMO: http://jsfiddle.net/GvRJ7/
Otherwise, myself and other guys here strongly recommend you using good HTML/CSS markup to make your design fit any resolution.

Instead of window.innerHeight and window.innerWidth you can try using percentage.That Will Resize your image accordingly to windows height andwidth.
document.write("<img src='sample_image.jpg' border='0' height='"70%"' width='"70%"'>");

Think of how often window.resize() fires (if you have any doubt, console.log() it). Only inexpensive operations should be performed inside it, like incrementing a counter, or calculating a position.
In your particular case, I think a 100% width/height image will work using just CSS (or CSS generated with JavaScript if needed). Of course, this will look bad as the image gets beyond its real size, and waste bandwidth when it is below its real size, but it will have the equivalent effect to your code at a fraction of the expense.
As a side note, document.write() should rarely be used. Use DOM manipulation functions instead.

How can I hide some ID elements using Javascript if the browser window is less than a given size?

I have been looking for an answer to this problem for hours and can't find anything that works.
I need to make some elements if a web page not visible if the browser window width is less than a given size. This is because there are some fixed position "buttons" on the left side of the window which expand when rolled-over, BUT if the window is less than about 1056 pixels in width, the buttons overlap the main page contents.
I have a script for returning the window size and putting that value into a variable.
I have got it to show a message if the variable value is less than 1056. (for testing)
I have seen ways how to make things visible or not with jQuery and and with Javascript but none of them work for me.
The id of the image I'm trying to hide is #go2.
here is a part of the script I have been trying to get to work:
if (viewportwidth <1056)document.write('<p>Your viewport width is LESS than 1056</p>');
if (viewportwidth <1056)document.getElementById('go2').style.display = 'none';
I have had to use {literal} tags as the pages are using SMARTY templates!
I am very new to javascript and jQuery and wouold appreciate any help.
Thanks.

To make sure that the behavior happens when the user resizes the window, you can also bind to the resize event:
jQuery(window).resize(function() {
if(jQuery(window).width() < 1056) {
jQuery(".hide-these").hide();
}
});

You can do, with jQuery:
if(viewportwidth <1056) {
$('.target').hide();
}
Also, you can hide the elements with CSS3, like so:
#media only screen and (min-width: 1056px) {
#go2 {
display:none;
}
}

CSS3 media queries do what you want without Javascript, however browser support is pretty patchy:
http://www.w3.org/TR/css3-mediaqueries/
Alternatively, you could use Javascript as you've suggested above, with the usual caveats about JS being turned on etc. JQuery makes it easier, if you like Javascript libraries:
http://www.ilovecolors.com.ar/detect-screen-size-css-style/
If not, there are plenty of tutorials you can Google that explain how to query window size with Javascript.

How can I resize a swf during runtime to have the browser create html scrollbars?

I have a swf with loads text into a Sprite that resizes based on the content put into - I'd like though for the ones that are longer than the page to have the browser use its native scroll bars rather than handle it in actionscript (very much like http://www.nike.com/nikeskateboarding/v3/...)
I did have a look at the stuff nike did but just wasn't able to pull it off. Any idea's?

The trick is to use some simple JavaScript to resize the Flash DOM node:
function resizeFlash( h ) {
// "flash-node-id" is the ID of the embedded Flash movie
document.getElementById("flash-node-id").style.height = h + "px";
}
Which you call from within the Flash movie like this:
ExternalInterface.call("resizeFlash", 400);
You don't actually need to have the JavaScript code externally, you can do it all from Flash if you want to:
ExternalInterface.call(
"function( id, h ) { document.getElementById(id).style.height = h + 'px'; }",
ExternalInterface.objectID,
400
);
The anonymous function is just to be able to pass in the ID and height as parameters instead of concatenating them into the JavaScript string.
I think that the JavaScript is fairly cross-platform. If you want to see a live example look at this site: talkoftheweather.com. It may not look as though it does anything, but it automatically resizes the Flash movie size to accommodate all the news items (it does this just after loading the news, which is done so quickly that you don't notice it happening). The resize forces the browser to show a vertical scroll bar.

I've never done it that way around but I think swffit might be able to pull it off.

I halfway looked at swffit but the height (and width sometimes but mainly height) would be dynamic - swffit let's you declare a maxHeight but that number would be constantly changing...maybe I could figure out how to set it dynamically. A great place for me to start though - thanks!

What I've mostly been using if for is to limit how small you can make a "fullbrowser" flash, and for that it works great.
Happy hacking!
(and don't forget to post your findings here, I might need that too soon ;))

SWFSize
See here for more details.
Intuitsolutions.ca