Вёрстка | Разработчик сайтов и магазинов на битриксе . И не только.

Скрыть крестик в input в crome , ie

24.04.2017 Автор:alex
2 комментария

На полях ввода, которые типа «поиск» в HTML5 браузерах добавляются некоторые маленькие синие «X» в правом верхнем углу, что на самом деле является кнопкой. Эта кнопка очистит ввод поиска пользователя , если пользователь нажимает на «X», или если он нажимает клавишу ESC на клавиатуре. Это , конечно, полезная функция, но для некоторых стилизованных форм поиска она просто не подходит и может выглядеть весьма некрасиво. Всё еще ищите чтобы отключить крестик в хроме?

Вот как это выглядит.

Вот css Для скрытия крестика 1) в ie 2) хроме внутри инпут:
Подробнее
Устанавливаем рекапча (recapcha) для bitrix форм.

23.03.2017 Автор:alex
Комментариев нет

Предисловие. После выполнения данной инструкции recapcha заменит стандартную капчу битрикса.

Вот обучающее видео по веб формам — они есть везде, кроме стартовой редакции битрикса.
https://www.youtube.com/watch?v=R0SKyV2C6_w

Внимание! При создании веб формы — выставляем галочку использовать капчу.

Далее приведена ссылка на регистрацию капчи- от сюда нам нужен будет Ключ и Секретный ключ . их сохраняем себе куда нибудь.
https://www.google.com/recaptcha/
Подробнее
Вывести через fancybox или litebox видео youtube и превьюшку.

22.03.2017 Автор:alex
Комментариев нет

Как вывести видео через fancybox или litebox с превью youtube изображением ?

Через litebox никак.
Можно вынести через fancybox
вот ссылка http://fancyapps.com/fancybox/3/. Скачиваем , заходим в папку \dist , берем минимизированные Js и css файл. Дописываем в header нужной страницы. Этот код для bitrix.

Вот изначальный код из документации

XHTML

<a data-fancybox href="https://www.youtube.com/watch?v=_sI_Ps7JSEk"> YouTube video <img src="paths"> </a>

1
2
3
4

<a data-fancybox href="https://www.youtube.com/watch?v=_sI_Ps7JSEk">
YouTube video
<img src="paths">
</a>

Если нужно превью , то воспользуемся функцией php.
Подробнее

Считаем количество строк в тексте c помощью js и css

02.03.2017 Автор:alex

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

Для того что бы скрыть текст по количеству строк недостаточно css. Вернее достаточно, но мы не сможем подсчитать количество строк.
1. Надо сделать 2 вложенных блока. внутренний блок тянется и мы через js считаем его высоту. Высота обрамляющего блока фиксирована и сделан overflow для скрытия лишнего.

<div class="product_prod_text_out">
	<div class="product_prod_text_in">
	text высотой в 100 пикселов и (5 строк ) шрифт јриал 
	</div>
</div>

text высотой в 100 пикселов и (5 строк ) шрифт јриал

</div>

Js измеряет высоту внутреннего блока.
Подробнее

Yii2 проверка ссылки на удаление ( bootstrap+confirm)

08.02.2017 Автор:alex

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

Данный текст «подделывает» data-confirm и проверяет удаление, как в кнопке delete в GridView::widget .

$options = [
		'title' => Yii::t('yii', 'Удалить'),											
		//'target' => '_blank',
		'alt' => 'Link to Super Website',
		 'aria-label'=> 'Удалить' ,
		 'data-confirm'=> 'Вы уверены, что хотите удалить этот элемент?' ,
		 'data-method'=> 'post' ,
		 'data-pjax'=> '0',
	];

echo Html::a('<span class="glyphicon glyphicon-trash"></span>', $url, $options);

$options = [

'title' => Yii::t('yii', 'Удалить'),

//'target' => '_blank',

'alt' => 'Link to Super Website',

'aria-label'=> 'Удалить' ,

'data-confirm'=> 'Вы уверены, что хотите удалить этот элемент?' ,

'data-method'=> 'post' ,

'data-pjax'=> '0',

];

