JQuery Animate Help

[CranialBlaze]

I have never used Jquery until about 2 days ago, started for a new design company and told them before had i have no idea how to use it but they still assigned me the last of fixing up the last guys code.

What we have now is a gallery of sorts with a number of images and a left/right control button, @ first i had to get it to stop @ the end of the show as the right click had no end, but using a modified version of the lefts stop code simply crashed the browser. Then we went on for the idea of just placing a reset image at the end of the gallery to return to the beginning, i tok the code from MoveRight and changed the function name and the references to MoveReset.

Before though to test to make sure the idea will work i assigned class="MoveRight" and id="left_btn" to the image and it moves the preset number of pixels for that section of the scrip, but if i set it as class="MoveReset" and the id="reset_btn" or even left/right the function does not work. I have no idea what i am doing and there is no one else in the office who can actually code in jquery and from where i am standing the solution is probably something simple that i just cant see.

Any help would be greatly appreciated. Thanks

Here is the file im working with http://dl.dropbox.com/u/6374897/index.html

Thanks again guys.

 

[guest2013-1]

There's literally thousands of gallery plugins for jQuery that already does what you want it to do. So stop fiddling with the code that some other idiot wrote, dump it, and replace it with any number of other *working* gallery plugins.

 

[guest2013-1]

I use galleriffic, btw. And jQuery isn't really "OMG WTF IS THIS", it's just JavaScript. So if I were you I'd learn that, and go further into jQuery

 

[CranialBlaze]

Dude, not helpful especially seeing as its not a gallery plugging, its an animate function with a fancybox popup and no there is nothing out there that will do exactly what i want as i already found the original script which was modified to work with the site in questions. Its a standard animate when clicked function to move the 3 separate image layers at different distances, the script itself is working, its my final modifications to put in a "reset" button which is not.

I spent the last 2+ days reading through the JQuery library to find something even close to what the last guy and i have absolutely know knowledge not do i care to learn Java, so finding a new gallery plugin and then having to modify that would be pretty pointless when i already have an almost working function, if i actually had any idea of what i was doing it would be working instead of almost.

 

[FarligOpptreden]

You know, only having access to the HTML without the CSS and image link makes it a bit difficult to guess what you want to achieve. Maybe post a sample of what's happening on jsFiddle and we can help tweak it from there?

 

[CranialBlaze]

You know, only having access to the HTML without the CSS and image link makes it a bit difficult to guess what you want to achieve. Maybe post a sample of what's happening on jsFiddle and we can help tweak it from there?

i have the faulty sample running on a test server.
http://www.cyburbia.co.za/testing-ehb/
Basically the reset button at the end of the scroller needs to trigger a bigger jump of the same event as the nav arrows. Im using the same code as for the arrows just renamed the function to hopefully make it work on its own.

 

[murraybiscuit]

+1.
please add the media and assets to the page.
you're going to need to put some effort in if you want help.
i'm with acid here though. your functionality doesn't sound out of the ordinary.
i'm pretty sure jcarousel and cycle come with callbacks/loops which could be used on complete...

 

[CranialBlaze]

+1.
please add the media and assets to the page.
you're going to need to put some effort in if you want help.
i'm with acid here though. your functionality doesn't sound out of the ordinary.
i'm pretty sure jcarousel and cycle come with callbacks/loops which could be used on complete...

Honestly your speaking Greek to me, I'm a CMS guy, this code Java script means nothing to me. Heck i could dump the whole site on my dropbox if needed, but i have not worked on a standard HTML website in years, got this site at the point where the scrollers were working, my parts to add in that reset button and then copy/paste it across to whatever other pages will need it.

 

[mcryan]

Just looking at the link posted, why not reverse the process of moving right and set it back to the starting point?

 

[murraybiscuit]

i would just get the original co-ords of all the initial components on load
then create a reset function/method which animates the properties back to the original ones onclick

 

[CranialBlaze]

Just looking at the link posted, why not reverse the process of moving right and set it back to the starting point?

I think thats what i am trying to do, there is a code section for the left button to move left, 1 layer moves X pixels another y pixels and the 3rd z pixels, i copied the code for the right button which was MoveRight and named it MoveReset, set the class and id in on that image but unless i use either MoveRigh's or MoveLeft's class and id it does nothing.

 

[mcryan]

Something like this:

