We Keep Coding

Javascript applied CSS3 transitions not working on new element

I'm using a mixture of CSS/JS to create some simple page slide transitions for new pages, that will eventually be loaded dynamically by AJAX, however on creation of the new element "main2" which has the necessary -webkit-transition etc. it does not slide in like it should, but simply appears. The previous page however slides out fine, using basically the same code.
As well as this, changing the slide in to after the animation for the previous page has finished like so:
function newPage() {
var newMain = document.createElement("div");
newMain.className = "main";
newMain.style.left = "100vw";
newMain.id = "main2";
newMain.style.zIndex = 1999;
newMain.style.background = "#AAA";
document.body.appendChild(newMain);
oldMain = document.getElementById("main");
oldMain.style.left = "-50vw";
setTimeout(function() {
newMain.style.left = "50vw";
oldMain.parentNode.removeChild(oldMain);
newMain.id = "main";
}, 1000);
}
makes it animate in, just not at the right time.
Any help would be appreciated, I'm sure it's just something glaringly simple that I've missed.
Demo: JSFiddle

Try this: http://jsfiddle.net/5raj05th/8/
I changed the code so you do trigger the transition by adding the style:
newMain.style.left = "100vw";
and later:
newMain.style.left = "0";

Speed up animation of TitlePane in Dojo

I'm trying to speed up or remove the wipeIn and wipeOut animation of a title pane in Dojo. The content should appear immediately after clicking on the title bar. In other frameworks, I would modify the animation speed or duration but I had no luck with this in dojo so far. I've also tried to overwrite the animation without too much success.
This is (simplified) how I create the TitlePane:
require(["dijit/TitlePane", "dojo/dom-construct"], function(TitlePane, domConstruct){
var titlePaneOptions = {};
titlePaneOptions.title = "Some Title";
titlePaneOptions.open = true;
titlePaneOptions.content = "Content";
this._titlePane = new TitlePane(titlePaneOptions);
domConstruct.place(this._titlePane.domNode, this.context.element, "only");
this._titlePane.startup();
});

Check the API docs for TitlePane, under Property Summary, there is a duration:
duration - Time in milliseconds to fade in/fade out
So for example:
var titlePaneOptions = {};
titlePaneOptions.title = "Some Title";
titlePaneOptions.open = true;
titlePaneOptions.content = "Content";
titlePaneOptions.duration = 0;
.. should make it appear/disappear immediately.

How to Expand / Collapse a section of a Web Site and also change the image using JavaScript

EDIT #1
Thanks to the 2 users who responded, their solutions worked great! Something I forgot to mention in the original post was, Is there any way to adjust the user's view so that when the expanded section is collapses by the user, their "view" (or the actual web page) can adjust up to an anchored spot?
ORIGINAL POST
I've got a section of a website that I want to first be collapsed and not able to be viewed by the user. Then, when they hit an arrow on the screen, the hidden content will then display AND the image needs to change from a "down" arrow to an "up" arrow.
I'm able to do this with the below code right now but I have to have two arrows. Can anyone help so that I only have one arrow on screen and it changes based on when the user clicks on it? I'd also like this to be able to be done an infinite amount of times by the user (ie if the user clicks the "down" arrow, the section expands and the arrow changes to an "up" arrow but then when the user hits that "up" arrow the section collapses and the arrow changes back to a "down" arrow. Possible?
<script language="JavaScript" type="text/javascript">
<!--
function sizeTbl(h) {
var tbl = document.getElementById('tbl');
tbl.style.display = h;
}
// -->
</script>
<br>
<img src="up_arrow.png">
<img src="down_arrow.png">
Thanks for any help!

I have added your code and created a jsfiddle for you...
changed code:-
function sizeTbl(h) {
var tbl = document.getElementById('container');
tbl.style.display = h;
if (h == "block") {
document.getElementById('down').style.display = 'none';
document.getElementById('up').style.display = 'block';
} else {
document.getElementById('up').style.display = 'none';
document.getElementById('down').style.display = 'block';
}
}
working example:-
click to see example:-http://jsfiddle.net/XUjAH/1089/
thanks

I've taken out the parameter from your sizeTbl method
Then I'm getting the src property of the image (note I've given it an ID). Depending on the src we can show/hide the table and change the image property
Here's a jsFiddle
<script language="JavaScript" type="text/javascript">
<!--
function sizeTbl() {
var tbl = document.getElementById('tbl');
var icon = document.getElementById('toggle-table');
if (icon.src === 'down_arrow.png'){
tbl.style.display = 'block';
icon.src = 'up_arrow.png';
}
else {
tbl.style.display = 'none';
icon.src = 'down_arrow.png';
}
}
// -->
</script>
<br>
<img src="down_arrow.png" id="toggle-table">
You've added some extra requirements to your question. You've tagged jQuery and this is the easiest solution for this scenario.
Remove the javascript:sizeTbl() from your <anchor> tag. This is known as inline JS and isn't recommended because it means you are mixing your presentation code with your business logic.
You make the <anchor> tag act like a normal anchor tag and attach a click event in the document's ready event.
function sizeTbl() {
var tbl = document.getElementById('tbl');
var icon = document.getElementById('toggle-table');
if (icon.innerText === 'show') {
tbl.style.display = 'block';
icon.innerText = 'hide';
} else {
tbl.style.display = 'none';
icon.innerText = 'show';
}
}
$(document).ready(function(){
$('#sizeTbl').on('click', sizeTbl);
});
I've created a new jsFiddle that demonstrates this.
Notes:
You need to be using jQuery for this to work
Note that I've given the <anchor> tag an ID. This is so that I can locate it in code
If you have any other comments, the etiquette on SO is to ask new questions. The answers get too long and complicated otherwise

