Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

help required with java script

Posted on 2013-01-16
13
Medium Priority
?
147 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
[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
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
Build and deliver software with DevOps

A digital transformation requires faster time to market, shorter software development lifecycles, and the ability to adapt rapidly to changing customer demands. DevOps provides the solution.

 

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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

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…
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

722 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