jQuery Forum

Can't get the syntax right : the idea is to, on a first click,  fade an element out, then move it, and then fade it in:

<p onclick="$('#myelement').fadeOut(2400, function() {

$('#myelement').fadeIn(2400);   

                               });

                     });">click</p>

And then, to reverse this process on the second click. 

I've tried several combinations using 'toggle'. I think it's not possible? as there needs to also be a function which actually reverses the animation, but which is only called on alternate clicks...

                        $('#myelement').animate({left:'-=120', top:'+=30'},100, //etc

I can see that the selector ':even' might be useful, but how to add a function to a css selector? 

Confused. 

Cheers.

 

I have to make a presentation to a group of older folks, and will likely do it as a webpage: it will be displayed via a medium-size tv screen (Sony Bravia). 

Navigation down through the layers would be by strategically-placed transparent gifs, and colored markers like those on googlemaps.

I have this idea that those who want to could bring their iPads, and follow along, if they're in the back row or nearsighted: but wouldn't want them to navigate for themselves.  So...would there be a way to disable navigation functions on iPads and tablets generally?

I could leave out  jquery.ui.touch-punch.min.js which seems to give mixed results, from users' reports. Maybe one could adapt a sniffer for smaller-sized screens ?

Cheers.

 

Individual songs are loaded into this div, eg "song1.htm":
      <audio id="song1" preload controls autoplay>
            <source src="song1.mp3" type="audio/mp3">
            your current browser does not support the new audio standard: upgrade if you can
      </audio>

I want to attach an animation to fire once when the song starts playing: 

      function myAnimation() { /// }

In an external javascript file, I've tried
      $('#song #song1').one('play', function() {
            myAnimation() ;
      });

Hello all,

I have a function which loads a song, and, after a setTimeout, shows the title of the song and a link for new song. The function is attached to a link which displays as "#1";  the link for new song displays as "#2".

The setTimeout was determined by playing the song through the browser locally, and synchronising it to a certain phrase--34 seconds from the start of the song.

Online testing (OSX 10.11, clearing and disabling caches, private browsing) shows the effort to be precise is not working:

Safari displays at 25" and 26"; 

Opera at 31" and 34"; 

Firefox at 32"; 

Chrome at 32" and 33".

(all tested by hitting the audio stop button the instant the next link appears).

Can anyone clarify why this is happening?  

      function loadSong(fldr,song) {

      $('#song').fadeOut(400, function() {

$('#song').load(fldr +'/'+ song + '.htm', function() {

  $('#song').fadeIn(2400);   

      });  });

      }

// link

<a href="#" id="ltex1" onclick="loadSong('latesongs','wreck'); 

                                                      upNexT('wreck', 'ltex2', '34');">#1</a>

//audio

online:

choose option "AHA!"

choose "Texas"

click on "#1"

Cheers...

Inelegant solution, ok in FF, Chrome and IE: put the opacity css inline, directly on the div.

Original post:

I have a problem with IE8 rendering opacity: it's an overlay set to 50% opacity, code below.

The css renders correctly when it's simply set to appear when loaded. 

However, if the overlay is set to 'display:none' and then faded-in, it renders correctly, then immediately jumps to full opacity.

This behavior is consistent, local testing in IE8, across compatibility mode on/off, and compat. mode with overriding meta tag.

Any ideas? I've checked previous questions. FFox and Chrome do the fadeIn ok.

css

display:none; 

-moz-opacity:0.50; filter:alpha(opacity=50); opacity:0.50; 

jQuery: 

function showtitle() { 

$('#ttl').delay(4200).fadeIn(2000); 

} 

override compatibility mode

<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 

Hi again,

How to get two id's into the one function? 

I have two functions which do the same thing to different divs, ajax loading from a selection of html fragments, and then fading in the loaded div, from its default of 'display:none' :

—it'd be even better if if the fadeIn() could be varied as well.

This looks logical, but isn't working—

 called with 

Error consoles on FF and Safari give no messages. 

Help?

Does anyone know what the maxmium intervals are for jQ "delay" and js "setTimeout"? 

later...

Dr John Stockton's comments indicate that the maximum setTimeout() is most likely operating system dependent:

The value is a Number of milliseconds, and its limit is therefore the
maximum IEEE Double, a bit over 1.7E308, meaning about 5.3E297 years.

It's probable that the timeout operation will be implemented by the
operating system, and that the OS will impose a lower usable limit.
That's likely to be 2^N-1 ms, where N = 31 or 32. In Windows, 32,
allowing 49 days 17:02:47.295.

The MTBF of the browser should exceed 50 days; that of the OS might not.

Untested.

...should be enough for rotation purposes.

"delay()", anyone?

I have a site structured like this:

index.htm

"img" folder for images

"loadit" folder for html files

html files in "loadit" are ajaxed into a div in index.htm, using load().

 

Problem: how to have an image in an imported html file?

Neither of these work:

<img src="../img/myimg.jpg"> 

(assuming the image path is relative to the html file's original position)

 

<img src="img/myimg.jpg"> 

(image relative to the html file, when it's part of index.htm).

Also tried putting the image in "loadit", the same folder as the htm file which references it, and doing  <img src="myimg.jpg">: no go.

Does the image have to be imported into the html file?

I have an html file, an image and two text links; the file is set to zero opacity ; the file is ajaxed-in to the main page; and then the opacity is changed to 100% (code below).

*******************************************

is there a way to use offset with dimensions other than px? like, ems?

I ask, because I have an overlay which is dimensioned and positioned using ems. Looks consistent across screen-resolutions.

How to use jQuery to sequence javascript functions?  At the moment, I'm doing

fnAll() {

fn1(); // which takes, say, 4 secs to run

      setTimeout('fn2()', 5000);  // takes another 5 seconds, so

            setTimeout('fn3()', 11000);  // etc

}

which is ok, but may mess up on slow browsers. 

If it's jQuery snippets, then I can do nested callbacks ok.

Maybe queue() might be the answer, but the examples all use jquery snippets.  What I want is something like

fn1(); delay(1000).fn2();delay(1000).fn3()...

Can anyone point me in the right direction?

cheers again

I've coded a page which should sequentially do these:

display a plain background;

 

ajax-load a hidden div and then fade it in, showing a sphere—the idea is to avoid seeing the sphere image loading bit by bit: it should just fadein out of the background;

ajax-load a second hidden div behind the first, and fade it in, ready to be displayed; and ajax-load two links and fade them in.

However, on testing with cleared caches in the browsers, I'm still sometimes seeing the sphere load (Firefox, Safari, Opera), and occasionally the links don't load at all first time round (Chrome, Safari). And I haven't tested this script on Windows/IE yet. If it's happening in Firefox, I guess that means the problem is in the script.

What to do to make the code work consistently? It uses nested callbacks.

http://www.wavehands.net/waves/wave.js // doSphere()

The links are only working as mouseovers.

cheers

$('#idN').delay(600).animate({opacity:1.0}, 200);

I'm trying to make a function with the id as variable, but haven't got it right:

called with eg,  doID('idN').

FF error console isnt returning any messages. 

I've tried a few variations but looks like I'm missing a step somewhere: maybe something like 

var id = $('#id')  ?

cheers

<div id="readout">

<span class="read" id="left1">1</span> <!-- or <span class="read" id="left2">2</span> -->

<span class="read" id="mid1">2</span><!-- or <span class="read" id="mid2">1</span> -->

<span class="read" id="right1">2</span><!-- or <span class="read" id="right2">1</span> -->

</div>

This div has three spans Ajaxed in, one each of the two "left"s, "mid"s and "right"s. The process happens several times.

function doRead() {

$('.read').contents().filter(function() {

  return this.nodeType == 3; }

}

should return a string of three numbers, eg "211" or "121"  ?

Second question is, how to sum the three numbers? The sum will be used as a variable: something like

var sumRead = ???

 parseInt("sumRead", 10)

}

which you'd call with appendAB('1'), etc.

Logically it's on the right track, but I'd appreciate a more experienced eye on the code.

Cheers

IE 8 gives a ragged circle of black pixels when you mouseover.

Reading the boards, it seems like there's still a problem with IE and transparency, when you set opacity.

Short of a different page for IE?

cheers

http://www.wavehands.net/ 

(the gifs are progressive, not a good look either).

code:

doRoll()	{$('#back').fadeToggle(1600, 0.0, 'linear');}

.

This code sequences the appearance of three bits of text:

 function omen() {

$('#north').delay(1600).animate({opacity:'1.0'}, 2400, function() {

$('#east').delay(2400).animate({opacity:'1.0'}, 2400, function() {

$('#west').delay(800).animate({opacity:'1.0'}, 2400, function() {

// etc...// });

   });

 });

}

I'd like to make the delays a random amount, within certain parameters, eg

   var randly = [ 10, 50, 100, 200, 400, 800, 1200 ]

      dly = Math.floor(Math.random() *randly.length);

  

So: can you do something like this with jQ:

    $('#north').delay('dly').animate({opacity:'1.0'}, 2400       ?

Later: 

yep you can: you make the random choice a function, then you have to insert that function name into the brackets after '.delay':

not

$('#north').delay('dl()') ... this gets treated as zero.

Couple of updates:

1.  This doesn't work with hide() and show(), but does with animate()

2.  Tried  var D = dl() for the animation function: doesn't work. 

$('#my id", "myid child").(animate...) ?

loadBack(), function() { 

jQuery functions }

loadBack() randomly loads an image approx 90kb.

What is the syntax for accessing the children of a class, where the class is a variable?

The html structure is multiple divs like this:

<div class="class1 class2 class3">

<p class="x"> lorem</p>

<p class="y"> ipsum</p>

<p class="z"> yadda</p>

</div>

The function does two color changes before going to 'display:none',

function exIt(cl) { 

      $(cl + ' > p').animate({color:"#ddd"}, 600, function()  {

      $(cl + ' > p').delay(800).animate({color:"#333"}, 1600, function()  {

        $(cl + ' > p').delay(800).hide();

      });

   });

}

called with "exIt('.class1');"

(There's a structural reason for accessing the child <p> tags, rather than just the parent <div>s. Some <p> tags in some <div>s will have previously had a style change applied: if the changes are now applied only to the parents, some children won't change… at least not till they're hidden).

Anyway: this code doesn't work, doesn't generate a FF error message, and doesn't stop subsequent chained functions from operating. So it can't be far off;  and the syntax $(cl + ' > p') works ok in another function.

Here's a fairly primitive bit of scripting, which works:

function gray() {

      $('.A1').animate({color:"#666"}, 400);

         setTimeout('$(\'.A1\').animate({color:"#3a3d3f"}, 1200)', 400);

             setTimeout('$(\'.A1\').visibility(\'hidden\')', 1600);

}

So, how to make the class into a variable? I tried

function gray(myclass) {

      $(myclass).animate({color:"#666"}, 400);

         setTimeout('$(myclass).animate({color:"#3a3d3f"}, 1200)', 400);

             setTimeout('$(myclass).visibility(\'hidden\')', 1600);

}

called with gray('.A1');

The first animation fires, but the second and third don't; FF error console is saying " myclass is not defined " for the second and third lines, but not for the first.