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?
<div id=\"one\" class=\"content-box\"> <div class=\"col-one col\"> <a href=\"http://www.promoteyourteam.com/Mini-Hand-Press-Flashlight-p/tef-252.htm\"><img src=\"http://www.promoteyourteam.com/v/vspfiles/photos/eco/eco3.jpg\" alt=\"Eco Flash Light\" border=\"0\"></a> </div> <div class=\"col-two col\"> <h3><a href=\"http://www.promoteyourteam.com/Mini-Hand-Press-Flashlight-p/tef-252.htm\">Hand Press Flash Lights</a></h3> <p>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.</p> </div> <div class=\"col-three col\"> <p>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. <a href=\"http://www.promoteyourteam.com/Mini-Hand-Press-Flashlight-p/tef-252.htm\">Find out more!</a></p> </div> </div>
<div id=\"two\" class=\"content-box\"> <div class=\"col-one col\"> <a href=\"http://www.promoteyourteam.com/product-p/tef-253.htm\"><img src=\"http://www.promoteyourteam.com/v/vspfiles/photos/eco/eco2.jpg\" alt=\"Eco Friendly Flash Light\" border=\"0\"></a> </div> <div class=\"col-two col\"> <h3><a href=\"http://www.promoteyourteam.com/product-p/tef-253.htm\">Shake Flash Lights</a></h3> <p>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 </p> </div> <div class=\"col-three col\"> <p>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. </p> </div> </div>
<div id=\"three\" class=\"content-box\"> <div class=\"col-one col\"> <a href=\"http://www.promoteyourteam.com/product-p/fd-66.htm\"><img src=\"http://www.promoteyourteam.com/v/vspfiles/photos/eco/eco1.jpg\" alt=\"Eco Flash Drives\" border=\"0\"></a> </div> <div class=\"col-two col\"> <h3><a href=\"http://www.promoteyourteam.com/product-p/fd-66.htm\">Bamboo Flash Drives</a></h3> <p>Bamboo Flash Drives are made from bamboo which is blah blah blah</p> </div> <div class=\"col-three col\"> <p>Flash drives available for free shipping and free preload. Capacity ranges from 64 megs to 32 gigs!</p> </div> </div>
<div id=\"four\" class=\"content-box\"> <div class=\"col-one col\"> <a href=\"http://www.promoteyourteam.com/product-p/tmb-256.htm\"><img src=\"http://www.promoteyourteam.com/v/vspfiles/photos/eco/eco4.jpg\" alt=\"Eco Retail Bags\" border=\"0\"></a> </div> <div class=\"col-two col\"> <h3><a href=\"http://www.promoteyourteam.com/product-p/tmb-256.htm\">Eco Friendly Retail Bags</a></h3> <p>These bags are biodegradable making them the perfect Eco friendly retail bag of choice.</p> </div> <div class=\"col-three col\"> <p>Our PE Merchandise Bags offer the highest quality printing at discount prices. </p> </div> </div>
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: http://css-tricks.com/reduced-test-cases/ for more help on how to debug your code.
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.
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.
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??!@#!@#
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.???????????????
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
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 ... :
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 !
... 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...
<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:
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 :
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:
<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
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 ?
Anybody figure out the issue with the page jumping to the anchor? I've determined that much of what is occurring. Because an anchor is used to spin the "div" if the page has a scrollbar the page will move the anchor to the top. That's what anchors "were originally" intended to do. So, how do we get around that? How do I limit the anchor to only work relative to the "div"? Here is my example:
hey guys, i am hoping that somebody has found a solution for this. Just reading up on whats going on above i dont think anybody has posted an actual solution but i am also having the z-index issue where my links are not working.
http://www.djintl.net/residentdjs.php I have setup links to email addresses and a facebook icon so that when a person clicks on the email it sends them to another page, but only the last one works as you all know. Please HELP.
i fix the issue, to avoid the movement of the whole page y just change the href property for a dash "#" and add the rel property to indicate the tab id, that was on the html now at the javascript y change two lines:
hrefSelector = ""
for
hrefSelector = "rel"
and
hrefSelector = $el.attr("href");
for
hrefSelector = $el.attr("rel");
(Sorry about my english i'm just learning i hope you understand)
Here is the live view : http://www.promoteyourteam.com/Articles.asp?ID=144
Heres the code
Any idea's ? thanks!
Try creating the same section on their own page (on your local machine), to see if it works there. See: http://css-tricks.com/reduced-test-cases/ for more help on how to debug your code.
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??!@#!@#
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.
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
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
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 ... :
.content-box { overflow: hidden; position: absolute;* 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
the trick is to keep the "position: absolute" with some js to escape the css link-blocker...
ooohh, i'm far ...
then i tried some CSS :
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:
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
---> what causes the last div to let the link appearing ?
http://swapandshop.squarespace.com/?SSLogoutOk=true#one
http://www.djintl.net/residentdjs.php
I have setup links to email addresses and a facebook icon so that when a person clicks on the email it sends them to another page, but only the last one works as you all know.
Please HELP.
for and for (Sorry about my english i'm just learning i hope you understand)