My goal is create a map with multiple locations with a map that jumps from marker to marker when a html tag was click elsewhere on the page
i made the jumps work but, i can't seem to get the mouseover info boxes to work...i have search but can't find this specific problem
www.humphrey-ray.com/qp/locations-new27a.html
working example..
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3.4key=AIzaSyCjceQVdlfYNqKfDcrAl50VIXrzBXMhDbo&sensor=false">
</script> <script type="text/javascript">
var map;
var marker2;
var marker3;
var marker4;
var marker5;
var infowindow = new google.maps.InfoWindow();
function initialize() {
var latlng = new google.maps.LatLng(39.94718, -75.14323);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
marker2 = new google.maps.Marker({
position: new google.maps.LatLng(39.94718, -75.14323),
map: map,
title: "my 2nd title"
});
new google.maps.event.addListener( marker2, 'mouseover', function() {
infowindow.setContent("my 2nd title");
infowindow.open(map,this);
});
marker3 = new google.maps.Marker({
position: new google.maps.LatLng(39.94924, -75.14268),
map: map,
title: "my 2nd title"
});
new google.maps.event.addListener( marker3, 'mouseover', function() {
infowindow.setContent("my 3nd title");
infowindow.open(map,this);
});
marker4 = new google.maps.Marker({
position: new google.maps.LatLng(39.96146, -75.14325),
map: map,
title: "my 2nd title"
});
new google.maps.event.addListener( marker4, 'mouseover', function() {
infowindow.setContent("my 4nd title");
infowindow.open(map,this);
});
marker5 = new google.maps.Marker({
position: new google.maps.LatLng(39.95098, -75.14558),
map: map,
title: "my 5nd title"
});
new google.maps.event.addListener( marker5, 'mouseover', function() {
infowindow.setContent("my 5nd title");
infowindow.open(map,this);
});
}
function goToLoc(id){
if(id== 2)
map.setCenter(marker2.getPosition());
if(id == 3)
map.setCenter(marker3.getPosition());
if(id == 4)
map.setCenter(marker4.getPosition());
if(id == 5)
map.setCenter(marker5.getPosition());
}
</script> <style type="text/css">
body,td,th { font-family: Arial, Helvetica, sans-serif; }
</style>
</head>
<body onload="initialize()">
<div id="container">
<!-- /header -->
<!-- /nav -->
<div class="mapwrapper">
<div class="mapwrapper" id="map_canvas" style="width:720px; height:400px">
</div>
<div class="mapwrapper">
<div class="right-top-column">
<div class="right-top-column-inner">
<br>
<img src="img/comin_soon.jpg" width="180" height="186" />
</p>
</div>
</div>
<div class="right-top-column-noshaw">
<h1>
Click Location to show on map
</h1>
<ul class="side-list">
<li>
<a href="#" id="marker2" onclick="goToLoc(2)">
Old City</a>
</li>
<li>
<a href="#" id="marker3" onclick="goToLoc(3)">
South Street/Society Hill</a>
</li>
<li>
<a href="#" id="marker4" onclick="goToLoc(4)">
Northern Liberties</a>
</li>
<li>
<a href="#" id="marker5" onclick="goToLoc(5)">
Old City</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
Related
This must be fairly simple, but I'm puzzled.
The content divs disappear on sorting.
And I missing the correct data-filter? Or a display:none or display:block?
Codepen: http://codepen.io/anon/pen/oYXXPq (You can clone it to make changes.)
HTML:
<ul id="filters">
<li>Everything</li>
<li>Blog</li>
<li>CISO</li>
<li>LABS</li>
</ul>
<div class="container-fluid">
<div id="isotope-blog">
<div class="grid">
<div class="grid-sizer col-xs-12 col-md-6"></div>
<div class="grid-item item col-xs-12 col-md-6">
<div class="grid-item-content blog">Blog Blog Blog</div>
</div>
<div class="grid-item item col-xs-12 col-md-6">
<div class="grid-item-content blog">Blog Blog Blog</div>
</div>
<div class="grid-item item col-xs-12 col-md-6">
<div class="grid-item-content ciso">CISO CISO CISO</div>
</div>
<div class="grid-item item col-xs-12 col-md-6">
<div class="grid-item-content labs">LABS LABS LABS</div>
</div>
<div class="grid-item item col-xs-12 col-md-6">
<div class="grid-item-content labs">LABS LABS LABS</div>
</div>
<div class="grid-item item col-xs-12 col-md-6">
<div class="grid-item-content labs">LABS LABS LABS</div>
</div>
<div class="grid-item item col-xs-12 col-md-6">
<div class="grid-item-content ciso">CISO CISO CISO</div>
</div><div class="grid-item item col-xs-12 col-md-6">
<div class="grid-item-content security-blog">BLOG BLOG BLOG</div>
</div>
</div>
</div>
</div>
CSS:
.grid-item-content {
max-height: 120px;
background: #0D8;
border: 2px solid #000;
overflow:hidden;
}
.container-fluid {
max-width:1200px;
}
jQuery:
jQuery(function ($) {
var $container = $('#isotope-blog'); //The ID for the list with all the blog posts
$container.isotope({ //Isotope options, 'item' matches the class in the PHP
itemSelector : '.item',
layoutMode : 'masonry'
});
//Add the class selected to the item that is clicked, and remove from the others
var $optionSets = $('#filters'),
$optionLinks = $optionSets.find('a');
$optionLinks.click(function(){
var $this = $(this);
// don't proceed if already selected
if ( $this.hasClass('selected') ) {
return false;
}
var $optionSet = $this.parents('#filters');
$optionSets.find('.selected').removeClass('selected');
$this.addClass('selected');
//When an item is clicked, sort the items.
var selector = $(this).attr('data-filter');
$container.isotope({ filter: selector });
return false;
});
});
This now works: http://codepen.io/anon/pen/oYXXPq
It is a two column Masonry and Bootstrap layout sortable by a filter class in the grid-item div element. The filter class can be multiple, different classes.
Problems were:
My HTML markup was too complex and wrong; it needs to be in the format:
<div class="container">
<div class="isotope-list">
<div class="row">
<div class="grid-item blog">OneOneOneOne Blog Blog Blog</div>
<div class="grid-item blog">TwoTwoToTwoTwoTwo Blog Blog Blog </div>
and on and on...
</div>
</div>
There were small changes needed to the CSS.
And my Javascript needed to make and clear updates to the selected categories:
var selectedCategory;
var $grid = $('.isotope-list').isotope({
itemSelector: '.grid-item',
masonry: {
columnWidth: 160,
gutter: 20
},
getSortData: {
selectedCategory: function( itemElem ) {
return $( itemElem ).hasClass( selectedCategory ) ? 0 : 1;
}
}
});
var $items = $('.row').find('.grid-item');
$('.sort-button-group').on( 'click', '.button', function() {
// set selectedCategory
selectedCategory = $( this ).attr('data-category');
if ( selectedCategory == 'all' ) {
$grid.isotope({
sortBy: 'original-order'
});
}
// update sort data now that selectedCategory has changed
$grid.isotope('updateSortData');
$grid.isotope({ sortBy: 'selectedCategory' });
});
// change is-checked class on buttons
$('.button-group').each( function( i, buttonGroup ) {
var $buttonGroup = $( buttonGroup );
$buttonGroup.on( 'click', 'button', function() {
$buttonGroup.find('.is-checked').removeClass('is-checked');
$( this ).addClass('is-checked');
});
});
First thing first I'm new to vue.js.
what I'm trying to do when the user click on the expander anchor tag in the item-preview component the item-details will display and the item-preview will be hide. Now the problem occurs when the item-preview displayed and i'm trying to toggle it by clicking its own expander anchor tag. I do not whats wrong with this.
Here is my HTML templates.
<script type="text/x-template" id="grid">
<div class="model item" v-for="entry in data">
<item-preview v-bind:entry="entry" v-if="entry.hide == 0">
</item-preview>
<item-details v-bind:entry="entry" v-if="entry.hide == 1">
</item-details>
</div>
</script>
<script type="text/x-template" id="item-preview">
<header class="preview">
<a class="expander" tabindex="-1" v-on:click="toggle(entry)"></a>
<span class="name rds_markup">
{{ entry.name }}
</span>
</header>
</script>
<script type="text/x-template" id="item-details">
<div class="edit details">
<section class="edit" tabindex="-1">
<form action="#">
<fieldset class="item name">
<a class="expander" v-on:click="toggle(entry)"></a>
{{ entry.name }}
</fieldset>
</form>
</section>
</div>
</script>
And here how I called the grid component on my view.
<grid
:data="packages">
</grid>
And for my Vue implementation
var itemPreview = Vue.component('item-preview',{
'template':"#item-preview",
'props':{
entry:Object
},
methods:{
toggle:function(entry){
entry.hide = !!entry.hide;
return true;
}
}
});
var itemDetails = Vue.component('item-details',{
'template':"#item-details",
'props':{
entry:Object
},
methods:{
toggle:function(entry){
entry.hide = !!entry.hide;
return true;
}
}
});
var grid = Vue.component('grid',{
'template':"#grid",
'props':{
data:Array,
},
components:{
'item-preview': itemPreview,
'item-details': itemDetails
},
methods:{
toggle:function(entry){
entry.hide = !!entry.hide;
return true;
}
}
});
var vm = new Vue({
el:'#app',
data:{
message:'Hello',
packages:{}
},
ready:function(){
this.fetchPackages();
},
methods:{
fetchPackages:function(){
this.$http.get(url1,function( response ){
this.$set('packages',response);
});
},
}
});
Silly me. It took me 30minutes to figure out what is wrong with this code.
What I did to fix this is instead of entry.hide = !!entry.hide; I use entry.hide = true in item-preview component and in the item-details entry.hide = false. this fix my issue.
I am using ui bootstrap in my Angularjs application.
I want to customize the modals header by changing the backgroud color.
But if I zoom on the header of a modal, I see that the header where I can apply the color changes is not round as it should be.
So the result is not nice in the end.
How can I change the header background color in a "nice" way?
Thank you.
[UPDATE]
onEnter: ['$stateParams', '$state', '$uibModal', function($stateParams, $state, $uibModal) {
$uibModal.open({
templateUrl: 'app/entities/consultant/consultant-dialog.html',
controller: 'ConsultantDialogController',
controllerAs: 'vm',
backdrop: 'static',
windowClass: 'consultant-dialog-modal-window',
HTML CODE OF MODAL :
<form name="editForm" class="form-horizontal" role="form" novalidate ng-submit="vm.save()" show-validation>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"
ng-click="vm.clear()">×</button>
<h4 class="modal-title" id="myConsultantLabel">modal header</h4>
</div>
<div class="modal-body">
Just set the CSS overflow property on modal-content to hidden:
.modal-content {
overflow: hidden;
}
See snippet for details.
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope, $uibModal, $log) {
$scope.items = ['item1', 'item2', 'item3'];
$scope.animationsEnabled = true;
$scope.open = function (size) {
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
$scope.toggleAnimation = function () {
$scope.animationsEnabled = !$scope.animationsEnabled;
};
});
// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $uibModal service used above.
angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, items) {
$scope.items = items;
$scope.selected = {
item: $scope.items[0]
};
$scope.ok = function () {
$uibModalInstance.close($scope.selected.item);
};
$scope.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
});
.modal-content {
overflow: hidden;
}
.modal-header {
background: lightblue;
}
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.1.0.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="ModalDemoCtrl">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
<ul>
<li ng-repeat="item in items">
{{ item }}
</li>
</ul>
Selected: <b>{{ selected.item }}</b>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
</div>
</script>
<button type="button" class="btn btn-default" ng-click="open()">Open me!</button>
<button type="button" class="btn btn-default" ng-click="open('lg')">Large modal</button>
<button type="button" class="btn btn-default" ng-click="open('sm')">Small modal</button>
<button type="button" class="btn btn-default" ng-click="toggleAnimation()">Toggle Animation ({{ animationsEnabled }})</button>
<div ng-show="selected">Selection from a modal: {{ selected }}</div>
</div>
</body>
</html>
If your build process lets you run less, then this is how I solved it:
// path to your bootstrap source
#import (reference) "../../../bower_components/bootstrap/less/mixins.less";
// remove the background color from the container
.modal-default .modal-content,
.modal-primary .modal-content,
.modal-success .modal-content,
.modal-info .modal-content,
.modal-warning .modal-content,
.modal-danger .modal-content {
background-color: transparent;
}
// apply the border radius to the top and bottom
.modal-default .modal-header,
.modal-primary .modal-header,
.modal-success .modal-header,
.modal-info .modal-header,
.modal-warning .modal-header,
.modal-danger .modal-header {
.border-top-radius(#border-radius-large);
}
.modal-default .modal-footer,
.modal-primary .modal-footer,
.modal-success .modal-footer,
.modal-info .modal-footer,
.modal-warning .modal-footer,
.modal-danger .modal-footer {
.border-bottom-radius(#border-radius-large);
}
.modal-default .modal-body,
.modal-primary .modal-body,
.modal-success .modal-body,
.modal-info .modal-body,
.modal-warning .modal-body,
.modal-danger .modal-body {
background-color: #modal-content-bg;
}
.modal-variant(#color; #background; #border) {
.modal-header {
color: #color;
background-color: #background;
border-color: #border;
}
.modal-footer {
color: #color;
background-color: #background;
border-color: #border;
}
}
// build modals based on button defaults
.modal-default {
.modal-variant(#btn-default-color; #btn-default-bg; #btn-default-border);
}
.modal-primary {
.modal-variant(#btn-primary-color; #btn-primary-bg; #btn-primary-border);
}
// Success appears as green
.modal-success {
.modal-variant(#btn-success-color; #btn-success-bg; #btn-success-border);
}
// Info appears as blue-green
.modal-info {
.modal-variant(#btn-info-color; #btn-info-bg; #btn-info-border);
}
// Warning appears as orange
.modal-warning {
.modal-variant(#btn-warning-color; #btn-warning-bg; #btn-warning-border);
}
// Danger and error appear as red
.modal-danger {
.modal-variant(#btn-danger-color; #btn-danger-bg; #btn-danger-border);
}
(I believe I'm also #importing the base bootstrap.less file)
Then, you can use the usual $uibModal.open(...), or add a property such as windowClass: 'modal-danger'. This adds the class to the underlying container and cascades the change without altering how "normal" modals are styled.
This will color both the modal-header and modal-footer with the standard bootstrap button colors. You can drop the footer declaration in the variant method (and copy the modal-body block) if you'd like to have the footer remain white.
How to highlight the current page number in MVC WebGrid
This is my webgrid control
#{
var grid = new WebGrid(canPage: true, rowsPerPage: #Model.PageSize, canSort: true, ajaxUpdateCallback: "getStars", ajaxUpdateContainerId: "suppListGrid");
grid.Bind(#Model.SearchResultSupplierViewModels, rowCount: #Model.TotalPageRows, autoSortAndPage: false);
grid.Pager(WebGridPagerModes.All);
#grid.GetHtml(tableStyle: "webGrid",
footerStyle:"pp-pagenumber",
htmlAttributes: new {id="suppListGrid"},
columns: grid.Columns(
grid.Column(format: (item) => #Html.Raw("<div class='row panelLawfirmresultbox'><div class='col-md-2 panelsupplierlogo'><img src='../Content/images/profile-logo.png' class='img-responsive' /></div><div class='col-md-7'><h4><a href='#'>"+item.SupplierName+"</a><sup class='pps-type'>Premium</sup></h4> <div class='panelPracticeAreaDetails'><div class='content'> <span class='blue'>Services Offered: </span><a style='text-decoration: none;color: #000;' href='#' title='"+item.KeyPracticeAreaName+"'>"+item.KeyPracticeAreaNames+"</a></div></div><div class='panelLocationDetails'><div class='content'> <span class='blue'>Location(s): </span><a style='text-decoration: none;color: #000;' href='#' title='"+item.SupplierLocation+"'>"+item.SupplierLocations+"</a> </div><div class='more'>…</div></div><span class='blue'>Client Rating ("+item.ClientRating+"): </span><span class='clientStars'>"+item.ClientRating+"</span><br /><span class='blue'>Panel Partnership Rating ("+item.PanelRating+"): </span><span class='panelStars'>"+item.PanelRating+"</span></div> <div class='col-md-3'> <a href='lawfirm-profile.html' class='ppbutton-reachout'>Reach Out</a> <a href='#addtopanel' class='ppbutton-addpanel inline2'>Add to Panel</a> <a href='#' class='ppbutton-addwatch'>Add to Watchlist</a> </div></div>"))
))
}
using footerStyle:"pp-pagenumber" i was able to set styles for not selected page numbers, but how to set style for the currently selected page?
Finally i came in to this solution. I think this is the only easy fix to the problem.
<style>
span.clientStars span {
background-position: 0 0;
}
</style>
$(document).ready(function () {
//Area for providing page number style
$('tr.pp-pagenumber td').contents().filter(function () {
return this.nodeType === 3;
}).wrap('<a class="currentPage" style="color: #fff;background: #438a16;"></a>');
$(".currentPage").each(function () {
if ($(this).html().trim() == "")
$(this).remove();
});
//END
});
I am using the Google Maps for Rails gem by appneadiving and would like to add listeners to already existing markers. I wanted to know how to fetch all the markers, I tried looking through the source code but could not figure it out yet.
I'm using version 2.1.2 with Rails 3.2.14. Although my original question was about grabbing all the markers it may not be necessary given what I need to do.
I probably should have went with a name other than session but in my app session refers to activity session. Each marker represents an activity taking place at that location and I just want information about that activity to be displayed if you hover over the marker. I also want a button to join the activity below the info so it would be a form. I already have a form for creating an activity/marker at any location that is clicked but don't know how I would add callbacks to events on the marker. It's a single page app and this the code for root.html.erb, the root page.
<script src="//maps.google.com/maps/api/js?v=3.13&sensor=false&libraries=geometry" type="text/javascript"></script>
<script src='//google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.14/src/markerclusterer_packed.js' type='text/javascript'></script>
<script src='//google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.5/src/infobox.js'></script>
<script type="application/json" id="bootstrapped_sessions_json">
{ "sessions": <%= Session.all.to_json.html_safe %> }
</script>
<div class="container" style='padding-top: 60px'>
<div class="row">
<div class="span8">
<div style='width: 800px;'>
<div id="map" style='width: 800px; height: 400px;'></div>
</div>
</div>
<div class="span4">
<div style="padding-left:10px;">
Closest users/sessions
</div>
</div>
</div>
</div>
<script type='text/template' id='create_session_template'>
<form action='<%= api_sessions_url %>' method='POST'>
<label for='activity_name'>Activity</label>
<input type='text' name='session[activity]' id='activity_name'>
<label for='end_time'>End Time</label>
<input type='time' name='session[end_time]'>
<input type='hidden' name='session[latitude]' value='<%%= lat %>'>
<input type='hidden' name='session[longitude]' value='<%%= lng %>'>
<input type='hidden' name='session[size]' value='1'>
<input type='hidden' name='authenticity_token' value='<%= form_authenticity_token %>'>
<input type='submit' value='Broadcast Interest'>
</form>
</script>
<script type="text/javascript">
var initialize = function() {
var data = JSON.parse($("#bootstrapped_sessions_json").html())
var markerCoordinates = data['sessions'].map(function (coord) {
return {lat: coord["latitude"], lng: coord["longitude"]}
});
var handler = Gmaps.build('Google');
handler.buildMap({ provider: { minZoom: 1 }, internal: {id: 'map'}}, function() {
var markers = handler.addMarkers(markerCoordinates);
handler.bounds.extendWith(markers);
handler.fitMapToBounds();
handler.map.centerOn({ lat: 40.7356, lng: -73.9906 })
google.maps.event.addListener(handler.getMap(), 'click', function (e) {
console.log(e.latLng)
var lat = e.latLng.ob
var lng = e.latLng.pb
renderSessionForm({'lat': lat, 'lng': lng, 'map': handler.getMap()});
});
});
};
var renderSessionForm = function (options) {
var lat = options['lat'];
var lng = options['lng'];
var map = options['map'];
var boxText = document.createElement("div");
boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: black; padding: 5px;";
var myOptions = {
content: boxText
,disableAutoPan: false
,maxWidth: 0
,pixelOffset: new google.maps.Size(-140, 0)
,zIndex: null
,boxStyle: {
background: "url('tipbox.gif') no-repeat"
,opacity: 1
,width: "280px"
}
,closeBoxMargin: "10px 2px 2px 2px"
,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
,infoBoxClearance: new google.maps.Size(1, 1)
,isHidden: false
,pane: "floatPane"
,enableEventPropagation: false
};
var ib = new InfoBox(myOptions);
var templateCode = $('#create_session_template').html();
var templateFn = _.template(templateCode);
boxText.innerHTML = templateFn({'lat': lat, 'lng': lng})
ib.open(map);
}
window.onload = initialize();
</script>