How to stop item from going back to original place? - actionscript-3

This is a drag and drop matching game, my question is how do I stop the items from going back to its original place when I matched it wrongly? I want the items to stay. Please explain in details for me, would appreciate it a lot.
right_mc.visible=false;
wrong_mc.visible=false;
var orig1X:Number=item1_mc.x;
var orig1Y:Number=item1_mc.y;
var orig2X:Number=item2_mc.x;
var orig2Y:Number=item2_mc.y;
var orig3X:Number=item3_mc.x;
var orig3Y:Number=item3_mc.y;
item1_mc.addEventListener(MouseEvent.MOUSE_DOWN, dragTheObject);
item1_mc.addEventListener(MouseEvent.MOUSE_UP, item1Release);
item2_mc.addEventListener(MouseEvent.MOUSE_DOWN, dragTheObject);
item2_mc.addEventListener(MouseEvent.MOUSE_UP, item2Release);
item3_mc.addEventListener(MouseEvent.MOUSE_DOWN, dragTheObject);
item3_mc.addEventListener(MouseEvent.MOUSE_UP, item3Release);
done_btn.addEventListener(MouseEvent.CLICK, checkAnswers);
reset_btn.addEventListener(MouseEvent.CLICK, reset);
item1_mc.buttonMode=true;
item2_mc.buttonMode=true;
item3_mc.buttonMode=true;
function dragTheObject(event:MouseEvent):void
{
var item:MovieClip=MovieClip(event.target);
item.startDrag();
var topPos:uint=this.numChildren-5;
this.setChildIndex(item, topPos);
}
function item1Release(event:MouseEvent):void
{
var item:MovieClip=MovieClip(event.target);
item.stopDrag();
if (dropZone1_mc.hitTestPoint(item.x,item.y))
{
item.x=dropZone1_mc.x;
item.y=dropZone1_mc.y;
}
else
{
item.x=orig1X;
item.y=orig1Y;
}
}
function item2Release(event:MouseEvent):void
{
var item:MovieClip=MovieClip(event.target);
item.stopDrag();
if (dropZone2_mc.hitTestPoint(item.x,item.y))
{
item.x=dropZone2_mc.x;
item.y=dropZone2_mc.y;
}
else
{
item.x=orig2X;
item.y=orig2Y;
}
}
function item3Release(event:MouseEvent):void
{
var item:MovieClip=MovieClip(event.target);
item.stopDrag();
if (dropZone3_mc.hitTestPoint(item.x,item.y))
{
item.x=dropZone3_mc.x;
item.y=dropZone3_mc.y;
}
else
{
item.x=orig3X;
item.y=orig3Y;
}
}
function checkAnswers(event:MouseEvent):void
{
if (dropZone1_mc.hitTestPoint(item1_mc.x,item1_mc.y) &&
dropZone2_mc.hitTestPoint(item2_mc.x,item2_mc.y) &&
dropZone3_mc.hitTestPoint(item3_mc.x,item3_mc.y))
{
wrong_mc.visible = false;
right_mc.visible = true;
}
else
{
wrong_mc.visible = true;
right_mc.visible = false;
}
}
function reset(event:MouseEvent):void {
item1_mc.x=orig1X;
item1_mc.y=orig1Y;
item2_mc.x=orig2X;
item2_mc.y=orig2Y;
item3_mc.x=orig3X;
item3_mc.y=orig3Y;
right_mc.visible=false;
wrong_mc.visible=false;
}
function itemRelease(event:MouseEvent):void {
var thisItem:MovieClip = MovieClip(event.target);
thisItem.stopDrag();
if (dropZone1_mc.hitTestPoint(thisItem.x,thisItem.y))
{
thisItem.x = dropZone1_mc.x;
thisItem.y = dropZone1_mc.y;
}
else if (dropZone2_mc.hitTestPoint(thisItem.x,thisItem.y))
{
thisItem.x = dropZone2_mc.x;
thisItem.y = dropZone2_mc.y;
}
else if (dropZone3_mc.hitTestPoint(thisItem.x,thisItem.y))
{
thisItem.x = dropZone3_mc.x;
thisItem.y = dropZone3_mc.y;
}
else if (thisItem==item1_mc)
{
event.target.x = orig1X;
event.target.y = orig1Y;
}
else if (thisItem==item2_mc)
{
event.target.x = orig2X;
event.target.y = orig2Y;
}
else {
event.target.x = orig3X;
event.target.y = orig3Y;
}
}

You should remove the else conditions from each and every release functions. Update code is given below:
right_mc.visible=false;
wrong_mc.visible=false;
var orig1X:Number=item1_mc.x;
var orig1Y:Number=item1_mc.y;
var orig2X:Number=item2_mc.x;
var orig2Y:Number=item2_mc.y;
var orig3X:Number=item3_mc.x;
var orig3Y:Number=item3_mc.y;
item1_mc.addEventListener(MouseEvent.MOUSE_DOWN, dragTheObject);
item1_mc.addEventListener(MouseEvent.MOUSE_UP, item1Release);
item2_mc.addEventListener(MouseEvent.MOUSE_DOWN, dragTheObject);
item2_mc.addEventListener(MouseEvent.MOUSE_UP, item2Release);
item3_mc.addEventListener(MouseEvent.MOUSE_DOWN, dragTheObject);
item3_mc.addEventListener(MouseEvent.MOUSE_UP, item3Release);
done_btn.addEventListener(MouseEvent.CLICK, checkAnswers);
reset_btn.addEventListener(MouseEvent.CLICK, reset);
item1_mc.buttonMode=true;
item2_mc.buttonMode=true;
item3_mc.buttonMode=true;
function dragTheObject(event:MouseEvent):void
{
var item:MovieClip=MovieClip(event.target);
item.startDrag();
var topPos:uint=this.numChildren-5;
this.setChildIndex(item, topPos);
}
function item1Release(event:MouseEvent):void
{
var item:MovieClip=MovieClip(event.target);
item.stopDrag();
if (dropZone1_mc.hitTestPoint(item.x,item.y))
{
item.x=dropZone1_mc.x;
item.y=dropZone1_mc.y;
}
}
function item2Release(event:MouseEvent):void
{
var item:MovieClip=MovieClip(event.target);
item.stopDrag();
if (dropZone2_mc.hitTestPoint(item.x,item.y))
{
item.x=dropZone2_mc.x;
item.y=dropZone2_mc.y;
}
}
function item3Release(event:MouseEvent):void
{
var item:MovieClip=MovieClip(event.target);
item.stopDrag();
if (dropZone3_mc.hitTestPoint(item.x,item.y))
{
item.x=dropZone3_mc.x;
item.y=dropZone3_mc.y;
}
}
function checkAnswers(event:MouseEvent):void
{
if (dropZone1_mc.hitTestPoint(item1_mc.x,item1_mc.y) &&
dropZone2_mc.hitTestPoint(item2_mc.x,item2_mc.y) &&
dropZone3_mc.hitTestPoint(item3_mc.x,item3_mc.y))
{
wrong_mc.visible = false;
right_mc.visible = true;
}
else
{
wrong_mc.visible = true;
right_mc.visible = false;
}
}
function reset(event:MouseEvent):void {
item1_mc.x=orig1X;
item1_mc.y=orig1Y;
item2_mc.x=orig2X;
item2_mc.y=orig2Y;
item3_mc.x=orig3X;
item3_mc.y=orig3Y;
right_mc.visible=false;
wrong_mc.visible=false;
}
Please let me know if you face any issue.

Related

Changing the coordinates on Googlemaps in a template