Javascript/Jquery flow text into divs

How do I flow a text stream from one div to the next? Each div has a fixed height and width and I need the data to be passed to the first, then if that is filled overflow to another etc. (The second etc. divs need to be dynamically created). Eventually the divs will be contenteditable, this is the page technique for a simple WYSIWYG style editor.
Please help...
JS Fiddle (note zoom in use on body)(I need to reflow on keyup/down, make pages and remove as necessary and be able to add in the middle)
function loadgo(){
run();
var h = document.getElementById('page'+(document.getElementById("pagecount").value-1)).offsetHeight;
document.getElementById("loadgo").value = h+1;
if (h > 1135){
var pagecount = document.getElementById("pagecount").value;
//$('body').append("<div class=page style='color:#F00' id='page"+pagecount+"' contenteditable>"+this.id+"</div>");
var objTo = document.body;
var divtest = document.createElement("div");
divtest.style.color = '#F00';
divtest.id = "page"+pagecount;
divtest.className = 'page';
divtest.contentEditable = "true";
divtest.innerHTML = "new div";
objTo.appendChild(divtest);
document.getElementById("page"+pagecount).focus();
document.getElementById("pagecount").value++;
zoomin();zoomout();
run();
}
}
function run(){
setTimeout(function() {
loadgo();
}, 500);
}
loadgo();

What you're looking for is called CSS Regions. This allows your text to flow through various containers placed on your site.
You can read about it on Adobe's site, and Apple has a nice WWDC video explaining how to implement it (starts at 8:40). Also check out the Editor's Draft.

Javascript hiding and showing dynamic content of a div

Currently I hide and show the content of a div like this:
var header = null;
var content = null;
var mainHolder = null;
var expandCollapseBtn = null;
var heightValue = 0;
header = document.getElementById("header");
content = document.getElementById("content");
mainHolder = document.getElementById("mainHolder");
expandCollapseBtn = header.getElementsByTagName('img')[0];
heightValue = mainHolder.offsetHeight;
header.addEventListener('click', handleClick, false);
mainHolder.addEventListener('webkitTransitionEnd',transitionEndHandler,false);
function handleClick() {
if(expandCollapseBtn.src.search('collapse') !=-1)
{
mainHolder.style.height = "26px";
content.style.display = "none";
}
else
{
mainHolder.style.height = heightValue + "px";
}
}
function transitionEndHandler() {
if(expandCollapseBtn.src.search('collapse') !=-1)
{
expandCollapseBtn.src = "expand1.png";
}
else{
expandCollapseBtn.src = "collapse1.png";
content.style.display = "block";
}
}
This is fine if the content is static, but I'm trying to populate my div dynamically like so.
This is called from an iphone application and populates the div with a string.
var method;
function myFunc(str)
{
method = str;
alert(method);
document.getElementById('method').innerHTML = method;
}
I store the string globally in the variable method. The problem I am having is now when I try expand the div I have just collapsed there is nothing there. Is there some way that I could use the information stored in var to repopulate the div before expanding it again? I've tried inserting it like I do in the function but it doesn't work.
Does anyone have any ideas?
to replicate:
Here is the jsfiddle. jsfiddle.net/6a9B3 If you type in text between
here it will work fine. I'm not sure
how I can call myfunc with a string only once in this jsfiddle, but if
you can work out how to do that you will see it loads ok the first
time, but when you collapse the section and attempt to re open it, it
wont work.
If the only way to fix this is using jquery I dont mind going down that route.

is it working in other browsers?
can you jsfiddle.net for present functionality because it is hard to understand context of problem in such code-shoot...
there are tonns of suggestions :) but I have strong feeling that
document.getElementById('method')
returns wrong element or this element not placed inside mainHolder
update: after review sample in jsfiddle
feeling about wrong element was correct :) change 'method' to 'info'
document.getElementById('method') -> document.getElementById('info')

I think you want to use document.getElementById('content') instead of document.getElementById('method') in myFunc.

I really see nothing wrong with this code. However, a guess you could explore is altering the line
content.style.display = "none";
It might be the case that whatever is displaying your html ( a webview or the browser itself) might be wiping the content of the elemtns, as the display is set to none