Задать вопрос

pontiac358

Лайки

  • Можно ли сделать исключение у css анимации?

    nalomenko
    @nalomenko
    Руководитель отдела разработок в студии «Lava»
    Не знаю, насколько решение окажется кросс-браузерным, но можно через запятую указать переход в состояние конкретного свойства за практически нулевое время:

    transition: 0.3s ease all 0s, margin-top 1ms;
    Ответ написан
    Комментировать
    Комментировать

  • Как сделать активным option у отфильтрованного select?

    miraage
    @miraage
    Старый прогер
    На коленке набросал.
    Что-то вроде такого (DEMO).

    angular.module('toster', [])

.controller('DemoCtrl', function() {
    var vm = this;
    
    vm.type = 'fruits';
    vm.types = ['fruits', 'vegetables'];
    
    vm.fruits = ['apple', 'orange', 'banana'];
    vm.vegetables = ['potato', 'tomato', 'cucumber'];
});


    <body ng-controller="DemoCtrl as demo">
    <div>
        <select ng-model="demo.type" ng-options="type as type for type in demo.types">
            
        </select>
        <p>
            Selected: <span ng-bind="demo.type"></span>
        </p>
    </div>
    <div>
        <select ng-model="demo.value" ng-options="item as item for item in demo[demo.type]">
            
        </select>
        <p>
            Selected: <span ng-bind="demo.value"></span>
        </p>
    </div>
  </body>
    Ответ написан
    Комментировать
    Комментировать

  • Как с помощью css свойства scale, увеличивать относительно верхнего левого угла?

    IonDen
    @IonDen
    JavaScript developer. IonDen.com
    В этом вам поможет CSS Transform Origin
    Ответ написан
    Комментировать
    Комментировать

  • Почему не срабатывает функция в ng-change?

    zoonman
    @zoonman
    ⋆⋆⋆⋆⋆
    Потому что вы передаете константу. Используйте модель для того, чтобы автоматически назначить watcher.
    Ответ написан
    Комментировать
    Комментировать

  • Как мне присваивать определенный класс в зависимости от страницы?

    mudrick
    @mudrick
    Máximo progreso hemos alcanzado en minimo seso.
    В первом комментарии всё верно и лаконично сказали — через $rootScope — я же просто разжую.

    Модуль ngRoute это просто обычный конфиг — вы в этот конфиг можете пихать всё, что вам угодно. Задайте каждой страничке уникальную айдишку или название категории странички:

    app.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/main', {
        id: 'main',
        title: 'Главная',
        category: 'rootPage',
        templateUrl: 'mainPage.html',
        controller: 'MainPage',
      }).
      when('/powerSky', {
        id: 'powersky',
        title: 'Всем повер-скай, посоны',
        category: 'contentPage',
        templateUrl: 'template/powerSky.html',
        controller: 'PowerSky'
      }).      
      otherwise({
        redirectTo: '/main'
      });
  }]);


    Теперь, при каждой смене странички, в основном контроллере (это который общий для всех страниц сайта) пихайте в $rootScope конфиг текущей странички (текущего роута) в параметр page:

    app.controller('MainController', function($rootScope) {
  $rootScope.$on('$routeChangeSuccess', function(e, current, previous) {
    var page = current.$$route;

    // присваиваем глобально
    $rootScope.page = page;
  });
});


    Теперь в HTML-шаблоне вставляйте класс для BODY:

    <!DOCTYPE html>
<html ng-app="app">
    <head>
        <title>{{page.title}}</title>
    </head>
    <body ng-class="page.id" ng-controller="MainController">
        <main ng-view></main>
    </body>
</html>


    Или, если у вас странички разбиты на некие общие категории, то не айдишку вставляем, а название категории (тогда меньше всяких классов нужно будет писать в CSS):

    <!DOCTYPE html>
<html ng-app="app">
    <head>
        <title>{{page.title}}</title>
    </head>
    <body ng-class="page.category" ng-controller="MainController">
        <main ng-view></main>
    </body>
</html>


    Ну и в стилях будет:

    body {
    &.rootPage {
        background-color: #fff;
    }

    &.contentPage {
        background-color: #ddd;
    }
}
    Ответ написан
    Комментировать
    Комментировать

  • Почему на мобильном устройстве сайт не растягивается на всю высоту?

    bootd
    @bootd Куратор тега HTML
    Гугли и ты откроешь врата знаний!
    У вас в верстке ошибка как мне кажется.

    Не нужно давать html тегу скриптом высоту. Это делается написал в css тегу html, body height: 100%.

    До кучи еще скажу не нужно давать body width: 100%. Это блочный элемент. Он и так растянется на весь экран.

    Класс middle и лежащий в нем первый container имеют высоту 0. Это потому что вы выбили из потока абсолютным позиционированием(покой то черт) элемент .contentMainBox.
    Что вам мешает заверстать без позиционирования?

    Как всем должно быть известно, height: 100% растягивается на 100% от высоты родительского блока, а не экрана.

    У ваших aside блоков очень много лишних тегов. Сверстать все можно без позиционирования.

    К тому же добавлю, что float не будет работать при абсолютном позиционировании. Зачем его тогда писать? А зачем position: relative, когда вы пишите absolute?

    К тому же очень много вложенных дивов. Можно было просто обойтись одним тегом main для контента.

    Вот ваше решение, которое должно помочь и ничего лишнего.

    1) Удаляем wrapper и тегу body даем overflow: hidden

    2) Замените разметку тега main на эту.

    <div class="main-scroll">
<main class="content">Содержимое</main>
</div>


    3) Теги aside поставьте перед тегом main и замените их стили на эти

    .wrapper{
min-height: 100%;
height: 100%;
overflow: hidden;
position: relative;
box-shadow: 0 0 24px rgba(0,0,0,0.58);
background: #fff;
}

.left-sidebar {
float: left;
width: 90px;
height: 100%;
position: relative;
background: #B5E3FF;
background-image: -webkit-linear-gradient(top, #24323f, #75887e);
background-image: -o-linear-gradient(top, #24323f, #75887e);
background-image: -ms-linear-gradient(top, #24323f, #75887e);
background-image: linear-gradient(top, #24323f, #75887e);
background-image: -moz-linear-gradient(top, #24323f, #75887e);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#24323f, endColorstr=#75887e)";
}
.right-sidebar {
float: left;
width: 400px;
background: #fff;
height: 100%;
position: relative;
box-shadow: 0 0 21px rgba(92, 92, 92, 0.39);
}
.main-scroll { 
overflow-y: scroll;
height: 100%;
margin-left: 490px;
}
.content {width: 840px;}


    4) Код должен выглядеть так 

    <body>
<aside class="left-sidebar"></aside>
<aside class="right-sidebar"></aside>
<div class="main-scroll">
<main class="content">Содержимое</main>
</div>
</body>


    Вроде ничего не забыл
    Ответ написан
    5 комментариев
    5 комментариев