Ответы пользователя Евгений

Как реализован этот эффект?

Евгений @n1ger

html+css

открываете его сорцы и смотрите.

var all_transform = {
    '.transform_col_5': 0,
    '.transform_col_4': 0,
    '.transform_col_3': 0,
    '.transform_col_2': 0,
    '.transform_col_1': 0
};
var timer_search = false;
var count_column = 5;
var transform = true;
function col_margin(width) {
        //class_name = col-mar-5-20
        var cont = $('#in_cont');
        var body = $('body');
        cont.removeClass("col-mar-5-20");
        cont.removeClass("col-mar-5-10");
        cont.removeClass("col-mar-3-20");
        body.removeClass("cm5-20");
        body.removeClass("cm5-10");
        body.removeClass("cm3-20");
        if (width >= 1300) {
            cont.addClass('col-mar-5-20')
            body.addClass('cm5-20')
        } else if (width < 1300 && width >= 1000) {
            cont.addClass('col-mar-5-10')
            body.addClass('cm5-10')
        } else if (width < 1000 && width >= 800) {
            body.addClass('cm3-20')
            cont.addClass('col-mar-3-20')
        } else if (width < 800) {
            cont.addClass('col-mar-5-10')
            body.addClass('cm5-10')
        }
    }
    function col_count(width) {
        var cont = $('#cont');
        back_move_pic_text(all_transform);
        if (navigator.userAgent.match(/iPhone/i)) {
            if (getOrientation() == 'portrait') {
                set_column(1);
                binner_set_class_transform(false);
            } else {
                set_column(2);
                binner_set_class_transform(true);
            }
            return false;
        }
        if (width >= 1260) {
            set_column(5);
            binner_set_class_transform(true);
        } else if (width < 1260 && width >= 1015) {
            set_column(4);
            binner_set_class_transform(true);
        } else if (width < 1015 && width >= 750) {
            set_column(3);
            binner_set_class_transform(true);
        } else if (width < 750 && width >= 500) {
            set_column(2);
            binner_set_class_transform(true);
        } else if (width < 500) {
            set_column(1);
            binner_set_class_transform(false);
        }
        if (count_column >= 4 && show_time_line == false) {
            time_line_show();
            show_time_line = true;
        }
        if (count_column < 4 && show_time_line == true) {
            time_line_hide();
            show_time_line = false;
        }
    }
    function set_column(_cc) {
        var cont = $('#cont');
        var body = $('body');
        count_column = _cc;
        for (var i = 0; i <= 5; i++) {
            cont.removeClass("col-count-" + i);
            body.removeClass("cc-" + i);
        }
        cont.addClass('col-count-' + _cc);
        body.addClass('cc-' + _cc);
        move_pic_text('.transform_col_' + _cc);
    }
    function binner_set_class_transform(tr) {
        if (tr) {
            $('#in_cont').removeClass('notransform');
            $('#in_cont').addClass('transform');
        } else {
            $('#in_cont').removeClass('transform');
            $('#in_cont').addClass('notransform');
        }
    }
    function move_pic_text(block_name) {
        var title = '';
        $.each($(block_name), function () {
            title = $(this).find('.title').remove();
            $(this).prepend(title);
            all_transform[block_name] = 1;
        })
    }
    function back_move_pic_text(all_block_name) {
        for (block_name in all_block_name) {
            if (all_block_name[block_name]) {
                var title = '';
                $.each($(block_name), function () {
                    title = $(this).find('.title').remove();
                    $(this).find('.pic').after(title)
                    all_transform[block_name] = 0;
                })
            }
        }
    }
    patt = /adebug/g;
    if (patt.test(document.cookie)) {
        var la = 1
        $.each($('.layout-1, .layout-2, .layout-3'), function () {
            var b = 1;
            $.each($(this).children(), function () {
                $(this).append('<div class="name_block">' + la + '-' + b + '</div>');
                b++;
            })
            la++;
        })
    }

Ну и в HTML и CSS смотрите на стили блоков, которые участвуют и которые меняются в этом деле.
infox.sg/static/css.css?v109

Ответ написан более трёх лет назад

1 комментарий

Ajax Autocomplete Город Район Область Улица элегантный споcоб связки?

Евгений @n1ger

html+css

Может это вам поможет. Если я правильно понял, что вы хотите
дадата

Ответ написан более трёх лет назад

2 комментария

Как сделать слайдер с контентом+изображение?

Евгений @n1ger

html+css

На сайте, который вы указали используется слайдер jCarousel

<script type="text/javascript" src="/js/jquery.jcarousel.min.js"></script>

- вот поэтому понятно.
Можете и вы использовать его же - вот здесь

Ответ написан более трёх лет назад

Комментировать

Как вывести статистику посещений/просмотров из Яндекс.Метрики в виде графика?

Евгений @n1ger

html+css

Сам не силен в этом всем, но делал на сайт вывод из метрики.
Сначала сделал файл metrika.php в него вогнал такой код

