https://plnkr.co/edit/z2uW4O6D1uLFnsoLjWeb?p=preview
When mouse hovering over the block, the select must show. When you open the select and point at one of the options, the options should disappear immediately.
That works fine in chrome but not in Firefox. any idea how to fix this in FF?
var app = angular.module('angularjs-starter', []);
app.controller('SpicyCtrl', function($scope) {
$scope.spice = 'very';
});
.box {
width: 250px;
height: 250px;
background: #ccc;
}
<!DOCTYPE html>
<html ng-app="angularjs-starter">
<head lang="en">
<meta charset="utf-8">
<title>Controller example Plunker</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<link rel="stylesheet" href="style.css">
<script>
document.write('<base href="' + document.location + '" />');
</script>
<script src="app.js"></script>
</head>
<body>
<h1>Welcome</h1>
<div>Controller example</div>
<div ng-controller="SpicyCtrl">
<div class="box" ng-mouseover="active_dropdown = true"
ng-mouseleave="active_dropdown = false">
<div ng-show="active_dropdown">
<select name="" id="">
<option>lorem test test</option>
<option>lorem test test</option>
<option>lorem test test</option>
<option>lorem test test</option>
<option>lorem test test</option>
<option>lorem test test</option>
</select>
</div>
</div>
</div>
</body>
</html>
The problem is in Firefox, when you select dropdown it considers mouseleave for class="box" and sets,
active_dropdown = false
What you can do is instead of ng-mouseleave="active_dropdown = false" you can give it a function ng-mouseleave="test($event)".
Now in you app.js add the function
$scope.test = function (event) {
if (event.target.tagName !== 'SELECT') { // Update the code accordingly
$scope.active_dropdown = false;
}
}
Related
I am new to html & javascript and have been following along with an online course regarding a leaflet webmap application.
I have a drop down menu in my sidebar which enables the user to filter the locations by category, and a function that does a refresh of the sidebar and dropdown menu after every filter selection and is called at the beginning when the web application starts as well.
When I run my index.html code in Chrome locally, the console states an error with the html header tag in my refreshCCP function ("Uncaught SyntaxError: Invalid or unexpected token"), but cannot see a problem with it:
$("#side_panel").html("<h1 class='text-center'>Search Panel</h1>
The above line of code is found at the bottom of the script area in the refreshCCP function
All HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Router</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.9.0/dist/leaflet.css">
<link rel="shortcut icon" href="">
<link rel="shortcut icon" href="#">
<script src="https://unpkg.com/leaflet#1.9.0/dist/leaflet.js"></script>
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<style>
#header {
height: 85px;
background-color:darkgoldenrod;
}
#mapdiv {
height: 650px;
background-color:salmon;
}
#side_panel {
height: 650px;
background-color:beige;
}
#footer {
height: 85px;
background-color:darkgrey;
}
</style>
</head>
<body>
<div id="header" class="col-md-12">
<h1 class="text-center">CCP Finder</h1>
</div>
<div id="side_panel" class="col-md-3"> //
<h1 class="text-center">Search Panel</h1>
<!-- dropdown filter box -->
<select id = "filter" class="form-control">
<option value="All">All CCP</option>
<option value="ex1">ex1 CCP</option>
<option value="ex2">ex2 CCP</option>
</select>
</div>
<div id="mapdiv" class="col-md-9"></div>
<div id="footer" class="col-md-12">
<h4 id="map_coords" class="text-center">Latitude:53.4 Longitude: -113.7 Zoom Level: 10.5</h4>
<h4 class="text-center">©2022 xxxx
</h4>
</div>
<script>
var mymap = L.map('mapdiv')
mymap.setView([53.4, -113.7], 10.5);
var backgroundLayer = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png');
mymap.addLayer(backgroundLayer);
var lyrCCP;
<!-- Refresh sidepanel and filter dropdown function -->
refreshCCP();
mymap.on('mousemove', function(e){
var str = "Latititude: "+e.latlng.lat.toFixed(5)+" Longitude: "+e.latlng.lng.toFixed(5)+" Zoom Level: "+mymap.getZoom();
$("#map_coords").html(str);
});
<!-- Refresh sidepanel and filter dropdown function -->
function refreshCCP(){
$.ajax({
url:'load_ccp.php',
type: 'POST',
data:{filter:$("#filter").val()},
success:function(response){
if (lyrCCP) {
mymap.removeLayer(lyrCCP);
$("#side_panel").html("<h1 class='text-center'>Search Panel</h1>
<select id='filter' class = 'form-control'>
<option value='All'>All CCP</option>
<option value='ex1'>ex1 CCP</option>
<option value='ex2'>ex2 CCP</option>
</select>");
};
lyrCCP=L.geoJSON(JSON.parse(response), {pointToLayer: function(feature,latlng) {
var str = "<hr>CCP Number:<h4>"+feature.properties.cp_no+"</h4>";
str += "<hr>River Name: <h4>"+feature.properties.river+"</h4>";
str += "<img src='img/"+feature.properties.tactic+"' width = '200px'></img>";
return L.circleMarker(latlng).bindPopup(str);
}});
lyrCCP.addTo(mymap);
mymap.fitBounds(lyrCCP.getBounds());
}});
$("#filter").change(function(){
refreshCCP();
});
</script>
</body>
</html>
In order to get it to work, you need to send a template literal instead of a string by using the grave character:
$("#side_panel").html(
`<h1 class='text-center'>Search Panel</h1>
<select id='filter' class = 'form-control'>
<option value='All'>All CCP</option>
<option value='ex1'>ex1 CCP</option>
<option value='ex2'>ex2 CCP</option>
</select>`);
I'm using the Bootstrap-Multiselect function; I want to unselect an option when I click on "x".
This is a simple example of what I'm looking for.
$(document).on("click", '#remove', function(a) {
var tag = this.getAttribute("value");
$('#tags').find('[value=' + tag + ']').prop('selected', false);
});
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/css/bootstrap-select.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/js/bootstrap-select.min.js"></script>
</head>
<body>
<div class="container">
<h1>Bootstrap Select demo</h1>
<select class="selectpicker" id='Tags' data-style="btn-primary" multiple data-max-options="2">
<option value='Php' selected>PHP</option>
<option>CSS</option>
<option>HTML</option>
<option>CSS 3</option>
<option>Bootstrap</option>
<option>JavaScript</option>
</select>
<div value='Php' id='remove'>x</div>
</div>
</body>
</html>
This could be achieved by unselecting all then getting the selected values and remove the target tag from them and reselect the rest of them then finally refresh the select :
$(document).on("click", '#remove', function(a) {
var tag = this.getAttribute("value");
var values = $('#tags').val();
if(values){
$('#tags').selectpicker('deselectAll');
$('#tags').selectpicker('val', values.filter(function(e) {return e !== tag }));
$('#tags').selectpicker('refresh');
}
});
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/css/bootstrap-select.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/js/bootstrap-select.min.js"></script>
</head>
<body>
<div class="container">
<h1>Bootstrap Select demo</h1>
<select class="selectpicker" id='tags' data-style="btn-primary" multiple data-max-options="2">
<option value='Php' selected>PHP</option>
<option>CSS</option>
<option>HTML</option>
<option>CSS 3</option>
<option>Bootstrap</option>
<option>JavaScript</option>
</select>
<div value='Php' id='remove'>x</div>
</div>
</body>
</html>
I think that you should not use the value attribute in a div element, since it was not designed the job you are trying to do (see here). You can use a data-tag="php" for example, and when writing html I think is best to use " instead of ' too, but the browser do the trick.
In the select element, you wrote the id tags with the first letter in "caps lock"
and then in the javascript code you use #tags, see:
<select class="selectpicker" id='Tags' data-style="btn-primary" multiple data-max-options="2">
$('#tags').find('[value=' + tag + ']').prop('selected', false);
After that, you just need to remove the selected element from the array and set the values again, see a working example:
jQuery(document).ready(function($) {
$(document).on("click", '#remove', function(a) {
var removed = $(this).data('value')
var values = $("#tags").val()
var index = values.indexOf(removed)
if (index != -1) {
values.splice(index, 1)
$('#tags').selectpicker('val', values);
}
});
});
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/css/bootstrap-select.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/js/bootstrap-select.min.js"></script>
</head>
<body>
<div class="container">
<h1>Bootstrap Select demo</h1>
<select class="selectpicker" id="tags" data-style="btn-primary" multiple data-max-options="2">
<option value="Php" selected>PHP</option>
<option>CSS</option>
<option>HTML</option>
<option>CSS 3</option>
<option>Bootstrap</option>
<option>JavaScript</option>
</select>
<div data-value="Php" id="remove">x</div>
</div>
</body>
</html>
Here is a simple form which uses AngularJS.
In FireFox (30.0) and IE (11.0.9600.17207), if I choose "Yes, No, No" in drop-down boxed, is shows "true, false, false" as I expect.
In Chrome (36.0.1985.125 m) it shows "true, true, true".
Does anybody have any ideas what I'm doing wrong?
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" ng-app="testApp">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.min.js" type="text/javascript"></script>
<script type="text/javascript">
var testApp = angular.module( 'testApp', [] );
testApp.controller( 'Ctl1', [
'$scope',
function ( $scope ) {
$scope.questions = [{ id: 1, value: null }, { id: 2, value: null }, { id: 3, value: null }];
$scope.submit = function () {
var results = [];
angular.forEach( $scope.questions, function ( v, k ) { results.push( v.value ); } );
console.log( results );
$scope.results = results;
}
}] );
</script>
</head>
<body>
<div ng-controller="Ctl1">
<h1>Page 1</h1>
<form ng-submit="submit()">
<p ng-repeat="item in questions">
<select ng-model="item.value">
<option value="true">Yes</option>
<option value="false">No</option>
</select>
</p>
<p>
<button type="submit">Submit</button>
</p>
</form>
<h1>Page 2</h1>
<p ng-repeat="item in results track by $index">{{ item }}</p>
</div>
</body>
</html>
Try to look at it in a binding sense and it's much easier to see what's going on.
Fiddle
{{questions}}
I was able to simplify the example and found a workaround.
Here is the simplified code:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" ng-app="testApp">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js" type="text/javascript"></script>
<script type="text/javascript">
var testApp = angular.module( 'testApp', [] );
testApp.controller( 'Ctl1', [
'$scope',
function ( $scope ) {
$scope.value = null;
}] );
</script>
</head>
<body>
<div ng-controller="Ctl1">
<p>Value: {{ value }}</p>
<select ng-model="value">
<option value="true">Yes</option>
<option value="false">No</option>
</select>
</div>
</body>
</html>
Steps to reproduce:
Open the page in Google Chrome
Navigate to the drop-down list using keyboard
Press "arrow down" twice
Live demo: http://jsfiddle.net/QBjkB/
To fix it I’ve initialized "value" with empty string:
function ( $scope ) {
$scope.value = '';
}
And added the option with empty value to a drop-down list:
<select ng-model="value">
<option value="">---</option>
<option value="true">Yes</option>
<option value="false">No</option>
</select>
Thank you guys for your ideas!
When I use $.mobile.navigate to change the page, the page will load but the my custom script won't bind to the elements. If I refresh the page, the custom script will load and bind to the elements. I have a select element to choose between pages:
<select name="calc-Nav" id="calc-Nav">
<option value="a.php">A</option>
<option value="b.php">B</option>
<option value="c.php">C</option>
</select>
This is the event bound to the select element:
$("#calc-Nav").on("change", function (e) {
var opt = $("#calc-Nav option:selected").val();
if (opt) {
e.preventDefault();
$.mobile.navigate(opt);
}
});
Also, I link to my javascript files in the following order:
<script src="jquery.js"></script>
<script src="custom-scripting.js"></script>
<script src="jquery-mobile.js"></script>
Does anyone have any ideas how to make this work?
thanks.
EDIT:
Here is the template used for all pages
This is the standard Template of each of the pages.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
</head>
<body>
<div data-role="page">
<div data-role="header">
<div class="ui-field-contain">
<select name="calc-Nav" id="calc-Nav">
<option value="Index.php">Home</option>
<option value="a.php">a</option>
<option value="b.php">b</option>
<option value="c.php">c</option>
</select>
</div>
</div>
<div data-role="main" class="ui-content">
<div id="index">
<h1> Form goes Here. </h1>
</div>
</div>
<div data-role="footer">
<h1>Footer</h1>
</div>
</div>
</body>
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script src="js/formulas.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</html>
you need to bind them to the document
try-
$(document).on("change","#calc-Nav", function (e) {
var opt = $("#calc-Nav option:selected").val();
if (opt) {
e.preventDefault();
$.mobile.navigate(opt);
}
});
also be sure to add the link to your custom script after the jqmobile script
I am having trouble getting a jquery plugin called ui multiselect to show up properly inside a modal (using jqmodal). I actually have tried another modal called simplemodal and a different multiselect plugin as well with no luck. From what I can gather, it appears the CSS of the for uimultiselect is not being applied because the multiselect resides inside the modal div, which has display: none at page load. I have tried a number of different things suggested by others having this issue and none have worked. Perhaps I am doing it wrong.
In my code, I displayed the multiselect inside and outside of the modal. It works perfectly fine outside.
here is my html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>jQuery UI Multiselect</title>
<link rel="stylesheet" href="css/multiselect/common.css" type="text/css" />
<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/ui.all.css" />
<link type="text/css" href="css/multiselect/ui.multiselect.css" rel="stylesheet" />
<link type="text/css" rel="stylesheet" href="css/jqModalForm.css" />
<link type="text/css" rel="stylesheet" href="css/main.css" />
<link type="text/css" rel="stylesheet" href="css/jqModal.css" />
<script type="text/javascript" src="js/multiselect/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/multiselect/jquery-ui-1.8.custom.min.js"></script>
<script type="text/javascript" src="js/multiselect/plugins/localisation/jquery.localisation-min.js"></script>
<script type="text/javascript" src="js/multiselect/plugins/scrollTo/jquery.scrollTo-min.js"></script>
<script type="text/javascript" language="javascript" src="js/jqModal.js"></script>
<script type="text/javascript" language="javascript" src="js/jqDnR.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf-8">
$().ready(function() {
$('#addShortCodes').jqm({
trigger: '#addShortCodesTrigger',
overlay: 30, /* 0-100 (int) : 0 is off/transparent, 100 is opaque */
overlayClass: 'whiteOverlay'
})
.jqDrag('.jqDrag'); /* make dialog draggable, assign handle to title */
// Close Button Highlighting. IE doesn't support :hover. Surprise?
$('input.jqmdX')
.hover(function(){ $(this).addClass('jqmdXFocus'); },function(){ $(this).removeClass('jqmdXFocus'); })
.focus(function(){ this.hideFocus=true; $(this).addClass('jqmdXFocus'); })
.blur(function(){ $(this).removeClass('jqmdXFocus'); });
});
</script>
</head>
<body>
<img style="position: absolute; top: 0; right: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png" alt="Fork me on GitHub" />
<div id="wrapper">
<div id="content">
<form action="index.html">
<select id="countries" class="multiselect" multiple="multiple" name="countries[]">
<option value="AFG">Afghanistan</option>
<option value="ALB">Albania</option>
<option value="FRA">France</option>
</select>
<br/>
<input type="submit" value="Submit Form"/>
</form>
Add
<script type="text/javascript" src="js/multiselect/ui.multiselect.js"></script>
<script type="text/javascript">
$(function(){
$.localise('ui-multiselect', {/*language: 'en',*/ path: 'js/locale/'});
$(".multiselect").multiselect();
$('#switcher').themeswitcher();
});
</script>
<div id="addShortCodes" class="jqmDialog">
<div class="jqmdTL">
<div class="jqmdTR">
<div class="jqmdTC jqDrag">Add Short Codes</div>
</div>
</div>
<div class="jqmdBL">
<div class="jqmdBR">
<div class="jqmdBC">
<form id="addMonitor" action="addMonitor.do" method="post">
<div class="leftBox1">
Short Codes:
<textarea name="shortCodes" cols="20" rows="8"></textarea>
</div>
<div class="rightBox1">
<select id="countries" class="multiselect" multiple="multiple" name="countries[]">
<option value="AFG">Afghanistan</option>
<option value="ALB">Albania</option>
<option value="FRA">France</option>
</select>
</div>
<input type="hidden" name="requestId" value="${monitorRequest.requestId}" />
<div class="centerBox1">
<input type="submit" value="Add" />
</div>
</form>
</div>
</div>
</div>
<input type="image" src="dialog/close.gif" class="jqmdX jqmClose" />
</div>
<script type="text/javascript"
src="http://jqueryui.com/themeroller/themeswitchertool/">
</script>
<div id="switcher"></div>
<h2>Features</h2>
<ul>
<li>Search within available options, if there are a lots of them</li>
<li>Displaying counts of selected and available items</li>
<li>Select All / Deselect All Buttons</li>
<li>Dragging items from the available list to the selected list directly</li>
</ul>
<h2>Contributors</h2>
<ul>
<li>Michael Aufreiter</li>
<li>Yanick Rochon</li>
</ul>
</p>
<h2>Misc</h2>
<p>
There are no limitations. Do whatever you want with this plugin.
If you did some nice modifications, just let me know (via Github). I'd be happy to include them.
</p>
<h2>Elsewhere</h2>
<ul>
<li>DONUT? - Radial Navigator <small style="color: red;">NEW!</small></li>
</ul>
</div>
<div id="footer">
<p class="left">A Quasipartikel Production</p>
<p class="right">Template adopted from orderedlist.com</p>
<br class="clear"/>
</div>
</div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-10368067-1");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>
please try to place your jquery code before </body> and after the target selector...
so jquery code after target selector can fire it up .
because jquery need to be manipulation the target after.
All three of the following syntaxes are equivalent:
$(document).ready(handler)
$().ready(handler) (this is not recommended)
$(handler)
You might be using syntax that is not recommended, try this:
$(document).ready(function() {
instead of this
$().ready(function() {
I resolved the issue. I had to apply the mutiselect js in the callback from jqmodal
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
var myOpen=function(hash){
hash.w.css('opacity',1).show();
$(".multiselect").multiselect();
$.localise('ui-multiselect', {/*language: 'en',*/ path: 'js/locale/'});
};
$('#addShortCodes').jqm({
trigger: '#addShortCodesTrigger',
overlay: 30, /* 0-100 (int) : 0 is off/transparent, 100 is opaque */
overlayClass: 'whiteOverlay',
onShow:myOpen
})
.jqDrag('.jqDrag'); /* make dialog draggable, assign handle to title */
// Close Button Highlighting. IE doesn't support :hover. Surprise?
$('input.jqmdX')
.hover(function(){ $(this).addClass('jqmdXFocus'); },function(){ $(this).removeClass('jqmdXFocus'); })
.focus(function(){ this.hideFocus=true; $(this).addClass('jqmdXFocus'); })
.blur(function(){ $(this).removeClass('jqmdXFocus'); });
});
</script>