Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

help required with java script

Posted on 2013-01-16
13
Medium Priority
?
149 Views
Last Modified: 2013-06-09
I am trying to add some code to my webpage so when someone pressed the click here button, they jump to the videos tab on the same page.

http://www.fastxboxlive.com/special-offers/blackops2revolution.html

Just under country, I wanted...

Video example: Click here    then this to jump to the video section where the video is,

I will need to replicate this code on my other items.
code must be secure.

thanks, as always.
0
Comment
Question by:maxlucy
13 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38784029
The validator returns 95 errors on that page.  Before you ask us to dig around in your code to help you solve a problem, it makes sense to have an error free page, so changes will not produce unexpected results.

Cd&
0
 

Author Comment

by:maxlucy
ID: 38784043
just asking for code mate not to dig around on my webpage,  didnt even need to post that page just after some help not a lecture. :(
Your pulling apart simple < or color errors, nothing to be concerned over, I am no expert bit do my best, sorry didnt know I need a perfect level of php/html to post here for help,
0
 
LVL 19

Expert Comment

by:Albert Van Halen
ID: 38784165
It seems that there's no native method in prototype to trigger an HTML event.
There are some custom implementations of it like simulate.
See also : http://stackoverflow.com/questions/460644/trigger-an-event-with-prototype
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

Author Comment

by:maxlucy
ID: 38784195
thanks Albert,  will check link now
0
 
LVL 19

Expert Comment

by:Albert Van Halen
ID: 38784199
Another option is the execute the click method of the element (only tested it in Chrome)
$("product_tabs_productvideo").firstChild.click()

Open in new window

product_tabs_productvideo is the id of the listitem (the second tab) and firstchild is the link.
0
 

Author Comment

by:maxlucy
ID: 38784249
hmm I see, so how would you set out the code near the link.

of my code is..

<b>Video example:</b> Click here
0
 
LVL 9

Expert Comment

by:Sar1973
ID: 38787352
If you add a button between "Country" and price, you will disalign the video preview from the text div. I suggest to add an anchor (hyperlink) to "Country" text or a button just beside; change then line 220 from:
<b>Country:</b> EU<br />
to:
<b>Country:</b> EU<button type="button" onclick="GoToVideo()">Video Preview</button><br />
or also place the "EU" text inside the button:
<b>Country:</b> EU<button type="button" onclick="GoToVideo()">EU</button><br />
0
 

Author Comment

by:maxlucy
ID: 38788280
nice effort but still wont jump me to videos tab near bottom I am sure I did what you suggested, anything else I can try and THANKS for helping
0
 
LVL 19

Expert Comment

by:Albert Van Halen
ID: 38789227
I'm not quite sure what you mean with country; can't see it anywhere on the page.
Just in order to show the video tab you create an element in which you specifiy the click event to switch to the video tab.
<span onclick="$('product_tabs_productvideo').firstChild.click();">Show video</span>

Open in new window

This will work (at least) in Chrome.
You still have to check other browsers and perhaps use the simulate method mentioned before.
0
 

Author Comment

by:maxlucy
ID: 38794738
hi first excellent work!
iwhen I have them click the   show video it opens the video tab, but it does not jump down the page to the video,  how would I cause the page to jump?

texted in IE, FIREFOX AND GOOGLE  same result.  nearly there. :)
0
 
LVL 19

Accepted Solution

by:
Albert Van Halen earned 1500 total points
ID: 38798698
I have a suggestion.
Create a link in which you specify the name attribute.
<a name="tab"></a>

Open in new window

Put the element just before the tabscontrol in your html document. Please note that the name you specify is unique.

The span which I mentioned before should become an 'a' element as well. Specify the href attribute to "#tab" and leave the onclick event as it is.

Clicking the element will scroll to the element just before the tabscontrol having exactly what you want.
0
 

Author Comment

by:maxlucy
ID: 38799009
I kind of half understand it, can you show code if possible,

Also I dont have full access as this is a products page inside the magento template
0
 
LVL 19

Expert Comment

by:Albert Van Halen
ID: 38805086
If you don't have full access, how would you implement changes necessary ?
The changes will involve scripting or changes in markup.
Here are the changes needed in markup.

Create an anchor right before your tabscontrol and specify a unique name.
<a name="tabsanchor"></a><ul class="tabs">...</ul>

Open in new window

The span which I mentioned before shows the video tab, it's what you tested and worked. Change the span into a hyperlink and specify the href attribute with the name of the anchor :
<a href="#tabsanchor" onclick="$('product_tabs_productvideo').firstChild.click();">Show video</a>

Open in new window

Default HTML behaviour will scroll to the anchor in your document.
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

This article discusses how to implement server side field validation and display customized error messages to the client.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
Suggested Courses

916 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