$('#reset').click(function() {
$(".GalleryItem2").animate({"left": "-=350px"}, "slow");
$(".GalleryItem3").animate({"left": "-=280px"}, "slow");
$(".GalleryItem").animate({
left: '-=230px'
}, "slow", function() {
position = $(".GalleryItem").position();
galleryItemLeft = position.left;
if(galleryItemLeft <= 0) {
return false;
}
if(galleryItemLeft <= galleryWidth - galleryItemWidth) {
$('.MoveLeft').removeAttr('disabled');}
else{
$('.MoveLeft').attr('disabled','disabled');
$('.MoveRight').attr('disabled','disabled');
}
});

Give your reset image an id matching the jQuery element, i.e. <id="rest">. And obviously update the pixels to return to the start of the gallery.

 

[CranialBlaze]

Something like this:



Give your reset image an id matching the jQuery element, i.e. <id="rest">. And obviously update the pixels to return to the start of the gallery.

Thanks, i put that in and tried still with no luck. Here is my image line as it stands now:
<a href="#" class="reset" id="reset"/><div class="space_link"></div></a>

I have also tried:
<a href="#" class="#reset" id="reset"/><div class="space_link"></div></a>

But the only ones that still work are:
<a href="#" class="MoveRiht" id="reset"/><div class="space_link"></div></a>
<a href="#" class="MoveLeft" id="reset"/><div class="space_link"></div></a>

 

[mcryan]

Take some time to understand the basics of jQuery. Open up their API and do some learning, it will save you time in the long run!

$('#one') refers to an id tag of "one". $('.two') refers to any element belonging to the "two" class. Break it down and trigger a simple alert() on the click of your reset box. Make sure it is going into the code and then find out exactly what isn't working. Maybe try a diffent structure:

<a href="#" id="reset" onclick="reset()"/>Click me to reset</a>

Script:

function reset() {
alert('Hi');
}

------
Then add the code to animate the images to the correct position.

 

[CranialBlaze]

Take some time to understand the basics of jQuery. Open up their API and do some learning, it will save you time in the long run!

$('#one') refers to an id tag of "one". $('.two') refers to any element belonging to the "two" class. Break it down and trigger a simple alert() on the click of your reset box. Make sure it is going into the code and then find out exactly what isn't working. Maybe try a diffent structure:

<a href="#" id="reset" onclick="reset()"/>Click me to reset</a>

Script:

function reset() {
alert('Hi');
}

------
Then add the code to animate the images to the correct position.

Thanks for the help, but I'm not a coder, but requirements include the most basic of Java knowledge, i need to be able to change the speed of a scroller not code the scroller.
My job is design, i understand graphics, layout, html, css, some flash and the associated applications. When you get to these fancy things like Java and Action Script my head shuts down. I have spoken to friends with far more advanced knowledge than me with Java, i have spoken to a coder and the general consensus is my code it rite, my script is rite and there is no logical reason why it should not be working, that's why i have taken it to the public forums, see if anyone can come up with an illogical reason for the problem and maybe even a solution.

From what i am gathering from the responses here and elsewhere. there is nothing wrong with my code and in all theory it should work as its written, but for some reason its not, wont help me reading up and trying to learn java, its going to barely make it past my eyeballs before some bouncer kicks it out for inappropriate attire.

 

[mcryan]

Thanks for the help, but I'm not a coder, but requirements include the most basic of Java knowledge, i need to be able to change the speed of a scroller not code the scroller.
My job is design, i understand graphics, layout, html, css, some flash and the associated applications. When you get to these fancy things like Java and Action Script my head shuts down. I have spoken to friends with far more advanced knowledge than me with Java, i have spoken to a coder and the general consensus is my code it rite, my script is rite and there is no logical reason why it should not be working, that's why i have taken it to the public forums, see if anyone can come up with an illogical reason for the problem and maybe even a solution.

From what i am gathering from the responses here and elsewhere. there is nothing wrong with my code and in all theory it should work as its written, but for some reason its not, wont help me reading up and trying to learn java, its going to barely make it past my eyeballs before some bouncer kicks it out for inappropriate attire.

I sadly don't have time to pull all of the code and step through it to find the exact problem. If your company wants some help and are willing to pay for it, I will gladly solve the problem for you. May only be an hour if it's something small.

Best of luck.