Все технические форумы на одном сайте Удобный поиск информации с популярных форумов в одном месте
Вопрос: Перенос картинок на другую строку при изменении размера окна

Сразу скажу, в CSS я слабоват.
Вывожу в ряд картинки.
<div style="width:150px;float:left;display:block;margin-left:5px;">
<img src"..."><br>
<span>текст...</span>
</div>

Нужно, чтобы при изменении размера окна браузера, картинки, которые не влазят в строку, переходили на новую строку.
Подскажите, пожалуйста, как это сделать
Ответ:
Сообщение от -=Vovka=-
при изменении размера окна браузера, картинки, которые не влазят в строку, переходили на новую строку
Что есть у тебя "строка"?
Поскольку картинка есть инлайновый элемент и она сама будет располагаться левее и ниже, если по горизонтали ей уже нет места...
ДИВы с
float:left;

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

Т.ч. по твоему огрызочку пока не понятно какие у тебя проблемы и где там у тебя "строки"...
Вопрос: При изменении размеров окна браузера, появляется белый отступ справа

Привет! Собственно столкнулся с такой проблемой-
При изменении размеров окна браузера, появляется белый отступ справа

Понимаю что проблема связана с шириной, но пока подходящего решения так и не нашел
Сайт arenda-apparata .ru
Ответ: аналогичная проблема. при изменение окна появляется полоса прокрутки и справа -- пустое место.
в данном случае wrapper не растягивается.
Код CSS
1
2
3
4
5
.wrapper {
    min-width: 320px;    
    margin: 0 auto;
    background: #FFFFFF;
}
Причем, полоса прокрутки появляется на одном из breakpoint. Что не так со wrapper или с одним из элементов внутри него?
Вопрос: Скрипт изменения размера шрифта

Здравствуйте. Помогите решить проблему. есть файл md_stylechanger.js из шаблона Beez3 со скриптом изменения размера шрифта. я его дорабатывал на локальном компьютере на Joomla 3.6.x и всё работало - размеры шрифта менялись и запоминались в куках, при переходах по страницам настройки сохранялись. пока делал, вышла Joomla 3.7 и для проверки работы установил этот js на другой локальный сайт с обновленной версией сайта, файл подгружается на страницу и работает при нажатии на кнопки изменения настроек, но настройки не запоминаются и при обновлении страницы сбрасываются на по умолчанию. причем, на некоторых страницах скрипт работает, но таких очень мало. я так понимаю, что на большинстве страниц либо блокируется сам скрипт при загрузке страницы и он не считывает настройки отображения, либо возникают проблемы с применением кук. в чем может быть проблема? ведь на предыдущей версии Joomla всё работало. что там могло измениться?
Ответ: оказалось, что значение не было прописано
Javascript
1
smaller = Joomla.JText._('TPL_BEEZ3_SMALLER');
Вопрос: Изменение размера элемента

Здравствуйте! Вот добавил я элемент datepicker
HTML5
1
2
3
4
5
6
7
<div id="datepicker"></div>
<script>
        $(function () {
            $.datepicker.setDefaults($.datepicker.regional["ru"]);
            $("#datepicker").datepicker());
        });
    </script>
Как мне изменить его размер, сделать поменьше, например? пробовал вот так изменять ширину и высоту
HTML5
1
2
3
4
5
6
7
8
<script>
        $(function () {
            $.datepicker.setDefaults($.datepicker.regional["ru"]);
            $("#datepicker").datepicker());
            $("datepicker").width(20);
            $("datepicker").height(20);
        });
    </script>
не работает, хотя вроде в документации описаны эти свойства как раз для изменения размера элемента.
Ответ:
Сообщение от Уф
потому что таких параметров нет, где ты их увидел покажи?
общие параметры для элементов есть такие, я думал, что их можно к любому элементу применить.
Вопрос: Разумное поведение при изменении размера

Добрый вечер!
У меня вопрос к опытным программистам, делаю диалоговое окно с возможностью изменения размера, ну как бы ничего сложного, процедуру корректировки высоты вложенных элементов "накидал" за 30 минут, вроде работает.
Но не пойму как определить поведение если элементы не влазят в контейнер, вариант с overflow = 'hidden'/'scroll'/'auto' не подходит. т.к. некоторые дочерние элементы вложенных могут выходить за пределы контейнера.

Что посоветуете?

вот тестовая страница:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
.container{
	width:100px;
	float:left;
	margin:5px;
	border: 2px solid gray;
}
</style>

<script>

