I have been trying for days to add an event listener for an infoWindow to markers that are created on Ajax success.
The mouseover event is never fired, so there must be something I'm doing wrong in adding the listener.
The listener that does NOT work is for the marker restMarker. The dragend listener for addressMarker in the initialize() function works fine.
I have tried adding the listener in multiple ways: google.maps.event.addListener(markerObject,'mouseover',function(){}) and markerObject.addListener('mouseover',function(){}).
I have tried giving the restMarker global scope.
I have read the following:
Dynamically Adding Listeners To Google Maps Markers
create event listener to dynamically created google-map marker
...and more.
I have infoWindows working fine with dynamically created markers in other projects. The only difference I'm aware of in the working projects is that the markers are created in the map initialize() function instead of in an ajax success function.
Am I doing anything obviously wrong?
<script type='text/javascript'>
var zoneMap;
var currentRestMarkers = [];
var markerInfoWindow;
var distances = [{"fee":2,"distance":5,"available":1},{"fee":3,"distance":7,"available":1},{"available":1,"distance":9,"fee":7},{"fee":9,"available":0,"distance":10}];
var ajaxResponse = {"success":[{"duration":"11.5","name":"Backyard Bistro","lng":-78.7253,"lat":35.7989,"distance":6.64,"restId":"179"},{"lat":35.7796,"lng":-78.6758,"restId":"180","distance":7.5,"name":"Baja Burrito","duration":"13.3"},{"name":"Mi Rancho","duration":"15.6","lng":-78.6482,"lat":35.7491,"restId":"183","distance":6.32},{"lat":35.7757,"lng":-78.6363,"distance":4.67,"restId":"188","name":"El Rodeo Downtown","duration":"13.7"},{"duration":"9.2","name":"El Rodeo North","lng":-78.6262,"lat":35.8137,"distance":3.35,"restId":"189"},{"name":"Fallon's Flowers","duration":"9.1","restId":"192","distance":2.92,"lat":35.789,"lng":-78.6507},{"lng":-78.6397,"lat":35.7742,"restId":"193","distance":4.62,"name":"Fire Wok","duration":"14.1"},{"lng":-78.6131,"lat":35.8051,"restId":"194","distance":6.21,"name":"Gateway","duration":"9.8"},{"restId":"195","distance":27.99,"lng":-79.0564,"lat":35.9152,"name":"Gift Cards ","duration":"35.6"},{"name":"Jumbo China","duration":"8.5","lng":-78.6262,"lat":35.819,"distance":2.87,"restId":"197"},{"lng":-78.6456,"lat":35.8817,"restId":"198","distance":4.93,"name":"La Rancherita","duration":"12.0"},{"duration":"8.9","name":"Mami Nora's","restId":"205","distance":3.35,"lat":35.8137,"lng":-78.6271},{"distance":2.94,"restId":"209","lat":35.7883,"lng":-78.6474,"duration":"8.0","name":"Mellow Mushroom"},{"distance":7.88,"restId":"212","lng":-78.7387,"lat":35.7878,"duration":"12.3","name":"Ole Time BBQ"},{"lng":-78.6388,"lat":35.8374,"restId":"214","distance":2.23,"duration":"7.0","name":"Piola"},{"name":"The Remedy Diner 2.0 - Brunch","duration":"11.9","lng":-78.656,"lat":35.7824,"distance":4.24,"restId":"216"},{"lng":-78.656,"lat":35.7824,"restId":"217","distance":4.24,"duration":"11.9","name":"The Remedy Diner 2.0"},{"distance":7.66,"restId":"218","lng":-78.6773,"lat":35.7777,"name":"Sammy's Tap & Grill","duration":"13.4"},{"lng":-78.621,"lat":35.8238,"distance":4.39,"restId":"219","duration":"8.4","name":"Shaba Shabu"},{"name":"Spring Rolls","duration":"5.9","distance":1.88,"restId":"220","lng":-78.6409,"lat":35.8399},{"duration":"9.6","name":"Thaiphoon","restId":"222","distance":3.2,"lat":35.7845,"lng":-78.6477},{"lat":35.7776,"lng":-78.6398,"restId":"223","distance":4.3,"duration":"11.6","name":"The Big Easy"},{"lng":-78.6433,"lat":35.8364,"restId":"225","distance":1.68,"duration":"5.5","name":"The Q Shack"},{"duration":"14.4","name":"Vic's Italian","lng":-78.6356,"lat":35.7759,"restId":"226","distance":4.72},{"restId":"227","distance":1.68,"lng":-78.6433,"lat":35.8364,"name":"Which Wich North Hills","duration":"5.5"},{"lat":35.7912,"lng":-78.6799,"restId":"245","distance":5.89,"duration":"10.5","name":"The Wild Cook's Indian Grill"},{"lng":-78.6237,"lat":35.873,"restId":"301","distance":4.68,"name":"Taj Mahal North","duration":"12.9"},{"restId":"820","distance":6.29,"lng":-78.6825,"lat":35.8986,"duration":"14.5","name":"El Dorado "},{"name":"Taza Grill","duration":"12.8","restId":"821","distance":4.84,"lat":35.8693,"lng":-78.6211},{"duration":"14.9","name":"Sassool","restId":"824","distance":6.83,"lat":35.9043,"lng":-78.6567},{"lng":-78.5797,"lat":35.8477,"distance":8.45,"restId":"830","name":"Alpaca Peruvian Charcoal Chicken","duration":"13.9"},{"distance":6.21,"restId":"831","lat":35.899,"lng":-78.653,"name":"Shish Kabob Six Forks","duration":"14.1"},{"distance":2.87,"restId":"923","lng":-78.6262,"lat":35.819,"name":"Tropical Picken Chicken","duration":"8.5"},{"duration":"10.3","name":"Wicked Taco","lat":35.7852,"lng":-78.6923,"restId":"931","distance":6.48},{"duration":"14.8","name":"Despina's Cafe","restId":"1142","distance":6.31,"lng":-78.6824,"lat":35.9015},{"duration":"4.7","name":"WhichWich Crabtree","lat":35.8391,"lng":-78.6752,"distance":1.7,"restId":"1242"},{"duration":"6.3","name":"Pharaoh's Grill at North Hills","distance":1.86,"restId":"1296","lng":-78.6434,"lat":35.8403},{"name":"Pharaoh's at the Museum","duration":"12.2","restId":"1297","distance":4.43,"lat":35.7818,"lng":-78.6386},{"restId":"1298","distance":2.54,"lng":-78.6298,"lat":35.8215,"name":"Gorilla Grill","duration":"6.5"},{"name":"My Way Tavern","duration":"9.8","lng":-78.6506,"lat":35.7872,"restId":"1307","distance":3.04}]};
function initialize() {
var myLatlng = new google.maps.LatLng(35.8013,-78.6409);
var geocoder = new google.maps.Geocoder();
var mapOptions = {
zoom: 13,
center: myLatlng,
panControl: false,
zoomControl: true,
mapTypeControl: false,
scaleControl: true,
streetViewControl: false,
overviewMapControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
zoneMap = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
var addressMarker = new google.maps.Marker({
position: zoneMap.center,
map: zoneMap,
clickable: true,
draggable: true,
flat: true,
icon: 'https://maps.google.com/mapfiles/ms/icons/blue-dot.png'
});
google.maps.event.addListener(addressMarker, 'dragend', function(event) {
var markerNewLatLng=event.latLng;
geocoder.geocode({'latLng': markerNewLatLng}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
showAvailableRests(markerNewLatLng.lat(),markerNewLatLng.lng());
}
else {
console.log('Geocoder failed due to: ' + status);
}
});
});
}
function loadScript() {
var acScript = document.createElement('script');
acScript.type = 'text/javascript';
acScript.src = 'https://maps.googleapis.com/maps/api/js?libraries=places&callback=initialize';
document.body.appendChild(acScript);
}
function showAvailableRests(whichLat,whichLng) {
var rest_list = jQuery('#rest_list');
jQuery(rest_list).empty();
jQuery('#restCount').html('');
if (currentRestMarkers.length > 0) {
for (var i in currentRestMarkers) {
currentRestMarkers[i].setMap(null);
}
currentRestMarkers = [];
}
var restCount = 0;
for (var i=0; i < ajaxResponse.success.length; i++ ) {
var iconColor = 'green.png';
var available = 1;
var tierClass = 'tier1';
for (var j=0; j < distances.length; j++ ) {
if (ajaxResponse.success[i].distance >= distances[j].distance) {
if (distances[j].available == 0) {
available = 0;
}
if (j === 0) {
iconColor = 'yellow.png';
tierClass = 'tier2';
}
else if (j === 1) {
iconColor = 'orange.png';
tierClass = 'tier3';
}
else if (j > 1) {
iconColor = 'purple.png';
tierClass = 'tier4';
}
}
else {
break; // if it is not greater than the shorter distance, it is not greater than longer ones either
}
}
if (available === 0) { // if this restaurant is not available at this distance
//continue; // skip the rest for unavailable
iconColor = 'red.png';
tierClass = 'unavailable';
}
else {
restCount++;
}
var restDiv = jQuery(document.createElement('div'));
var distanceTier = jQuery(document.createElement('span')).html(' ').addClass('distance-tier ' + tierClass).appendTo(restDiv);
var restDist = jQuery(document.createElement('span')).html(ajaxResponse.success[i].distance + ' mi.').addClass('rest-distance').appendTo(restDiv);
var restName = jQuery(document.createElement('span')).html(ajaxResponse.success[i].name).addClass('rest-name').appendTo(restDiv);
jQuery(restDiv).appendTo(rest_list);
var restMarkerPosition = new google.maps.LatLng(ajaxResponse.success[i].lat,ajaxResponse.success[i].lng);
var restMarker = new google.maps.Marker({
position: restMarkerPosition,
map: zoneMap,
clickable: false,
draggable: false,
flat: true,
icon: 'https://maps.google.com/mapfiles/ms/icons/' + iconColor
});
currentRestMarkers.push(restMarker);
google.maps.event.addListener(restMarker, 'mouseover', function(e) {
console.log('mouseover event fired'); // the mouseover event is never fired!!!
showRestWindow(e, ajaxResponse.success[i].name, ajaxResponse.success[i].distance);
});
/*restMarker.addListener('mouseover', function() {
new google.maps.InfoWindow({
content: "<div><strong>" + ajaxResponse.success[i].name + "<\/strong><br>" + ajaxResponse.success[i].distance + " miles<\/div>",
disableAutoPan: true,
});
markerInfoWindow.open(zoneMap, this);
});*/
jQuery('#restCount').html(restCount);
}
}
function showRestWindow(event, name, distance) {
markerInfoWindow = new google.maps.InfoWindow({
content: "<div><strong>" + name + "<\/strong><br>" + distance + " miles<\/div>",
disableAutoPan: true,
position: event.latLng,
});
markerInfoWindow.open(zoneMap);
};
jQuery(document).ready(function () {
loadScript();
return false;
});
</script>
<div id='map_container'>
<div id='map_canvas'></div>
</div>
<div id='column_right'>
<p><b>Available Restaurants: <span id='restCount'></span></b></p>
<div id='rest_list'></div>
</div>
I am fairly new to SlickGrid. I am trying to make SlickGrid filter work but no luck. I am following the example (http://mleibman.github.io/SlickGrid/examples/example4-model.html).
Below is my source code.
$(document).ready(function() {
var tName;
$('#submit').click(function(e) {
tName = $('#source option:selected').text();// name1
tName = tName.trim();
$.ajax({
url : 'someUrl',
type : 'GET',
cache : false,
success : function(d) {
var grid;
var searchString = "";
var data = [];
var columns = new Array();
var cols = d[0].columns;
var pkColNames = d[0].pkColNames;
for (var j=0; j< cols.length; j++) {
var key = {id: cols[j].colName, name: cols[j].colName, field: cols[j].colName, width: 200, sortable:true, editor: Slick.Editors.LongText};
columns[j] = key;
}
var options = {
editable: true,
enableAddRow: false,
enableCellNavigation: true,
asyncEditorLoading: false,
enableColumnReorder:true,
multiColumnSort: false,
autoEdit: false,
autoHeight: false
};
function myFilter(item, args) {
return true;// Let us return true all time ?
}
for (var i = 0; i < d.length; i++) {
var tempData = (data[i] = {});
var title = null;
var val = null;
for (var q = 0; q < d[i].columns.length; q++) {
title = d[i].columns[q].colName;
val = d[i].columns[q].colValue;
tempData[title] = val;
}
}
var dataView = new Slick.Data.DataView({ inlineFilters: true });
grid = new Slick.Grid("#myGrid", dataView, columns, options);
dataView.setPagingOptions({
pageSize: 25
});
var pager = new Slick.Controls.Pager(dataView, grid, $("#myPager"));
var columnpicker = new Slick.Controls.ColumnPicker(columns, grid, options);
grid.setSelectionModel(new Slick.CellSelectionModel());
grid.onAddNewRow.subscribe(function(e, args) {
// Adding a new record is not yet decided.
});
grid.onCellChange.subscribe(function (e) {
var editedCellNo = arguments[1].cell;
var editedColName = grid.getColumns()[editedCellNo].field;
var newUpdatedValue= arguments[1].item[grid.getColumns()[editedCellNo].field];
var editedColType = "";
for (var cnt = 0; cnt < cols.length; cnt++) {
if (editedColName == cols[cnt].colName) {
editedColType = cols[cnt].colType;
break;
}
}
var pkKeyValue="";
for (var v=0; v <pkColNames.length;v++) {
for (var p=0; p<grid.getColumns().length; p++) {
if (pkColNames[v] == grid.getColumns()[p].field) {
var value = arguments[1].item[grid.getColumns()[p].field];
pkKeyValue += "{"+pkColNames[v] + '~' +getColDbType(grid.getColumns()[p].field) + ":"+value+"},";
break;
}
}
}
function getColDbType(colName) {
for (var c = 0; c < cols.length; c++) {
if (colName == cols[c].colName) {
return cols[c].colType;
}
}
}
pkKeyValue = pkKeyValue.substring(0, pkKeyValue.length-1);
$.ajax({
url: 'anotherUrl',
type:'GET',
dataType:'text',
success: function(f) {
bootbox.alert("Data updated successfully");
},
error: function() {
bootbox.alert("Error - updating data. Please ensure you are adding the data in right format.");
grid.invalidateAllRows();
grid.render();
}
});
});
grid.onClick.subscribe(function (e) {
//do-nothing
});
dataView.onRowsChanged.subscribe(function(e, args) {
grid.updateRowCount();
grid.invalidateRows(args.rows);
grid.render();
});
grid.onSort.subscribe(function(e, args) {
// args.multiColumnSort indicates whether or not this is a multi-column sort.
// If it is, args.sortCols will have an array of {sortCol:..., sortAsc:...} objects.
// If not, the sort column and direction will be in args.sortCol & args.sortAsc.
// We'll use a simple comparer function here.
var comparer = function(a, b) {
return a[args.sortCol.field] > b[args.sortCol.field];
}
// Delegate the sorting to DataView.
// This will fire the change events and update the grid.
dataView.sort(comparer, args.sortAsc);
});
// wire up the search textbox to apply the filter to the model
$("#txtSearch").keyup(function (e) {
console.log('Called...txtSearch');
Slick.GlobalEditorLock.cancelCurrentEdit();
// clear on Esc
if (e.which == 27) {
this.value = "";
}
searchString = this.value;
updateFilter();
});
function updateFilter() {
console.log("updateFilter");
dataView.setFilterArgs({
searchString: searchString
});
dataView.refresh();
}
dataView.beginUpdate();
dataView.setItems(data, pkColNames);
dataView.setFilterArgs({
searchString: searchString
});
dataView.setFilter(myFilter);
dataView.endUpdate();
},
error : function() {
bootbox.alert("Invalid user");
}
});
});
});
Your function myFilter() is always returning true so of course it will never work. The example that you looked at, was to filter something specific. I would recommend that you look at the following example to have a generic filter. From the example, simply type the text you are looking on a chosen column and look at the result... see example below (from SlickGrid examples).Using fixed header row for quick filters
In case you want a more in depth conditional filters ( > 10, <> 10, etc...), please take a look at my previous answer on how to make this kind of filtering possible, see my previous answer below:SlickGrid column type
Hope that helps you out
<script type="text/javascript">
var map;
var mc; //marker clusterer
var mcOptions = { gridSize: 10, maxZoom: 8 };
var infowindow = new google.maps.InfoWindow(); //global infowindow
var geocoder = new google.maps.Geocoder(); //geocoder
var address = new Array("15.8700, 74.5000", "15.871463, 74.500777", "15.871505, 74.500884", "32.7714,-97.2915");`enter code here`
var content = new Array("Unit`enter code here`No1", "UnitNo42", "UnitNo43", "UnitNo44");
//min and max limits for multiplier, for random numbers //keep the range pretty small, so markers are kept close by
var min = .999999;
var max = 1.000001;
function createMarker(latlng, text) {
var marker = new google.maps.Marker({ position: latlng, map: map });
///get array of markers currently in cluster
var allMarkers = mc.getMarkers();
//check to see if any of the existing markers match the latlng of the new marker
if (allMarkers.length != 0) {
for (i = 0; i < allMarkers.length; i++) {
var existingMarker = allMarkers[i];
var pos = existingMarker.getPosition();
if (latlng.equals(pos)) {
text = text + " & " + content[i];
}
}
}
// WHERE TO ADD: mc.addMarker(marker); //??
google.maps.event.addListener(marker, 'click', function () {
infowindow.close();
infowindow.setContent(text);
infowindow.open(map, marker);
});
return marker;
}
function initialize() {
var options = {
zoom: 2,
center: new google.maps.LatLng(21.7679, 78.8718),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'), options);
var gmarkers = [];
for (i = 0; i < address.length; i++) {
var ptStr = address[i];
var coords = ptStr.split(",");
var latlng = new google.maps.LatLng(parseFloat(coords[0]), parseFloat(coords[1]))
gmarkers.push(createMarker(latlng, content[i]));
}
//marker cluster
mc = new MarkerClusterer(map, gmarkers, mcOptions);
for (i = 0; i < address.length; i++) {
geocodeAddress(address[i], i);
}
}
</script>
var mapOptions = {
center: new google.maps.LatLng(20, 77),
zoom: 3,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var map = new google.maps.Map(document.getElementById("map_Google"), mapOptions);
var allmarkers = new Array(); ;
var bounds = new google.maps.LatLngBounds();
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < markers.length; i++) {
if (allmarkers.length >= i + 1) {
}
else {
var image = { url: markers[i][3] };
marker = new google.maps.Marker({
position: new google.maps.LatLng(markers[i][1], markers[i][2]),
map: map,
icon: image,
animation: google.maps.Animation.DROP, cursor: "default"
});
marker.mycategory = "Halla";
allmarkers.push(marker);
bounds.extend(marker.getPosition());
google.maps.event.addListener(allmarkers[i], 'click', (function (allmarkers, i) {
return function () {
//map.setZoom(21);
//map.setCenter(marker.getPosition());
infowindow.setContent(markers[i][0]);
infowindow.open(map, allmarkers[i]);
}
})
(allmarkers, i));
}
map.fitBounds(bounds);
});
I have a problem with my script. I want to remove the load more button and instead do an infinite scroll when I get to bottom of the page.
I'm using a WordPress template and without support I'm stuck on this nonsense.
What should I change to do to this script?
jQuery(document).ready(function($){
var $container = $('#hentry-wrapper');
// Isotope
// modified Isotope methods for gutters in masonry
$.Isotope.prototype._getMasonryGutterColumns = function() {
var gutter = this.options.masonry && this.options.masonry.gutterWidth || 0;
containerWidth = this.element.width();
this.masonry.columnWidth = this.options.masonry && this.options.masonry.columnWidth ||
// or use the size of the first item
this.$filteredAtoms.outerWidth(true) ||
// if there's no items, use size of container
containerWidth;
this.masonry.columnWidth += gutter;
this.masonry.cols = Math.floor( ( containerWidth + gutter ) / this.masonry.columnWidth );
this.masonry.cols = Math.max( this.masonry.cols, 1 );
};
$.Isotope.prototype._masonryReset = function() {
// layout-specific props
this.masonry = {};
// FIXME shouldn't have to call this again
this._getMasonryGutterColumns();
var i = this.masonry.cols;
this.masonry.colYs = [];
while (i--) {
this.masonry.colYs.push( 0 );
}
};
$.Isotope.prototype._masonryResizeChanged = function() {
var prevSegments = this.masonry.cols;
// update cols/rows
this._getMasonryGutterColumns();
// return if updated cols/rows is not equal to previous
return ( this.masonry.cols !== prevSegments );
};
var loadMore = $('#load-more');
var posts_per_page = parseInt(loadMore.attr('data-perpage'));
var offset = posts_per_page;
var totalPosts = parseInt(loadMore.attr('data-total-posts'));
var author = parseInt(loadMore.attr('data-author'));
var category = parseInt(loadMore.attr('data-category'));
var tag = loadMore.attr('data-tag');
var datemonth = loadMore.attr('data-month');
var dateyear = loadMore.attr('data-year');
var search = loadMore.attr('data-search');
var loader = $('#posts-count').attr('data-loader');
if (!author) author = 0;
if (!category) category = 0;
if (!tag) tag = '';
if (!datemonth) datemonth = 0;
if (!dateyear) dateyear = 0;
if (!search) search = '';
// cache jQuery window
var $window = $(window);
// start up isotope with default settings
$(window).load(function(){
reLayout();
$window.smartresize( reLayout );
if (offset < totalPosts) {
$('#nav-pagination-load-more').fadeIn(200);
mega_initLoadMore();
}
});
function reLayout() {
var mediaQueryId = getComputedStyle( document.body, ':after' ).getPropertyValue('content');
// fix for firefox, remove double quotes "
//mediaQueryId = mediaQueryId.replace( /"/g, '' );
//console.log( mediaQueryId );
var windowSize = $window.width();
var masonryOpts;
// update sizing options
switch ( mediaQueryId ) {
case 'large' :
masonryOpts = {
gutterWidth: 0
};
break;
case 'big' :
masonryOpts = {
//columnWidth: 297,
gutterWidth: 0
};
break;
case 'medium' :
masonryOpts = {
//columnWidth: 269,
gutterWidth: 0
};
break;
case 'small' :
masonryOpts = {
//columnWidth: $container.width() / 4,
gutterWidth: 0
};
break;
case 'tiny' :
masonryOpts = {
//columnWidth: $container.width() / 1,
gutterWidth: 0
};
break;
}
$container.isotope({
resizable: false, // disable resizing by default, we'll trigger it manually
itemSelector : '.type-post',
transformsEnabled: false, // Firefox Vimeo issue
masonry: masonryOpts
}).isotope( 'reLayout' );
}
function mega_initLoadMore(){
loadMore.click(function(e) {
$(this).unbind("click").addClass('active');
$('#posts-count').html('<img src="'+ loader +'"/>');
e.preventDefault();
mega_loadMorePosts();
});
}
function mega_reLayout(){
$container.isotope( 'reLayout' );
}
function mega_loadMorePosts(){
jQuery.ajax({
url: megaAjax.ajaxurl,
type: 'POST',
data: {
action : 'mega_ajax_blog',
nonce : megaAjax.nonce,
category: category,
author: author,
tag: tag,
datemonth: datemonth,
dateyear: dateyear,
search: search,
offset: offset
},
success: function( data ) {
var $newElems = $(data);
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded( function(){
// FitVids
$('.fluid-video, .entry-content', $newElems).fitVids();
$container.append($newElems).isotope( 'appended', $newElems );
// Flex Slider
$('.flexslider', $newElems).flexslider({
animation: "fade",
slideshow: false,
keyboard: false,
directionNav: true,
touch: true,
prevText: "",
nextText: ""
});
setTimeout(function(){
mega_reLayout();
}, 1000);
offset = offset + posts_per_page;
loadMore.removeClass('active');
if (offset < totalPosts){
$('#posts-count').text('');
loadMore.bind("click", mega_initLoadMore());
}
else {
setTimeout(function(){
loadMore.parent().remove();
}, 1000 );
}
});
}
});
return false;
}
});
I think this script is taken from "HEAT WORDPRESS THEME" directly which is located in js folder of the theme. Its simple to modify,you just need to remove Ajax post loading function and keep Isotop initializing function only. For help see this link
http://www.shambix.com/en/isotope-twitter-bootstrap-infinite-scroll-fluid-responsive-layout/