Develop Reference

make fade in/out image flipper with javascript

so guys, i'm starting to learn javascript a while ago.
i have this image flipper block code, can anyone help me how to make the transition more smooth, like fade in/out?
var d = document,
smiles = d.querySelectorAll('#text-5 .home-port-widget img');
for (var i = 0; i < smiles.length; i++){
smiles[i].alt = smiles[i].getAttribute('src');
smiles[i].onmouseenter = function(){
var hoverImg = this.getAttribute('src'),
target = d.querySelectorAll('#text-5 .home-port-widget img:not([src="'+ hoverImg +'"])');
target[0].src = hoverImg.split('-e')[0]+'_a.jpg';
target[1].src = hoverImg.split('-e')[0]+'_b.jpg';
}
smiles[i].onmouseleave = function(){
var hoverImg = this.getAttribute('src'),
target = d.querySelectorAll('#text-5 .home-port-widget img:not([src="'+ hoverImg +'"])');
target[0].src = target[0].getAttribute('alt');
target[1].src = target[1].getAttribute('alt');
}
}

If you don't want to deal with coding the animations yourself, consider using a CSS animation library such as Animate.css. However, if you still want to make your own I would suggest adding a JSFiddle so that we can easily take a look at what is happening with your current code.

Create figure using function javaScript function createElement(tagName)

I need to create a new figure at runtime on my web app. I am using javascript and html/css.
The element that i got to create is the follow:
<figure id = "myImage" class="ball" >
<span class="shadow">
</span>
</figure>
I have tried some tag names and the "ball" isn't created.
The following code is an example(not working) what is the problem?
var generatedBall = document.createElement("FIGURE");
generatedBall.class = 'ball';
generatedBall.style.background = 'yellow';
document.body.appendChild(generatedBall);
Thanks for help.

It's working for me, see my fiddle.
You just have to give it height;
var generatedBall = document.createElement("figure");
generatedBall.classList.add('ball'); //Edited this
generatedBall.style.background = 'yellow';
generatedBall.style.height = '100px'; //Added bit
document.body.appendChild(generatedBall);

See the exact output on this page See Here
var innerSpan = document.createElement('span');
innerSpan.classList.add('shadow');
var generatedBall = document.createElement('figure');
generatedBall.setAttribute("id","myImage")
generatedBall.classList.add('ball');
document.body.appendChild(generatedBall);
generatedBall.appendChild(innerSpan);

The Element does not have a class property. Instead, you can add and remove classes using classList. So your example would become:
var generatedBall = document.createElement('figure');
generatedBall.classList.add('ball');
generatedBall.style.background = 'yellow';
document.body.appendChild(generatedBall);

get property (width) from one element and assign to another one

I am trying to get the width property from one element and assign to another.
Here's my code (that does not work):
window.onload=function() {
var morphWidth = document.getElementById('morph').width();
var scrollbar = document.getElementById('scrollbar');
scrollbar.style.width = morphWidth + "px";
}

You can get the element width:
document.getElementById("morp").style.width;
and you can set the element width:
document.getElementById("morph").style.width="300px";

Okay, so I tried this and that and finally found a solution:
$(function() {
var morphWidth = $('#morph').width();
var scrollbar = $('#scrollbar');
$('#scrollbar').css('width', morphWidth + 'px');
});
However, I don't have a clue why this works now. Let me know if you do!

If you use jQuery, then you can code like this:
var morphWidth = $('#morph').width();
If you use original Javascript, the you can code like this:
var morphWidth = document.getElementById('morph').offsetWidth;
jQuery object is different from DOM (Document Object Model).
The var scrollbar as same as.

jquery.appear - How to add on a canvas-element?

How to add the jquery.appear-Plugin to this canvas-element (id="pic")? The script itself is already included into the html-page, but how to make the canvas-image only visible, if the element is on the screen?
<canvas id="pic"></canvas>
<script type="text/javascript">
var picData6 = whatever1
var options = whatever2
var ct6 = document.getElementById("pic").getContext("2d");
ct6.canvas.width = document.getElementById("pic").offsetWidth-4;
ct6.canvas.height = document.getElementById("pic").offsetHeight;
var Chart6 = new Chart(ct6).Line(picData6,options);
</script>
It seems the .appear() has to be add somewhere. But where?
Thank you very much!

jQuery.appear simply gives you custom appear and disappear events for elements which you have registered.
To add it to your canvas, you would do something like:
// register the element with the plugin
$('#pic').appear();
// do this when it appears
$('#pic').on('appear', function(ev, elements) {
// elements is an array of elements which are now visible on the page
});

Add a black drop shadow to an image through InDesign JavaScript scripting

I am an absolute beginner with JavaScript scripting for InDesign.
I create an object like this:
var rectbox = doc.pages.item(0).rectangles.add({geometricBounds:[20,20,70,120]});
var image = rectbox.place(File('/path/image.pdf'));
and now I simply want to add a black drop shadow.
Can someone help me?
It seems to me impossible to find some example about. It is incredible...
Many thanks!
Roberto

Here are some examples howto implement a shadow.
http://forums.adobe.com/thread/778309
http://www.adobe.com/content/dam/Adobe/en/devnet/indesign/sdk/cs6/scripting/InDesign_ScriptingGuide_JS.pdf (page 57).
Try this:
var rectbox = doc.pages.item(0).rectangles.add({geometricBounds:[20,20,70,120]});
var image = rectbox.place(File('/path/image.pdf'));
var myFillTransparencySettings1 = rectbox.fillTransparencySettings;
myFillTransparencySettings1.dropShadowSettings.mode = ShadowMode.drop;
myFillTransparencySettings1.dropShadowSettings.angle = 90;
myFillTransparencySettings1.dropShadowSettings.xOffset = 0;
myFillTransparencySettings1.dropShadowSettings.yOffset = 0;
myFillTransparencySettings1.dropShadowSettings.size = 6;

Ok, here is the solution: if my box contains a filling color, ok, it works; but, if the box contains an image or something else, then I need to use transparencySettings instead of fillTransparencySettings:
var myTransparencySettings = rectbox.transparencySettings;
Then
var rectbox = doc.pages.item(0).rectangles.add({geometricBounds:[20,20,70,120]});
var image = rectbox.place(File('/path/image.pdf'));
var myTS = rectbox.transparencySettings;
myTS.dropShadowSettings.mode = ShadowMode.drop;
...
works perfectly!
Many thanks to Johan, however!