Solved

help required with java script

Posted on 2013-01-16
13
141 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
 

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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

These days socially coordinated efforts have turned into a critical requirement for enterprises.
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…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

895 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now