Slot Machine Tabs HELP

[expo703]

Everytime you click on a tab the whole page moves down for some reason. Also, I have setup a href links inside the tabs such as on the image and h3 name..I created additional tab #4 and the A href links work fine on the image/h3 but not on the original 1-3 tabs. Wierd?

Here is the live view : http://www.promoteyourteam.com/Articles.asp?ID=144

Heres the code

Code:

• Eco Friendly Product 1
• Eco Friendly Product 2
• Eco Friendly Product 3
• Eco Friendly Product 4

Hand Press Flash Lights

A Ideal Emergency Product and Eco Friendly. The ergonomic design puts a light right at your fingertips. One minute of pressing generates 5 minutes of light.

The handy size makes it ideal for a pocket, a purse, a drawer, a glove compartment, a backpack, a suitcase or anywhere else hands of all ages and sizes need a quick, convenient light – and it never needs new batteries. Find out more!

Shake Flash Lights

Eco Friendly – Never needs new batteries – Extra bright LED output – Internal lithium-ion batteries retain power & increase brightness – Shaking for 1 minute = at least 30 minutes of lighting – Rain-proof & shockproof – LED can function for more than 100,000 hours

Water and weather resistant, the original AnyTime FlashLight is lightweight and serves as a dynamite promotional product. This shake flashlight is perfect for the car, the home, the boat, or the RV… & it never needs batteries.

Bamboo Flash Drives

Bamboo Flash Drives are made from bamboo which is blah blah blah

Flash drives available for free shipping and free preload. Capacity ranges from 64 megs to 32 gigs!

Eco Friendly Retail Bags

These bags are biodegradable making them the perfect Eco friendly retail bag of choice.

Our PE Merchandise Bags offer the highest quality printing at discount prices.

Any idea’s ? thanks!

[ChrisRadford]

It’s an issue with the Javascript not preventing the links shifting the page ( a link to #one will move the page to the top of the id="one" content area).

Try creating the same section on their own page (on your local machine), to see if it works there. See: https://css-tricks.com/reduced-test-cases/ for more help on how to debug your code.

[expo703]

Kinda confused…but i’m also wondering why the <a href""></a> links aren’t showing up on tabs-1-3 but the 4th tab I created the a href links in the text and on the img work. It works fine in IE..however in FF only tab 4 has links.

[doobie]

Yo Expo,

I snagged the code off of your page (only the slot machine tabs code, nothing else), and tossed it into a blank page. Grabbed the .js from Chris and uploaded it. Works fine. No jumping. The problem is most likely a JS problem with your CMS. the test page is at: http://daniellehendrix.com/test.html. Take a look. I know the slots don’t load exactly right at first load, but after you click a tab, it works fine.

-J

[expo703]

"doobie" wrote:

Yo Expo,

I snagged the code off of your page (only the slot machine tabs code, nothing else), and tossed it into a blank page. Grabbed the .js from Chris and uploaded it. Works fine. No jumping. The problem is most likely a JS problem with your CMS. the test page is at: http://daniellehendrix.com/test.html. Take a look. I know the slots don’t load exactly right at first load, but after you click a tab, it works fine.

-J

Thanks doodie. So what can I do to resolve this? Contact volusion? Also if you go to your test page.. notice how tab 1 – 3 the "title" and image" and "read more" links DO NOT work. HOWEVER, on the 4th tab the image links, header links, works. WHY??!@#!@#

[expo703]

?!?!?!? =/

[doobie]

tab linking problem is a z-index issue with the .current class.

[expo703]

yup just fixed that..thx

Still trying to figure out what/why when you click on tab <a href="#two"> etc the #two/#three/#four position keeps making the page change position.

[expo703]

If its a JS error in my CMS? what do I need to do to resolve this? what do i tell volusion? where do I go from here?

[expo703]

Still trying to figure out what/why when you click on tab <a href="#two"> etc the #two/#three/#four position keeps making the page change position.???????????????

[Garuda0190]

Hey guys!

I also have a problem with the slot machine. Somehow links don’t work inside the columns and the box-wrapper.
So if somebody already had the same problem or has any idea for a solution i would be very grateful

[xawyer]

I have the same problem as expo703 on my page : http://wno426755.web36.talkactive.net/omheimesida.php

Its working okay, but the page changes position every time i click on a tab.

Kind of frustrating, because its a very nice Slot machine

[AkoZ]

ok done… in minutes ..
i use your methods .. which is to test step by step, code by code .. oh it’s in CSS … then
sum up:
in fact i use your JS in a wordpress site (http://future-architecture.org) (hey … slow, this is in preparation… for good articles …
* here i can’t use the links in the box content …
* so i’m there for now … :

Code:

.content-box { overflow: hidden; position: absolute;

the error comes from the "absolute" (this position retire totally from the flux of the concerned content ! but the other way to have a fix position is "fixed" which doesn’t absolutely convince ! so … i just try the other stupidly "relative ?? (here but it’s ok for the link .. but not well placed…

* hep position: static (in CSS) is ok …only for the link…
* Also as i used the 4 methods, then it is to make a subtle thing to get the absolute position without losing the link…
Some in this way suggest about z-index… but it doesn’t work too …
my limits to find and try… i just let this for other pro to say the solution… for now, i’ll try , perhaps you’ll find before i ) as well thanks in advance !

[AkoZ]

… oh i just try javascript solution (?) , but not finished for now:
the trick is to keep the "position: absolute" with some js to escape the css link-blocker…

Code:

<script type="text/javascript">
function setPositionAbsolute()
{
document.getElementById("tone").style.position="absolute";
}
</script>

where the "tone" id is the tab one … then as the position is for the content-box:

Code:

<div id="tone" class="content-box" onclick="setPositionAbsolute()">

but it’s not definite as it doesn’t go for the 2nd tab … i would like to define the same as the class in CSS but done in the js road (??) , here the onclick is ok for the 1st tab coz it doesn’t move but the 2nd is in an other position hidden, and it doesn’t do the trick …
ooohh, i’m far …
then i tried some CSS :

Code:

<div id="tfive" class="cont-boxslot" style="position: absolute;">

but it doesn’t enough .. strangely there is one link available … the last one !! in the column …(a tip ?)
hey, as this is the suite: i’ve tried also in JS:

Code:

<script type="text/javascript">
var txt = "TEST link in js inside this !!";
document.write("<p>Link: " + txt.link("http://www.w3schools.com") + "</p>");
</script>

such a shame (??) this link is not usable !!
** now the way is to find if there is a restriction between CSS position: absolute and any link used with it ! ?? next ..
try try … then this

Code:

<div id="tfive" class="content-box" >...content!...</div>

when i delete the last div id (like this one, the link inside the precedent div can be used !! so there is something to be used in this fact:
—> what causes the last div to let the link appearing ?

[AkoZ]

but this may be from a z-index problem, coz all the "content-box" are superposed, except the last one (under all the others …) but not resolved

[Author]

Posts