Search jQuery

jQuery Forum

Screen name:
jaimmy

jaimmy's Profile

19 Posts

153 Responses

0 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

mouse x position over canvas element toggles event
[21Replies]
- 29-Jul-2019 12:18 PM
- Forum: Using jQuery
I can't figure out how to get the x coordinates of mouse position over a canvas element to fire en event

example
$("#div").fadeIn();

a simple example of how I'd like to use this function is if the mouse position is on the left of the canvas it fades a separate div in and then if the mouse is moved to the right side of the canvas element the div fades out. The canvas element is responsive and will resize with the browser

I need the event to occur without any click event but rather on mouseOver

video time update events
[0Replies]
- 03-May-2019 03:32 PM
- Forum: Using jQuery Plugins
Hi
please note this is designed for touch screen devices only at the moment although it should work with your mousewheel.

I've successfully gotten a nice video scrubbing action going here:
(please note you have to swipe the screen or roll the mouse wheel to activate)

http://www.mediaflash.ca/swipe_video_timeline/index.html

this relies on scroll position to scrub the video timeline. At the time update we see the animation event occur. (divs animate and are displayed)

however I cannot figure out how to reverse the effect. I would like the divs to toggle their animation state when the video timeline is played back to a previous currentTime - for example currentTime <= (some number)

here is the code I've used for the scroll position:

var vid = document.getElementById('v0');
var windowwidth = $(window).width()-20;

var scrollpos = window.pageXOffset/200;
var targetscrollpos = scrollpos;
var accel = 0;

// ---- Values you can tweak: ----
var accelamount = 0.1; //How fast the video will try to catch up with the target position. 1 = instantaneous, 0 = do nothing.

// pause video on load
vid.pause();

window.onscroll = function(){
//Set the video position that we want to end up at:
targetscrollpos = window.pageXOffset/200;
};

setInterval(function(){
//Accelerate towards the target:
scrollpos += (targetscrollpos - scrollpos)*accelamount;
//update video playback
vid.currentTime = scrollpos;
vid.pause();
}, 60);

and the script used for the event handler:

function myHandler() {
$(".boxB").animate({ marginLeft:'0px'},400);
$(".boxA").animate({ width:'620px'}, 400);
}

var runAtTime = function(handler, time) {
var wrapped = function() {
if(this.currentTime >= time) {
$(this).off('timeupdate', wrapped);
return handler.apply(this, arguments);
}
}
return wrapped;
};

$('#v0').on('timeupdate', runAtTime(myHandler, 3.5));

Perhaps there is a way to combine the 2 separate scripts?
I'm a a loss if I should even be pursuing this idea with this particular approach.

any suggestions on where to look would be appreciated

swipe to animate PNG sprite sequence
[0Replies]
- 26-Mar-2018 05:04 PM
- Forum: Using jQuery
Hi
The problem I'm having is how to control the width of the area the user swipes (touch move) their iPad or other iOS device and the 'mousemove' on desktop to effectuate a PNG sequence animation.

At the moment the user has to swipe the entire width of their iPad to play the entire sequence of a sprite PNG. NO one ever swipes the entire width and so they don't see the full left and right frames which is vital in this particular case..

I would like to decrease the width of the area they need to swipe to cycle through the entire animation I hope this question is clear. For the work in progress which should help please see the link below, and perhaps have a look at the source 'eelslap.js' code.. Yes I borrowed this code from a popular 'eelslap site' by Actnormal

http://mediaflash.ca/eelslap2/eelslap_jim.html

trigger a swipe event
[4Replies]
- 11-Jul-2017 08:53 AM
- Forum: Using jQuery
hi
I'm using this great swipe function that works perfectly.
found here: http://labs.rampinteractive.co.uk/touchSwipe/demos/Basic_swipe.html

I can't find a way to trigger this swipe event from another div click. That is to say - user clicks on #div1 and it fires $(#test).swipe.I tried trigger, bind event, a few other things and no luck. any clues ?