function heightTo( n ){

	var containers = document.querySelectorAll('.container');
	for( var i = 0, l = containers.length; i<l; i++ ){
		var 
			container = containers[i],
			children = container.children,
			height = +n;
				
		var percent = 0, // общее количество процентов
			elements=[], // массив элементов с % высотой
			percents=[], // высота в % по индексу
			other = 0; // высота остальных элементов
		
		container.style.height = n+'px';
		
		// ищем элементы с % и остальные подсчеты
		for( var j = 0, m = children.length; j<m; j++ ){
			var element = children[j];
			if( element.hasAttribute('p-height') ){
				p = +element.getAttribute('p-height');
				percent += p;
				elements.push( element );
				percents.push( p )
			}else{
				other += element.offsetHeight;
			}
		}
				
		if( other < height ){ // если элементы будут иметь положительную высоту
			var k = ( height - other )/percent;
			for( var j = 0, m = elements.length; j<m; j++ ){
				var element = elements[j];
				element.style.height = Math.round( percents[j]*k )+'px';
			}
		}else{ // а вот тут не влазит, что делать?
			alert(' ne vlazit !')
		}
	}	
}
</script>
</head>
<body>

	<button onclick="heightTo( 100 )">100</button>
	<button onclick="heightTo( 150 )">150</button>
	<button onclick="heightTo( 200 )">200</button>
	<button onclick="heightTo( 300 )">300</button>
	<button onclick="heightTo( 500 )">500</button>
	
	<br/>
	
	<div class="container">
		<div p-height="30" style="height:auto; background-color:red">block 30%</div>
		<div style="height:30px; background-color:green">block 30px</div>
		<div p-height="50" style="height:auto; background-color: yellow">block 50%</div>	
		<div style="height:40px; background-color: blue">block 40px</div>
	</div>
	
	<div class="container">
		<div p-height="50" style="height:auto; background-color:red">block 50%</div>
		<div style="height:100px; background-color:green">block1 100px</div>
		<div p-height="10" style="height:auto; background-color: yellow">block 10%</div>	
		<div p-height="20" style="height:auto; background-color: blue">block 20%</div>
	</div>	

	<div class="container">
		<div p-height="50" style="height:auto; background-color:red">block 50%</div>
		<div  style="height:100px; background-color:green">block 100px</div>
		<div p-height="50" style="height:auto; background-color: yellow">block 50%</div>	
		<div style="height:40px; background-color: blue">block 40px</div>
	</div>	
	
</body>
</html>
Ответ: _0_,
а что хотите то ?
Сообщение от _0_
// а вот тут не влазит, что делать?
Вопрос: Поведение "плавающей" боковой колонки при изменении размеров окна браузера

Здравствуйте, помогите разобраться и решить следующую проблему.
Реализовываю фиксацию боковой колонки на сайте при помощи следующего кода:
var rightcolumnTop = rightcolumn.offset().top;
var columnPosition = contentWidth - rightcolumnWidth + contentLeftMargin;
var rightcolumnStop = headerHeight + popularPostHeight + contentHeight - rightcolumnHeight;
var columnPositionDown = contentWidth - rightcolumnWidth;
$(window).scroll(function(){
   if ( $(this).scrollTop() > rightcolumnTop ) 
      {
        rightcolumn.addClass("columnfixed");
        rightcolumn.css({"top":"0px", "left": columnPosition - 2 +"px", "width": rightcolumnWidth+"px", });
       }
   if($(this).scrollTop() >= rightcolumnStop && rightcolumn.hasClass("columnfixed"))
       {   
          rightcolumn.removeClass("columnfixed");
          rightcolumn.addClass("columnabsolute");
          rightcolumn.css({"top": contentHeight - rightcolumnHeight+"px", "left": columnPositionDown - 2 +"px", "width": rightcolumnWidth+"px", });  
        }
   if($(this).scrollTop() < rightcolumnStop && rightcolumn.hasClass("columnabsolute"))
        {
           rightcolumn.removeClass("columnabsolute");
           rightcolumn.addClass("columnfixed");
           rightcolumn.css({"top":"0px", "left": columnPosition - 2 +"px", "width": rightcolumnWidth+"px", });
         }
                 
      if($(this).scrollTop() <= rightcolumnTop && rightcolumn.hasClass("columnfixed"))
         {
             rightcolumn.removeClass("columnfixed");
          }
});


