Question

I want to zoom a div and what is within by scrolling, I saw this fiddle and tried to reproduced it http://jsfiddle.net/SHAPE/1/ but it is not working (no zoom).

Here my HTML:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="zoom.css"  type="text/css" rel="stylesheet" />
        <script type="text/javascript" src="zoom.js"></script>
<script type="text/javascript" src="jquery/jquery.mousewheel.js"></script>
<script type="text/javascript" src="jquery/jquery-1.8.3.min.js"></script>
</head>

<body>
<h1>Zoom</h1>
<div id="zoomContent">
    <p class="col1">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    <p class="col2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</body>

My js:

jQuery(function($) {
    $('#zoomContent')
        .bind('mousewheel', function(event, delta) {
            var _elm = $(this),
                _increment = delta * 1.2,
                _current = Number(_elm.css("font-size").split("px")[0]);
            console.log(_current + _increment);
            _elm.css("font-size", _current + _increment);
            return false;
        });
});

And my CSS:

#zoomContent{
        width: 600px;
    height: 300px;
    font-size: 16px;
    overflow: scroll;
    border: 5px solid #333;
}

.col1,
.col2{
        width: 10em;
    padding: 0.3em;
    background: red;
    float: left;
}

.col2{
        background: green;
}

What did I forget?

Thanks

Answer 1

Your code is using a jQuery plugin, in order that they work the plugin must be included after the core jQuery framework.

The following 2 lines should be the other way round

<script type="text/javascript" src="jquery/jquery.mousewheel.js"></script>
<script type="text/javascript" src="jquery/jquery-1.8.3.min.js"></script>

As they are in the fiddle you linked

zoom a div using jquery

1 个答案: