Solved

help required with java script

Posted on 2013-01-16
13
144 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
Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

 

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 500 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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
Developers of all skill levels should learn to use current best practices when developing websites. However many developers, new and old, fall into the trap of using deprecated features because this is what so many tutorials and books tell them to u…
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 a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

828 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