?
Solved

AJAX, Javascript or JQuery Slot Machine like menu

Posted on 2011-09-13
25
Medium Priority
?
1,577 Views
Last Modified: 2012-05-12
Hi Experts,

I am trying to re-design the following site using ajax, javascript or JQuery. I am looking for help with 2 aspects.

1. How can I create a menu using JQuery or AJAX that looks the same as the example site?
2. Can you point me in the right direction with regards to getting the content of each page load in a similar way as the example site?

Example Site: http://goo.gl/JWiqU

Looking forward to your response.
0
Comment
Question by:Hendrik Wiese
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 9
  • 6
  • 2
  • +3
25 Comments
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 36528721
which browser is required for this site? Its not opening in IE8 and FF2
0
 
LVL 21

Author Comment

by:Hendrik Wiese
ID: 36528723
Firefox and IE works fine on my side. I have shortened the URL but you can access it directly at: www.wix.com/hennie79gmailcom/TWALA
0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 36528729
I tried this url only
0
Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

 
LVL 21

Author Comment

by:Hendrik Wiese
ID: 36528742
are you still not able to open it?
0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 36528763
its showing me 'Loading' for last 5 minutes
0
 
LVL 21

Author Comment

by:Hendrik Wiese
ID: 36528885
It's very quick on my side. Please note that the current website is a flash site, so you would need to have flash player installed for your browser
0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 36528937
Okay, i guess i don't have flash on my browser.
Can you post a pic which can explain the working of the menu?
0
 
LVL 21

Author Comment

by:Hendrik Wiese
ID: 36528949
Please see if you can open the following link, as the menu is very similar: http://osc4.template-help.com/wt_28854/menu.swf?button=1

0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 36528985
Yes, i can see. Let me see what i can do
0
 
LVL 22

Expert Comment

by:Kim Walker
ID: 36529124
It looks like you're trying to mimic flash. This is what I would do, I'm sure there are lots of other ways to do it, too.

You don't need JQuery nor Ajax.

Create your menu as an un-ordered list and set the css for the list items to display: inline with a 1px or so margin. The list items should appear side-by-side as menu tabs.

Include all of your pages in different divs on a single html page but set display: none to hide all but the first page div.

Set the onclick or onmouseup event on each tab of your menu to hide all the page divs then unhide the page div associated with that menu tab. The same onclick or onmouseup function can change the background color of the menu tab.

I've tried to post the code in here several times, but it just disappears. Here's a link to my example.
0
 
LVL 21

Author Comment

by:Hendrik Wiese
ID: 36529279
Dear xmediaman,

I had a look at your example and it does not look like the example at all. Am I missing something?
0
 
LVL 22

Expert Comment

by:Kim Walker
ID: 36529323
I think I totally missed the point. I just noticed the "slot machine" reference in the title. I'm not sure you can replicate that type of animation in javascript unless the viewer has a really fast computer. I'm anxious to see what gurvinder372 comes up with.
0
 
LVL 21

Author Comment

by:Hendrik Wiese
ID: 36535113
Hi gurvinder372,

Did you manage to get anything on this?

Thanks in advance!!!
0
 
LVL 82

Assisted Solution

by:leakim971
leakim971 earned 450 total points
ID: 36539610
0
 
LVL 21

Author Comment

by:Hendrik Wiese
ID: 36541230
Dear Leakim971,

Thank you for your comment, I have already been to that link (Query-quickie-Slot-machine-navigation) but not sure how I can change it to look like my example site http://goo.gl/JWiqU 

Any other suggestions would be greatly appreciated.

Thanks!!!
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36541703
You can animate with the jRumble or vibrate plugins

http://plugins.jquery.com/plugin-tags/vibrate
0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 36541748
@HendrikWiese: Sorry, i am not able to come up with anything on this.
I guess @leak's solution is the best you can go for
0
 
LVL 75

Assisted Solution

by:Michel Plungjan
Michel Plungjan earned 150 total points
ID: 36542323
Just a few pointers:

1: Ajax is Asynchronous JavaScript and XML and has to do with fetching new data without reloading the page using Javascript.
2: jQuery is a Javascript framework, written in JavaScript

So Ajax does nothing for the rolling of buttons, jQuery has some plugins that manipulate the CSS to show animations which is what plain JS would need to do too.
0
 
LVL 21

Author Comment

by:Hendrik Wiese
ID: 36557008
Hi Experts,

As mentioned I have already looked at the link posted by Leakim971 prior to submitting this question. Will any of you be able to modify the code on the link posted by Leak to give me the desired effect??

Please this would be much appreciated.

Thanks!!!
0
 
LVL 9

Accepted Solution

by:
mrGreen earned 900 total points
ID: 36574020
Hi,

if you download the jQuery quickie: Slot machine navigation zip file, open it up and look in the images folder, you'll see buttons.png

open the image and youll see that the top half is the menu that is displayed normally and the bottom half is what slide over the top on mouse over.

So, the first thing you need to do is make an equivalent image for your menu.

Next you'll need to alter the html and css to suite your image.

What you could do is get a copy of the example on the site working and then replace buttons.png with your own version for your menu.

You can then experiment with the css to get it working for your version. buttons.png height is 150px, in the css you'll see the height for <ul> and <li> is 75px, the actual height of the menu, you'll need to change this. 75 is used in the javascript code in 2 places  as well:

"px " + $(this).data("newYpos") * 75 + "px"

You'll need to set that to whatever height you are using.

You'll also need to set the backgoround position for each menu item eg:

.navigation li a.marcofolio { background-position:0 0; }
2      .navigation li a.rss { background-position:-200px 0;  }
3      .navigation li a.twitter { background-position:-400px 0; }
4      .navigation li a.jquery { background-position:-600px 0; }


in his version each menu item is 200px wide.

Let me know how you get on it should be easy enough to customise this script.





0
 
LVL 21

Author Closing Comment

by:Hendrik Wiese
ID: 36597375
Did not receive a complete solution. So I used completely new buttons. But thanks for the response.
0

Featured Post

Give Your Engineering Team a Productivity Boost

Learn why container technology is so powerful and how it can provide your team with productivity gains and other benefits.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
Viewers will learn about if statements in Java and their use The if statement: The condition required to create an if statement: Variations of if statements: An example using if statements:
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question