Search jQuery

jQuery Forum

Screen name:
lumierephoto

lumierephoto's Profile

3 Posts

3 Responses

0 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

Transitions not working with $.mobile.changePage for external page
[0Replies]
- 20-Sep-2011 05:41 AM
- Forum: jQuery Mobile
Here's the code:
2. $(document).ready(function(){
3. $("#violet").bind('ended', function(){
4. $.mobile.changePage($(document.location.href="vivian.html"),{transition: "fade"} );
5. });
6. });
I had to hack the chanePage method this way because it wouldn't change the page at all written this way:
$.mobile.changePage("vivian.html", { transition: "fade" } );
#Violet is the ID of an HTML5 video in the <video> tag. When it ends, I'm binding the event and opening a new page. This for an interactive project I'm working on and would like for the transitions to work as well as open the page. According to the Docs, this is supposed to be possible, but maybe I misunderstood.
The reason I'm opening in a new page rather than going to the next page in JQM i.e #page2, is because the styles and Javascript breaks.

I've tested in Beta 2 and 3.

Any help with this would be great!

How modify this Coda Pop Up plugin code to trigger only once?

[0Replies]

03-May-2010 08:29 PM
Forum: Using jQuery Plugins

This is the Coda Pop-Up plugin from jQuery For Designers blog. It's a great tutorial and I've got it to work beautifully, only for it's application on my website I'd like the effect to be triggered only once and run through the effect but after it is completed the trigger can't be activated again. With the existing code the effect is triggered every time you mouse over. I've tried messing with the '.stop(true, true)' but not very successful. Any help will be greatly appreciated!

The code can be seen at this link:

http://jqueryfordesigners.com/coda-popup-bubbles/comment-page-8/#allcomments

 $(function () {
        $('.bubbleInfo').each(function () {
            var distance = 10;
            var time = 250;
            var hideDelay = 500;

            var hideDelayTimer = null;

            var beingShown = false;
            var shown = false;
            var trigger = $('.trigger', this);
            var info = $('.popup', this).css('opacity', 0);


            $([trigger.get(0), info.get(0)]).mouseover(function () {
                if (hideDelayTimer) clearTimeout(hideDelayTimer);
                if (beingShown || shown) {
                    // don't trigger the animation again
                    return;
                } else {
                    // reset position of info box
                    beingShown = true;

                    info.css({
                        top: -90,
                        left: -33,
                        display: 'block'
                    }).animate({
                        top: '-=' + distance + 'px',
                        opacity: 1
                    }, time, 'swing', function() {
                        beingShown = false;
                        shown = true;
                    });
                }

                return false;
            }).mouseout(function () {
                if (hideDelayTimer) clearTimeout(hideDelayTimer);
                hideDelayTimer = setTimeout(function () {
                    hideDelayTimer = null;
                    info.animate({
                        top: '-=' + distance + 'px',
                        opacity: 0
                    }, time, 'swing', function () {
                        shown = false;
                        info.css('display', 'none');
                    });

                }, hideDelay);

                return false;
            });
        });
    });

Combining Image Cross Fade Transition with UI/API/1.8/Slider?
[0Replies]
- 17-Apr-2010 04:22 PM
- Forum: Using jQuery Plugins
Hello All,

I'm creating a website for my photo retouching showing before and after photos. I've seen the Before and After plugin but I'd like for the image to fade in and out and I don't like how the slider is right on the image itself. I'd like it to be below the image. I'm actually still pretty new to jQuery but I've successfully implemented a few plugins already including the jQuery Cycle Plugin. I have some experience in merging code in Flash but still kinda stumped by the jQuery. I could make this in Flash but I like jQuery and want to learn because I think this could be done with a lot less code.

What I'd like to do is use a UI slider (not the effect) and have the user control the FadeIn and FadeOut transitions like a volume knob where it can go back and forth with the before and after with a slow fade. Also, the ABILITY to have customized graphics (I want to create my own buttons and slider graphics but I know how to design so that isn't part of the question). There will be previous and next arrows on the left and right of the images which will then call on the next set of before and after images.

There is a great website by retoucher Chris Tarantino which is almost exactly what I want, only they go further and added the magnification feature as well. I'm pretty sure this is all done in Flash though:

http://www.christarantino.com/

My guess is that I could use a slideshow like the Cycle plugin (which I've already implemented). Create a slideshow (Exp: 'slideshow1', 'slideshow2' etc) each in their own DIV for each before and after set. The arrow buttons would need the functionality to go backwards and forward from each set. Then the slider UI would control the before and after fade transition in the exact same way for each set. Preferably controlled by the milliseconds to make it look elegant. Or like in Photoshop where you can use the opacity slider where you go from 0 to 100%

If anyone could help or guide me (or correct me) in the right direction I'd definitely appreciate it.

Thanks!!

«Prev
Next »

Response title

Attachments

jQuery Forum

Activity Trend