• Post Reply Bookmark Topic Watch Topic
  • New Topic

Clicking on a link, with text appearing and a picture animating up or down  RSS feed

 
Greenhorn
Posts: 2
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi. I was talking to a programmer on stackoverflow, but sometimes they forget that people like me (with limited programming exp) don't understand what they understand. He tried helping me, but I really didn't understand.

I have my professional website which I should, if all goes according to plan, be releasing in the near future. In any case, I have a piece of code which the programmer modified, but I had to ask my friend what he meant, as he commented a part of it. I understood most of what she was saying (I think I did). I need help in completing this code, as I have done the best that I can do with my understanding of Javascript. Since I'll be working with my friend (as she asked me to work with her), I would be so happy if I could finish my code for my website.

Basically, I have a fancy rectangle that is 1000px in width. Let us say we are on the index page, and I click on services.php, well, the rectangle has to animate SMOOTHLY (keyword: smoothly) up OR down depending on how much text is on my services.php page. Thus, as I click on the link itself, it should do three things: First, the url changes to services.php. Secondly, the rectangle should smoothly animate either up or down. Thirdly, the text should appear. Of course, I have more than the services.php link.

Here is the code I have
url: I modified it, but kept the services.php part so you would know what page this is
green-pouch-fr is the fancy rectangle
servicesFR is the division on my services.php page (perhaps it should not be servicesFR?)
Also, there is the comment he left in there.





 
Author and ninkuma
Marshal
Posts: 66693
167
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Welcome to the Ranch.

Sami Matt wrote:Thus, as I click on the link itself, it should do three things: First, the url changes to services.php.


Why? You're doing an Ajax call, the whole purpose of which is to not change the page to another URL. Why this rather bizarre requirement?

Secondly, the rectangle should smoothly animate either up or down.


Is it not? You never really stated what problems you are encountering.

Depending upon the browser, what else is going on, and many other factors, the animation may be smooth or not.

Thirdly, the text should appear.


Does it or does it not? And what text? The response from the Ajax request?

Of course, I have more than the services.php link.


Not sure what this has to do with the issue(s) (whatever they are).

Here is the code I have
url: I modified it, but kept the services.php part so you would know what page this is


OK, so this means that the Ajax post is hitting the services.php page. The response returned from it should be a JSON construct with a property named, well, "property".

green-pouch-fr is the fancy rectangle


Yes, that's the target of the animation.

servicesFR is the division on my services.php page (perhaps it should not be servicesFR?)


Why not? Other than it's not a very descriptive name. I have no idea what the "FR" is supposed to denote, so it may not be the best name. But bad names (as long as they are valid for the context) won't stop code from working.

Does it match the id of the element that supposed to have the text injected?

Also, there is the comment he left in there.


Basically some instructions about what the PHP should do.
 
Sami Matt
Greenhorn
Posts: 2
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Thanks for the welcome.

Why not? Other than it's not a very descriptive name. I have no idea what the "FR" is supposed to denote, so it may not be the best name. But bad names (as long as they are valid for the context) won't stop code from working.

Does it match the id of the element that supposed to have the text injected?



FR means French. EN will mean english.
It matches the text on the services.php page



Of course, I have more than the services.php link.

Not sure what this has to do with the issue(s) (whatever they are).


Nothing, just noting it.


OK, so this means that the Ajax post is hitting the services.php page. The response returned from it should be a JSON construct with a property named, well, "property".



This I have no idea what that even means :/ As I said, I'm not strong in Javascript. I wish I was, for sure.



Thirdly, the text should appear.

Does it or does it not? And what text? The response from the Ajax request?



EDIT: No, it does not work.

This is the text from the division on each page.
The problem I have is the fact that there is zero animation. It goes from one place to the second place. Imagine like a slideToggle() animation. You know how smooth that is.


Thus, as I click on the link itself, it should do three things: First, the url changes to services.php.

Why? You're doing an Ajax call, the whole purpose of which is to not change the page to another URL. Why this rather bizarre requirement?



Well, what he was saying was this:

How else would you get data from another page based on an action? AJAX will not refresh the entire page, it's like a partial submission. You pass an Object to the $.ajax() method.



Basically, without the smooth animation, there would be no point in me having that. I might as well just have static text with static images.


EDIT: I just realized that no it's not working at all :/ when I arrive on the link, it just grabs the division already there, which automatically pushes down the image.
 
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
Boost this thread!