FM / examples

/home/desid573/phewl.desidrivers.com.au/v3-utility-library-master/infobubble/examples/

/home/desid573/phewl.desidrivers.com.au/v3-utility-library-master/infobubble/examples

Name	Size	Mode	Actions
example.html	10343	0644	edit dl rm

Edit: /home/desid573/phewl.desidrivers.com.au/v3-utility-library-master/infobubble/examples/example.html (10343B)

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>InfoBubble</title>
    <style type="text/css">
      body {
        font-size: 83%;
      }

body, input, textarea {
        font-family: arial, sans-serif;
      }

#map {
        width: 600px;
        height: 500px;
      }

#styles, #add-tab {
        float: left;
        margin-top: 10px;
        width: 400px;
      }

#styles label,
      #add-tab label {
        display: inline-block;
        width: 130px;
      }

.phoney {
        background: -webkit-gradient(linear,left top,left bottom,color-stop(0, rgb(112,112,112)),color-stop(0.51, rgb(94,94,94)),color-stop(0.52, rgb(57,57,57)));
        background: -moz-linear-gradient(center top,rgb(112,112,112) 0%,rgb(94,94,94) 51%,rgb(57,57,57) 52%);
      }

.phoneytext {
        text-shadow: 0 -1px 0 #000;
        color: #fff;
        font-family: Helvetica Neue, Helvetica, arial;
        font-size: 18px;
        line-height: 25px;
        padding: 4px 45px 4px 15px;
        font-weight: bold;
        background: url(../images/arrow.png) 95% 50% no-repeat;
      }

.phoneytab {
        text-shadow: 0 -1px 0 #000;
        color: #fff;
        font-family: Helvetica Neue, Helvetica, arial;
        font-size: 18px;
        background: rgb(112,112,112) !important;
      }
    </style>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
      var script = '<script type="text/javascript" src="../../infobubble/src/infobubble';
      if (document.location.search.indexOf('compiled') !== -1) {
        script += '-compiled';
      }
      script += '.js"><' + '/script>';
      document.write(script);
    </script>
    <script type="text/javascript">
      var map, infoBubble;
      function init() {
        var mapCenter = new google.maps.LatLng(-35.397, 150.644);
        map = new google.maps.Map(document.getElementById('map'), {
          zoom: 8,
          center: mapCenter,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });

var marker = new google.maps.Marker({
          map: map,
          position: new google.maps.LatLng(-35, 150),
          draggable: true
        });

var contentString = '<div id="content">'+
        '<h1>Uluru</h1>'+
        '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
        'sandstone rock formation in the southern part of the '+
        'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) '+
        'south west of the nearest large town, Alice Springs; 450&#160;km '+
        '(280&#160;mi) by road. Kata Tjuta and Uluru are the two major '+
        'features of the Uluru - Kata Tjuta National Park. Uluru is '+
        'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
        'Aboriginal people of the area. It has many springs, waterholes, '+
        'rock caves and ancient paintings. Uluru is listed as a World '+
        'Heritage Site.</p>'+
        '<p>Attribution: Uluru, <a href="http://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
        'http://en.wikipedia.org/w/index.php?title=Uluru</a> '+
        '(last visited June 22, 2009).</p>'+
        '</div>';

infoBubble = new InfoBubble({
          maxWidth: 300
        });

infoBubble2 = new InfoBubble({
          map: map,
          content: '<div class="phoneytext">Some label</div>',
          position: new google.maps.LatLng(-35, 151),
          shadowStyle: 1,
          padding: 0,
          backgroundColor: 'rgb(57,57,57)',
          borderRadius: 4,
          arrowSize: 10,
          borderWidth: 1,
          borderColor: '#2c2c2c',
          disableAutoPan: true,
          hideCloseButton: true,
          arrowPosition: 30,
          backgroundClassName: 'phoney',
          arrowStyle: 2
        });

infoBubble.open(map, marker);
        infoBubble2.open();

var div = document.createElement('DIV');
        div.innerHTML = 'Hello';

infoBubble.addTab('A Tab', div);
        infoBubble.addTab('Uluru', contentString);

google.maps.event.addListener(marker, 'click', function() {
          if (!infoBubble.isOpen()) {
            infoBubble.open(map, marker);
          }
          });

google.maps.event.addDomListener(document.getElementById('update'),
            'click', updateStyles);
        google.maps.event.addDomListener(document.getElementById('add'),
            'click', addTab);
        google.maps.event.addDomListener(document.getElementById('update-tab'),
            'click', updateTab);
        google.maps.event.addDomListener(document.getElementById('remove'),
            'click', removeTab);
        google.maps.event.addDomListener(document.getElementById('open'),
            'click', function() {
            infoBubble2.open();
        });
        google.maps.event.addDomListener(document.getElementById('close'),
            'click', function() {
          infoBubble2.close();
        });

}
      google.maps.event.addDomListener(window, 'load', init);

