Menu
I'm creating a custom page in which the menu requires one jQuery library and the popup requires another. When I put the popup jQuery at the end of the code, only the popup function works and it stops my menu animation. If I do the reverse, the menu works and the popup button stops working. Why does this happen and how can I resolve this problem? Thanks in advance.
<!-- here this is the code without popup box -->
<!DOCTYPE html >
<html>
<head>
<title>webmap</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="Slide Down Box Menu with jQuery and CSS3" />
<meta name="keywords" content="jquery, css3, box, sliding, menu, cube, navigation, portfolio, thumbnails" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="jsuntitled/css/ol.css">
<link rel="stylesheet" type="text/css" href="sideicon_file/css/demo.css">
<link rel="stylesheet" type="text/css" href="sideicon_file/css/component.css">
<link rel="stylesheet" type="text/css" href="sideicon_file/css/style1.css">
<link rel="stylesheet" type="text/css" href="sideicon_file/css/animated_button.css">
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design for Bootstrap -->
<link href="popup/css/custom.css" rel="stylesheet">
<!-- Font Awesome -->
<!-- jQuery -->
<!-- Custom CSS -->
<script src="popup/js/jquery.js"></script>
<script src="popup/src/jquery-prompt21.js"></script>
<script src="popup/js/handlers.js"></script>
<script src="jquery-1.11.2.min.js" ></script>
<script src="sideicon_file/js/ease.min.js"></script>
<script src="sideicon_file/js/segment.min.js"></script>
<style>
html, body
{
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#map
{
height: 500px;
width: 100%;
position: relative;
left: 0;
z-index: 0;
}
span.reference
{
position: absolute;
left: 600px;
bottom: 10px;
font-size: 20px;
}
span.reference a
{
color: #aaa;
text-transform: uppercase;
text-decoration: none;
text-shadow: 1px 1px 1px #000;
margin-right: 30px;
}
span.reference a:hover
{
color: #ddd;
}
ul.sdt_menu
{
margin-top: 0px;
}
div#banner
{
width: 1350px;
height: 40px;
margin: 0px auto;
border: #639 1px solid;
overflow: hidden;
}
div#banner > #banner_backdrop
{
position: relative;
height: 40px;
}
div#banner > #banner_content
{
position: relative;
width: 96%;
height: 40px;
margin-top:10px;
top: -40px;
color: #0099CC;
font-size: 20px;
left: 100px;
text-shadow: 1px 1px 1px #000;
text-transform: uppercase;
}
div#banner > #img1
{
position: absolute;
background: url(images/isrologo.png) no-repeat;
width: 80px;
height: 70px;
top: 0px;
left: 0px;
}
div#banner > #img2
{
position: absolute;
background: url(images/title.png) no-repeat;
width: 80px;
height: 70px;
top: 0px;
left: 1280px;
}
.ol-mouse-position
{
top: auto;
bottom: 2em;
}
.ol-overviewmap
{
bottom: 2em;
}
.ol-zoomslider
{
top: 10em;
}
.ol-rotate
{
top: 2.5em;
}
.draw-point
{
right: 3em;
top: .5em;
}
#wrapper
{
position:relative;
width: 100%;
height: 80px;
position: relative;
z-index: 1;
background-color: #009999;
}
.col-lg-6{
width: 100px;
margin-left:200px;
}
</style>
</head>
<body>
<div id="banner">
<div id="banner_backdrop"></div>
<div id="img1"></div>
<div id="img2"></div>
<div id="banner_content">
Geo Spatial Information
</div>
</div>
<div id="wrapper">
<div>
<ul id="sdt_menu" class="sdt_menu">
<li >
<a href="#" >
<img src="images/landuse.jpg" alt="" />
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link"><input type="checkbox" id="landuse" />LANDUSE</span> </span></a></li>
<li>
<a href="#" >
<img src="images/soil.jpg" alt="" />
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link" ><label><input type="checkbox" id="soil" />SOIL</label></span> </span></a></li>
<li>
<a href="#">
<img src="images/settlement.jpg" alt="" />
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">RIVER</span> </span></a></li>
<li>
<a href="#">
<img src="images/settlement.jpg" alt="" />
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">LITHOLOGY</span> </span></a></li>
<li>
<a href="#">
<img src="images/settlement.jpg" alt="" />
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">GWP</span> </span></a></li>
<li>
<a href="#">
<img src="images/settlement.jpg" alt="" />
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">CADASTRIAL</span> </span></a></li>
<li>
<a href="#">
<img src="images/settlement.jpg" alt="" />
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">GEOMORPHOLOGY</span> </span></a></li>
<li>
<a href="#">
<img src="images/settlement.jpg" alt="" />
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">SETTLEMNTS</span> </span></a></li>
<li>
<a href="#">
<img src="images/road.jpg" alt="" />
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">ROADS</span> </span></a></li>
</ul>
</div>
<div class="sidebutton">
<div class="device__screen">
<div id="menu-icon-wrapper" class="menu-icon-wrapper" style="visibility: hidden">
<svg width="1000px" height="1000px">
<path id="pathA" d="M 300 400 L 700 400 C 900 400 900 750 600 850 A 400 400 0 0 1 200 200 L 800 800"></path>
<path id="pathB" d="M 300 500 L 700 500"></path>
<path id="pathC" d="M 700 600 L 300 600 C 100 600 100 200 400 150 A 400 380 0 1 1 200 800 L 800 200"></path>
</svg>
<button id="menu-icon-trigger" class="menu-icon-trigger"></button>
</div>
</div>
<!-- menu-icon-wrapper -->
<div id="dummy" class="dummy">
<div class="dummy__item">
<select name="country_id" id="state_id" tabindex="1">
<option value="">-- Select state --</option>
<option value="India">-- India --</option>
</select>
</div>
<div class="dummy__item">
<select name="district_id" id="district_id" tabindex="2">
<option value="">-- Select district --</option>
</select>
</div>
<div class="dummy__item">
<select name="village_id" id="village_id" tabindex="3">
<option value="">-- Select village --</option>
</select>
</div>
</div>
</div>
<div class="col-lg-6"><nav class="cl-effect-20"><a href="#" class="btn btn-info show-popup"><span data-hover="QueryBuilder">QueryBuilder</span></a></nav>
</div>
</div>
<!-- Element to pop up -->
<div id="map" class="map">
<div>
<span class="reference">All Rights Reserved
</span>
</div>
</div>
<script src="sideicon_file/js/main.js"></script>
<script src="jsuntitled/ol.js"></script>
<script>
var landuseLayer = new ol.layer.Image({
coordinates: [-124.73142200000001, 24.955967,
-66.969849, 49.371735],
source: new ol.source.ImageWMS({
url: 'http://localhost:8080/geoserver/topp/wms',
params: {'LAYERS': 'topp:states'},
maxZoom: 19
}),
visible: false,
});
var soilLayer = new ol.layer.Image({
coordinates: [79.14511833527447, 20.987418098133496, 79.2018842619151, 21.050233196545],
source: new ol.source.ImageWMS({
url: 'http://localhost:8080/geoserver/sagy/wms',
params: {'LAYERS': 'sagy:pachgaon_LULC'},
maxZoom: 19
}),
visible: false
});
var map = new ol.Map({
layers: [landuseLayer, soilLayer],
renderer: 'canvas',
target: document.getElementById('map'),
controls: ol.control.defaults({
attributionOptions: ({
collapsible: false
})
}).extend([
new ol.control.ZoomSlider(),
new ol.control.ZoomToExtent({
extent: [
813079.7791264898, 5929220.284081122,
848966.9639063801, 5936863.986909639
]
}),
new ol.control.Rotate(),
new ol.control.OverviewMap(),
new ol.control.ScaleLine(),
new ol.control.FullScreen(),
new ol.control.MousePosition({
coordinateFormat: ol.coordinate.createStringXY(4),
projection: 'EPSG:4326'
})
]),
interactions: ol.interaction.defaults().extend([
new ol.interaction.Select({
condition: ol.events.condition.mouseMove
})
]),
view: new ol.View({
center: new ol.geom.Point([-10997148, 4569099])
.transform('EPSG:4326', 'EPSG:4326').getCoordinates(),
zoom: 4
}),
target: 'map'
});
$('input[type=checkbox]').on('change', function() {
var layer = {
landuse: landuseLayer,
soil: soilLayer,
}[$(this).attr('id')];
layer.setVisible(!layer.getVisible());
});
// define a custom control that can be used to draw points
var DrawControl = function (opt_options) {
var options = opt_options || {};
this.active = options.active || false;
var draw = new ol.interaction.Draw({
source: options.source,
type: 'Point'
});
var this_ = this;
var handleDrawPoint = function (e) {
e.preventDefault();
if (!this.active) {
this_.getMap().addInteraction(draw);
this.active = true;
} else {
this_.getMap().removeInteraction(draw);
this.active = false;
}
};
// this will be the ui of the component
var anchor = document.createElement('a');
anchor.href = '#draw-point';
anchor.innerHTML = 'New Point';
// bind to click and touchevents to support mobile
anchor.addEventListener('click', handleDrawPoint, false);
anchor.addEventListener('touchstart', handleDrawPoint, false);
var element = document.createElement('div');
element.className = 'ol-control draw-point ol-unselectable';
element.appendChild(anchor);
ol.control.Control.call(this, {
element: element,
target: options.target
});
};
// inherit base functionality from ol.control.Control
ol.inherits(DrawControl, ol.control.Control);
// init a vector layer whose source can be used with our new control
var vectorSource = new ol.source.Vector();
var vectorLayer = new ol.layer.Vector({
source: vectorSource,
style: new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.2)'
}),
stroke: new ol.style.Stroke({
color: '#ffcc33',
width: 2
}),
image: new ol.style.Circle({
radius: 7,
fill: new ol.style.Fill({
color: '#ffcc33'
})
})
})
});
map.addLayer(vectorLayer);
// here we use our new control
map.addControl(new DrawControl({
source: vectorSource
}));
</script>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function () {
$('.ol-full-screen-false').click(function () {
var isFullScreen = $("#hdnIsFullScreen").val();
if (isFullScreen == "false") {
$('#map').css({ 'height': '100%', 'top': '0' });
$("#hdnIsFullScreen").val("true");
}
else if (isFullScreen == "true") {
$('#map').css({ 'height': '550px', 'top': '115px' });
$("#hdnIsFullScreen").val("false");
}
});
/**combobox code for state districtand village */
$("#state_id").change(function () {
$("#district_id").html("");
$("#village_id").html("");
$("#village_id").append("<option>-- Select village --</option>");
var district = "";
for (var i = 1; i <= 10; i++) {
district = district + "<option value='District" + i + "'>District" + i + "</option>";
}
$("#district_id").append("<option>-- Select district --</option>" + district);
});
$("#district_id").change(function () {
$("#village_id").html("");
var village = "";
for (var i = 1; i <= 10; i++) {
village = village + "<option value='Village" + i + "'>Village" + i + "</option>";
}
$("#village_id").append("<option>-- Select village --</option>" + village);
});
/**
* for each menu element, on mouseenter,
* we enlarge the image, and show both sdt_active span and
* sdt_wrap span. If the element has a sub menu (sdt_box),
* then we slide it - if the element is the last one in the menu
* we slide it to the left, otherwise to the right
*/
$('#sdt_menu > li').bind('mouseenter', function () {
var $elem = $(this);
$elem.find('img')
.stop(true)
.animate({
'width': '110px',
'height': '60px',
'left': '0px'
}, 400, 'easeOutBack')
.andSelf()
.find('.sdt_wrap')
.stop(true)
.animate({ 'top': '55px' }, 500, 'easeOutBack')
.andSelf()
.find('.sdt_active')
.stop(true)
.animate({ 'height': '45px' }, 300, function () {
var $sub_menu = $elem.find('.sdt_box');
if ($sub_menu.length) {
var left = '50px';
if ($elem.parent().children().length == $elem.index() + 1)
left = '-50px';
$sub_menu.show().animate({ 'left': left }, 200);
}
});
}).bind('mouseleave', function () {
var $elem = $(this);
var $sub_menu = $elem.find('.sdt_box');
if ($sub_menu.length)
$sub_menu.hide().css('left', '0px');
$elem.find('.sdt_active')
.stop(true)
.animate({ 'height': '0px' }, 300)
.andSelf().find('img')
.stop(true)
.animate({
'width': '0px',
'height': '0px',
'left': '85px'
}, 400)
.andSelf()
.find('.sdt_wrap')
.stop(true)
.animate({ 'top': '10px' }, 500);
});
});
</script>
</body>
</html>
695
Yes, by using jQuery's noconflict mode. http://blog.nemikor.com/2009/10/03/using-multiple-versions-of-jquery/
<!-- load jQuery 2.2.0 -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript">
var jQuery_2_2_0 = $.noConflict(true);
</script>
<!-- load jQuery 1.12.0 -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript">
var jQuery_1_12_2 = $.noConflict(true);
</script>
then use jQuery_2_2_0('#selector').function(); or jQuery_1_12_2('#selector').function();
rather than $('#selector').function(); or jQuery('#selector').function();
139
Try this to use two jQuery versions.
<script src="jquery.latest-version.js"></script>
<script src="jquery.oldest-version.js"></script>
<script>
// Restore globally scoped jQuery variables to the first version loaded (the latest)
// and affect into `$old` the current (the oldest).
$old = $.noConflict();
console.log($); // This is the latest jQuery
console.log($old); // This is the oldest jQuery
</script>
This is how does it work into jQuery:
(function (factory) {
// Save the jQuery var already existing...
var initialClass = window.jQuery,
// ...and affect our jQuery.
api = window.jQuery = factory;
api.noConflict = function () {
// But if `noConflict` is used, jQuery is setted by initial existing jQuery saved...
window.jQuery = initialClass;
// ...and our own jQuery is returned.
return api;
};
}(function () {
// Normal definition of jQuery class here.
}));
$ and affect oldest into $old.
25
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