Наверно идея очень не верно реализована (хоть и получается закрепить колонку когда нужно), но при изменении размеров окна браузера, колонка остаётся на том месте, которое на данный момент было определено в стилях. И проблема решается только при обновлении страницы.
Подскажите как правильно реализовать фиксацию и открепление колонки, чтобы не возникало таких проблем.
Ответ: Спасибо за подсказку! Получился такой код:
$(document).ready(function() {

        $(window).on('scroll resize', function(){

                var scrollTop = $(this).scrollTop(); //положение скролла от верха страницы
                var rightcolumn = $("#right_column"); //обращение к правой колонке
                var contentLeftMargin = $("#content").offset().left; //отступ основного блока с контентом от левого края окна браузера
                var contentHeight = $("#content").outerHeight(true); //высота основного блока с контентом с учетом внутрених отступов и рамки
                var contentWidth = $("#content").outerWidth(true); //ширина основного блока с контентом с учетом внутрених отступов и рамки
                var rightcolumnHeight = rightcolumn.outerHeight(true); //высота правой боковой колонки
                var rightcolumnWidth = contentWidth * 25 / 100; //ширина правой колонки 
                var headerHeight = $("header").outerHeight(true); //высота блока блока header с меню
                var popularPostHeight = $("#popular_post").outerHeight(true); //высота блока с информером популярных постов 
                var rightcolumnTopBegin = headerHeight + popularPostHeight + 15; // начальное положение правой колонки от верха страницы с учетом разделительной полосы и внутреннего отступа основного контента
                var columnFixedLeftPosition = contentLeftMargin + contentWidth - rightcolumnWidth; // положение правой колонки от левого края окна браузера при fixed
                var columnAbsoluteLeftPosition = contentWidth - rightcolumnWidth; // положение правой колонки от левого края начала контента при absolute
                var rightcolumnStop = headerHeight + popularPostHeight + contentHeight - rightcolumnHeight; // позиция скролла, при которой нижний край правой колонки сравняется с нижним краем основного контента
               

                if ( scrollTop > rightcolumnTopBegin && !rightcolumn.hasClass("columnfixed")) 
                    {
                        rightcolumn.addClass("columnfixed");
                        rightcolumn.css({"top":"0px", "left": columnFixedLeftPosition +"px", "width": rightcolumnWidth - 2 +"px", });
                    }
                if(scrollTop >= rightcolumnStop && rightcolumn.hasClass("columnfixed"))
                    {   
                        rightcolumn.removeClass("columnfixed");
                        rightcolumn.addClass("columnabsolute");
                        rightcolumn.css({"top": contentHeight - rightcolumnHeight - 10 +"px", "left": columnAbsoluteLeftPosition  +"px", "width": "25%" - 2, });  
                    }
                if(scrollTop < rightcolumnStop && rightcolumn.hasClass("columnabsolute"))
                    {
                        rightcolumn.removeClass("columnabsolute");
                        rightcolumn.addClass("columnfixed");
                        rightcolumn.css({"top":"0px", "left": columnFixedLeftPosition +"px", "width": rightcolumnWidth - 2 +"px", });
                    }
                 
                if(scrollTop <= rightcolumnTopBegin && rightcolumn.hasClass("columnfixed")) 
                    {
                        rightcolumn.removeClass("columnfixed");
                    }

                console.log(" columnFixedLeftPosition " +  columnFixedLeftPosition);
                console.log(" columnAbsoluteLeftPosition " +  columnAbsoluteLeftPosition);
        }); 
  });

Но одна проблема! При ресайзе окна браузера, отрабатывает перестраивание колонки когда она имеет абсолютное позиционирование, а в фиксированном положении колонка остается на месте наезжая на содержимое. В консоле видно, что значение переменной которую я указываю для координаты left, изменяется, но в стилях этого не происходит. В чем может быть причина, не могу пока сообразить?
Вопрос: Выполнять функцию, при изменение размеров экрана. Или постоянно выполнять функцию

Доброго временисуток, есть функция, которую надо выполнять при при изменение размеров экрана или постоянно выполнять эту функцию.

Javascript
1
2
3
4
5
6
7
$.fn.setMaxHeights =(function() {
  var maxHeight = this.map(function(i,e) {
    return $(e).height();
  }).get();
  return this.height( Math.max.apply(this, maxHeight) );
});
$('.block').setMaxHeights();
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
.wrapper{
  width: 80%; 
  height:100%;
  margin:0 auto;
  font-size:0;
}
.block{  
  padding:5px;
  font-size:16px;    
  background:green;  
  border:1px solid black;
  box-sizing: border-box;
  display:inline-block;
  vertical-align: top;
  width:100%;
 }
 
