Develop Reference

Three.js Progress Loader not hiding when model loaded

I have a page based on this example, and using the relevant lines from the webgl_material_bumpmap example for implementing a loading progress Dom Element.
The page is (temporarily) here. If what I have included below is not enough information, please see the source for this page.
My problem is that the Loading text block does not disappear when the model is loaded.
I show it using:
function installModel(file) {
if (model) {**strong text**
scene.remove(model);
}
render();
var loader = new THREE.JSONLoader(true);
loader.load("obj/" + file, modelLoadedCallback);
document.body.appendChild( loader.statusDomElement );
}
The init function (without the error handling stuff) is
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(50, theCanvas.width/theCanvas.height, 0.1, 100);
camera.position.z = 30;
camera.lookAt( scene.position );
controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.damping = 0.3;
controls.addEventListener( 'change', render );
createWorld();
installModel("room1.json");
render();
loader.statusDomElement.style.display = "none";
}
Why does the Loading text remain visible?

You probably need to add:
loader.statusDomElement.style.display = "none";
in your callback function modelLoadedCallback() after you print to the console.

I worked it out.
I had to add another div element called "prog"
then
var show
function show() {
document.getElementById("prog").style.display = "inline";
}
and
var loader = new THREE.JSONLoader(true);
document.getElementById("prog").appendChild(loader.statusDomElement );
loader.load("obj/" + file, modelLoadedCallback);

Isotope User Status javascript

