We Keep Coding

How do I animate/interpolate between two CSS values in Javascript

The following code is working fine, but I'm looking for a way to animate/interpolate between the two creating a slide effect. How can I achieve this?
(I need to have the odd click function as is probably because of how the rest of the site works, otherwise I would have used the jqueryUI slide function)
$('.boxbtn').on('click', function () {
var boxwidth = $('.box').width();
console.log(boxwidth);
console.log('-' + boxwidth + 'px');
var oddClick = $(this).data("oddClick");
$(this).data("oddClick", !oddClick);
if (oddClick) {
$(".box").css('margin-left', ('-' + boxwidth + 'px'));
}
});

Why does my javascript window.open function read the urls, but not the width and height parameters from an array?

Years ago, I built my website with a lot of flash functionality, though based on html files. I've been working on html/css/javascript alternatives, but got stuck on one last page. It includes a simple (javascript) slide show with backwards and forwards buttons and a clickable image that opens into a customized window. In the Flash version the images are swf files with the following actionscript embedded:
movieclip_inst.onRelease = function():Void {
getURL("javascript:openNewWindow('Photopages/A01La_Jolla1.html', 925, 693)");
}
calling the following javascript function in the head of the html file:
function openNewWindow(page, width, height) {
OpenWin = this.open(page, "Illustrationslideshow", "toolbar=no, menubar=no ,location=no, scrollbars=yes, resizable=yes, statusbar=no, width=" + width + ", height=" + height + ", top=" + (screen.height/2 - height/2) + ", left=" + (screen.width/2 - width/2) + "\"");
}
This opens up the individual html files, that are listed in an external array, like so:
function setupPages() {
var pages = new Array();
pages[0] = 'Photopages/A01La_Jolla1.html', 925, 690;
pages[1] = 'Photopages/A02La_Jolla2.html', 888, 650;
. . .
return pages;
}
This works perfectly with the Flash version, but when I try to apply the function in the body of the html file:
<img src="images/photosforswfs/La_Jolla_01.jpg" id="artwork" />
it will only call up the html image file, but not adhere to the sizes I set. The windows open up in the same size as the originating window or as a tiny square, depending on the browser. Here's the set up of the pages variable in the head of the html document:
var pages = new Array();
pages = setupPages();
The array also contains the images and captions, set up in the same way:
function setupSlides() {
var slides = new Array();
slides[0] = 'images/photosforswfs/La_Jolla_01.jpg';
...
return slides;
}
and
function setupCaptions() {
var captions = new Array();
captions[0] = '<br />Louis Karhn building in La Jolla, CA | 1';
...
return captions;
}
The slide show is set up as follows:
var slides = new Array();
slides = setupSlides();
var captions = new Array();
captions = setupCaptions();
var currentSlideNum = 0;
var numSlides = slides.length;
function previousSlide() {
if (currentSlideNum == 0) {
currentSlideNum = numSlides-1;
} else {
currentSlideNum--;
}
var slideObj = document.getElementById('artwork');
slideObj.src = slides[currentSlideNum];
var captionObj = document.getElementById('caption');
captionObj.innerHTML = captions[currentSlideNum];
}
function nextSlide() {
if (currentSlideNum == numSlides-1) {
currentSlideNum = 0;
} else {
currentSlideNum++;
}
var slideObj = document.getElementById('artwork');
slideObj.src = slides[currentSlideNum];
var captionObj = document.getElementById('caption');
captionObj.innerHTML = captions[currentSlideNum];
}
What I am doing wrong? I am a total newbie, cutting and pasting code rather than writing it. Nothing I tried would fix the problem. Please help!
janeDee

Your pages[0] array position is saving only Photopages/A01La_Jolla1.html and returning the last value (690).
If you want to have all that data in the pages array, you could make it an object or another array:
pages[0] = ['Photopages/A01La_Jolla1.html', 925, 690];
this way you would have ask for pages[0][1] and pages[0][2] to get the sizes.
other way is using an object:
pages[0] = {url:'Photopages/A01La_Jolla1.html', w:925, h:690};
This way you would have to ask for: pages[0].w and pages[0].h
At the end, of course, you'd need to change a bit the call to your function to specify that with is pages[0].w and so on, but that is simple.
openNewWindow(pages[0].url, pages[0].w, pages[0].h);
or you could just send the array item and let the function extract the info from the inside:
function openNewWindow(page) {
var OpenWin = window.open(page.url, "Illustrationslideshow", "toolbar=no, menubar=no ,location=no, scrollbars=yes, resizable=yes, statusbar=no, width=" + page.w+ ", height=" + page.h+ ", top=" + (screen.height/2 - height/2) + ", left=" + (screen.width/2 - width/2) + "\"");
}
openNewWindow(pages[0]);