function updateStyles() {
        var shadowStyle = document.getElementById('shadowstyle').value;
        infoBubble.setShadowStyle(shadowStyle);

var padding = document.getElementById('padding').value;
        infoBubble.setPadding(padding);

var borderRadius = document.getElementById('borderRadius').value;
        infoBubble.setBorderRadius(borderRadius);

var borderWidth = document.getElementById('borderWidth').value;
        infoBubble.setBorderWidth(borderWidth);

var borderColor = document.getElementById('borderColor').value;
        infoBubble.setBorderColor(borderColor);

var backgroundColor = document.getElementById('backgroundColor').value;
        infoBubble.setBackgroundColor(backgroundColor);

var maxWidth = document.getElementById('maxWidth').value;
        infoBubble.setMaxWidth(maxWidth);

var maxHeight = document.getElementById('maxHeight').value;
        infoBubble.setMaxHeight(maxHeight);

var minWidth = document.getElementById('minWidth').value;
        infoBubble.setMinWidth(minWidth);

var minHeight = document.getElementById('minHeight').value;
        infoBubble.setMinHeight(minHeight);

var arrowSize = document.getElementById('arrowSize').value;
        infoBubble.setArrowSize(arrowSize);

var arrowPosition = document.getElementById('arrowPosition').value;
        infoBubble.setArrowPosition(arrowPosition);

var arrowStyle = document.getElementById('arrowStyle').value;
        infoBubble.setArrowStyle(arrowStyle);
      }

function addTab() {
        var title = document.getElementById('tab-title').value;
        var content = document.getElementById('tab-content').value;

if (title != '' && content != '') {
          infoBubble.addTab(title, content);
        }
      }

function updateTab() {
        var index = document.getElementById('tab-index-update').value;
        var title = document.getElementById('tab-title-update').value;
        var content = document.getElementById('tab-content-update').value;

if (index) {
          infoBubble.updateTab(index, title, content);
        }
      }

function removeTab() {
        var index = document.getElementById('tab-index').value;
        infoBubble.removeTab(index);
      }
    </script>
  </head>
  <body>
    <h3>InfoBubble</h3>
    <p><a href="?compiled">Compiled</a> or <a href="?">Standard</a> version of the script.</p>
    <div id="map"></div>
    <div id="styles">
      <h2>Style</h2>
      <div>
        <label>ShadowStyle:</label>
        <select id="shadowstyle">
          <option value="0">0</option>
          <option value="1">1</option>
          <option value="2">2</option>
        </select>
      </div>
      <div>
        <label>Padding:</label>
        <input type="text" id="padding" value="10"/>
      </div>
      <div>
        <label>borderRadius:</label>
        <input type="text" id="borderRadius" value="10"/>
      </div>
      <div>
        <label>borderWidth:</label>
        <input type="text" id="borderWidth" value="1"/>
      </div>
      <div>
        <label>borderColor:</label>
        <input type="text" id="borderColor" value="#ccc"/>
      </div>
      <div>
        <label>backgroundColor:</label>
        <input type="text" id="backgroundColor" value="#fff"/>
      </div>
      <div>
        <label>minWidth:</label>
        <input type="text" id="minWidth"/>px
      </div>
      <div>
        <label>maxWidth:</label>
        <input type="text" id="maxWidth" value="300"/>px
      </div>
      <div>
        <label>minHeight:</label>
        <input type="text" id="minHeight"/>px
      </div>
      <div>
        <label>maxHeight:</label>
        <input type="text" id="maxHeight"/>px
      </div>
      <div>
        <label>arrowSize:</label>
        <input type="text" id="arrowSize" value="15"/>px
      </div>
      <div>
        <label>arrowPosition:</label>
        <input type="text" id="arrowPosition" value="50"/>%
      </div>
      <div>
        <label>arrowStyle:</label>
        <select id="arrowStyle">
          <option value="0">0</option>
          <option value="1">1</option>
          <option value="2">2</option>
        </select>
      </div>
      <button id="update">Update styles</button>
    </div>

<div id="add-tab">
      <h2>Add Tab</h2>
      <div><label>Title:</label><input type="text" id="tab-title"/></div>
      <div><label>Content:</label><textarea id="tab-content"></textarea></div>
      <button id="add">Add</button>

<h2>Update Tab</h2>
      <div><label>Index:</label><input type="text" id="tab-index-update"/></div>
      <div><label>Title:</label><input type="text" id="tab-title-update"/></div>
      <div><label>Content:</label><textarea id="tab-content-update"></textarea></div>
      <button id="update-tab">Update</button>

<h2>Remove Tab</h2>
      <div><label>Index:</label><input type="text" id="tab-index"/></div>
      <button id="remove">Remove</button>

<h2>Other InfoBubble</h2>
      <button id="open">Open</button>
      <button id="close">Close</button>
    </div>
  </body>
</html>

InfoBubble

Compiled or Standard version of the script.

Style

ShadowStyle:

Padding:

borderRadius:

borderWidth:

borderColor:

backgroundColor:

minWidth: px

maxWidth: px

minHeight: px

maxHeight: px

arrowSize: px

arrowPosition: %

arrowStyle:

Add Tab

Title:

Content:

Update Tab

Index:

Title:

Content:

Remove Tab

Index: