Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Slot Machine Tabs HELP

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #29114
    expo703
    Participant

    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 Flash Light

    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!

    Eco Friendly Flash Light

    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.

    Eco Flash Drives

    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 Retail Bags

    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!

    #76364
    ChrisRadford
    Member

    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.

    #76471
    expo703
    Participant

    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.

    #76526
    doobie
    Member

    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

    #76550
    expo703
    Participant
    "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. [email protected]#[email protected]#

    #76648
    expo703
    Participant

    ?!?!?!? =/

    #76662
    doobie
    Member

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

    #76663
    expo703
    Participant

    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.

    #76697
    expo703
    Participant

    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?

    #77247
    expo703
    Participant

    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.???????????????

    #78833
    Garuda0190
    Member

    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

    #80633
    xawyer
    Member

    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 :)

    #80845
    AkoZ
    Participant

    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 !

    #80849
    AkoZ
    Participant

    … 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 ?) :roll:
    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 !! :cry:
    ** 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 ?

    #80857
    AkoZ
    Participant

    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

Viewing 15 posts - 1 through 15 (of 18 total)
  • The forum ‘CSS’ is closed to new topics and replies.