I used the object variant that was described. In the external js file I changed the existing pages array to the following:
function setupPages() {
var pages = new Array();
pages[0] = {url:'Photopages/A01La_Jolla1.html', w:925, h:690};
pages[1] = {url:'Photopages/A02La_Jolla2.html', w:688, h:918};
...
return pages;
}
and call the function in the link tag like this:
<a href="javascript:void()#" onclick="openNewWindow(pages[currentSlideNum].url, pages[currentSlideNum].w, pages[currentSlideNum].h);">

Moving a range with mouse w/o being perturbed by script induced movements

I have a range input in a HTML page, which actually stands for a music timeline. I got a script that moves the handle along the slider as the music progresses.
Now, I want to be able to move the handle so the music will play where I set the handle with the mouse.
The problem is that when I begin dragging the handle along the slider, as soon as its position is updated by the script, it is set to its actual position and I lose control over it.
How can I fix that so I can move my handle freely ?
To play the music I am using a plugin, soundmanager2, and I am using the provided whileplaying callback function to set the position of the slider as the music progresses.
Here is the HTML bit :
<div id="timeCtl">
<span id="timeRange">
<input id="time" type="range" value="0" min="0" max="1000"/>
</span>
<p id="timeCpt">00:00 / 00:00</p>
</div>
And the JS that goes with it :
//This is the callback function contained within an object being created
whileplaying : function() {
//This whole block processes the "position / duration" display
var dur = parseInt(this.duration/1000, 10);
var durMin = parseInt(dur/60, 10);
var durSec = dur%60;
var pos = parseInt(this.position/1000, 10);
var posMin = parseInt(pos/60, 10);
var posSec = pos%60;
if (posMin < 10)
{
posMin = "" + "0" + posMin.toString();
}
if (posSec < 10)
{
posSec = "" + "0" + posSec.toString();
}
if (durMin < 10)
{
durMin = "" + "0" + durMin.toString();
}
if (durSec < 10)
{
durSec = "" + "0" + durSec.toString();
}
var displayDur = durMin.toString() + ":" + durSec.toString();
var displayPos = posMin.toString() + ":" + posSec.toString();
g("timeCpt").innerHTML = displayPos + " / " + displayDur;
//And here is the part that take care of moving the handle
var curPos = parseInt(pos / dur * 1000, 10);
g("timeRange").innerHTML = "<input id=\"time\" type=\"range\" value=\"" + curPos.toString() + "\" min=\"0\" max=\"1000\">";
//The problem is that it moves the handle while I'm dragging it and then I lose control and have to grab it again
//How to avoid that ?
}
Thank you for your time reading this, and thank you in advance for your answers.

Actually I may have found a way to solve the problem.
I could make things so that when the onclick event is fired, the script moving the range is disabled, until the onrelease event is fired (totally not sure about the events names but I guess find out what they really are).
I'm gonna try this out and keep the thread up to date.
EDIT: This works.
Create a boolean variable.
Surround the updating part of your script with a condition controlled by the boolean variable.
Set the boolean variable to false when the slider's onmousedown event is fired, and it will prevent the script from updating it.
Set it back to true when onmouseup is fired, with some additionnal processing if needed.

Theme doesn't work on dojo's website?

http://demos.dojotoolkit.org/demos/themePreviewer/demo.html
In this theme previewer, no matter how I change theme, nothing happens.
Besides, in any samples of the reference guide, when I try to run them, they appear without styles at all, as if the css is not present.
I tried other browsers, all the same.
Although it works well on my project, I wonder what's wrong.