I've built this isotope module - but I want to enhance it - so it snaps to the bottom, and can take updates from a json request. Also if a change occurs - like an online user views a profile - to make the change to a personal reference on the user's page.
http://jsfiddle.net/CXqM2/26/
Here is the current code
var $container = $( '#isotope' ),
// #see {#link http://fgnass.github.io/spin.js}
spinJsConfiguration = {
lines: 5, // The number of lines to draw
length: 3, // The length of each line
width: 2, // The line thickness
radius: 6, // The radius of the inner circle
color: '#666' // #rgb or #rrggbb or array of colors
};
// initialize isotope
// prevent "First item breaks Masonry layout" issue
// #see {#link http://isotope.metafizzy.co/docs/help.html#first_item_breaks_masonry_layout}
$container.isotope({
masonry: {
columnWidth: 30
}
});
// handle click events
$container.on( 'click', '.user', function( event ) {
var $this = $( this );
event.preventDefault();
// if not already open, do so
if ( !$this.hasClass( 'open' ) ){
var $openItem = $container.find( '.open' );
// if any, close currently open items
if ( $openItem.length ) {
closeItem( $openItem );
}
openItem( $this );
}
});
$container.on( 'click', '.close', function( event ) {
event.stopPropagation();
closeItem( $( this ).closest( '.user' ) );
});
function openItem( $item ) {
var $image = $item.find( '.user-image' );
$item.addClass( 'loading' ).spin( spinJsConfiguration );
// #todo we should only replace the image once
$image.attr( 'src', $image.data( 'src-large' ) );
// at least for the sake of this demo we can use the "imagesLoaded" plugin contained within
// Isotope to determine if the large version of the user image has loaded
// #todo Isotope v1 contains an outdated version of the "imagesLoaded" plugin - please use the current one
// #see {#link https://github.com/desandro/imagesloaded}
$item.imagesLoaded( function() {
$item.spin( false ).removeClass( 'loading' ).addClass( 'open' );
$container.addClass( 'item-open' ).isotope( 'reLayout' );
$item.append( '<div class="close">×</div>' );
});
}
function closeItem( $item ) {
$item.removeClass( 'open' ).find( '.close' ).remove();
$container.removeClass( 'item-open' ).isotope( 'reLayout' );
}
This demo
http://jsfiddle.net/CXqM2/85/
Is able to update the isotope with json data. I am able to re-populate the list with new json data updates.
I essentially want items no longer existing to fade off - remove
new items to be added on - add/insert
any priority updates like - user sent you a message to auto open on this for the user. How do I trigger this?
here is the code that repopulates every 10 seconds
getUpdate: function(){
function getRandomInt (min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
var that = this;
window.setInterval(function(){
console.log("new data time");
var rand = getRandomInt (0, 1);
that.populateIsotope(data[rand].stream);
//_re_invoke isotope
$container.isotope('reLayout')
},10000);
}

LATEST CODE ******** http://jsfiddle.net/CXqM2/209/ *******
This example will rely on some development on the backend to provide a priority element - using the notification date and the notification id to help identify the priority element in the stream. I've added the date sorting to the isotope code.
getSortData: {
date: function ($elem) {
var dates = $elem.attr('data-user-notification-date');
dateArray = dates.split('/'),
year = dateArray[2].substr(0, 4),
month = dateArray[1],
day = dateArray[0];
timeArray = dates.split(':'),
hours = timeArray[0].slice(-2),
minutes = timeArray[1],
seconds = timeArray[2];
return new Date(year, month, day, hours, minutes, seconds);
}
}

How to add prev and next button in slide show

I just made this program for slide show it is working well but i want to use previous and next buttons in the slide show and i don't have any idea how to do that so i put this here please help for the same
var image1=new Image()
image1.src="slide/23.jpg"
var image2=new Image()
image2.src="slide/7.jpg"
var image3=new Image()
image3.src="slide/4.jpg"
var image4=new Image()
image4.src="slide/5.jpg"
var image5=new Image()
image5.src="slide/6.jpg"
</script>
<img id="myImg"src="slide/2.jpg" name="img" width="1000" height="250"/>
<script>
var step=1
function slideImages(){
if (!document.images)
return
document.images.img.src=eval("image"+step+".src")
if (step<5)
step++
else
step=1
setTimeout("slideImages()",3000)
}
slideImages()
</script>

You probably want to abstract away some code so it can be easily reused in your functions:
// Dealing with the counter:
var step;
var steps = 5;
function increment() {
s = (s + 1) % steps;
}
function decrement() {
s--;
if (s<0) s = steps-1;
}
// Dealing with the slide show:
function show() {
document.images.img.src=eval("image"+step+".src")
}
function next() {
increment();
show();
}
function prev() {
decrement();
show();
}
// Automatic sliding:
window.setInterval(next, 3000);
Also, i would reconsider your approach to storing images:
function createImgBySource(src){
var img = new Image();
img.src = src;
return img;
}
var images = [
createImgBySource('slide/23.jpg'),
createImgBySource('slide/7.jpg'),
createImgBySource('slide/4.jpg'),
createImgBySource('slide/5.jpg'),
createImgBySource('slide/6.jpg')
];
Now you can change the increment and decrement functions to use images.length instead of steps, so you can add more images without having to alter other variables. Also, your show() function should look like this (getting rid of the nasty eval):
function show() {
document.images.img.src = images[step];
}

Try the below code
var ss = new TINY.fader.init("ss", {
id: "slides", // ID of the slideshow list container
position: 0, // index where the slideshow should start
auto: 0, // automatic advance in seconds, set to 0 to disable auto advance
resume: true, // boolean if the slideshow should resume after interruption
navid: "pagination", // ID of the slide nav list
activeClass: "current", // active class for the nav relating to current slide
pauseHover: true, // boolean if the slideshow should pause on slide hover
navEvent: "click", // click or mouseover nav event toggle
duration: .25 // duration of the JavaScript transition in seconds, else the CSS controls the duration, set to 0 to disable fading
});
got from Here also here is a sample Fiddle

I would consider using something like jCarousel.

I think you are best putting all of your images into an array and then looking over it. I am assuming that the image tag with the ID 'myImg' is the one that you want to update, as such you should use document.getElementByID('myImg') and not document.images.img.src=eval("image"+step+".src") -- eval should also be avoided as the performance is poor and it can be dangerous.
Put this as the end of your page:
<script type="text/javascript">
(function(){
var step = 0;
var images = [image1, image2, image3, image4, image5];
var image = document.getElementByID('myImg');
var slideImages = function() {
image.src = images[step].src;
step++;
if (step == images.length){
step == 0;
}
setTimeout("slideImages()", 3000);
};
slideImages()
})();
</script>

How do you control web audio API oscillator parameters with JQuery UI sliders without going through HTML form parameters?

I have been using the JQuery UI slider to control oscillator parameters with the web audio API but the way I've been doing it is by first creating a corresponding HTML range slider , then hiding it and then using the JQuery slider to control the range slider which in turn controls the respective oscillator param. I am wondering if/how to do this in a manner where the JQuery slider controls the oscillator parameters directly.
http://jsfiddle.net/95zbH/
$(function(){
context = new webkitAudioContext();
var pad1 = document.getElementById("pad1");
pad1.onmousedown= function () {
var pitchState = document.getElementById('oscPitch1').value;
oscillator = context.createOscillator(), // Creates the oscillator
oscillator.type = 2;
oscillator.frequency.value = pitchState;
oscillator.connect(context.destination); // Connects it to output
oscillator.noteOn(0);
};
pad1.onmouseup = function () {
oscillator.disconnect();
};
});
var pitchInput = document.getElementById("oscPitch1");
var sliderParams = {
'orientation': "vertical",
'range': "min",
'min': .5,
'max': 100,
'animate': true,
'step': 0.01,
'slide': function(event, ui) {
pitchInput.value = ui.value; // This remote controls the input slider
},
stop: function( event, ui ) {}
};
$('#sliderOne').slider(sliderParams);

Set oscillator.frequency.value from the sliderParams callback where you are now assigning the value to the html slider (replacing pitchInput.value = ui.value)
See: http://jsfiddle.net/fschwiet/95zbH/1/ (I didn't set the initial oscillator value, but moving the slider does update it)
$(function(){

Jquery plugin development, attach a browser event and methods

Ok so i'm learning to write plugins and the jQuery site for plugin authoring is damn confusing. I'm really trying to figure out how to add methods to my plugin that will fire based on a browser event. So basically I have a plugin that builds out a swipeable slide show for a mobile device. When the device is rotated I need it to rebuild the slideshow for the new dimensions. Right now I have it so it builds it the first time but I can't (a) figure out to add methods for different functions and (b) bind events to those specific methods. here's my code.
(function( $ ){
$.fn.jCarousel = function( options ) {
var empty = {}
var defaults = {
height: $(window).height(),
width: $(window).width(),
count: 1,
amount: $('.swiper', this).length,
thisone:this,
};
var options = $.extend(empty, defaults, options);
return this.each(function() {
options.thisone = this;
amount = $('.swiper', this).length;
holdWidth = options.width * options.amount;
$('.swiper', this).height(options.height);
$(this).height(options.height);
$('.swiper', this).width(options.width);
$(this).width(holdWidth);
$('.swipe_slide',this).width(holdWidth);
//==================================================================================================================
//==================================================================================================================
$('.swiper', this).each(function(i) {
var nwidth = options.width*i;
$(this).css('left',nwidth);
});
//==================================================================================================================
//==================================================================================================================
//==================================================================================================================
//==================================================================================================================
$('.swipe_slide', this).swipe(function(evt, data) {
if(data.direction=='left'){
//alert('count: '+options.count+" amount: "+options.amount);
if(options.count != options.amount){
moveWidth = options.count * -options.width;
$('.swipe_slide',options.thisone).css( "left" ,moveWidth );
options.count++
}else{
return
}
}else{
if(options.count!=1){
moveWidth = moveWidth+ options.width;
$('.swipe_slide',options.thisone).css( "left" ,moveWidth );
options.count--
}
else{
return
}
}
});
//==================================================================================================================
//==================================================================================================================
});
};
})( jQuery );

$(window).bind('orientationchange', $.fn.jCarousel);
You'll have to refactor your plugin a bit so that the function stores the options that are passed into it, otherwise running the function again on orientation change will reset the options to the defaults.