I've found a template I really like which features a map at the bottom of the page. The attached JS file is huge and I can't see how to edit the position of the map.
There is too much code to fit in the body limit: so I have entered it into a jsfiddle: https://jsfiddle.net/5kbwkp0h/
And here is the template I'm using: https://www.freshdesignweb.com/demo/template/ubusina/
(function(root, factory) {
if(typeof exports === 'object') {
module.exports = factory();
}
else if(typeof define === 'function' && define.amd) {
define('GMaps', [], factory);
}
root.GMaps = factory();
}(this, function() {
/*!
* GMaps.js v0.4.16
* http://hpneo.github.com/gmaps/
*
* Copyright 2014, Gustavo Leon
* Released under the MIT License.
*/
if (!(typeof window.google === 'object' && window.google.maps)) {
throw 'Google Maps API is required. Please register the following JavaScript library http://maps.google.com/maps/api/js?sensor=true.'
}
var extend_object = function(obj, new_obj) {
var name;
if (obj === new_obj) {
return obj;
}
for (name in new_obj) {
obj[name] = new_obj[name];
}
return obj;
};
var replace_object = function(obj, replace) {
var name;
if (obj === replace) {
return obj;
}
for (name in replace) {
if (obj[name] != undefined) {
obj[name] = replace[name];
}
}
return obj;
};
var array_map = function(array, callback) {
var original_callback_params = Array.prototype.slice.call(arguments, 2),
array_return = [],
array_length = array.length,
i;
if (Array.prototype.map && array.map === Array.prototype.map) {
array_return = Array.prototype.map.call(array, function(item) {
callback_params = original_callback_params;
callback_params.splice(0, 0, item);
return callback.apply(this, callback_params);
});
}
else {
for (i = 0; i < array_length; i++) {
callback_params = original_callback_params;
callback_params.splice(0, 0, array[i]);
array_return.push(callback.apply(this, callback_params));
}
}
return array_return;
};
var array_flat = function(array) {
var new_array = [],
i;
for (i = 0; i < array.length; i++) {
new_array = new_array.concat(array[i]);
}
return new_array;
};
var coordsToLatLngs = function(coords, useGeoJSON) {
var first_coord = coords[0],
second_coord = coords[1];
if (useGeoJSON) {
first_coord = coords[1];
second_coord = coords[0];
}
return new google.maps.LatLng(first_coord, second_coord);
};
var arrayToLatLng = function(coords, useGeoJSON) {
var i;
for (i = 0; i < coords.length; i++) {
if (!(coords[i] instanceof google.maps.LatLng)) {
if (coords[i].length > 0 && typeof(coords[i][0]) == "object") {
coords[i] = arrayToLatLng(coords[i], useGeoJSON);
}
else {
coords[i] = coordsToLatLngs(coords[i], useGeoJSON);
}
}
}
return coords;
};
var getElementById = function(id, context) {
var element,
id = id.replace('#', '');
if ('jQuery' in this && context) {
element = $("#" + id, context)[0];
} else {
element = document.getElementById(id);
};
return element;
};
var findAbsolutePosition = function(obj) {
var curleft = 0,
curtop = 0;
if (obj.offsetParent) {
do {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
} while (obj = obj.offsetParent);
}
return [curleft, curtop];
};
var GMaps = (function(global) {
"use strict";
var doc = document;
var GMaps = function(options) {
if (!this) return new GMaps(options);
options.zoom = options.zoom || 15;
options.mapType = options.mapType || 'roadmap';
var self = this,
i,
events_that_hide_context_menu = ['bounds_changed', 'center_changed', 'click', 'dblclick', 'drag', 'dragend', 'dragstart', 'idle', 'maptypeid_changed', 'projection_changed', 'resize', 'tilesloaded', 'zoom_changed'],
events_that_doesnt_hide_context_menu = ['mousemove', 'mouseout', 'mouseover'],
options_to_be_deleted = ['el', 'lat', 'lng', 'mapType', 'width', 'height', 'markerClusterer', 'enableNewStyle'],
container_id = options.el || options.div,
markerClustererFunction = options.markerClusterer,
mapType = google.maps.MapTypeId[options.mapType.toUpperCase()],
map_center = new google.maps.LatLng(options.lat, options.lng),
zoomControl = options.zoomControl || false,
zoomControlOpt = options.zoomControlOpt || {
style: 'DEFAULT',
position: 'TOP_LEFT'
},
zoomControlStyle = zoomControlOpt.style || 'DEFAULT',
zoomControlPosition = zoomControlOpt.position || 'TOP_LEFT',
panControl = options.panControl || false,
mapTypeControl = options.mapTypeControl || false,
scaleControl = options.scaleControl || true,
streetViewControl = options.streetViewControl || false,
overviewMapControl = overviewMapControl || true,
map_options = {},
map_base_options = {
zoom: this.zoom,
center: map_center,
mapTypeId: mapType
},
map_controls_options = {
panControl: panControl,
zoomControl: zoomControl,
zoomControlOptions: {
style: google.maps.ZoomControlStyle[zoomControlStyle],
position: google.maps.ControlPosition[zoomControlPosition]
},
mapTypeControl: mapTypeControl,
scaleControl: scaleControl,
streetViewControl: streetViewControl,
overviewMapControl: overviewMapControl
};
if (typeof(options.el) === 'string' || typeof(options.div) === 'string') {
this.el = getElementById(container_id, options.context);
} else {
this.el = container_id;
}
if (typeof(this.el) === 'undefined' || this.el === null) {
throw 'No element defined.';
}
window.context_menu = window.context_menu || {};
window.context_menu[self.el.id] = {};
this.controls = [];
this.overlays = [];
this.layers = []; // array with kml/georss and fusiontables layers, can be as many
this.singleLayers = {}; // object with the other layers, only one per layer
this.markers = [];
this.polylines = [];
this.routes = [];
this.polygons = [];
this.infoWindow = null;
this.overlay_el = null;
this.zoom = options.zoom;
this.registered_events = {};
this.el.style.width = options.width || this.el.scrollWidth || this.el.offsetWidth;
this.el.style.height = options.height || this.el.scrollHeight || this.el.offsetHeight;
google.maps.visualRefresh = options.enableNewStyle;
for (i = 0; i < options_to_be_deleted.length; i++) {
delete options[options_to_be_deleted[i]];
}
if(options.disableDefaultUI != true) {
map_base_options = extend_object(map_base_options, map_controls_options);
}
map_options = extend_object(map_base_options, options);
for (i = 0; i < events_that_hide_context_menu.length; i++) {
delete map_options[events_that_hide_context_menu[i]];
}
for (i = 0; i < events_that_doesnt_hide_context_menu.length; i++) {
delete map_options[events_that_doesnt_hide_context_menu[i]];
}
this.map = new google.maps.Map(this.el, map_options);
if (markerClustererFunction) {
this.markerClusterer = markerClustererFunction.apply(this, [this.map]);
}
var buildContextMenuHTML = function(control, e) {
var html = '',
options = window.context_menu[self.el.id][control];
for (var i in options){
if (options.hasOwnProperty(i)) {
var option = options[i];
html += '<li><a id="' + control + '_' + i + '" href="#">' + option.title + '</a></li>';
}
}
if (!getElementById('gmaps_context_menu')) return;
var context_menu_element = getElementById('gmaps_context_menu');
context_menu_element.innerHTML = html;
var context_menu_items = context_menu_element.getElementsByTagName('a'),
context_menu_items_count = context_menu_items.length,
i;
for (i = 0; i < context_menu_items_count; i++) {
var context_menu_item = context_menu_items[i];
var assign_menu_item_action = function(ev){
ev.preventDefault();
options[this.id.replace(control + '_', '')].action.apply(self, [e]);
self.hideContextMenu();
};
google.maps.event.clearListeners(context_menu_item, 'click');
google.maps.event.addDomListenerOnce(context_menu_item, 'click', assign_menu_item_action, false);
}
var position = findAbsolutePosition.apply(this, [self.el]),
left = position[0] + e.pixel.x - 15,
top = position[1] + e.pixel.y- 15;
context_menu_element.style.left = left + "px";
context_menu_element.style.top = top + "px";
context_menu_element.style.display = 'block';
};
this.buildContextMenu = function(control, e) {
if (control === 'marker') {
e.pixel = {};
var overlay = new google.maps.OverlayView();
overlay.setMap(self.map);
overlay.draw = function() {
var projection = overlay.getProjection(),
position = e.marker.getPosition();
e.pixel = projection.fromLatLngToContainerPixel(position);
buildContextMenuHTML(control, e);
};
}
else {
buildContextMenuHTML(control, e);
}
};
this.setContextMenu = function(options) {
window.context_menu[self.el.id][options.control] = {};
var i,
ul = doc.createElement('ul');
for (i in options.options) {
if (options.options.hasOwnProperty(i)) {
var option = options.options[i];
window.context_menu[self.el.id][options.control][option.name] = {
title: option.title,
action: option.action
};
}
}
ul.id = 'gmaps_context_menu';
ul.style.display = 'none';
ul.style.position = 'absolute';
ul.style.minWidth = '100px';
ul.style.background = 'white';
ul.style.listStyle = 'none';
ul.style.padding = '8px';
ul.style.boxShadow = '2px 2px 6px #ccc';
doc.body.appendChild(ul);
var context_menu_element = getElementById('gmaps_context_menu')
google.maps.event.addDomListener(context_menu_element, 'mouseout', function(ev) {
if (!ev.relatedTarget || !this.contains(ev.relatedTarget)) {
window.setTimeout(function(){
context_menu_element.style.display = 'none';
}, 400);
}
}, false);
};
this.hideContextMenu = function() {
var context_menu_element = getElementById('gmaps_context_menu');
if (context_menu_element) {
context_menu_element.style.display = 'none';
}
};
var setupListener = function(object, name) {
google.maps.event.addListener(object, name, function(e){
if (e == undefined) {
e = this;
}
options[name].apply(this, [e]);
self.hideContextMenu();
});
};
//google.maps.event.addListener(this.map, 'idle', this.hideContextMenu);
google.maps.event.addListener(this.map, 'zoom_changed', this.hideContextMenu);
for (var ev = 0; ev < events_that_hide_context_menu.length; ev++) {
var name = events_that_hide_context_menu[ev];
if (name in options) {
setupListener(this.map, name);
}
}
for (var ev = 0; ev < events_that_doesnt_hide_context_menu.length; ev++) {
var name = events_that_doesnt_hide_context_menu[ev];
if (name in options) {
setupListener(this.map, name);
}
}
google.maps.event.addListener(this.map, 'rightclick', function(e) {
if (options.rightclick) {
options.rightclick.apply(this, [e]);
}
if(window.context_menu[self.el.id]['map'] != undefined) {
self.buildContextMenu('map', e);
}
});
this.refresh = function() {
google.maps.event.trigger(this.map, 'resize');
};
this.fitZoom = function() {
var latLngs = [],
markers_length = this.markers.length,
i;
for (i = 0; i < markers_length; i++) {
if(typeof(this.markers[i].visible) === 'boolean' && this.markers[i].visible) {
latLngs.push(this.markers[i].getPosition());
}
}
this.fitLatLngBounds(latLngs);
};
this.fitLatLngBounds = function(latLngs) {
var total = latLngs.length;
var bounds = new google.maps.LatLngBounds();
for(var i=0; i < total; i++) {
bounds.extend(latLngs[i]);
}
this.map.fitBounds(bounds);
};
this.setCenter = function(lat, lng, callback) {
this.map.panTo(new google.maps.LatLng(lat, lng));
if (callback) {
callback();
}
};
this.getElement = function() {
return this.el;
};
this.zoomIn = function(value) {
value = value || 1;
this.zoom = this.map.getZoom() + value;
this.map.setZoom(this.zoom);
};
this.zoomOut = function(value) {
value = value || 1;
this.zoom = this.map.getZoom() - value;
this.map.setZoom(this.zoom);
};
var native_methods = [],
method;
for (method in this.map) {
if (typeof(this.map[method]) == 'function' && !this[method]) {
native_methods.push(method);
}
}
for (i=0; i < native_methods.length; i++) {
(function(gmaps, scope, method_name) {
gmaps[method_name] = function(){
return scope[method_name].apply(scope, arguments);
};
})(this, this.map, native_methods[i]);
}
};
return GMaps;
})(this);
GMaps.prototype.createControl = function(options) {
var control = document.createElement('div');
control.style.cursor = 'pointer';
if (options.disableDefaultStyles !== true) {
control.style.fontFamily = 'Roboto, Arial, sans-serif';
control.style.fontSize = '11px';
control.style.boxShadow = 'rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px';
}
for (var option in options.style) {
control.style[option] = options.style[option];
}
if (options.id) {
control.id = options.id;
}
if (options.classes) {
control.className = options.classes;
}
if (options.content) {
if (typeof options.content === 'string') {
control.innerHTML = options.content;
}
else if (options.content instanceof HTMLElement) {
control.appendChild(options.content);
}
}
if (options.position) {
control.position = google.maps.ControlPosition[options.position.toUpperCase()];
}
for (var ev in options.events) {
(function(object, name) {
google.maps.event.addDomListener(object, name, function(){
options.events[name].apply(this, [this]);
});
})(control, ev);
}
control.index = 1;
return control;
};
GMaps.prototype.addControl = function(options) {
var control = this.createControl(options);
this.controls.push(control);
this.map.controls[control.position].push(control);
return control;
};
GMaps.prototype.removeControl = function(control) {
var position = null;
for (var i = 0; i < this.controls.length; i++) {
if (this.controls[i] == control) {
position = this.controls[i].position;
this.controls.splice(i, 1);
}
}
if (position) {
for (i = 0; i < this.map.controls.length; i++) {
var controlsForPosition = this.map.controls[control.position]
if (controlsForPosition.getAt(i) == control) {
controlsForPosition.removeAt(i);
break;
}
}
}
return control;
};
GMaps.prototype.createMarker = function(options) {
if (options.lat == undefined && options.lng == undefined && options.position == undefined) {
throw 'No latitude or longitude defined.';
}
var self = this,
details = options.details,
fences = options.fences,
outside = options.outside,
base_options = {
position: new google.maps.LatLng(options.lat, options.lng),
map: null
},
marker_options = extend_object(base_options, options);
delete marker_options.lat;
delete marker_options.lng;
delete marker_options.fences;
delete marker_options.outside;
var marker = new google.maps.Marker(marker_options);
marker.fences = fences;
if (options.infoWindow) {
marker.infoWindow = new google.maps.InfoWindow(options.infoWindow);
var info_window_events = ['closeclick', 'content_changed', 'domready', 'position_changed', 'zindex_changed'];
for (var ev = 0; ev < info_window_events.length; ev++) {
(function(object, name) {
if (options.infoWindow[name]) {
google.maps.event.addListener(object, name, function(e){
options.infoWindow[name].apply(this, [e]);
});
}
})(marker.infoWindow, info_window_events[ev]);
}
}
var marker_events = ['animation_changed', 'clickable_changed', 'cursor_changed', 'draggable_changed', 'flat_changed', 'icon_changed', 'position_changed', 'shadow_changed', 'shape_changed', 'title_changed', 'visible_changed', 'zindex_changed'];
var marker_events_with_mouse = ['dblclick', 'drag', 'dragend', 'dragstart', 'mousedown', 'mouseout', 'mouseover', 'mouseup'];
for (var ev = 0; ev < marker_events.length; ev++) {
(function(object, name) {
if (options[name]) {
google.maps.event.addListener(object, name, function(){
options[name].apply(this, [this]);
});
}
})(marker, marker_events[ev]);
}
for (var ev = 0; ev < marker_events_with_mouse.length; ev++) {
(function(map, object, name) {
if (options[name]) {
google.maps.event.addListener(object, name, function(me){
if(!me.pixel){
me.pixel = map.getProjection().fromLatLngToPoint(me.latLng)
}
options[name].apply(this, [me]);
});
}
})(this.map, marker, marker_events_with_mouse[ev]);
}
google.maps.event.addListener(marker, 'click', function() {
this.details = details;
if (options.click) {
options.click.apply(this, [this]);
}
if (marker.infoWindow) {
self.hideInfoWindows();
marker.infoWindow.open(self.map, marker);
}
});
google.maps.event.addListener(marker, 'rightclick', function(e) {
e.marker = this;
if (options.rightclick) {
options.rightclick.apply(this, [e]);
}
if (window.context_menu[self.el.id]['marker'] != undefined) {
self.buildContextMenu('marker', e);
}
});
if (marker.fences) {
google.maps.event.addListener(marker, 'dragend', function() {
self.checkMarkerGeofence(marker, function(m, f) {
outside(m, f);
});
});
}
return marker;
};
GMaps.prototype.addMarker = function(options) {
var marker;
if(options.hasOwnProperty('gm_accessors_')) {
// Native google.maps.Marker object
marker = options;
}
else {
if ((options.hasOwnProperty('lat') && options.hasOwnProperty('lng')) || options.position) {
marker = this.createMarker(options);
}
else {
throw 'No latitude or longitude defined.';
}
}
marker.setMap(this.map);
if(this.markerClusterer) {
this.markerClusterer.addMarker(marker);
}
this.markers.push(marker);
GMaps.fire('marker_added', marker, this);
return marker;
};
GMaps.prototype.addMarkers = function(array) {
for (var i = 0, marker; marker=array[i]; i++) {
this.addMarker(marker);
}
return this.markers;
};
GMaps.prototype.hideInfoWindows = function() {
for (var i = 0, marker; marker = this.markers[i]; i++){
if (marker.infoWindow) {
marker.infoWindow.close();
}
}
};
GMaps.prototype.removeMarker = function(marker) {
for (var i = 0; i < this.markers.length; i++) {
if (this.markers[i] === marker) {
this.markers[i].setMap(null);
this.markers.splice(i, 1);
if(this.markerClusterer) {
this.markerClusterer.removeMarker(marker);
}
GMaps.fire('marker_removed', marker, this);
break;
}
}
return marker;
};
GMaps.prototype.removeMarkers = function (collection) {
var new_markers = [];
if (typeof collection == 'undefined') {
for (var i = 0; i < this.markers.length; i++) {
var marker = this.markers[i];
marker.setMap(null);
if(this.markerClusterer) {
this.markerClusterer.removeMarker(marker);
}
GMaps.fire('marker_removed', marker, this);
}
this.markers = new_markers;
}
else {
for (var i = 0; i < collection.length; i++) {
var index = this.markers.indexOf(collection[i]);
if (index > -1) {
var marker = this.markers[index];
marker.setMap(null);
if(this.markerClusterer) {
this.markerClusterer.removeMarker(marker);
}
GMaps.fire('marker_removed', marker, this);
}
}
for (var i = 0; i < this.markers.length; i++) {
var marker = this.markers[i];
if (marker.getMap() != null) {
new_markers.push(marker);
}
}
this.markers = new_markers;
}
};
GMaps.prototype.drawOverlay = function(options) {
var overlay = new google.maps.OverlayView(),
auto_show = true;
overlay.setMap(this.map);
if (options.auto_show != null) {
auto_show = options.auto_show;
}
overlay.onAdd = function() {
var el = document.createElement('div');
el.style.borderStyle = "none";
el.style.borderWidth = "0px";
el.style.position = "absolute";
el.style.zIndex = 100;
el.innerHTML = options.content;
overlay.el = el;
if (!options.layer) {
options.layer = 'overlayLayer';
}
var panes = this.getPanes(),
overlayLayer = panes[options.layer],
stop_overlay_events = ['contextmenu', 'DOMMouseScroll', 'dblclick', 'mousedown'];
overlayLayer.appendChild(el);
for (var ev = 0; ev < stop_overlay_events.length; ev++) {
(function(object, name) {
google.maps.event.addDomListener(object, name, function(e){
if (navigator.userAgent.toLowerCase().indexOf('msie') != -1 && document.all) {
e.cancelBubble = true;
e.returnValue = false;
}
else {
e.stopPropagation();
}
});
})(el, stop_overlay_events[ev]);
}
I ran a find for this: "new GMaps({"
changed 'em, done!
thanks.

How do I make a drop down menu?

<ul id="MenuBar2" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="#">Item 1</a>
<ul>
<li>Mr</li>
<li>Mrs</li>
<li>Miss</li>
<li>Ms</li>
<li>Master</li>
<li>Prof.</li>
<li>Dr</li>
</ul>
</li>
</ul>
This is the code that I have used on Dreamweaver Cs6. The drop down works however, when I click on one of the titles, it doesn't select it. Could someone explain how to fix this problem please.
Thanks :)
If you are using the default Spry menu provided by Dreamweaver, you have to make sure that in the head section that SpryMenuBar.js and SpryMenuBarHorizontal.css are included.
If so you have also to insert
<script type="text/javascript">
var MenuBar2 = new Spry.Widget.MenuBar("MenuBar2", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
before </body>
So you end code should look like this
(function() { // BeginSpryComponent
if (typeof Spry == "undefined") window.Spry = {}; if (!Spry.Widget) Spry.Widget = {};
Spry.BrowserSniff = function()
{
var b = navigator.appName.toString();
var up = navigator.platform.toString();
var ua = navigator.userAgent.toString();
this.mozilla = this.ie = this.opera = this.safari = false;
var re_opera = /Opera.([0-9\.]*)/i;
var re_msie = /MSIE.([0-9\.]*)/i;
var re_gecko = /gecko/i;
var re_safari = /(applewebkit|safari)\/([\d\.]*)/i;
var r = false;
if ( (r = ua.match(re_opera))) {
this.opera = true;
this.version = parseFloat(r[1]);
} else if ( (r = ua.match(re_msie))) {
this.ie = true;
this.version = parseFloat(r[1]);
} else if ( (r = ua.match(re_safari))) {
this.safari = true;
this.version = parseFloat(r[2]);
} else if (ua.match(re_gecko)) {
var re_gecko_version = /rv:\s*([0-9\.]+)/i;
r = ua.match(re_gecko_version);
this.mozilla = true;
this.version = parseFloat(r[1]);
}
this.windows = this.mac = this.linux = false;
this.Platform = ua.match(/windows/i) ? "windows" :
(ua.match(/linux/i) ? "linux" :
(ua.match(/mac/i) ? "mac" :
ua.match(/unix/i)? "unix" : "unknown"));
this[this.Platform] = true;
this.v = this.version;
if (this.safari && this.mac && this.mozilla) {
this.mozilla = false;
}
};
Spry.is = new Spry.BrowserSniff();
// Constructor for Menu Bar
// element should be an ID of an unordered list (<ul> tag)
// preloadImage1 and preloadImage2 are images for the rollover state of a menu
Spry.Widget.MenuBar = function(element, opts)
{
this.init(element, opts);
};
Spry.Widget.MenuBar.prototype.init = function(element, opts)
{
this.element = this.getElement(element);
// represents the current (sub)menu we are operating on
this.currMenu = null;
this.showDelay = 250;
this.hideDelay = 600;
if(typeof document.getElementById == 'undefined' || (navigator.vendor == 'Apple Computer, Inc.' && typeof window.XMLHttpRequest == 'undefined') || (Spry.is.ie && typeof document.uniqueID == 'undefined'))
{
// bail on older unsupported browsers
return;
}
// Fix IE6 CSS images flicker
if (Spry.is.ie && Spry.is.version < 7){
try {
document.execCommand("BackgroundImageCache", false, true);
} catch(err) {}
}
this.upKeyCode = Spry.Widget.MenuBar.KEY_UP;
this.downKeyCode = Spry.Widget.MenuBar.KEY_DOWN;
this.leftKeyCode = Spry.Widget.MenuBar.KEY_LEFT;
this.rightKeyCode = Spry.Widget.MenuBar.KEY_RIGHT;
this.escKeyCode = Spry.Widget.MenuBar.KEY_ESC;
this.hoverClass = 'MenuBarItemHover';
this.subHoverClass = 'MenuBarItemSubmenuHover';
this.subVisibleClass ='MenuBarSubmenuVisible';
this.hasSubClass = 'MenuBarItemSubmenu';
this.activeClass = 'MenuBarActive';
this.isieClass = 'MenuBarItemIE';
this.verticalClass = 'MenuBarVertical';
this.horizontalClass = 'MenuBarHorizontal';
this.enableKeyboardNavigation = true;
this.hasFocus = false;
// load hover images now
if(opts)
{
for(var k in opts)
{
if (typeof this[k] == 'undefined')
{
var rollover = new Image;
rollover.src = opts[k];
}
}
Spry.Widget.MenuBar.setOptions(this, opts);
}
// safari doesn't support tabindex
if (Spry.is.safari)
this.enableKeyboardNavigation = false;
if(this.element)
{
this.currMenu = this.element;
var items = this.element.getElementsByTagName('li');
for(var i=0; i<items.length; i++)
{
if (i > 0 && this.enableKeyboardNavigation)
items[i].getElementsByTagName('a')[0].tabIndex='-1';
this.initialize(items[i], element);
if(Spry.is.ie)
{
this.addClassName(items[i], this.isieClass);
items[i].style.position = "static";
}
}
if (this.enableKeyboardNavigation)
{
var self = this;
this.addEventListener(document, 'keydown', function(e){self.keyDown(e); }, false);
}
if(Spry.is.ie)
{
if(this.hasClassName(this.element, this.verticalClass))
{
this.element.style.position = "relative";
}
var linkitems = this.element.getElementsByTagName('a');
for(var i=0; i<linkitems.length; i++)
{
linkitems[i].style.position = "relative";
}
}
}
};
Spry.Widget.MenuBar.KEY_ESC = 27;
Spry.Widget.MenuBar.KEY_UP = 38;
Spry.Widget.MenuBar.KEY_DOWN = 40;
Spry.Widget.MenuBar.KEY_LEFT = 37;
Spry.Widget.MenuBar.KEY_RIGHT = 39;
Spry.Widget.MenuBar.prototype.getElement = function(ele)
{
if (ele && typeof ele == "string")
return document.getElementById(ele);
return ele;
};
Spry.Widget.MenuBar.prototype.hasClassName = function(ele, className)
{
if (!ele || !className || !ele.className || ele.className.search(new RegExp("\\b" + className + "\\b")) == -1)
{
return false;
}
return true;
};
Spry.Widget.MenuBar.prototype.addClassName = function(ele, className)
{
if (!ele || !className || this.hasClassName(ele, className))
return;
ele.className += (ele.className ? " " : "") + className;
};
Spry.Widget.MenuBar.prototype.removeClassName = function(ele, className)
{
if (!ele || !className || !this.hasClassName(ele, className))
return;
ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
};
// addEventListener for Menu Bar
// attach an event to a tag without creating obtrusive HTML code
Spry.Widget.MenuBar.prototype.addEventListener = function(element, eventType, handler, capture)
{
try
{
if (element.addEventListener)
{
element.addEventListener(eventType, handler, capture);
}
else if (element.attachEvent)
{
element.attachEvent('on' + eventType, handler);
}
}
catch (e) {}
};
// createIframeLayer for Menu Bar
// creates an IFRAME underneath a menu so that it will show above form controls and ActiveX
Spry.Widget.MenuBar.prototype.createIframeLayer = function(menu)
{
var layer = document.createElement('iframe');
layer.tabIndex = '-1';
layer.src = 'javascript:""';
layer.frameBorder = '0';
layer.scrolling = 'no';
menu.parentNode.appendChild(layer);
layer.style.left = menu.offsetLeft + 'px';
layer.style.top = menu.offsetTop + 'px';
layer.style.width = menu.offsetWidth + 'px';
layer.style.height = menu.offsetHeight + 'px';
};
// removeIframeLayer for Menu Bar
// removes an IFRAME underneath a menu to reveal any form controls and ActiveX
Spry.Widget.MenuBar.prototype.removeIframeLayer = function(menu)
{
var layers = ((menu == this.element) ? menu : menu.parentNode).getElementsByTagName('iframe');
while(layers.length > 0)
{
layers[0].parentNode.removeChild(layers[0]);
}
};
// clearMenus for Menu Bar
// root is the top level unordered list (<ul> tag)
Spry.Widget.MenuBar.prototype.clearMenus = function(root)
{
var menus = root.getElementsByTagName('ul');
for(var i=0; i<menus.length; i++)
this.hideSubmenu(menus[i]);
this.removeClassName(this.element, this.activeClass);
};
// bubbledTextEvent for Menu Bar
// identify bubbled up text events in Safari so we can ignore them
Spry.Widget.MenuBar.prototype.bubbledTextEvent = function()
{
return Spry.is.safari && (event.target == event.relatedTarget.parentNode || (event.eventPhase == 3 && event.target.parentNode == event.relatedTarget));
};
// showSubmenu for Menu Bar
// set the proper CSS class on this menu to show it
Spry.Widget.MenuBar.prototype.showSubmenu = function(menu)
{
if(this.currMenu)
{
this.clearMenus(this.currMenu);
this.currMenu = null;
}
if(menu)
{
this.addClassName(menu, this.subVisibleClass);
if(typeof document.all != 'undefined' && !Spry.is.opera && navigator.vendor != 'KDE')
{
if(!this.hasClassName(this.element, this.horizontalClass) || menu.parentNode.parentNode != this.element)
{
menu.style.top = menu.parentNode.offsetTop + 'px';
}
}
if(Spry.is.ie && Spry.is.version < 7)
{
this.createIframeLayer(menu);
}
}
this.addClassName(this.element, this.activeClass);
};
// hideSubmenu for Menu Bar
// remove the proper CSS class on this menu to hide it
Spry.Widget.MenuBar.prototype.hideSubmenu = function(menu)
{
if(menu)
{
this.removeClassName(menu, this.subVisibleClass);
if(typeof document.all != 'undefined' && !Spry.is.opera && navigator.vendor != 'KDE')
{
menu.style.top = '';
menu.style.left = '';
}
if(Spry.is.ie && Spry.is.version < 7)
this.removeIframeLayer(menu);
}
};
// initialize for Menu Bar
// create event listeners for the Menu Bar widget so we can properly
// show and hide submenus
Spry.Widget.MenuBar.prototype.initialize = function(listitem, element)
{
var opentime, closetime;
var link = listitem.getElementsByTagName('a')[0];
var submenus = listitem.getElementsByTagName('ul');
var menu = (submenus.length > 0 ? submenus[0] : null);
if(menu)
this.addClassName(link, this.hasSubClass);
if(!Spry.is.ie)
{
// define a simple function that comes standard in IE to determine
// if a node is within another node
listitem.contains = function(testNode)
{
// this refers to the list item
if(testNode == null)
return false;
if(testNode == this)
return true;
else
return this.contains(testNode.parentNode);
};
}
// need to save this for scope further down
var self = this;
this.addEventListener(listitem, 'mouseover', function(e){self.mouseOver(listitem, e);}, false);
this.addEventListener(listitem, 'mouseout', function(e){if (self.enableKeyboardNavigation) self.clearSelection(); self.mouseOut(listitem, e);}, false);
if (this.enableKeyboardNavigation)
{
this.addEventListener(link, 'blur', function(e){self.onBlur(listitem);}, false);
this.addEventListener(link, 'focus', function(e){self.keyFocus(listitem, e);}, false);
}
};
Spry.Widget.MenuBar.prototype.keyFocus = function (listitem, e)
{
this.lastOpen = listitem.getElementsByTagName('a')[0];
this.addClassName(this.lastOpen, listitem.getElementsByTagName('ul').length > 0 ? this.subHoverClass : this.hoverClass);
this.hasFocus = true;
};
Spry.Widget.MenuBar.prototype.onBlur = function (listitem)
{
this.clearSelection(listitem);
};
Spry.Widget.MenuBar.prototype.clearSelection = function(el){
//search any intersection with the current open element
if (!this.lastOpen)
return;
if (el)
{
el = el.getElementsByTagName('a')[0];
// check children
var item = this.lastOpen;
while (item != this.element)
{
var tmp = el;
while (tmp != this.element)
{
if (tmp == item)
return;
try{
tmp = tmp.parentNode;
}catch(err){break;}
}
item = item.parentNode;
}
}
var item = this.lastOpen;
while (item != this.element)
{
this.hideSubmenu(item.parentNode);
var link = item.getElementsByTagName('a')[0];
this.removeClassName(link, this.hoverClass);
this.removeClassName(link, this.subHoverClass);
item = item.parentNode;
}
this.lastOpen = false;
};
Spry.Widget.MenuBar.prototype.keyDown = function (e)
{
if (!this.hasFocus)
return;
if (!this.lastOpen)
{
this.hasFocus = false;
return;
}
var e = e|| event;
var listitem = this.lastOpen.parentNode;
var link = this.lastOpen;
var submenus = listitem.getElementsByTagName('ul');
var menu = (submenus.length > 0 ? submenus[0] : null);
var hasSubMenu = (menu) ? true : false;
var opts = [listitem, menu, null, this.getSibling(listitem, 'previousSibling'), this.getSibling(listitem, 'nextSibling')];
if (!opts[3])
opts[2] = (listitem.parentNode.parentNode.nodeName.toLowerCase() == 'li')?listitem.parentNode.parentNode:null;
var found = 0;
switch (e.keyCode){
case this.upKeyCode:
found = this.getElementForKey(opts, 'y', 1);
break;
case this.downKeyCode:
found = this.getElementForKey(opts, 'y', -1);
break;
case this.leftKeyCode:
found = this.getElementForKey(opts, 'x', 1);
break;
case this.rightKeyCode:
found = this.getElementForKey(opts, 'x', -1);
break;
case this.escKeyCode:
case 9:
this.clearSelection();
this.hasFocus = false;
default: return;
}
switch (found)
{
case 0: return;
case 1:
//subopts
this.mouseOver(listitem, e);
break;
case 2:
//parent
this.mouseOut(opts[2], e);
break;
case 3:
case 4:
// left - right
this.removeClassName(link, hasSubMenu ? this.subHoverClass : this.hoverClass);
break;
}
var link = opts[found].getElementsByTagName('a')[0];
if (opts[found].nodeName.toLowerCase() == 'ul')
opts[found] = opts[found].getElementsByTagName('li')[0];
this.addClassName(link, opts[found].getElementsByTagName('ul').length > 0 ? this.subHoverClass : this.hoverClass);
this.lastOpen = link;
opts[found].getElementsByTagName('a')[0].focus();
//stop further event handling by the browser
return Spry.Widget.MenuBar.stopPropagation(e);
};
Spry.Widget.MenuBar.prototype.mouseOver = function (listitem, e)
{
var link = listitem.getElementsByTagName('a')[0];
var submenus = listitem.getElementsByTagName('ul');
var menu = (submenus.length > 0 ? submenus[0] : null);
var hasSubMenu = (menu) ? true : false;
if (this.enableKeyboardNavigation)
this.clearSelection(listitem);
if(this.bubbledTextEvent())
{
// ignore bubbled text events
return;
}
if (listitem.closetime)
clearTimeout(listitem.closetime);
if(this.currMenu == listitem)
{
this.currMenu = null;
}
// move the focus too
if (this.hasFocus)
link.focus();
// show menu highlighting
this.addClassName(link, hasSubMenu ? this.subHoverClass : this.hoverClass);
this.lastOpen = link;
if(menu && !this.hasClassName(menu, this.subHoverClass))
{
var self = this;
listitem.opentime = window.setTimeout(function(){self.showSubmenu(menu);}, this.showDelay);
}
};
Spry.Widget.MenuBar.prototype.mouseOut = function (listitem, e)
{
var link = listitem.getElementsByTagName('a')[0];
var submenus = listitem.getElementsByTagName('ul');
var menu = (submenus.length > 0 ? submenus[0] : null);
var hasSubMenu = (menu) ? true : false;
if(this.bubbledTextEvent())
{
// ignore bubbled text events
return;
}
var related = (typeof e.relatedTarget != 'undefined' ? e.relatedTarget : e.toElement);
if(!listitem.contains(related))
{
if (listitem.opentime)
clearTimeout(listitem.opentime);
this.currMenu = listitem;
// remove menu highlighting
this.removeClassName(link, hasSubMenu ? this.subHoverClass : this.hoverClass);
if(menu)
{
var self = this;
listitem.closetime = window.setTimeout(function(){self.hideSubmenu(menu);}, this.hideDelay);
}
if (this.hasFocus)
link.blur();
}
};
Spry.Widget.MenuBar.prototype.getSibling = function(element, sibling)
{
var child = element[sibling];
while (child && child.nodeName.toLowerCase() !='li')
child = child[sibling];
return child;
};
Spry.Widget.MenuBar.prototype.getElementForKey = function(els, prop, dir)
{
var found = 0;
var rect = Spry.Widget.MenuBar.getPosition;
var ref = rect(els[found]);
var hideSubmenu = false;
//make the subelement visible to compute the position
if (els[1] && !this.hasClassName(els[1], this.MenuBarSubmenuVisible))
{
els[1].style.visibility = 'hidden';
this.showSubmenu(els[1]);
hideSubmenu = true;
}
var isVert = this.hasClassName(this.element, this.verticalClass);
var hasParent = els[0].parentNode.parentNode.nodeName.toLowerCase() == 'li' ? true : false;
for (var i = 1; i < els.length; i++){
//when navigating on the y axis in vertical menus, ignore children and parents
if(prop=='y' && isVert && (i==1 || i==2))
{
continue;
}
//when navigationg on the x axis in the FIRST LEVEL of horizontal menus, ignore children and parents
if(prop=='x' && !isVert && !hasParent && (i==1 || i==2))
{
continue;
}
if (els[i])
{
var tmp = rect(els[i]);
if ( (dir * tmp[prop]) < (dir * ref[prop]))
{
ref = tmp;
found = i;
}
}
}
// hide back the submenu
if (els[1] && hideSubmenu){
this.hideSubmenu(els[1]);
els[1].style.visibility = '';
}
return found;
};
Spry.Widget.MenuBar.camelize = function(str)
{
if (str.indexOf('-') == -1){
return str;
}
var oStringList = str.split('-');
var isFirstEntry = true;
var camelizedString = '';
for(var i=0; i < oStringList.length; i++)
{
if(oStringList[i].length>0)
{
if(isFirstEntry)
{
camelizedString = oStringList[i];
isFirstEntry = false;
}
else
{
var s = oStringList[i];
camelizedString += s.charAt(0).toUpperCase() + s.substring(1);
}
}
}
return camelizedString;
};
Spry.Widget.MenuBar.getStyleProp = function(element, prop)
{
var value;
try
{
if (element.style)
value = element.style[Spry.Widget.MenuBar.camelize(prop)];
if (!value)
if (document.defaultView && document.defaultView.getComputedStyle)
{
var css = document.defaultView.getComputedStyle(element, null);
value = css ? css.getPropertyValue(prop) : null;
}
else if (element.currentStyle)
{
value = element.currentStyle[Spry.Widget.MenuBar.camelize(prop)];
}
}
catch (e) {}
return value == 'auto' ? null : value;
};
Spry.Widget.MenuBar.getIntProp = function(element, prop)
{
var a = parseInt(Spry.Widget.MenuBar.getStyleProp(element, prop),10);
if (isNaN(a))
return 0;
return a;
};
Spry.Widget.MenuBar.getPosition = function(el, doc)
{
doc = doc || document;
if (typeof(el) == 'string') {
el = doc.getElementById(el);
}
if (!el) {
return false;
}
if (el.parentNode === null || Spry.Widget.MenuBar.getStyleProp(el, 'display') == 'none') {
//element must be visible to have a box
return false;
}
var ret = {x:0, y:0};
var parent = null;
var box;
if (el.getBoundingClientRect) { // IE
box = el.getBoundingClientRect();
var scrollTop = doc.documentElement.scrollTop || doc.body.scrollTop;
var scrollLeft = doc.documentElement.scrollLeft || doc.body.scrollLeft;
ret.x = box.left + scrollLeft;
ret.y = box.top + scrollTop;
} else if (doc.getBoxObjectFor) { // gecko
box = doc.getBoxObjectFor(el);
ret.x = box.x;
ret.y = box.y;
} else { // safari/opera
ret.x = el.offsetLeft;
ret.y = el.offsetTop;
parent = el.offsetParent;
if (parent != el) {
while (parent) {
ret.x += parent.offsetLeft;
ret.y += parent.offsetTop;
parent = parent.offsetParent;
}
}
// opera & (safari absolute) incorrectly account for body offsetTop
if (Spry.is.opera || Spry.is.safari && Spry.Widget.MenuBar.getStyleProp(el, 'position') == 'absolute')
ret.y -= doc.body.offsetTop;
}
if (el.parentNode)
parent = el.parentNode;
else
parent = null;
if (parent.nodeName){
var cas = parent.nodeName.toUpperCase();
while (parent && cas != 'BODY' && cas != 'HTML') {
cas = parent.nodeName.toUpperCase();
ret.x -= parent.scrollLeft;
ret.y -= parent.scrollTop;
if (parent.parentNode)
parent = parent.parentNode;
else
parent = null;
}
}
return ret;
};
Spry.Widget.MenuBar.stopPropagation = function(ev)
{
if (ev.stopPropagation)
ev.stopPropagation();
else
ev.cancelBubble = true;
if (ev.preventDefault)
ev.preventDefault();
else
ev.returnValue = false;
};
Spry.Widget.MenuBar.setOptions = function(obj, optionsObj, ignoreUndefinedProps)
{
if (!optionsObj)
return;
for (var optionName in optionsObj)
{
if (ignoreUndefinedProps && optionsObj[optionName] == undefined)
continue;
obj[optionName] = optionsObj[optionName];
}
};
})(); // EndSpryComponent
var MenuBar2 = new Spry.Widget.MenuBar("MenuBar2", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
ul.MenuBarHorizontal
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
}
ul.MenuBarActive
{
z-index: 1000;
}
ul.MenuBarHorizontal li
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 8em;
float: left;
}
ul.MenuBarHorizontal ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 8.2em;
position: absolute;
left: -1000em;
}
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
left: auto;
}
ul.MenuBarHorizontal ul li
{
width: 8.2em;
}
ul.MenuBarHorizontal ul ul
{
position: absolute;
margin: -5% 0 0 95%;
}
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{
left: auto;
top: 0;
}
ul.MenuBarHorizontal ul
{
border: 1px solid #CCC;
}
ul.MenuBarHorizontal a
{
display: block;
cursor: pointer;
background-color: #EEE;
padding: 0.5em 0.75em;
color: #333;
text-decoration: none;
}
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
background-color: #33C;
color: #FFF;
}
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
background-color: #33C;
color: #FFF;
}
ul.MenuBarHorizontal a.MenuBarItemSubmenu
{
background-image: url(SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
{
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
{
background-image: url(SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
{
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
ul.MenuBarHorizontal iframe
{
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
}
#media screen, projection
{
ul.MenuBarHorizontal li.MenuBarItemIE
{
display: inline;
f\loat: left;
background: #FFF;
}
}
<ul id="MenuBar2" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="#">Item 1</a>
<ul>
<li>Mr</li>
<li>Mrs</li>
<li>Miss</li>
<li>Ms</li>
<li>Master</li>
<li>Prof.</li>
<li>Dr</li>
</ul>
</li>
</ul>
You can include Bootstrap to your website and follow these examples:
Dropdowns
Beautiful Dropdowns
Split button Dropdowns

Convert as2 to as3

I found a script for searching and selecting a specific text from a dynamic text box
But the problem is it is AS2
I started Flash by only studying AS3 so i have no idea on how to convert AS2 to AS3
Pls someone help me :)
finder.onRelease = function() {
Selection.setFocus("_root.textInstance");
var inputterString:String = _root.inputter
var inputLength:Number = inputterString.length;
textStart = textVar.indexOf(inputter, 0);
if (inputLength>0) {
textEnd = textStart+inputLength;
} else {
textEnd = 0;
}
if (textStart>=0) {
Selection.setSelection(textStart, textEnd);
} else {
Selection.setSelection(0, 0);
}
_root.textEnd = textEnd;
};
findNext.onRelease = function() {
Selection.setFocus("_root.textInstance");
var inputterString:String = _root.inputter;
var inputLength:Number = inputterString.length;
textStart = textVar.indexOf(inputter, _root.textEnd);
if (inputLength>0) {
textEnd = textStart+inputLength;
} else {
textEnd = 0;
}
if (textStart>=0) {
Selection.setSelection(textStart, textEnd);
} else {
Selection.setSelection(0, 0);
}
_root.textEnd = textEnd;
}
It's not as bad as you might think, but what are finder and findNext - buttons? These are callbacks which can be created by
finder.addEventListener(MouseEvent.MOUSE_UP, finderCallback);
// somewhere else in the code
private function finderCallback(e:MouseEvent):void {
// code here
// anything like _root.<varName> references something on the main file,
// so this just has to be something you can access in the funciton
}
OK, this should be it. I made some assumptions about root.textInstance and the buttons.
import flash.events.MouseEvent;
function onFinderClicked(event:MouseEvent):void{
stage.focus = root.textInstance;
root.textInstance.selectable = true;
var inputterString:String = root.inputter
var inputLength:Number = inputterString.length;
textStart = textVar.indexOf(inputter, 0);
if (inputLength>0) {
textEnd = textStart+inputLength;
} else {
textEnd = 0;
}
if (textStart>=0) {
root.textInstance.setSelection(textStart, textEnd);
} else {
root.textInstance.setSelection(0, 0);
}
root.textEnd = textEnd;
};
function onFindNextClicked(event:MouseEvent):void{
stage.focus = root.textInstance;
root.textInstance.selectable = true;
var inputterString:String = root.inputter;
var inputLength:Number = inputterString.length;
textStart = textVar.indexOf(inputter, root.textEnd);
if (inputLength>0) {
textEnd = textStart+inputLength;
} else {
textEnd = 0;
}
if (textStart>=0) {
root.textInstance.setSelection(textStart, textEnd);
} else {
root.textInstance.setSelection(0, 0);
}
root.textEnd = textEnd;
}
finder.addEventListener(MouseEvent.CLICK, onFinderClicked);
findNext.addEventListener(MouseEvent.CLICK, onFindNextClicked);

Html web storage

I have to store value using HTML local storage. But i am not storing values directly. Values are coming from from xml which i am parsing. Please help me out how should i store the values.
The snippet code is in javascript is:
function html5_storage_support() {
try {
return 'localStorage' in window && window['localStorage'] == null;
} catch (e) {
return false;
}
}
unction checekAnswer() {
$("#btnSubmit").attr("disabled","true");
$("#btnSubmit").attr("onclick","");
attempted_count++;
var feedback=question[i].getElementsByTagName("feedback");
var answer=question[i].getElementsByTagName("answer");
var score=question[i].getElementsByTagName("score");
var left=question[i].getElementsByTagName("answer")[0].getAttribute("left");
var top=question[i].getElementsByTagName("answer")[0].getAttribute("top");
var single=question[i].getElementsByTagName("image")[0].getAttribute("single");
if(answer[0].getAttribute("mcq")=="true")
{
var ans=$('input:radio[name=rdOptions]:checked').val();
var correct;
var option=answer[0].getElementsByTagName("options");
for(var k=0;k<option.length;k++)
{
if(option[k].getAttribute("correctAnswer")=="true")
{
correct=option[k].getAttribute("value");
}
}
if(ans==correct)
{
correctAnswers++;
$("#feedback").html("Correct Answer:"+ans+"<br/>");
$("#feedback").append(score[0].childNodes[0].nodeValue);
$("#feedback").append("<br/>");
$("#feedback").append(feedback[0].childNodes[0].nodeValue);
}
else
{
$("#feedback").html("Your Answer:"+ans+"<br/>");
$("#feedback").append("Correct Answer:"+correct+"<br/>");
$("#feedback").append(score[1].childNodes[0].nodeValue);
$("#feedback").append("<br/>");
$("#feedback").append(feedback[0].childNodes[0].nodeValue);
}
}
else
{
$("#draggableImg").draggable({disabled:true});
var diff=0;
if(single=="true")
diff=2;
else
diff=7;
if(xPos<=(parseInt(left)+7) && xPos>=(parseInt(left)-7) && yPos<=(parseInt(top)+diff) && yPos>=(parseInt(top)-diff))
{
**//Displaying the feedbacks and scores**
correctAnswers++;
$("#feedback").append(score[0].childNodes[0].nodeValue);
$("#feedback").append("<br/>");
$("#feedback").append(feedback[0].childNodes[0].nodeValue);
}
else
{
$("#feedback").html(score[1].childNodes[0].nodeValue);
$("#feedback").append("<br/>");
$("#feedback").append(feedback[0].childNodes[0].nodeValue);
}
//$("#counter").html("left="+xPos+",top="+yPos);
$("#trFeedBack").show("slow");
display_nav(j,obj)
}
} // end function

firebug saying not a function

<script type = "text/javascript">
var First_Array = new Array();
function reset_Form2() {document.extraInfo.reset();}
function showList1() {document.getElementById("favSports").style.visibility="visible";}
function showList2() {document.getElementById("favSubjects").style.visibility="visible";}
function hideProceed() {document.getElementById('proceed').style.visibility='hidden';}
function proceedToSecond ()
{
document.getElementById("div1").style.visibility="hidden";
document.getElementById("div2").style.visibility="visible";
document.getElementById("favSports").style.visibility="hidden";
document.getElementById("favSubjects").style.visibility="hidden";
}
function backToFirst () {
document.getElementById("div1").style.visibility="visible";
document.getElementById("div2").style.visibility="hidden";
document.getElementById("favSports").style.visibility="visible";
document.getElementById("favSubjects").style.visibility="visible";
}
function reset_Form(){
document.personalInfo.reset();
document.getElementById("favSports").style.visibility="hidden";
document.getElementById("favSubjects").style.visibility="hidden";
}
function isValidName(firstStr) {
var firstPat = /^([a-zA-Z]+)$/;
var matchArray = firstStr.match(firstPat);
if (matchArray == null) {
alert("That's a weird name, try again");
return false;
}
return true;
}
function isValidZip(zipStr) {
var zipPat =/[0-9]{5}/;
var matchArray = zipStr.match(zipPat);
if(matchArray == null) {
alert("Zip is not in valid format");
return false;
}
return true;
}
function isValidApt(aptStr) {
var aptPat = /[\d]/;
var matchArray = aptStr.match(aptPat);
if(matchArray == null) {
if (aptStr=="") {
return true;
}
alert("Apt is not proper format");
return false;
}
return true;
}
function isValidDate(dateStr) {
//requires 4 digit year:
var datePat = /^(\d{1,2})(\/|-)(\d{1,2})\2(\d{4})$/;
var matchArray = dateStr.match(datePat);
if (matchArray == null) {
alert("Date is not in a valid format.");
return false;
}
return true;
}
function checkRadioFirst() {
var rb = document.personalInfo.salutation;
for(var i=0;i<rb.length;i++) {
if(rb[i].checked) {
return true;
}
}
alert("Please specify a salutation");
return false;
}
function checkCheckFirst() {
var rb = document.personalInfo.operatingSystems;
for(var i=0;i<rb.length;i++) {
if(rb[i].checked) {
return true;
}
}
alert("Please specify an operating system") ;
return false;
}
function checkSelectFirst() {
if ( document.personalInfo.sports.selectedIndex == -1)
{
alert ( "Please select a sport" );
return false;
}
return true;
}
function checkRadioSecond() {
var rb = document.extraInfo.referral;
for(var i=0;i<rb.length;i++) {
if(rb[i].checked) {
return true;
}
}
alert("Please select form of referral");
return false;
}
function checkCheckSecond() {
var rb = document.extraInfo.officeSupplies;
for(var i=0;i<rb.length;i++) {
if(rb[i].checked) {
return true;
}
}
alert("Please select an office supply option");
return false;
}
function checkSelectSecond() {
if ( document.extraInfo.colorPick.selectedIndex == 0 ) {
alert ( "Please select a favorite color" );
return false;
}
return true;
}
function check_Form(){
var retvalue = isValidDate(document.personalInfo.date.value);
if(retvalue) {
retvalue = isValidZip(document.personalInfo.zipCode.value);
if(retvalue) {
retvalue = isValidName(document.personalInfo.nameFirst.value);
if(retvalue) {
retvalue = checkRadioFirst();
if(retvalue) {
retvalue = checkCheckFirst();
if(retvalue) {
retvalue = checkSelectFirst();
if(retvalue) {
retvalue = isValidApt(document.personalInfo.aptNum.value);
if(retvalue){
document.getElementById('proceed').style.visibility='visible';
var rb = document.personalInfo.salutation;
for(var i=0;i<rb.length;i++) {
if(rb[i].checked) {
var salForm = rb[i].value;
}
}
var SportsOptions = "";
for(var j=0;j<document.personalInfo.sports.length;j++){
if ( document.personalInfo.sports.options[j].selected){
SportsOptions += document.personalInfo.sports.options[j].value + " ";
}
}
var SubjectsOptions= "";
for(var k=0;k<document.personalInfo.subjects.length;k++){
if ( document.personalInfo.subjects.options[k].selected){
SubjectsOptions += document.personalInfo.subjects.options[k].value + " ";
}
}
var osBox = document.personalInfo.operatingSystems;
var OSOptions = "";
for(var y=0;y<osBox.length;y++) {
if(osBox[y].checked) {
OSOptions += osBox[y].value + " ";
}
}
First_Array[0] = salForm;
First_Array[1] = document.personalInfo.nameFirst.value;
First_Array[2] = document.personalInfo.nameMiddle.value;
First_Array[3] = document.personalInfo.nameLast.value;
First_Array[4] = document.personalInfo.address.value;
First_Array[5] = document.personalInfo.aptNum.value;
First_Array[6] = document.personalInfo.city.value;
for(var l=0; l<document.personalInfo.state.length; l++) {
if (document.personalInfo.state.options[l].selected) {
First_Array[7] = document.personalInfo.state[l].value;
}
}
First_Array[8] = document.personalInfo.zipCode.value;
First_Array[9] = document.personalInfo.date.value;
First_Array[10] = document.personalInfo.phone.value;
First_Array[11] = SportsOptions;
First_Array[12] = SubjectsOptions;
First_Array[13] = OSOptions;
alert("Everything looks good.");
document.getElementById('validityButton').style.visibility='hidden';
}
}
}
}
}
}
}
}
/*function formAction2() {
var retvalue;
retvalue = checkRadioSecond();
if(!retvalue) {
return retvalue;
}
retvalue = checkCheckSecond();
if(!retvalue) {
return retvalue;
}
return checkSelectSecond() ;
} */
</script>
This is just a sample of the code, there are alot more functions, but I thought the error might be related to surrounding code. I have absolutely no idea why, as I know all the surrounding functions execute, and First_Array is populated.
However when I click the Proceed to Second button, the onclick attribute does not execute because Firebug says proceedToSecond is not a function
button code:
<input type="button" id="proceed" name="proceedToSecond" onclick="proceedToSecond();" value="Proceed to second form">
I had the same problem, and it's because you have a form with the same name as your function. JavaScript doesn't seem to be able to distinguish between the two, so you get the "not a function" error.
Maybe there is an error in your Javascript before that snippet given by you. If so, the rest will not be parsed by Firefox and then your function will not be defined.
The problem was resolved by changing proceedToSecond() to doIt() in both the call and the function name. I have no idea why
Hmm... I always used javascript:function_name() instead of function_name() because a few times the javascript didn't run. The name tag for the html snippet might have to be changed to a slightly different name because javascript might be getting it mixed up. Can you show us the entire javascript file because there may be a mistake/syntax error somewhere at the bottom/top.
It works on my computer, Firefox 3.5.5, Firebug 1.4.3, when inserting your code into an empty html document (<html><head/><body> code </body></html>)
Maybe there is another bug somewhere in your DOM, or in some of your other functions?
Could you possibly paste the entire source here, or maybe on a pastebin site?