I've got a custom javascript slider that I'm having trouble with in Safari. When the menu is revealed, the slider appears directly below where it should be. Once you click it, it pops back up to its correct place. It's also very tricky to get to move. I've created a video below demonstrating the problem.

http://screencast.com/t/ZGE5MDIxNmQ

Has anyone else had a similar problem? If so, were you able to figure out a solution?

  • I don't think anyone can even attempt to help you without seeing the code. Nathan Duran over 6 years ago

1 answer

0
points

Right. The page is here: http://salumenewyork.com/paninipedia/

And here is the specific HTML:

<div id="sidebar" role="complementary">
<a href="/"><img id="logo" src="/wp-content/themes/salume/img/logo.jpg" alt="logo" /></a>
<div id="sidebar-text">
    <p>330 West Broadway at Grand St<br />New York, NY</p>
</div>
<div id="paninipedia-menu-container">
    <ul id="paninipedia-menu-top">
        <li class="menu-ingredients expand">                    
            <a href="#"><div class="menu-item-ingredients"></div></a>
            <ul class="acitem">
                <li class="folder">                     
                    <a href="#">
                        <img id="logo" src="/wp-content/themes/salume/img/cheese.gif" alt="logo" />Cheese</a>
                        <ul class="menu_subnav">
                        </ul>
                    </li>
                    <li class="folder">                     
                        <a href="#">
                            <img id="logo" src="/wp-content/themes/salume/img/cold-meat.gif" alt="logo" />Cold Meat</a>
                            <ul class="menu_subnav">
                                <li>
                                    <a onclick="return false;" href="/paninipedia/bresaola/?isAjax=true">Bresaola</a>
                                </li>
                                <li>
                                    <a onclick="return false;" href="/paninipedia/prosciutto-crudo/?isAjax=true">Prosciutto Crudo</a>
                                </li>
                            </ul>
                        </li>
                        <li class="folder">                     
                            <a href="#">
                                <img id="logo" src="/wp-content/themes/salume/img/dressing.gif" alt="logo" />Dressing</a>
                                <ul class="menu_subnav">
                                </ul>
                            </li>
                            <li class="folder">                     
                                <a href="#">
                                    <img id="logo" src="/wp-content/themes/salume/img/fish.gif" alt="logo" />Fish</a>
                                    <ul class="menu_subnav">
                                    </ul>
                                </li>
                                <li class="folder">                     
                                    <a href="#">
                                        <img id="logo" src="/wp-content/themes/salume/img/fruit.gif" alt="logo" />Fruit</a>
                                        <ul class="menu_subnav">
                                        </ul>
                                    </li>
                                    <li class="folder">                     
                                        <a href="#">
                                            <img id="logo" src="/wp-content/themes/salume/img/meat.gif" alt="logo" />Meat</a>
                                            <ul class="menu_subnav">
                                            </ul>
                                        </li>
                                        <li class="folder">                     
                                            <a href="#">
                                                <img id="logo" src="/wp-content/themes/salume/img/sauce.gif" alt="logo" />Sauce</a>
                                                <ul class="menu_subnav">
                                                </ul>
                                            </li>
                                            <li class="folder">                     
                                                <a href="#">
                                                    <img id="logo" src="/wp-content/themes/salume/img/vegetables.gif" alt="logo" />Vegetables</a>
                                                    <ul class="menu_subnav">
                                                    </ul>
                                                </li>
                                            </ul>
                                        </li>
                                        <li class="menu-panini">
                                            <a href="#"><div class="menu-item-panini"></div></a>
                                            <ul class="acitem">
                                                <div id="scrollbar-container-menu">
                                                    <div class="Scrollbar-Up"></div>
                                                    <div class="Scrollbar-Down"></div>
                                                    <div class="Scrollbar-Track">
                                                        <img src="/wp-content/themes/salume/img/scrollbar_button.png" class="Scrollbar-Handle" />
                                                    </div>
                                                </div>
                                                <div class="panini-top-menu-container">
                                                    <div id="scroller-menu">
                                                        <div class="panini-container">
                                                            <li><a onclick="return false;" href="/paninipedia/alba/?isAjax=true">Alba</a></li>
                                                            <li><a onclick="return false;" href="/paninipedia/asti/?isAjax=true">Asti</a></li>

                                                            ...

                                                            <li><a onclick="return false;" href="#">dummy panini</a></li>
                                                        </div>
                                                    </div>
                                                </div>
                                            </ul>
                                        </li>
                                        <ul/>

                                    </div>
                                </div>

And the CSS:

/* scroller for second menu */

#scroller-menu{

position: absolute; 
overflow: hidden;
width: 135px;
height: 203px;

}

#scrollbar-container-menu {

 position: absolute;
 width: 153px; 
 overflow:hidden;
 right: 760px;
 margin-top: 0;
 visibility: hidden;
 float: left;
 z-index: 1;

}

#scrollbar-container-menu .Scrollbar-Track {

width: 12px; 
height: 208px;
top: 36px; left: 4px;

}

.panini-container {

position: absolute;
overflow: hidden;

}

/ general scrollbar / .Scrollbar-Track {

 width: 12px; height: 259px;
 top: 36px; left: 4px;
 background: transparent url('assets/scrollbar_track.png') no-repeat center center;

}

#scroller, #scroller-entry {

position: absolute; 
overflow: hidden;
width: 445px;
height: 220px;

}

#scroller-entry {

height: 290px;

}

#Scrollbar-Container {

  position: absolute;
  top: 233px; 
  right: 263px;  

}

.Scrollbar-Handle {

 position: absolute;
 width: 12px; height: 12px;

}

Would appreciate any help.

Answered over 6 years ago by Axel Anderson