Using an external "windows"-keyboard under Mac OS X

Question

I have an EasySlider slideshow on the homepage of my website that works well in Firefox and Chrome, but not in IE. The problem I specifically need help with occurs in IE7 and IE8.

If you click the previous arrow to go from the first slide to the last, the image in the last slide starts out on the left side then jumps to the right side where it belongs. When transitioning from the last slide to the first slide, the same thing happens with the image on the first slide. This problem only occurs on these two slides, and only only when going backwards from first slide to last slide (glitch on the last slide), and forward from last slide to first slide (glitch on the first slide).

HTML

<div id="slider">
    <ul>
        <li>
            <article id="architectural-illustration">
                <div class="slider-text">
                    <h1>A Fresh Look @ Architecture</h1>
                    <p>With over 10 years of architectural design experience we are able to create beautifully rendered 3D models and plans for almost any size or type of project using the latest in CAD technology. Let us help bring your projects to life!</p>
                    <p>seeing is believing: <a href="#">Drawing Board</a></p>
                </div>
                <div class="architectural-illustration-image">
                    <img alt="3D model of residential floorplan" src="images/drafting-3d-models-scroller.png" width="469" height="350" />
                 </div>
            </article>
        </li>
        <li>
            <article id="web-design">
                <div class="slider-text">
                    <h1>High Flying Web Designs</h1>
                    <p>No "cookie cutter" designs here! We believe that each client has its own story to tell. Our designs come from working closely with you. Give your site the look and feel needed to tell who you are.</p>
                    <p>preflight check: <a href="#">See Our Work</a></p>
                </div>
                <div class="web-design-image">
                    <img alt="binary code flag" src="images/web-designs-scroller.jpg" width="395" height="320" />
                </div>
            </article>
        </li>
        <li>
            <article id="3d-illustration">
                <div class="slider-text">
                    <h1>Product Illustration</h1>
                    <p>Whether your product is existing or a new idea, we can bring it to life. From still frames to full blown 3D animations, get the right tools to market your product.</p>
                    <p>sneak a peak: <a href="#">Examples</a></p>
                </div>
                <div class="model-image">
                    <img alt="3d illustration of shoring product" src="images/3d-product-illustration-scroller.png" width="397" height="315" /> 
                </div>
            </article>
        </li>
        <li>
            <article id="mobile-web">
                <div class="slider-text">
                    <h1>Make it mobile.</h1>
                    <p>Because websites are typically optimized for desktop usability, they don't follow the guidelines necessary for usable mobile access. "Bah Humbug!" With the mobile world advancing each and every day, we have solutions to make sure your web site goes everywhere you do.</p>
                    <p>learn more: <a href="#">Free Consultation</a></p>
                </div>
                <div class="mobile-web-image">
                    <img alt="mobile phone showing optimized website" src="images/mobile-website-solutions-scroller.jpg" width="401" height="353" />
                </div>
            </article>
        </li>
    </ul>
</div> <!-- end #slider div -->  

jQuery

<script type="text/javascript">
$(document).ready(function() {
                           $("#slider").easySlider({
                                                   auto: true,
                                                   continuous: true
                                                   });
                           });
</script>  

CSS

#slider ul, #slider li {
margin:0;
padding:0;
list-style:none;
}
#slider, #slider li {
margin-bottom:20px;
background-color:#fff;
width:960px;
height:375px;
overflow:hidden;
}
#slider article{
width:960px;
height:375px;
}
#slider article p {
margin-top:20px;
}
#slider article div.slider-text {
width: 470px;
margin:20px;
margin-right:0px;
float:left;
}
#slider article div.architectural-illustration-image,
#slider article div.web-design-image,
#slider article div.model-image,
#slider article div.mobile-web-image {
width:470px;
float:right;
overflow:hidden;
}
#slider article div.architectural-illustration-image {
margin-right:0px;
margin-top:25px;
width:462px;
height:337px;
}
#slider article div.web-design-image {
margin-right: 20px;
margin-top:55px;
height:320px;
width:395px;
}
#slider article div.model-image {
margin-right:50px;
margin-top:25px;
height:315px;
width:397px;
}
#slider article div.mobile-web-image {
margin-right:0px;
margin-top:22px;
width:401px;
height:353px;
}  

Any help would be greatly appreciated. Thanks!

Solution 1

In OS X 10.5 they allow you to have different keyboard setups for different keyboards. This works most of the time. I've had issues with very old keyboards that are plugged in via a PS2 to USB but otherwise it works fine.

Solution 2

The best method I have is to download the Logitech Control Center for OSX from Logitech. Search throw the Installer package for the LCCKCHR.rsrc. Drop this file into either ~/Library/Keyboard Layouts or /Library/Keyboard Layouts. Logout and log back in and you'll notice a few more options in the International System Preferences under Inputs. Check the keyboard layouts you would like.

Although this keyboard layout is for Logitech keyboards it works for most keybaords (especially international users)

Solution 3

You create create your own custom keyboard mapping, which could then be used with the keyboard language menu. So when you plug in your keyboard, just switch to your custom layout. OS X has supported this since 10.2, and Apple has documentation on how to produce your own custom maps.

http://developer.apple.com/technotes/tn2002/tn2056.html

It's not something I've tried myself, just read about it once or twice. Looks like it could potentially do the job. I'd just duplicate a mapping that is as close as you can get to what you want, and then customise it from there.

Solution 4

You could investigate DoubleCommand, it may do what you need.

There's an experimental version that allows for different properties for different keyboards.

View more solutions

Comments

[booota]

I have the same problem. you got any solution?