JS

JS { 7 }

Read 301 times Субота, 15 квітня 2017 10:18

Якщо необхідно створити мапу google з декількома маркерами то можна скористатися моїм скриптом:

<div id="map" style="width: 100%; height: 400px;"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCb1nF3LPA_ZOACIAdwgtrh0nrQd4NYybA&sensor=false"></script>


<script>
var locations = [
    ["Магазин: ул.Пушкінська 39", 46.475736,30.741813, "http://icons.iconarchive.com/icons/icons-land/vista-map-markers/72/Map-Marker-Marker-Outside-Pink-icon.png"],
    ["Магазин: ул.Толбухіна 135, ТЦ Мегадом, 5 ряд, 9 отдел", 46.428536,30.730687, "http://icons.iconarchive.com/icons/icons-land/vista-map-markers/72/Map-Marker-Marker-Outside-Pink-icon.png"],
];
var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    scrollwheel: false,
    center: new google.maps.LatLng(46.4558058,30.7464844),
    mapTypeId: google.maps.MapTypeId.ROADMAP
});
 
var infowindow = new google.maps.InfoWindow();
var marker, i;
 
for (i = 0; i < locations.length; i++) {
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map,
        icon: {
            url: locations[i][3],
            scaledSize: new google.maps.Size(34, 38)
        }
    });
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
            infowindow.setContent(locations[i][0]);
            infowindow.open(map, marker);
        }
    })(marker, i));
}
</script>

В основному потрібно буде замінити Longitude і Latitude 46.475736,30.741813 і визначити центр для мапи 46.4558058,30.7464844

Last modified on Неділя, 22 жовтня 2017 22:52
Read 544 times П'ятниця, 30 листопада 2001 02:02

Іноді при додаванні карти google на сайт, при прокручуванні сторінки і попадання курсора на карту - карта починає збільшуватися, а сторінка сайту перестає крутитися. Це відбувається тому що фокус курсора зависає над картою. Щоб цього уникнути можна використовувати хітрий трюк, який поверх карти розтягує прозорий блок а при кліці на ньому ця область забирається і можна працювати з мапою.

// наша мапа iframe та блок поверх неї
<div class="overlay" onClick="style.pointerEvents='none'"></div>

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d15283.833165817221!2d-118.49667288145102!3d34.01360875883708!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x1ffe328381544853!2sGoogle+Inc!5e0!3m2!1sen!2sua!4v1467199813192" width="600" height="450" seamless="seamless" style="border:0" allowfullscreen></iframe>

CSS

// оверлей, прозорий блок у CSS
.overlay {
	background:transparent; 
	position:relative; 
	width:100%;
	height:550px;
	top:650px;  // відрегулюйте ці значення під вашу верстку і висоту мапи
	margin-top:-650px;  // відрегулюйте ці значення під вашу верстку і висоту мапи
}

 jQuery

$(document).ready(function(){
	$('.overlay').click(function() {
		$(this).remove();
	});
});

Ось і весь нехитрий спосіб, чи вдалося вам вирішити проблему?

Last modified on Понеділок, 11 вересня 2017 20:56
Read 579 times Вівторок, 05 квітня 2016 21:47

Скрипт виводить кількість днів, хвилин, секунд від 2011 року (1192060800000)

$(function(){
    var calcNewYear = setInterval(function(){
        date_future = 1192060800000;
        date_now = new Date();

        seconds = Math.floor((date_now - (date_future))/1000);
        minutes = Math.floor(seconds/60);
        hours = Math.floor(minutes/60);
        days = Math.floor(hours/24);
        
        hours = hours-(days*24);
        minutes = minutes+(days*24*60)+(hours*60);
        seconds = seconds+(days*24*60*60)+(hours*60*60)+(minutes*60);

        $("#time").text("Time until 2007:\nDays: " + days + " Hours: " + hours + " Minutes: " + minutes + " Seconds: " + seconds);
    },1000);
});

І висновок відбувається в блок html

Last modified on Понеділок, 11 вересня 2017 20:56
Read 1210 times Вівторок, 20 жовтня 2015 18:17

Перше що потрібно зробити - встановити NPM і якщо він встановлений то сам Gulp

// Консоль: встановлюємо gulp глобально в системі
sudo npm install --global gulp

// Створюємо файл всередині нашого проекту з ім'ям package.json
{
  "name": "gulp-myprojectname",
  "version": "0.1.0",
  "devDependencies": {
  }
}

// Консоль: встановлюємо локально в директорію проекту
npm install --save-dev gulp

// Створюємо файл gulpfile.js у корені проекту з вмістом:
var rename = require('gulp-rename');
gulp.task('default', function () {
	// тут будуть завдання для нашого gulp файлу
});

// Додаємо в gulpfile.js перше завдання (об'єднання всіх css файлів в один)
// Заходимо сюди http://gulpjs.com/plugins/ і знаходимо плагін gulp-concat-css
// Встановлюємо плагін. Консоль: npm install --save-dev gulp-concat-css
// і в задачу Default додаємо
gulp.task('default', function () {
    // concatCSS - ім'я файлу для збереження
    // dest - папка в яку буде збережений файл
  return gulp.src('assets/**/*.css')
    .pipe(concatCss("styles/bundle.css"))
    .pipe(gulp.dest('out/'));
});

за аналогією і інші плагіни, я їх просто перерахую

https://www.npmjs.com/package/gulp-concat-css/
npm install --save-dev gulp-concat-css

https://www.npmjs.com/package/gulp-minify-css/
npm install --save-dev gulp-minify-css

npm install --save-dev gulp-rename

Last modified on Неділя, 22 жовтня 2017 22:56
Read 526 times Четвер, 23 квітня 2015 15:54

З книги про javascript :)

Screen Shot 2015 04 23 at 7.53.21 PM 9ca9d

Last modified on Субота, 08 липня 2017 20:27
Read 2559 times Середа, 08 квітня 2015 06:41

Щоб перевірити який браузер використовується, можна використовувати невеликий javascript

var isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
    // Opera 8.0+ (UA detection to detect Blink/v8-powered Opera)
var isFirefox = typeof InstallTrigger !== 'undefined';   // Firefox 1.0+
var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;
    // At least Safari 3+: "[object HTMLElementConstructor]"
var isChrome = !!window.chrome && !isOpera;              // Chrome 1+
var isIE = /*@cc_on!@*/false || !!document.documentMode;   // At least IE6

var output = 'Detecting browsers by ducktyping:<hr>';
output += 'isFirefox: ' + isFirefox + '<br>';
output += 'isChrome: ' + isChrome + '<br>';
output += 'isSafari: ' + isSafari + '<br>';
output += 'isOpera: ' + isOpera + '<br>';
output += 'isIE: ' + isIE + '<br>';
document.body.innerHTML = output;
Last modified on Неділя, 22 жовтня 2017 22:53
Read 870 times Середа, 05 липня 2017 20:21

Зробимо контейнер, який заліпає до верху сторінки, за прикладом бутстраповского nav:

<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-main"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
      <a class="navbar-brand" href="#"></a> </div>
    <div class="collapse navbar-collapse" id="navbar-collapse-main">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="javascript:void(0);">Home</a></li>
        <li><a href="javascript:void(0);"><a href="http://www.jqueryscript.net/menu/">Menu</a> Item #2</a></li>
        <li><a href="javascript:void(0);">Menu Item #3</a></li>
        <li><a href="javascript:void(0);">Menu Item #4</a></li>
        <li><a href="javascript:void(0);">Menu Item #5</a></li>
      </ul>
    </div>
  </div>
</nav>
Last modified on Неділя, 22 жовтня 2017 22:54