@media (min-width:400px){
  .block{    
     width:50%;
}  
}
 
@media (min-width:900px){
  .block{       
    width:25%;
}}
HTML5
1
2
3
4
5
6
7
<div class="wrapper">
  <div class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque repellat ipsam suscipit illum consequuntur, itaque tenetur vero rerum maiores laudantium, error, saepe ratione non. Ducimus reiciendis, perferendis saepe maiores quasi!</div>
  <div class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam quam cumque atque quae, iure dolorum quia voluptate! Doloribus, illo repellendus. Tenetur, alias pariatur placeat, nemo at beatae necessitatibus veniam sequi.</div>
  <div class="block">Lorem ipsum dolor sit amt, consectetur adipisicing elit. Quo sit nisi nihil, rerum dolorum accusamus quos fugiat labore id vel accusantium, repellat similique officia, adipisci ea provident quod sapiente cumque.</div>
  <div class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi quidem atque perspiciatis accusamus ipsa vel, velit nobis aut nam, nesciunt autem amet aspernatur quo assumenda, fuga totam debitis dignissimos maiores!</div>
  <div class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit ad assumenda ducimus, doloribus, sunt reprehenderit officia sed, architecto quam reiciendis quis, minima! Necessitatibus at ad quis cumque reiciendis. Nihil, cupiditate.</div>
</div>
Ответ: boilzzz, держите
Javascript
1
2
3
4
5
6
7
8
9
10
$.fn.setMaxHeights =(function() {
  var maxHeight = this.map(function(i,e) {
    return $(e).children('.intern').height();
  }).get();
  return this.height( Math.max.apply(this, maxHeight) );
});
$('.block').setMaxHeights();
window.addEventListener('resize', function() {
    $('.block').setMaxHeights();
});
HTML5
1
2
3
4
5
6
7
<div class="wrapper">
  <div class="block"><span class="intern">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque repellat ipsam suscipit illum consequuntur, itaque tenetur vero rerum maiores laudantium, error, saepe ratione non. Ducimus reiciendis, perferendis saepe maiores quasi!</span></div>
  <div class="block"><span class="intern">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam quam cumque atque quae, iure dolorum quia voluptate! Doloribus, illo repellendus. Tenetur, alias pariatur placeat, nemo at beatae necessitatibus veniam sequi.</span></div>
  <div class="block"><span class="intern">Lorem ipsum dolor sit amt, consectetur adipisicing elit. Quo sit nisi nihil, rerum dolorum accusamus quos fugiat labore id vel accusantium, repellat similique officia, adipisci ea provident quod sapiente cumque.</span></div>
  <div class="block"><span class="intern">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi quidem atque perspiciatis accusamus ipsa vel, velit nobis aut nam, nesciunt autem amet aspernatur quo assumenda, fuga totam debitis dignissimos maiores!</span></div>
  <div class="block"><span class="intern">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit ad assumenda ducimus, doloribus, sunt reprehenderit officia sed, architecto quam reiciendis quis, minima! Necessitatibus at ad quis cumque reiciendis. Nihil, cupiditate.</span></div>
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
.wrapper{
  width: 80%; 
  height:100%;
  margin:0 auto;
  font-size:0;
}
.block{  
  padding:5px;
  font-size:16px;    
  background:green;  
  border:1px solid black;
  box-sizing: border-box;
  display:inline-block;
  vertical-align: top;
  width:100%;
 }
.block > .intern{
  padding: 0px;
  margin-bottom: auto;
}
@media (min-width:400px){
  .block{    
     width:50%;
}  
}
 
@media (min-width:900px){
  .block{       
    width:25%;
}}
.link{
  background:blue;
  padding:20px;
  display:inline-block;
  cursor:pointer;
}
https://jsfiddle.net/qs80j5L0/13/

Не по теме:

firefox ппс тормозит, в хроме норм

Вопрос: Динамическое изменение объекта при изменении параметров

Есть линия - тег <hr>, есть параметры, организованные через теги <input> и <select>, при помощи JavaScript нужно сделать так, чтобы изменение параметров влияло на параметры тега <hr>. Необходимые параметры для изменения - положение, размер, и цвет линии. У меня получилось оформить только изменение размера, никак не могу изменить положение и цвет.

Код HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<HTML>
<HEAD><TITLE>HR</TITLE></HEAD>
<BODY>
<h2>Horizontal Lines</h2>
Please choose values of the params, thouse 
needed to be change, and push the <b>EXEQUE</b> button
<hr width=300 size=10 color=green id="line" align=left>
    
