CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Captain Dando
Captain Dando

Reputation: 507

scrolling and zooming in a div

I have a particular problem that I need help with.

I have a div which contains a lot of other divs which I would like to be able to zoom into. for example, a few of the child divs have text and I'd like the user to be able to zoom in to see what they say.

here is an example -- > http://jsfiddle.net/du5ye/3/

I've though that maybe I could use jquery to change the classes of everything inside, but I'd like to not hard code the new sizes, rather every property in the main wrapper div would get larger by a percentage as the user scrolls his mouse wheel. In addition, I'd like the user to be able to scroll around the div by dragging, quite like google maps. Is this kind of thing possible? and how would I go about it?

Here is the entire code for those that would rather avoid jsfiddle;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="Style.css" rel="stylesheet" type="text/css" />
</head>
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<style>
.layoutGreys {
    background-color: #DDD;
    border: solid thin #BBB;

    padding-left: 10px;
    padding-right: 10px;;

    float: left;
}

.Group{
    background-color: #955;
    width: 50px;
    height: 35px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    float: left;
}
.Divider{
    width: 10px;
    height: 35px;
    float: left;
    <!--border-top: medium solid #999;-->
    margin-top: 10px;
}

.wrapper{
    width: 560px;
    height: 175px;
    background-color: #333; 
    border: thick #888 solid;
}

</style>
<body onload="CreateBox()">
    <div id="wrapper" class="wrapper">
        <div class="layoutGreys">
            <div class="Group"></div>
            <!-- Parent -->
            <div class="layoutGreys">
                <!-- Parent Icon -->
                <div class="Group" style="float: none;"></div>
                        <!-- Children -->
                        <div class="layoutGreys">
                            <div class="Group"></div>
                            <div class="Divider"></div>
                            <div class="Group"></div>
                            <div class="Divider"></div>
                            <!-- Parent -->
                            <div class="layoutGreys">
                                <!-- Parent Icon -->
                                <div class="Group" style="float: none; "></div>
                                    <!-- Children -->
                                    <div class="layoutGreys">
                                        <div class="Group"></div>
                                        <div class="Divider"></div>
                                        <div class="Group"></div>
                                        <div class="Divider"></div>
                                        <div class="Group"></div>
                                    </div>
                            </div>
                            <div class="Divider"></div>
                            <div class="Group"></div>
                        </div>
            </div>
            <div class="Group"></div>   
        </div>
    </div>
</body>
</html>

Upvotes: 4

Views: 22898

Answers (3)

Vitim.us
Vitim.us

Reputation: 22128

Have you tried the css zoom property? or maybe the css-transforms like scale()?

You can make your outer div overflow: scroll; and bind mouse down events to scroll the div for the pan and drag effect.

* I know this question is old, but It may help future visitors.

Upvotes: 3

Marcus Wallace
Marcus Wallace

Reputation: 57

Use zoomooz.js It is a jQuery plugin for making web page elements zoom. It can be used for making Prezi like slideshows and for zooming to images or other details.

Upvotes: 1

nairvijays
nairvijays

Reputation: 181

Try modifying this plugin to your needs - http://www.htmldrive.net/items/demo/394/JQuery.iviewer-zoom-image-and-to-drag-effect

Upvotes: 2

Related Questions