echo Html::a('<span class="glyphicon glyphicon-trash"></span>', $url, $options);

Выравнивание по вертикали css+before

26.12.2016 Автор:alex

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

Решение просмотреть тут http://jsfiddle.net/k46mm5ve/29/

div {
  height: 200px;
  background: #FAF375;
  text-align: center;
}
div:before{
  content: '';
  display: inline-block;
  vertical-align: middle;
  height:100%;
}

span {
  font-size: 2em;
  display: inline-block;
  background: green; 
  width: 60%;
  vertical-align: middle;
}

div {

height: 200px;

background: #FAF375;

text-align: center;

}

div:before{

content: '';

display: inline-block;

vertical-align: middle;

height:100%;

}

span {

font-size: 2em;

display: inline-block;

background: green;

width: 60%;

vertical-align: middle;

}

<div>
   <span>Меня надо выровнять</span>
</div>

<div>

<span>Меня надо выровнять</span>

</div>

Позиционируем форму по центру экрану с возможностью прокрутки

09.12.2016 Автор:alex

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

После нажатия на кнопку, центрируем форму div.nashli_deshevle_form и показываем её. Показываем подложку -div.empty

jQuery('a.nashli_deshevle_button').on('click', function(e){
		e.preventDefault();	
		var scroll=jQuery(window).scrollTop();  
		var b_height=jQuery(window).height();	//высота браузера	
		var f_height=jQuery("div.nashli_deshevle_form").height();	// высота формы	
		scroll=scroll+(b_height-f_height)/2;
		jQuery("div.nashli_deshevle_form").css('top',scroll+'px');	// позиционируем форму	
		jQuery("div.nashli_deshevle_form").show();	// показываем форму	
		jQuery("div.empty").show();		// показываем подлолжку			 
		return false;  
		});

jQuery('a.nashli_deshevle_button').on('click', function(e){

e.preventDefault();

var scroll=jQuery(window).scrollTop();

var b_height=jQuery(window).height(); //высота браузера

var f_height=jQuery("div.nashli_deshevle_form").height(); // высота формы

scroll=scroll+(b_height-f_height)/2;

jQuery("div.nashli_deshevle_form").css('top',scroll+'px'); // позиционируем форму

jQuery("div.nashli_deshevle_form").show(); // показываем форму

jQuery("div.empty").show(); // показываем подлолжку

return false;

});

div.empty {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  left:0px;
  top:0px;
  z-index: 920;
  background: #000;
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=30);
  -moz-opacity: 0.30;
  -khtml-opacity: 0.30;
  opacity: 0.30;
  zoom: 1;
}
		
.nashli_deshevle_form {
    position: absolute;
    padding: 0px 0px 15px 0px;
    border-radius: 6px;
    overflow: hidden;
    display: none;
    /* position: fixed; */
    top: 40px;
    left: 350px;
    width: 500px;
    /* margin: 0px 0px 0px -250px; */
    z-index: 930;
    text-align: left;
    background-color: #fff;
	
}

div.empty {

display: none;

position: fixed;

width: 100%;

height: 100%;

left:0px;

top:0px;

z-index: 920;

background: #000;

filter: progid:DXImageTransform.Microsoft.Alpha(opacity=30);

-moz-opacity: 0.30;

-khtml-opacity: 0.30;

opacity: 0.30;

zoom: 1;

}

.nashli_deshevle_form {

position: absolute;

padding: 0px 0px 15px 0px;

border-radius: 6px;

overflow: hidden;

display: none;

/* position: fixed; */

top: 40px;

left: 350px;

width: 500px;

/* margin: 0px 0px 0px -250px; */

z-index: 930;

text-align: left;

background-color: #fff;

}

Не выставляется селект Jquery в IE

01.12.2016 Автор:alex
Комментариев нет

Такая Команда для выставления options в select в Ie Не срабатывает:

JavaScript