<TABLE border= 1 cellpadding=10>
    <tr><td>Выравнивание<br> 
            <input type="radio" name="r1" id="rd1" value="left" checked>LEFT<br>
            <input type="radio" name="r1" id="rd2" value="center">CENTER<br>
            <input type="radio" name="r1" id="rd3" value="right">RIGHT<br>
            <input type=text value="250" id="w" style=width:50> Line's height<br>
            <input type=text value="10" id="h" style=width:50> Line's width<br></td>
        <td>Line's color<br>
            <select name="sel" id="s">
            <option id="c1" value="green">Green
            <option id="c2" value="red" selected>Red
            <option id="c3" value="yellow">Yellow
            <option id="c4" value="blue">Blue
            <option id="c5" value="black">Black
            </select></td></tr>
</TABLE> <br>
<input type=button value="EXEQUE" id="exe" onclick="f1()">
<input type=button value="DROP" id="dr">
</BODY>
    <script>
    function f1()
    {
        var ll= document.getElementById('line');
    var rr1= document.getElementById('rd1');
    var rr2= document.getElementById('rd2');
    var rr3= document.getElementById('rd3');
    var ww= document.getElementById('w');
    var hh= document.getElementById('h');
    var cc1= document.getElementById('c1');
    var s1= document.getElementById('green');
        (ll.width=ww.value)
        (ll.size=hh.value)
         if (rr1.checked) ll.align=left;
    if (rr2.checked) ll.align=center;
    if (rr3.checked) ll.align=right;
    if (cc1.checked) alert("selected");/*можно ли выцепить объект select (id="s") и проверить какое значение (value из option) он принимает в данный момент?*/
    }
    </script>
</HTML>
Что нужно подкорректировать в Java-Script-коде, чтобы он стал функциональным?Помогите, кто знает, пожалуйста.
Ответ: arcmag, спасибо, что откликнулись (в целом Ваш вариант работает, выбор цвета через селектор интересная идея), kalabuni, Вы правы, руки кривоваты слегка,не сработало из-за таблицы (я делал не через форму, а через таблицу), действительно работает, я бы сам даже не додумался сделать выбор положения линии проходом в цикле, ведь изменение размеров сработало - вот я и думал, что все остальное можно по такому же принципу реализовать, спасибо.
Вопрос: При масштабировании в Firefox почему-то меняются размеры экрана в css медиа запросе

Использую такой медиа-запрос для вывода картинки:

HTML5
1
2
3
4
5
6
7
<picture>
    <source srcset="/jpg/mos01s1.jpg" media="(min-device-width: 1920px)">
    <source srcset="/jpg/mos01s2.jpg" media="(max-device-width: 1919px) and (min-device-width: 1600px)">
    <source srcset="/jpg/mos01s3.jpg" media="(max-device-width: 1599px) and (min-device-width: 1280px)">
    <source srcset="/jpg/mos01s4.jpg" media="(max-device-width: 1279px)">
    <img srcset="/jpg/mos01s1.jpg">
</picture>
Почему-то в Firefox'е при масштабировании device-width меняется и, соответственно, начинают выводиться разные картинки, хотя меняться что-то должно только при изменении разрешения экрана. При изменнии размера окна Firefox'а все нормально. В Сhrom'е картинка не меняется ни при масштабировании, ни при изменении размера окна.
Ответ: Уже пробовал, тогда картинки начинают переключаться при изменении размера окна, это мне совсем не подходит.
Статью видел, правда всю не читал, теперь посмотрю.
Но, похоже, пока это просто фича файрфокса...
Вопрос: Изменение размеров map area при изменении размера изображения.

Здравствуйте, хотелось бы спросить вот что:
Нарисовал карту map area на изображении. Но при уменьшении размеров окна браузера по ширине - происходит сжатие изображения, но координаты map area карты изображения остаются такими же. Соответственно всё сдвигается. Подскажите пожалуйста, как с помощью Яваскрипта можно добиться масштабирование элементов map area вместе с изображением.
Ответ: mxup,
1. Имхо делать картинку карты с фиксированной шириной-высотой, отслеживать window.onresize по ширине.
2. Ко всей карте, вместе с area, обработчиком onresize применять css правило
transform: scale(width/widthResize ); //
Где width; widthResize текущий и размер окна браузера, с которого начинается ужатие
Если width>widthResize - операцию пропускаем