I can't imagine that it would ever work. I looked at the source code and it doesn't look like it's even attempting to change the CSS location or the classname on the body (both are required to change the theme).
The only thing that seems to happen is that the ?theme= query parameter is only used to define which themes should be displayed as link. But even that's going wrong. They define the themes like this:
var availableThemes = [
{ theme: "claro", author: "Dojo", baseUri: "../themes/" },
{ theme: "tundra", author: "Dojo", baseUri: "../themes/" },
{ theme: "soria", author: "nikolai", baseUri: "../themes/" },
{ theme: "nihilo", author: "nikolai", baseUri: "../themes/" }
];
Then they load the current theme like this:
var curTheme = location.search.replace(/.*theme=([a-z]+).*/, "$1") || "claro";
And then they attempt to load the correct menu options:
var tmpString = '';
array.forEach(availableThemes, function(theme){
if(theme != curTheme){
tmpString +=
'<a href="?theme=' + theme.theme + '">' + theme.theme + '</' + 'a> (' +
'<a href="?theme=' + theme.theme + '&dir=rtl">RTL</' + 'a> ' +
'<a href="?theme=' + theme.theme + '&a11y=true">high-contrast</' + 'a> ' +
'<a href="?theme=' + theme.theme + '&dir=rtl&a11y=true">RTL+high-contrast</' + 'a> )' +
' - by: ' + theme.author + ' <br>';
}
});
But as you can see they're comparing objects to strings (theme != curTheme), which will never work. So, the code seems to be quite errorneous, so I think you can't rely on it. I suggest opening a ticket to report this issue.
If you're interested in how things look like in the other theme, you can open your DevTools and change the CSS file (../../dijit/themes/claro/claro.css should be replaced) and you should change the classname on the <body> tag.
Or you could simply execute the following code in your browser's console:
(function() {
var curTheme = location.search.replace(/.*theme=([a-z]+).*/, "$1") || "claro",
newStyle = document.createElement("link"),
styleSheets = document.styleSheets;
newStyle.setAttribute("rel", "stylesheet");
newStyle.setAttribute("type", "text/css");
for (var idx = 0; idx < styleSheets.length; idx++) {
if (styleSheets[idx].href.indexOf("claro.css") >= 0) {
newStyle.setAttribute("href", styleSheets[idx].href.replace(/claro/g, curTheme));
}
}
document.getElementsByTagName("head")[0].appendChild(newStyle);
document.body.className = curTheme;
}());

Look at the Dijit theme tester instead, which lives in the Dijit package under the themes folder.
You'll probably think it looks nearly identical. It sort of is - the themePreviewer under the demos folder was sort of half-copied from it at some point, but has unfortunately never fully worked, AFAIK.

Clear Var or Callback in Javascript

Sorry, i am not sure if I am asking the question correctly. When a date is changed by a user the date count down changes on the page. If the date is changed more than once it flashes all date changes. I guess it is storing the previous information somewhere. I have tried clearing the vars.
var deal_yeax = '';
as I would do in php with no luck
$('#deal_end').focusout(function() {
var deal_end = $("#deal_end").val();
var array = deal_end .split('-');
var deal_montx = array[0];
var deal_dax = array[1];
var deal_yeax = array[2];
deal_montx = deal_montx - 1;
$(function(){
ts = new Date(deal_yeax , deal_montx , deal_dax );
$(".h").countdown({
timestamp : ts,
callback : function(days, hours, minutes, seconds){
message_days = (days);
var message_hours = (hours);
$(".message_hours").text(message_hours + " Hours");
var message_minutes = (minutes);
$(".message_minutes").text(message_minutes + " Minutes");
var message_seconds = (seconds);
// Creat the display
if ( message_days < 1 && message_hours < 1 ) { $(".message_seconds").text(message_seconds + " Seconds"); }
else if ( message_days < 1 && message_hours > 1 ) { }
else if ( message_days == 1 ) { $(".message_days").text(message_days + " Day"); }
else { $(".message_days").text(message_days + " Days"); }
if ( message_days < 1 && message_hours < 1 && message_minutes < 1 && seconds < 1 ) {
$(".hide_my_buy_button").fadeOut("fast");
}
}
});
});
});

Everytime you "focusout" from #deal_end, you'll attach a countdown event to .h. Without knowing exactly how countdown(...) works (It'll be good if you provide the source so we can provide more help!), one way to fix the issue maybe to use JQuery's unbind(...) function to remove existing listeners on an event before adding a new one to it.
Here's an example on the issue:
<!-- HTML -->
<div>
<input id="text" />
<button id="clicker" />
</div>
<!-- Javascript -->
$('#text').focusout(function() {
var text = this.value;
// Everytime #text is "focused out", a new event is registered with #clicker.
$('#clicker').click(function() {
console.log('Value: ' + text);
});
});
... and here's how to solve the issue (It's just one of the many ways. This way is probably not the most elegant but anyhow.)
$('#text').focusout(function() {
var text = this.value;
$('#clicker').unbind('click');
// Everytime #text is "focused out", a new event is registered with #clicker.
$('#clicker').click(function() {
console.log('Value: ' + text);
});
});
Bottom line: It seems focusout(...) is adding a new countdown everytime it is triggered. That might be the problem you're having.
Not sure if this helps? Lemme know.
P.S. JSFiddle to go with it: http://jsfiddle.net/PE9eW/

The problem seems to be with .countdown function that you are using in your code to flash the date changes. When you assign a new count down object to $(".h") the plugin or the function probably assign some event handler or interval to it, but it doesn't seem to clear the old ones when it is called again and that is why it flashing all the dates for each countdown. So you will have to do it manually. I am not sure if you are using an external plugin or is it your own function but what you need to do is to clear the existing events or intervals that is assigned to your element when you call the function. I can be more helpful if you tell me which plugin you are using or maybe show the code if it is your own function. (referring to .countdown() )