jQuery("#win_tide :nth-child(2)").attr("selected", "selected");

1

jQuery("#win_tide :nth-child(2)").attr("selected", "selected");

Срабатывает вот такая команда. Но ошибок не наблюдается. Будьте осторожны. И даже в предыщущей команде присваиваются атрибуты, но не происходит изменение селекта.

JavaScript

jQuery("#win_tide :nth-child(2)").prop('selected', true);

1

jQuery("#win_tide :nth-child(2)").prop('selected', true);

Joomla — мобильная версия и основная на одном шаблоне (не бутстрап)

25.11.2016 Автор:alex

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

нам понадобится детектор мобильника http://mobiledetect.net/ — файл Mobile_Detect.php кладем в корень

1.в шабке шабона Joomla пишем до тега Head , заменя верхний Тег html

<?php

require_once $_SERVER['DOCUMENT_ROOT'].'/Mobile_Detect.php';
$detect = new Mobile_Detect;

if ($detect->isMobile()){
	$mobil=true;
}else{
	$mobil=false;
}
 
 //$mobil=true;
 
if($mobil==true){
	?>
	<!DOCTYPE html>
	<html lang="ru">
	<?php
}else{
	?>
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">	
	<?php
}
?>

....

<?php

require_once $_SERVER['DOCUMENT_ROOT'].'/Mobile_Detect.php';

$detect = new Mobile_Detect;

if ($detect->isMobile()){

$mobil=true;

}else{

$mobil=false;

}

//$mobil=true;

if($mobil==true){

<!DOCTYPE html>

<?php

}else{

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<?php

}

....

шаг 2. Добавляем




		
		
			
			
XHTML
			
			<meta name="viewport" content="width=device-width, initial-scale=1" />
			
				
					
				
					1
				
						<meta name="viewport" content="width=device-width, initial-scale=1" />
					
				
			
		

 
шаг 3.  заменяем боди


		
		
			
			
PHP
			
			<body class="<?php if($mobil==true){ echo 'mobil'; } ?>">
			
				
					
				
					1
				
						<body class="<?php if($mobil==true){ echo 'mobil'; } ?>">
					
				
			
		

шаг 4. Верстаем для основной  верссии - напревав на мобильную

шаг 5. адаптируем основную в мобильную

для этого мы  пеереопределяем оберточные  классы , это будет выглядеть как то так


		
		
			
			
CSS
			
			.mobil .predlozhenie_out,
.mobil .predlozhenie_in,
.mobil .predlozhenie_list>li,
.mobil .remont_vseh_modeley_out,
.mobil .remont_vseh_modeley_in,
.mobil .master_vo_vseh_rayonah_out,
.mobil .master_vo_vseh_rayonah_in,
.mobil .main_dejurnyi_master_out,
.mobil .main_dejurnyi_master_in,
.mobil .main_otzivy_out,
.mobil .main_otzivy_in,
.mobil .main_kachestvo_block_out,
.mobil .main_text,
.mobil .osnovnye_polomki_out,
.mobil .osnovnye_polomki_in,
.mobil .ceny_na_remont_out,
.mobil .remont_vseh_modeley_content_block,
.mobil .ceny_na_remont_in
{
	width:100%;
	min-width:320px;
	height:auto;
	text-align:center;		
}
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
				
						.mobil .predlozhenie_out,
.mobil .predlozhenie_in,
.mobil .predlozhenie_list>li,
.mobil .remont_vseh_modeley_out,
.mobil .remont_vseh_modeley_in,
.mobil .master_vo_vseh_rayonah_out,
.mobil .master_vo_vseh_rayonah_in,
.mobil .main_dejurnyi_master_out,
.mobil .main_dejurnyi_master_in,
.mobil .main_otzivy_out,
.mobil .main_otzivy_in,
.mobil .main_kachestvo_block_out,
.mobil .main_text,
.mobil .osnovnye_polomki_out,
.mobil .osnovnye_polomki_in,
.mobil .ceny_na_remont_out,
.mobil .remont_vseh_modeley_content_block,
.mobil .ceny_na_remont_in
{
	width:100%;
	min-width:320px;
	height:auto;
	text-align:center;		
}
					
				
			
		

 
некоторые объекты скроются


		
		
			
			