<?php
$today=date("Ymd");
$metrika_url = "http://api-metrika.yandex.ru/stat/traffic/summary.json?id=айди_вашего_счетчика&pretty=1&date1=Дата_начала_выборки_данных_со_счетчика&date2=$today&oauth_token=ваш токен";
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $metrika_url);
curl_setopt ($ch, CURLOPT_RETURNTRANSFER, 1);
$metrika = curl_exec ($ch);
curl_close ($ch);

$metrika_o = json_decode($metrika);


header('Content-Type: application/json');
echo 'jsonCallback2('. $metrika . ')';

После создаем страничку куда будет выводить эти данные.

в яваскрипт пишем такое

<script type="text/javascript">
    var link2PHP = "путь_к_файлу/metrika.php";
    var datas2 = [];
    $.ajax ({
        type: "GET",
        url:link2PHP,
        dataType: "jsonp",
        async: false,
        contentType: "application/json",
        jsonp: "callback",
        jsonpCallback: 'jsonCallback2',
        contentType: "application/json",
        success: function(json) {
            $.each(json.data.reverse(), function (index,value){

                var obj2 = {


                    'date2': value.date,
                    'visits2': value.visits,
                    'visitors2': value.visitors

                };

                datas2.push(obj2);
                console.log(obj2)

            });
        },
        error: function (xhr, ajaxOptions, thrownError) {
            console.log(xhr.status);
            console.log(thrownError);
        }
    });

И после сами настройки для графика

var chart = AmCharts.makeChart("chartdiv", {
        "pathToImages": "путь к картинкам графика",
        "type": "serial",
        "theme": "light",
        language: "ru",
        "titles": [{
            "text": "Я.Метрика (Статистика посещений и посетителей)",
            "size": 15
        }],
        "legend": {
            "equalWidths": true,
            "useGraphSettings": true,
            "valueAlign": "right",
            "valueWidth": 120

        },
        "dataProvider":datas2,

        "valueAxes": [ {
            "id": "visitsAxis",
            "axisAlpha": 0,
            "gridAlpha": 0,
            "labelsEnabled": false,
            "position": "left"
        }, {
            "id": "visitorsAxis",
            "axisAlpha": 0,
            "gridAlpha": 0,
            "inside": false,
            "position": "right",
            "title": "Количество"
        }],
        "graphs": [  {
            "bullet": "round",
            "bulletBorderAlpha": 1,
            "balloonText": "Посетителей:[[value]]",

            "legendPeriodValueText": "Всего: [[value.sum]]",
            "legendValueText": "[[value]]",
            "title": "Посетителей",
            "fillAlphas": 0.6,
            "valueField": "visitors2",
            "valueAxis": "visitorsAxis"
        },
            {
            "balloonText": "Посещений:[[value]]",
            "bullet": "round",
            "bulletBorderAlpha": 1,
            "useLineColorForBulletBorder": true,
            "bulletColor": "#FFFFFF",
            "bulletSizeField": "townSize",
            "dashLengthField": "dashLength",

            "labelPosition": "right",
            "legendPeriodValueText": "Всего: [[value.sum]]",
            "legendValueText": "[[value]]",
            "title": "Посещений",
            "fillAlphas": 0,
            "valueField": "visits2",
            "valueAxis": "visitorsAxis"
        }],
        "chartScrollbar": {gridCount: 7,

            scrollbarHeight: 25,
            graphType: "line",
            usePeriod: "WW",
            backgroundColor: "#333",
            graphFillColor: "#666",
            graphFillAlpha: 0.5,
            gridColor: "#555",
            gridAlpha: 1,
            selectedBackgroundColor: "#444",
            selectedGraphFillAlpha: 1
        },
        "chartCursor": {
            "categoryBalloonDateFormat": "DD MMM",
            "cursorAlpha": 0.1,
            "cursorColor":"#000000",
            "fullWidth":true,
            "valueBalloonsEnabled": true,
            "zoomable": true
        },
        "dataDateFormat": "YYYYMMDD",
        "categoryField": "date2",
        "categoryAxis": {
            "dateFormats": [{
                "period": "DD",
                "format": "DD"
            }, {
                "period": "WW",
                "format": "MMM DD"
            }, {
                "period": "MM",
                "format": "MMM"
            }, {
                "period": "YYYY",
                "format": "YYYY"
            }],
            "parseDates": true,
            "minorGridEnabled": true,
            "gridCount":50,
            "autoGridCount": false,
            "axisColor": "#000",
            "gridAlpha": 0.2,
            "gridColor": "#000"

        },



        amExport: {
            top: -4,
            right: -6
        }


    });

Можно конечно всё расписать и объяснить - но я думаю сможете разобраться, что куда и к чему.

Ну и в теле самого файла создаем <div id=""chartdiv></div>
Куда собственно график будет выгружаться.

Ответ написан более трёх лет назад

2 комментария