cross fade images jquery-infinite-rotator
[3Replies]
- 13-Sep-2016 08:33 AM
- Forum: Using jQuery
hi
i'm using this code to play a series of images cross-fading in an infinite loop. What I'd like to do is have a button that will hide the div that is displaying the looped images then another button that shows it again BUT when clicked it starts the loop from the beginning, that is to say the first pic should be seen right away when the div fades back in. At the moment I have it set up just to fadein /out the div but can't figure out how to play from the first image.

seen here:
http://www.mediaflash.ca/rotator/index.html
any suggestions?

pre loading adobe edge animation content with jQuery
[6Replies]
- 05-Jan-2016 07:52 PM
- Forum: Using jQuery
Is there a way using jQuery to preload adobe edge animation content. By that I don't mean the actual adobe edge animation but the PNG and JPEGSs used in the animation. at the moment I cannot find a way to properly preload an Edge animation ( I have a huge file with lots of PNGs ) I would be happy if the adobe edge preloaded function works but it doesn't. My entire page interrupts any DOM activities including jQuery or css loading bar animations or whatever I'd like to amuse the viewer with while loading my adobe edge animation.

I thought a solution would be to have a page that only contains a loading bar and that preloads all the images to come on a separate page that contains the adobe edge animation. Then when loaded redirects to the page with the adobe edge content and the result would be that it loads much faster. I'm not concerned that the primary pages takes a while to load . at least I'll have properly functioning loading bar.

this page:

http://www.mediaflash.ca/web/index.html

when loaded opens this page( but the adobe edge animation still takes forever to load):

http://www.mediaflash.ca/web/carhop_modified.html

audio issues on iPad
[16Replies]
- 22-Oct-2015 12:31 PM
- Forum: Using jQuery
on this site i have set up using fullscreen.js I can't figure out how to get the 'afterLoad' function to trigger a new audio sound on my iPad. It works perfectly on desktop ( safari).