CSS
			
			.mobil .predlozhenie_line_right,
.mobil .predlozhenie_strelka
{
	display:none;
}
			
				
					
				
					1
2
3
4
5
				
						.mobil .predlozhenie_line_right,
.mobil .predlozhenie_strelka
{
	display:none;
}
					
				
			
		

 
вот так выставим вертикальные списки по 2 элемента


		
		
			
			

			
			.mobil .remont_vseh_modeley_list ul:nth-child(2),
.mobil .remont_vseh_modeley_list ul:nth-child(1)
{
display:block;	
width:40%;
background-image:none;
}
.mobil .remont_vseh_modeley_list ul:nth-child(1){
	margin-left:5%;
}

.mobil .remont_vseh_modeley_list::after{
		content:" ";
	clear:both;
	display: block;
}
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
				
						.mobil .remont_vseh_modeley_list ul:nth-child(2),
.mobil .remont_vseh_modeley_list ul:nth-child(1)
{
display:block;	
width:40%;
background-image:none;
}
.mobil .remont_vseh_modeley_list ul:nth-child(1){
	margin-left:5%;
}
 
.mobil .remont_vseh_modeley_list::after{
		content:" ";
	clear:both;
	display: block;
}
					
				
			
		

 
Вот так из списка оставляем только первый элемент (например 1 отзыв из трех, которые были сделаны float:left)


		
		
			
			

			
			.mobil .main_kachestvo_block ul li
{
	display:none;
}
.mobil .main_kachestvo_block ul li:first-child
{
display:block;
}
			
				
					
				
					1
2
3
4
5
6
7
8
				
						.mobil .main_kachestvo_block ul li
{
	display:none;
}
.mobil .main_kachestvo_block ul li:first-child
{
display:block;
}
					
				
			
		

вот так переопределяем заголовки


		
		
			
			
CSS
			
			.mobil .content p.title{
	 font-size: 19px;	
	box-sizing:border-box;
	text-align:center;
}
			
				
					
				
					1
2
3
4
5
				
						.mobil .content p.title{
	 font-size: 19px;	
	box-sizing:border-box;
	text-align:center;
}

Отключить адаптивность Bootstrap 22.11.2016 Автор:alex Комментариев нет Bootstrap автоматически адаптируется ваши страницы для различных размеров экрана. Для отключения адаптивности вам нужно выполнить несколько шагов 1. Нужно убрать мета-тэг <meta name="viewport" content="width=device-width, initial-scale=1"> 1 <meta name="viewport" content="width=device-width, initial-scale=1"> он находится между тэгами head 2. Необходимо перекрыть ширину класса .container это можно сделать следующим образом CSS .container{ width:960px !important; } 1 2 3 .container{ width:960px !important; } Важный момент заданный стиль должен затирать родной стиль bootsrap. 3. Везде в сетке используйте класс .col-xs (зачем это надо -хз… скорее всего без этого можно обойтись) 4. Возможно подключите php класс детектирующий мобильные версии, и тогда надо заменять пунк 2. Например по условию на мобилу добавить класс к body (.wrapper_body) и от этого переопределить класс, тогда можно обойтись без импортант .wrapper_body .container{ width:960px ; } 1 2 3 .wrapper_body .container{ width:960px ; }


                    
          Предыдущая страница          Следующая страница


      
  



      
          Цены
         1500 р/ч

          Более подробно тут:  https://ftask.ru/цены

      

      
          Последние видео админа
          
          Битриксоид без Фаулера не сеньор!
          

      

          
      Последние комментарии
      даFrom alex  2020-07-02 10:09:34
