Solved

help required with java script

Posted on 2013-01-16
13
140 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
What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

 
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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this.Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it is …
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…
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)
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 …

759 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

20 Experts available now in Live!

Get 1:1 Help Now