if you scroll down the will notice the audio track changes. On iPad the video and audio only pauses and plays (but it sort of works in that it does control stopping and starting separate audio and video tracks which is a hopeful sign that I've done something correctly).

http://www.mediaflash.ca/jimscroll/examples/navigationV.html

View on iPad to see how this doesn't work.

fullscreen.js transformation animation not working
[10Replies]
- 29-Sep-2015 02:24 PM
- Forum: Using jQuery
I have a page made with fullscreen.js ( copied and modified directly from author's site). However the animation technique he describes in this youTube clip doesn't work for me.

authors; clip:

https://www.youtube.com/watch?v=qiCVPpI9l3M

my page so far:

http://www.mediaflash.ca/fullPagejsJIM/examples/navigationV.html

can't figure it out any suggestions.

swipe up and down on iPad scrolls to exact div position
[21Replies]
- 25-Sep-2015 01:30 PM
- Forum: Using jQuery
I need to understand what approach to take to get the up / down swipe events on iPad to function the same as click events that scroll exactly to a div position. If you view the page I've set up and click on one of the green circle buttons on the right it will scroll down or up the page to a absolute positioned div on the page and trigger a function to change the button color.

swipping on the iPad will scroll right past any target or marker. I need it to stop at the div scrollTop() position.

For the moment I'm scrolling the html,body. I know if I enclosed my divs in a wrapper and disable iPad scrolling and and touch swipe plugging maybe I'll get what I want. But I'm lost in the myriad of information available about which approach to take. can anyone suggest the best method to start from?

sample:

http://www.mediaflash.ca/NEWbboy/test.html

preload
[5Replies]
- 12-Sep-2015 12:25 PM
- Forum: Using jQuery
I've been experimenting with several preloads found in this forum and am not sure which is most effective. I've been testing with:

$.fn.preload = function() {

this.each(function(){

$('<img/>')[0].src = this;

});

}

then:

$(["images/IMG_00000.jpg", "images/hip1_00001.png", "images/hip1_00002.png",...etc.... ']).preload();

You will notice my images are in folder called 'images'. Totally naive question, but does the preload function code above $('<img/>') refer to a folder called 'img' or does that refer to the image file?

Should my PNGs be in a folder called 'img' and not 'images'?

I have a huge number of png files to load (over 200)

fotorama resize issue
[70Replies]
- 16-Apr-2015 09:49 PM
- Forum: Using jQuery
I've set up a responsive Fotorama page with several different Fotorama divs. Idealy i would like the Fotorama pane to display a different size for iPads portrait / landscape modes and for desktop I'd like it to scale according to the users browser window size.

Using the responsive data-width, data-height styles as shown below works more or less perfectly:

<div id="fotos1" class="fotorama"

data-width="100%"

data-ratio="1000/640">

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

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

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

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

</div>

<div id="fotosB1" class="fotorama"

data-width="100%"

data-ratio="1000/640">

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

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

</div>

I will eventually have several more divs (#fotos2, #fotos3, #fotos4, etc...up to 50 more ) all will be exactly the same size.

but before proceeding I need to figure why when (using a jquery button div) I click to hide one div (#fotos1) and show the next div (#fotosB1) it comes up as a small square NOT scaled up to the data-size). Only if I resize(drag) my browser window does it snap to rescale to the full size. Do I need to somehow add the data-width/height function on each button that opens the new fotorama div? And if so how?

I have additional css for the divs that looks like this:

#fotos1, #fotosB1 {

position: fixed;

width: 75%;

top: 137px;

left: 21%;

border-radius: 4px;

}

I also have a script up top that maybe is helping or maybe causing issues:

$(document).ready(function() {

$(window).bind("load resize", function(){

_winHeight = $(window).height();

$('.fotorama').css({'height':_winHeight * 1});%

});

I can show you the page I've set up but would have to explain how to get to the correct divs to click on to see results.

any suggestions as to what to change/rewrite? Something to do with fotorama.resize(); maybe?

force download a MP3 file
[4Replies]
- 13-Apr-2015 08:26 PM
- Forum: Using jQuery
I've seen a few posts that relate to this, but I'm still stumped.
I've set up a php file to force download a mp3 file

my query script:

<a href="music/direct_download.php?file=Go Slow - featuring Eric Siblin.mp3"></a>

and in the 'music' folder a php file called 'direct_download.php' - which has this code in it:

<?php

$file = $_GET['file'];

header ("Content-type: octet/stream");

header ("Content-disposition: attachment; filename=".$file.";");

header("Content-Length: ".filesize($file));

readfile($file);

exit;

?>

Everything works perfectly on one server account ( my own account with a different provider). This work pretty well in all browsers I tested.

But on my client's server account ( a completely different server with the same stuff posted there) it doesn't work. The function either spins with no result or opens a new page actually showing the code that represents the mp3 file I'm assuming.

What do I need to do to get the client's server working or is there a better way to do this.

IOS audio get/set current time
[28Replies]
- 22-Mar-2015 03:53 PM
- Forum: Using jQuery
I need to create a button ( that will specifically work on iOS devices as well as other browsers) to play different audio files at specified times of the audio files.

I'm completely lost. but here is want I want to achieve:

A song is playing. The user clicks on a button and a different version of the song starts playing ( a completely different audio file that contains a different arrangement of the same music with different musicians playing). However the newly selected song must start playing at exactly the same time as the first left off at. The effect would be that you are listening to the song then 'click ' and the song is still playing at the same spot but magically you hear a different vocalist singing.

I solved this very easily on desktop browsers by simply using :

$(".songA").trigger('pause');

$(".songB").trigger('play');

I can toggle back and forth using this perfectly.

Since iOS devices won't let me control the volume/pause of each separate audio file individually) I thought a cool solution would be somehow stop the first $(".songA") then get it's currentTime and then apply that figure to the second song and start playing $(".songB") at that new time signature.

I've been searching for a week and am lost how to use get / set currentTime function. Maybe this isn't event he best solution.

Freewall gallery link issues

[26Replies]

04-Feb-2015 11:08 AM
Forum: Using jQuery Plugins

I'm using the script available from the Freewall gallery project ( http://vnjs.net/www/project/freewall/ )

I need to know how to make the images in the gallery 'clickable' ( they must perform a function to make other independent divs on the page visible or not)

with some searching I found how to incorporate a link VAR but this shows how to load a new URL . I can't figure how to modify to enable each image box to perform a Jquery function.

The 'selector: '.cell' option does work perfectly, however it doesn't give me a way to make each cell perform a different function.

Any ideas?

Here is the most recent code i have that opens different urls:

<script type="text/javascript">
        var links = ["A.html", "B.html", "C.html"];
        var titles = ["titleA", "titleB", "titleC"];
        var temp = "<a href='{link}' ><div class='cell' style='width:{width}px; height: {height}px; background-image: url(grid-images/photo/{index}.jpg)'><div class='showOnHover'>{title}</div></div></a>";
        var w = 280, h = 320, html = '', limitItem = 15;
        for (var i = 0; i < limitItem; ++i) {
            html += temp.replace(/\{height\}/g, h).replace(/\{width\}/g, w).replace("{index}", i + 1).replace("{link}", links[i]).replace("{title}", titles[i]);
        }
        $("#freewall").html(html);

        var wall = new freewall("#freewall");
        wall.reset({
            selector: '.cell',
            animate: true,
            cellW: 280,
            cellH: 320,
            onResize: function() {
                wall.refresh();
            }
        });
        wall.fitWidth();
        // for scroll bar appear;
        $(window).trigger("resize");
    </script>

JQery /HTML5 Audio file Fade
[6Replies]
- 20-Nov-2014 10:13 AM
- Forum: Using jQuery
hi
About a year ago I was involved with Jakecigar's great scrollsound control code found on the post 'Audio fading in and out scroll position' and 'Jquery/HTML5 Audio file Fade 2'

I cannot figure out how to implement the pause/play functionality. I would like to pause and then play ALL of the 'soundTour' music files ( regardless of where the user is scrolled to on the browser page. In other words, pause all sounds. I've managed to stop the sound with

$('#soundTour3,#soundTour2,#soundTour1').scrollPlay({

play:false

});

});

But to reactivate the sound I'm at a loss. I've tried :

$('#soundTour3,#soundTour2,#soundTour1').scrollPlay({

play:true

});

});

But that doesn't work. Any suggestions? Also to further complicate things. The user may or may not click on an entirely different set of sound files available on the site ( independant to the soundscroll music ). I don't want to interfere with these sounds. As well, if the user clicks one of the independant sounds it must pause (interrupt) the sound scroll sound. Don't want 2 songs playing at the same time.

Any help would be appreciated,

Jaimmy

stop swipe left and right on ipad/iPhone
[0Replies]
- 12-Nov-2013 11:28 AM
- Forum: Using jQuery
I have a nice animation function that occurs on swipe left/right but i want to stop all left/right swipe actions on a button click and be able to resume them on another button click. I also want to be able to continue scrolling my new vertical scroll divs that appear.
Not sure how to explain further, Here's an example ( viewed correcty on iPad so far only - but you sort of get the idea on desktop even though some events are firing incorrectly- You will need to close your browser window down so you only see the graphics with no white border!):

http://www.mediaflash.ca/scrubJim7f/index.html

if you swipe left or right the scene animates. If you click on one of the buttons that appear a new Div fades in to hide everything below it and new scrollable divs also fade in. The problem is that underneath in the bottom z-index layers the jquery animation continues if you happen to swipe the screen again. I need to either stop the swipe function or stop the animations. I have no idea which avenue I should be exploring. Stop ? stop .fx.? Stop propagation?
any help...?

here is a short sample of some of the function code i'm using to animate the menu buttons:

$(document).scroll(function () {
var x = $(this).scrollLeft();
if (x < 100) {
$("#rightmenu1").transition({ opacity: 1, x: -400, y: 50, delay: 500 }, 200)
.transition({ x: -340, y: 45 }, 100, 'ease');

$("#rightmenuX2").transition({ opacity: 1, x: -400, y: 50, delay: 700 }, 200)
.transition({ x: -340, y: 45 }, 100, 'ease');

$("#rightmenuY3").transition({ opacity: 1, x: -400, y: 50, delay: 800 }, 200)
.transition({ x: -340, y: 45 }, 100, 'ease');

__________________________________________________________________

this is how i got the background video animation working (it's from a download provided by Gary Hepting at Emerge interactive)


<img id="video" src="./frames/image_000000.jpg" alt="" />


<script type="text/javascript">

</script>

Video events
[5Replies]
- 20-May-2013 04:58 PM
- Forum: Using jQuery
HI
I'm looking for a way to fade out a div when a video starts playing. Basically as soon as the video (which auto starts playing) has loaded or started playing the div fades out.

I'm also using 'query-simplevideo.js' to control the video playback if that's important to know.

here'a some of the code I have in place now:

...........................................................................................................................
IN the BODY:
...........................................................................................................................

<div id ="overlay">JImmy</div>

<video id="test">
<source src="vids/danse2.mp4" type="video/mp4">
<source src="vids/danse2.ogv" type="video/ogg">
</video>

...........................................................................................................................
and in the HEAD:
...........................................................................................................................

<script >

$(document).ready(function() {

$('video').simpleVideo();
$('#test').trigger('play');
});

</script>
...........................................................................................................................

I'm looking for something sort of like:

$('#test').on('play', function(e) {
$('#overlay').fadeOut('slow');
});

But of course this doesn't work.
Any suggestions?

scrolling controls a div position
[5Replies]
- 02-May-2013 03:06 PM
- Forum: Using jQuery
I've seen this Jfiidle example which is exactly the effect I'm looking for.. I've lost who posted it.

http://jsfiddle.net/e4VzT/2/

I don't mind using an entirely different technique but in the end what I'd like to see is a div's height controling the position of another div on scroll activity.

How o I get this effect working. Any suggestions?

Jaimmy

JQery /HTML5 Audio file Fade 2
[47Replies]
- 20-Apr-2013 02:16 PM
- Forum: Using jQuery
Hi
OK after much tinkering I've given up. An descriptionof what I'd like to achieve: User scrolls down the page the sound fades in. Scroll up the page the sound fades out. I want to be able to control (more or less) at what point on the scroll the sound fades in/out. Please be aware there are other sounds playing as well I don't want to affect if possible. If this proves too difficult then I don't care if the others sounds fade out as well.

I'm using a specific plugin called volumizer found on post called
JQery /HTML5 Audio file Fade out

Here is some code that doesn't work at all but it give you and idea of what I'm trying for:

HTML:

<audio loop id="soundTour3" src="audio/smooth_beat.mp3"></audio>

JAVASCRIPT:

</script><script type="text/javascript" charset="utf-8">

$(document).ready(function() {
var audioElm = $('#soundTour3').get(0);
audioElm.volume = 0
audioElm.play();

});

$(window).scroll(function(){
// gets the position of the window
var y = $(window).scrollTop();

if( y > (500) ){
$('#soundTour3').volumizer({1:[5,10000]})
if( y < (500) ){
$('#soundTour3').volumizer({1:[5,.0001]})

});

</script>

«Prev
Next »

Response title

Attachments

jQuery Forum

Activity Trend

JQery /HTML5 Audio file Fade out