We Keep Coding

Resizing jQuery UI Dialog on Top of WebGL/X3DOM

I am developing a web application:
http://filebox.vt.edu/users/sharni/Radio/spectrum.html
Clicking on the help button pops up a resizeable help window. However, if the cursor moves outside of the dialog when resizing, the dialog stops resizing! Does anyone know how to prevent this from happening? Still, it is possible to resize the window by moving the cursor very slowly.
Thanks in advance!

Hey i got short solution for you:
Step 1: Create layer that will appears when user works with UI. That layer will cover canvas.
var coverLayer = $('<div>').appendTo("body").css({ "width" : "100%", "height" : "100%", "z-index" : "2", "background-color" : "rgba(124, 124, 124, 0.5)", "position" : "absolute" }).hide();
Step 2: Make layer visible only when user works with UI.
$(".ui-dialog").on( "resizestart dragstart" , function( event, ui ) {
coverLayer.show();
// here you can add some code that will pause webgl while user works with ui, so resizing and moving will be faster and smoother
});
$(".ui-dialog").on( "resizestop dragstop" , function( event, ui ) {
coverLayer.hide();
// here you unpause webgl
});
Step 3 (optional): Pause webgl while user works with UI. Couse if he does, he isn't probably interested in canvas, so you can make other stuff happening faster and smoother...
PS: You had same problem with dragging dialog, so I fixed this too simply with adding dragstart/dragstop. You can also add more events there.
EDIT:
Why that problem happen?
I guess its because of resize event. It is happening in some short periods and is responsible for element redraw (setting new width and height). I also think that it can detect if another event is triggered, then resize is not triggered anymore.
Now, because you are using webgl that eats a lot of javascript calculation power, then short periods for resize event are not short anymore. Since then, element is not redrawed that often as you want and mouse will appear futher from element which probably trigger some event that cause stop calling resize.
If you stop webgl, calling period will be short again, so it could prevent that problem, but I'm not very sure about that...

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.

Odd Draggable Behavior After Implementing Auto Scroll

I've implemented drag and drop using the jQuery UI draggable widget.
I'm now implementing auto scroll during drag operations. I set it up so that when you start to drag, gray overlays appear at the top and bottom of the browser window. When you drag into one of these overlays, the browser window starts to auto scroll.
You can see my test page at http://www.softcircuits.com/Client/scrolltest.html. Drag an item by dragging one of the crosshair icons on the left side.
But there's a problem: if you scroll to the bottom of the page, and then drag an item to the top overlay, it will scroll up as expected. However, for me, I get about half way up the page and the draggable helper won't go any higher. There's no way for me to drag all the way to the top of the page.
This most likely seems related to the Draggable widget. Is anyone able to see why this is happening? I'm using Google Chrome on Windows 7.

To be cross-browser compatible and to avoid wird behavior, I would recommend to use all JQueryUI draggable callbacks.
I read some days ago that the last version of Chrome has some really tricky problems with natives HTML5 draggable events.
For example, I have just checked your web page source code and you are using $('.drag-handle').on('drag', function(){...}); => You should use the drag callback.
I would also recommend to not use window as the scrollable container in your case. You should create a div to wrap all the tables contents and use it as a scroll container. I have already done this implementation in the past and it is working.
Don't forget to set the wrapper ID in the containment option durring the draggable widget creation.
If it always not working, you could also try to overwrite the helper position in the drag callback :
//Save the mouse position in global variables
$(document).mousemove(function(e){
window.mouseXPos = e.pageX;
window.mouseYPos = e.pageY;
});
$('[id^="drag-"]').each(function() {
$(this).draggable({
opacity: 0.7,
cursorAt: { top: 15, left: 50 },
scroll: true,
stop: function(){},
drag : function(e,ui){
//Force the helper position
ui.position.left = window.mouseXPos - $(this).draggable('option','cursorAt').left;
ui.position.top = window.mouseYPos- $(this).draggable('option','cursorAt').top;
});
});

Changing the draggable containment option from window to document worked for me.
$('.drag-handle').draggable({
...
containment: "document",
...
});
See: http://docs.jquery.com/UI/Draggable#option-containment

Strips Menu With JQuery

First of all, I am not an advanced JQuery developer, however, I have been creating what I call Strips Menu with JQuery, you can see it here by clicking the Preview link on top:
http://jsbin.com/uwopu3/edit
When I click on a strip, it promptly shows the contents relevant to hovered strip but I need sliding effect something that has been done on this site:
http://jeemsolutions.com/
I tried giving the animate function a time of 1500, but still no sliding effect.
How do I give it sliding effect like that of jeemsolutions for which the link is provided above.
Thank You

You are using the animate function wrong. It takes the CSS properties you want to animate to as arguments, so try something like:
var w = $('#slide').width() - $('.bar').size() * $('.bar').width() + 10;
$(this).css('text-indent', '0px');
$(this).animate( {width: w}, 500);

I know this might sound wrong, but why don't you simply use jQuery Accordions? It does what you need, and is supported against different browsers and all that.
Cheers

YUI menu with animation

Is it possible to have YUI menus e.g. slide in as opposed to simply popping up?

Of cause. You should set up SLIDE effect for the widget.
var oMenu = new YAHOO.widget.Menu(
"productsandservices",
{
position: "static",
hidedelay: 750,
lazyload: true,
effect: {
effect: YAHOO.widget.ContainerEffect.SLIDE,
duration: 0.25
}
}
);

One of the older (be careful as at the time I used it, it required patches) series of examples for YUI MenuBar hacks in this functionality using various events:
http://developer.yahoo.com/yui/examples/menu/topnavfrommarkupwithanim.html
I don't think this is available out of the box, which is a bummer. Another peeve of mine is that there's no (built-in) way to hide submenus automatically once the user has moused over some options. This makes sense for accessibility (and is the reason it is like that, according to the YUI team), but there's nothing I can do about clients who will only see it as broken.