Спасибо) ИсправилFrom alex  2020-07-02 10:08:27
"Поиск в битриксе названия раздела по id, так же пFrom Василий К  2020-07-02 10:05:27
Скидка будет видна только в корзине?From Николай  2020-06-19 09:18:22
Спасибо!From Steve  2020-04-03 00:29:49
Из вариантов, что фильтре не включена настройка suFrom alex  2020-03-12 16:38:21
Alex, подскажите, пожалуйста, из-за чего в умном фFrom Дан  2020-03-03 22:33:34

    
    
	  				Свежие записи
		
											
					fmt.Printf — форматирование , маски вывода
									
											
					golang- описание примитивов синхронизации
									
											
					Конкуренция и параллелизм в го, простые примеры
									
											
					Приблизительный план обучения конкуренции в golang
									
											
					rune в голанг
									
					
		
Рубрики
		
	ajax

	api

	google api

	push

	vk



	bitrix

	1с

	ajax

	aspro

	bitrix24
	
	Бизнес-процессы

	Интерфейсы

	

	D7

	Hiloadblock

	возможно модуль

	интерфейсы битрикса

	кастомизация компонентов и модулей

	Категории инфоблока

	магазин

	Настраиваемые поля

	Настройки и установка модулей

	обработчики

	письма

	работа с ценами

	сайты 24

	цены битрикса (добавл в корзину)

	шаблоны



	composer

	docker

	framework

	ralavel

	slim



	freelance

	git

	golang

	асинхронность



	IE

	Joomla

	jQuery

	меню



	js

	Google PageSpeed — ускорение

	promise

	react



	laravel

	linux

	mongo

	mysql

	nodejs

	асинхронность



	php

	php storm

	tdd

	webpack

	wordpress

	yii2

	Архитектура

	DDD



	Без рубрики

	Вёрстка

	bootstrap

	css
	
	scss

	

	Мобильная верстка



	Видео от админа

	Законы :-(

	Ликбез

	Парсеры

	Портфолио

	Посадочные страницы

	Разное

	xml



	регулярные выражения

	Реклама

	соцсети api

	Формирование документов

	Юмор

	Яндекс деньги

		
Страницы
		
			О себе
Согласие на обработку персональных данных (далее «Согласие»)
Цены на работу, резюме, 23 отзыва на фрилансе
Цены на услуги
		
		
Архивы
		
			Февраль 2024
	Январь 2024
	Декабрь 2023
	Ноябрь 2023
	Октябрь 2023
	Июль 2023
	Июнь 2023
	Апрель 2023
	Март 2023
	Февраль 2022
	Январь 2022
	Декабрь 2021
	Ноябрь 2021
	Октябрь 2021
	Сентябрь 2021
	Август 2021
	Июль 2021
	Июнь 2021
	Май 2021
	Апрель 2021
	Март 2021
	Февраль 2021
	Январь 2021
	Декабрь 2020
	Октябрь 2020
	Август 2020
	Июль 2020
	Май 2020
	Апрель 2020
	Март 2020
	Февраль 2020
	Январь 2020
	Декабрь 2019
	Ноябрь 2019
	Октябрь 2019
	Сентябрь 2019
	Август 2019
	Июль 2019
	Июнь 2019
	Май 2019
	Апрель 2019
	Март 2019
	Февраль 2019
	Январь 2019
	Декабрь 2018
	Ноябрь 2018
	Октябрь 2018
	Сентябрь 2018
	Август 2018
	Июль 2018
	Июнь 2018
	Май 2018
	Апрель 2018
	Март 2018
	Февраль 2018
	Январь 2018
	Декабрь 2017
	Ноябрь 2017
	Октябрь 2017
	Сентябрь 2017
	Август 2017
	Июль 2017
	Июнь 2017
	Май 2017
	Апрель 2017
	Март 2017
	Февраль 2017
	Январь 2017
	Декабрь 2016
	Ноябрь 2016
	Октябрь 2016
	Сентябрь 2016
	Август 2016
	Июль 2016
	Июнь 2016
		
		
Метки
компоненты
Мета
			
						Войти
			RSS записей
			RSS комментариев
			WordPress.org