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.
Related
I want to move an image on another one. I saw on forum, the best way to do this is to use destination.appendChild(elementToMove). But when I use it, my elementToMove just disappears.
Here is a fiddle for what I want to do (but that's not working):
JS Fiddle
Here is my JS Code:
var body = document.getElementsByTagName("body")[0];
var td_sign = document.getElementById("sign");
var td_moon = document.getElementById("moon");
var sign = document.createElement("img");
sign.src="http://img11.hostingpics.net/thumbs/mini_723286sign.png";
var moon = document.createElement("img");
moon.src="http://img11.hostingpics.net/thumbs/mini_418048moon.png";
td_sign.appendChild(sign);
td_moon.appendChild(moon);
var testbutton = document.createElement('input');
testbutton.type='button';
testbutton.value='test';
testbutton.onclick = function(){
sign.appendChild(moon);
}
body.appendChild(testbutton);
I just want to use JavaScript.
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!
So far I created an array with 11 images, initialized the counter, created a function, created a for loop but here is where I get lost. I looked at examples and tutorial on the internet and I can see the code is seeming simple but I'm not getting something basic here. I don't actually understand how to call the index for the images. Any suggestions. Here is the code.
<script type="text/javascript">
var hammer=new Array("jackhammer0.gif",
"jackhammer1.gif",
"jackhammer2.gif",
"jackhammer3.gif",
"jackhammer4.gif",
"jackhammer5.gif",
"jackhammer6.gif",
"jackhammer7.gif",
"jackhammer8.gif",
"jackhammer9.gif",
"jackhammer10.gif")
var curHammer=0;
var numImg = 11;
function getHammer() {
for (i = 0; i < hammer.length; i++)
{
if (curHammer < hammer.length - 1) {
curHammer = curHammer +1;
hammer[i] = new Image();
hammer[i].src="poses/jackhammer" +(i+1) + ".gif";
var nextHammer = curHammer + 1;
nextHammer=0;
{
}
}
}
}
setTimeout("getHammer()", 5000);
</script>
</head>
<body onload = "getHammer()";>
<img id="jack" name="jack" src = "poses/jackhammer0.gif" width= "100" height ="113" alt = "Man and Jackhammer" /><br/>
<button id="jack" name="jack" onclick="getHammer()">Press button</button>
Following on what Paul, said, here's an example of what should work:
var hammer=["jackhammer0.gif","jackhammer1.gif","jackhammer2.gif","jackhammer3.gif",
"jackhammer4.gif","jackhammer5.gif","jackhammer6.gif","jackhammer7.gif",
"jackhammer8.gif","jackhammer9.gif","jackhammer10.gif"];
var curHammer=0;
function getHammer() {
if (curHammer < hammer.length) {
document.getElementById("jack").src= "poses/" + hammer[curHammer];
curHammer = curHammer + 1;
}
}
setTimeout("getHammer()", 5000);
The big missing element is that you need to call getElementById("jack") to get a reference to the DOM Image so that you can change it's source. If you're using jQuery or most other JS frameworks, just type $("#jack") to accomplish the same.
I don't understand the need for the for loop at all, just increment the index value [curHammer] each time you click, and reset if it passes your max index length (in this case 11).
Pseudo-Code:
currentHammer = -1
hammers = [ "a1.jpg", "a2.jpg", "a3.jpg"]
getHammer()
{
currentHammer = currentHammer + 1;
if(currentHammer > 2)
currentHammer = 0;
image.src = hammers[currentHammer];
}
a) are you just trying to show an animated gif? If so, why not use Adobe's Fireworks and merge all those gifs into a single gif?
b) you know that the way you have it the display is going to go crazy overwriting the gif in a circle right?
c) you might want to put a delay (or not). If so, make the load new gif a separate function and set a timeout to it (or an interval).
Also, you are being redundant. How about just changing the src for the image being displayed?:
var jackHammer = new Array();
for (var i=0;i<11;i++) { //pre-loading the images
jackHammer[i] = new image();
jackHammer[i].src = '/poses/jackHammer'+i.toString()+'.gif';
} //remember that "poses" without the "/" will only work if that folder is under the current called page.
for (var i=0;i<11;i++) { //updating the image on
document.getElementById('jhPoses').src = jackHammer[i].src;
}
on the document itself,
< img id='jhPoses' src='1-pixel-transparent.gif' width='x' height='y' alt='poses' border='0' />
I have a client who has made a 'Visual Diary' of photographs that he took once a day for 365 days, for his portfolio site. He wants me to put these together into a time-lapse effect piece. I thought about using Flash but in the end opted for JavaScript.
What needs to happen is this: The images cycle really really quickly with no transitions or anything, just image-image-image etc. About 30/fps or something like that. When you click the flashing images, it stops on the image you have selected, so the user can take a look. When you click again, the slideshow starts playing again.
My problem is I'm a PHP/XHTML/CSS bloke who hasn't really the foggiest about JavaScript. I can happily integrate it into any page, but it's just coding the JavaScript that's troubling me.
On his homepage, I have this code used to display a basic slideshow - with transition effects etc. It's in the HTML but you can fathom out the code I'm sure:
<!-- Code for slideshow -->
<!-- Found on http://www.webdeveloper.com/forum/showthread.php?t=81441 -->
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 3000;
// Duration of crossfade (seconds)
var crossFadeDuration = 3;
// Specify the image files
var Pic = new Array();
// to add more images, just continue
// the pattern, adding to the array below
Pic[0] = '1.jpg'
Pic[1] = '2.jpg'
Pic[2] = '3.jpg'
Pic[3] = '4.jpg'
Pic[4] = '5.jpg'
Pic[5] = '6.jpg'
Pic[6] = '7.jpg'
Pic[7] = '8.jpg'
Pic[8] = '9.jpg'
Pic[9] = '10.jpg'
Pic[10] = '11.jpg'
Pic[11] = '12.jpg'
Pic[12] = '13.jpg'
Pic[13] = '14.jpg'
Pic[14] = '15.jpg'
Pic[15] = '16.jpg'
Pic[16] = '17.jpg'
Pic[17] = '18.jpg'
Pic[18] = '19.jpg'
Pic[19] = '20.jpg'
// do not edit anything below this line
var t;
var j = 0;
var p = Pic.length;
var preLoad = new Array();
for (i = 0; i < p; i++) {
preLoad[i] = new Image();
preLoad[i].src = Pic[i];
}
function runSlideShow() {
if (document.all) {
document.images.SlideShow.style.filter="blendTrans(duration=2)";
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";
document.images.SlideShow.filters.blendTrans.Apply();
}
document.images.SlideShow.src = preLoad[j].src;
if (document.all) {
document.images.SlideShow.filters.blendTrans.Play();
}
j = j + 1;
if (j > (p - 1)) j = 0;
t = setTimeout('runSlideShow()', slideShowSpeed);
}
// End -->
</script>
Is there any way to modify this code to turn off all transitional effects, and make it stop playing when you click it/start it again? Otherwise, a reference to some different code would be helpful.
Thank you everybody!
Jack
You seem to be using IE-specific code. I would recommend using the various effects modules in a dedicated JavaScript library such as MooTools (my personal favourite), jQuery, or Prototype + script.aculo.us.
To stop the slideshow, you should be able to simply clear timeout t:
clearTimeout(t);
Also, you shouldn't quote the first parameter of setTimeout. Pass it a function reference:
setTimeout(runSlideShow, slideShowSpeed);
I test the code in IE7, FF, Chrome, Safari and this problem occurs in Firefox only.
I have checked that the problem only occurs in FF 3.5.x, but not FF 3.0.x.
I want to make an image animation which has 10 images in total.
Currently, I use the following code to do it:
for (var i=1;i<=10;i++){
img[i] = new Image();
img[i].src = "images/survey/share_f"+i+".jpg"
}
var cornerno = 0;
function imganimate(){
$("#surveyicon").attr("src",img[cornerno].src);
//some logic to change the cornerno
setTimeout("imganimate()",1000);
}
And then change an element's src to loop through the array "img".
however, firefox keeps requesting the images continuous (I expect it only requests each unique image just once).
What should I do?
img is undefined. just add a line "var img = new Array();" before "for (var i=1;i<=10;i++){"
var img = new Array();
for (var i=1;i<=10;i++){
img[i] = new Image();
img[i].src = "images/survey/share_f"+i+".jpg";
}
var cornerno = 0;
function imganimate(){
cornerno %= 10;
cornerno++;
$("#surveyicon").attr("src",img[cornerno].src);
setTimeout("imganimate()",1000);
}
imganimate();
Try composing the images into a single image file like a sprite map and then use CSS positioning to shift the image around as a background image. It will be much faster and avoid any reloads.
You've already created ten DOM nodes, set their src and loaded the images. Why would you set the src again? You want to rotate those ten nodes in and out now. You can either toggle style.display or remove and insert the nodes.
Here's my suggestion. I'm not well versed in JQuery so there may be a few additional shortcuts I've overlooked:
var imgAmt = 10;
img = [];
for (var i=1;i<=imgAmt;i++){
img[i] = document.createElement("img");
img[i].src = "images/survey/share_f"+i+".jpg"
img[i].style.display = "none";
$("#surveyicon").appendChild(img[i]);
}
imganimate();
var cornerno = 0;
function imganimate(){
cornerno++;
cornerno = cornerno > imgAmt ? 1 : cornerno;
for (var i=1;i<=imgAmt;i++){
// hide all images but the index that matches cornerno:
img[i].style.display = i==cornerno ? "" : "none";
}
setTimeout(imganimate,1000);
}
This seems a bug in FF3.5.x.
Not sure whether the bug has already been fixed.