Добрый день. Как известно iframe кушает лишь четкие указания height в px, а нужно
что-бы вставляемый iframe растягивал родительский элемент, в зависимости от размера
содержимого самого iframe, т.к. содержимое - динамическое. Кто знает какие решения,
простые или сложные (JS, JQ и т.д.)?
Ответы
Ответ 1
Скрипт вставлять в тот документ который загружается в iframe, не забудьте также подключить
в этот файл jQuery (проверял на 1.6.2)
Посмотрите еще вот это - http://host.sonspring.com/iframe/
Ответ 2
Работает, но если содержимое больше высоты монитора, то устанавливается высота которая
видна, если бы я открыл этот Iframe в отдельном окне.
У меня есть небольшой блок и полосы прокрутки к нему. Надо чтобы полосы прокрутки
работали (колесом крутить если), а сами полосы не были видны. hidden убирает их, но
работоспособность также проходит.
Ответы
Ответ 1
Что бы блок прокручивался - а полос не было - это нужно внедрять жску. Есть много
плагинов, которые скрывают полосы прокрутки, но сам скол работает. А средствами ксс
- не видел такого еще.
Вот один из них slimscroll
Ответ 2
в css
::-webkit-scrollbar {
visibility: hidden;
width: 0px;
}
Доброго всем времени суток! Возник следующий вопрос: в зависимости от результата
проверки некоторого условия в JS нужно выводить на HTML определенный блок из двух.
Видимость не подходит, есть элементы, которые не могут выводиться 2 раза. Как это лучше
сделать?
Ответы
Ответ 1
Либо подключаем Jquery, что намного удобнее, если нет маниакального стремления строить
велосипеды(на что мое мнение, надо построить свою ось для начала, чтобы уже никто не
подкопался), либо возможно стандартным js Доступ к элементам DOM.
Вариант с Jquery до безумия прост
1.Подключаем библиотеку
2.Присваиваем элементам id к примеру div id="blockN"
3.Меняем их содержимое $("#blockN").html(Вставьте свою разметку сюда);
4.Гуглим "Jquery селекторы"
Есть блок main с ЗАДАННОЙ высотой в пикселях.
Есть 3 внутренних блока:
top - должен масштабироваться по контенту и ужимать блок middle
middle - должен быть с появляющейся полосой прокрутки (если
не хватает места контенту)
buttom - с фиксированной высотой в пикселях
Как сделать так, чтобы блок main НЕ растягивался, а оставался такой же высотой, в
тоже время блок top ужимал блок middle своим содержимым?
#main{
height:200px !important;
width:100px;
background:blue;
}
#top{
background:green;
}
#middle{
background:red;
height:100%;
overflow: auto;
}
#buttom{
background:blue;
height:50px;
bottom:0
}
Текст текст текст текст текст текст текст текст текст текст текст
Текст текст текст Текст текст текст Текст текст текст Текст
текст текст Текст текст текст Текст текст текст Текст текст текст Текст текст текст
Текст текст текст
Есть какие-нибудь предположения, как так сделать?
http://jsfiddle.net/5fCcy/3/
Ответы
Ответ 1
У CSS с высотой вообще большие проблемы, так что я бы не мучился и решил через JS.
Скрипт можно упростить, это я для наглядности так расписал. А пользователи с отключенным
JS пусть смотрят упрощенную версию сайта :)
Не знаю JavaScript вообще. Только CSS и HTML. Помогите написать код, пожалуйста.
Допустим, у меня есть блок A
У него есть стиль
#a {width:100px; height:100px; position:absolute (или relative, не суть); top:0px}
При нажатии на этот блок нужно чтобы у него был
top:100px; left:50px
к примеру.
Насколько мне известно, средствами CSS можно лишь сделать так, чтобы на время нажатия
на этот блок он перемещался, а когда отпустить кнопку мыши - он встанет на свое место.
Как сделать, чтобы при клике на этот блок он переместился, а при еще одном клике встал
назад? Очень, очень и очень желательно без JavaScript, ибо я его пока что ВООБЩЕ не
знаю, если возможно. Если невозможно, помогите написать скрипт-шаблон, и хотя бы отдаленно
расскажите какая команда за что отвечает. Спасибо большое, надеюсь поможете))
UPD Возможно сделать так, чтобы при клике у него менялись свойства? Или при клике
вместо id="a" у него становился id="a1" ? Это возможно?
Ответы
Ответ 1
Уже тыщу раз отвечал на подобный вопрос:
HTML
CSS
#a {
width:100px;
height:100px;
position:absolute;
top:0;
left: 0;
border: 1px solid black;
transition: all 0.5s;
}
.switchable input {
display:none;
}
.switchable input:checked+#a {
top:100px;
left:50px
}
http://jsfiddle.net/oceog/sFEH4/
фокус в использовании :checked и следующего за ним div.
ограничение способа - нельзя помещать в такой
никаких input
Ответ 2
Я бы посоветовал лучше переключать классы, а не менять конкретные свойства. Например,
так jsFiddle. Я закомментировал второй вариант, который помимо того что переключает
класс, меняет и id элемента.
Есть возможность адаптировать этот плагин под jquery старше 1.9 , дело в том, что
он с 1.8 > не работает, а слайдер хорош www.tympanus.net/codrops/2011/04/28/rotating-image-slider/
Ответы
Ответ 1
Любой плагин можно со старых версий перевести на новую. Подключите jQuery Migrate
и вычисляйте устаревшие методы, заменяя их на новын аналоги. Вот к примеру $.browser,
который используется в том плагине - с версии 1.9 удален. Естественно, что он вызывает
ошибку.
Существует решение для построения дерева с использованием HTML + CSS. Еще немного
JS используется для реализации функции свертывания узлов дерева.
Вот собственно и сам пример.
Проблема в том, что при большом количестве узлов, последние не помещаются в родительский
контейнер. Можете предложить какие-то идеи по устранению данной проблемы? Что только
не пробовал: и работал со свойством overflow и javascript задействовал - безрезультатно.
Буду рад как готовому решению, так и его словесному описанию. Заранее спасибо.
P.S.: Оригинал - CSS3 Family Tree
Ответы
Ответ 1
Есть одна мысль. Сделать
ul { white-space: nowrap; }
li { display: inline-block!important; }
Но надо будет тогда css крепко править, чтобы нужный вид со всеми линиями сохранился
Есть форма с полями типа text и select со стоящими в линию метками (label). Все метки
и поля могут иметь различную длину (ну, как всегда в формах). label'ы выравниваются
влево, input и select левым краем примыкают к label, и в общем-то цель состоит в том,
чтобы выровнять инпуты и селекты по правому краю так, чтобы они как бы растягивались
автоматически от конца label до правого края контейнера и в итоге имели различную длину,
но четкое выравнивание справа. Картинки загружать не дают, попробую тут нарисовать
Как по умолчанию:
Метка поля --------------
Более длинная метка поля --------------
Ещё метка поля --------------
Как нужно мне:
Метка поля -------------------------------------
Более длинная метка поля ----------------
Ещё метка поля -------------------------------
Ответы
Ответ 1
Можно например так: http://jsfiddle.net/DdnQ2/
table{
width:500px;
}
td{
width:0;
white-space:nowrap;
}
td.field{
width:100%;
}
input{
width:100%;
}
Некоторых особо крутых верстальщиков смущает использование таблиц для позиционирования
элементов. Чтобы таковые не смущались, можно выполнить рекомендацию w3c и поставить
таблицам атрибут role=presentation
Ответ 2
В примере заключен базовый принцип работы универсального решения, которое вы сами
сможете легко дополнить необходимыми свойствами и применить к своему проекту:
/* Reset CSS */
* {
box-sizing: border-box;
outline: 0;
margin: 0;
}
.divMain:after {
content: '';
display: block;
clear: both;
}
.divA {
float: left;
}
.divB {
overflow: hidden;
}
.divB input {
width: 100%;
}
Здравствуйте! Свойство background-image не работает в файле css.
Файл находится в папке css.
css/style.css
body {
background-image: url(img/a.png);
}
index.html
New Page
Но в самом файле html свойство background-image работает.
New Page
Подскажите, почему не работает, если я размещаю в в файле css?
Ответы
Ответ 1
в css файле пропишите
body {
background-image: url(../img/a.png); /* выходим из папки css на уровень вверх,
и заходим в папку img */
}
Ответ 2
Между тегами у вас некорректно написана ссылка на файл CSS.
Ваш код должен выглядеть так:
New Page
Как видите вы не дописали type="text/css" в теге link.
Ответ 3
body {
background-image: url(../img/a.png);
}
http://htmlbook.ru/samhtml/ssylki/absolyutnye-i-otnositelnye-ssylki
Ответ 4
пол суток пробовал
background-image: url(../img/a.png);
background-image: url("../img/a.png");
,а оказывается надо вот так
background-image: url('../img/a.png');
все заработало ;)
Ответ 5
Всем привет. Была такая же проблема: не работал backgrounf-image: url(link). Мучался
часа 2, перепробовал всё, любые модификации но проблема оставалась. Ошибка заключалась
в том, что не правильно был указан путь к картинке (файлу), и как не старался - ничего
не помогало. Потом, когда я начал думать что html и css - не моё, мне вдруг пришла
в голову мысль залезть в настройки. Я пользуюсь Notepad++ и обнаружил вот что: в пункте
"Путь по умолчанию" было отмечено "запомнить последнюю директорию", я переставил отметку
на "пройти за текущим документом", а в значении селектора background-image указал папку
и файл: background-image: url(images/1.jpg)
И все заработало.
Надеюсь, кому да поможет инфа.
Ответ 6
Судя по имени стиля вам нужен фон страницы.
Если не работает, то проверьте правильный ли путь к картинке. то есть ../img/a.png
или /img/a.png
body {
margin: 0;
padding: 0;
background: url("img/a.png") repeat scroll left top #FFFFFF;
overflow-y: scroll;
}
Ответ 7
Может помочь указания размеров картинки фона.
.image {
background-image: url(img/a.png);
width: 50px; /* ширина */
height: 50px; /* высота */
}
Мучаюсь уж как 2 дня, подскажите как сделать такое:
Есть картинки(иконки)сверху, нужно, чтобы при нажатие на любую из них в textarea
который ниже находиться вставлялись спец коды к примеру , то есть HTML коды.
мне подсказали что это делается на jquery.
Ответы
Ответ 1
Используй любой из WYSIWYG-редакторов.
Если по-своему, то можно так:
HTML:
b
JS:
var ta = $('#qwe'),
ico = $('.icon');
ico.on('click', function(){
switch ($(this).data('type')){
case 'b':
ta.val( ta.val() + '' );
break;
//можно дописать другие кейсы для новых иконок
}
});
Демо
Можно улучшить, чтобы обрамляло выделенный текст.
просто хардкод! это если нужно постоянное отображение дропменю
Ответ 2
Если работать с bootstrap на уровне less, то в файле variables.less настраивается
переменная @grid-float-breakpoint.
Customize and download
находим эту переменную, задаём значение(например 1280px) меньше которого меню коллапсирует.
Скачиваем, пользуемся.
При просмотре кода на Ipad'e блоки обрезаны с правой стороны, хотя ширина 100%. В
чем проблема?
http://rghost.ru/55715542
Ответы
Ответ 1
- это должно помочь
width - установите свою ширину
По умолчанию ширина окна просмотра на iPhone устанавливается равной 980px. Но ваш
дизайн может не соответствовать данному диапазону. Значение может быть для шаблона
слишком большим или маленьким.
посмотрите здесь
Не пойму, как вставить изображение. У меня горизонтальное меню высотой 50 px, сделал
изображение, которое хочу поставить вместо маркера списка, высота изображения тоже 50 px.
Код страницы:
.menu{
background-image: url(images/fon_menu.jpg);
height: 50px;
}
li {
float: left;
list-style-image: url(images/kn_cl.png);
font-family: sans-serif;
font-size: 20px;
margin: 10px 40px;
}
Если в li пишу display: inline или inline-block, то маркеры и изображения вообще
не отображаются, исчезают.
С тем кодом, который есть сейчас, всё работает, но изображение смещает текст ссылки.
Таким образом вместо маркера получается поставить только изображение такой высоты,
какую высоту имеет текст ссылки (20 px). Если высота больше, сдвигается текст.
Ответы
Ответ 1
Вместо list-style-image лучше используйте обычный background. С его помощью можно
гибко настроить позицию изображения, чего не получится в случае с list-style-image
http://jsfiddle.net/8fV3X/
Элементы расположены по кругу, с наездом друг на друга.
Как сделать так что бы каждый элементы был выше предыдущего но ниже следующего.
Сейчас получается что первый элемент либо выше двух соседних либо ниже.
Пример
Красный квадрат должен быть выше черного, но ниже зеленого
var linksData = [];
$('a').each(function() {
linksData.push($(this).text());
});
Данный код сработает абсолютно для всех ссылок на странице. Если вам нужно в конкретном
блоке, то делайте выборку так
$('.labeled a') .....
Ответ 2
Если Вы ориентированы на поддержку старых браузеров и IE - 2 варианта: jquery (простой,
но нужно загружать целую библиотеку), js (кривой: нужно сделать универсальную функцию
поиска по классу).
Если Вы рассчитываете, что у всех Ваших пользователей есть норм браузер - getElementsByClassName
в помощь.
Если есть возможность к контейнеру, где хранятся ссылки, прикрутить id - самый наипростейший
код js (код как и в варианте выше, но поддерживать будет больше браузеров).
Выбор за Вами.
Проблема в том, что через комп див блок растягивается правильно, во всю ширину страницы,
а через планшет или телефон див растягивается до границы экрана, а при прокрутке вправо
или уменьшении масштаба там и остаётся. Скрин в самом низу с примером меньшенного масштаба.
Блок отмечен красной стрелкой.
Что пробовал и не помогало:
body { width: 100%; height: 100%; }
.div { min-width: 100%; min-height: 100%; position: relative; }
Ответы
Ответ 1
Так происходит, когда блоки сайта не помещаются в ширину экрана и остаются за его
границами. Одно из следствий - появляется горизонтальный скролл. При этом те блоки,
ширина которых была задана как width: 100% - остаются с такой шириной. В итоге вы скроллите
вправо, и видите пустую область.
Решить это быстро можно вот так:
body {
min-width: 1000px;
}
Этим вы зададите для страницы минимальную ширину, в которую все ваши блоки гарантированно
впишутся. И даже если ширина экрана будет недостаточной для отображения всех блоков,
и появится горизонтальный скролл - блоки с width: 100% будут отображаться во всю указанную
ширину 1000px.
Плюс, полезно бывает задать эту же величину в мета-теге в head:
Таким образом, заходя с мобильного, вы будете видеть всю страницу целиком, максимально
"отзумленную".
Добрый день.
Использую шрифт Fira Sans.
Подключаю таким способом.
Пример css:
font-family: 'Fira Sans', sans-serif;
font-weight: 400;
font-style: italic;
На телефоне работает, на моём работает, на соседних нет. У кого-то работает, у кого
опять же нет. В чём проблема? Заранее спасибо.
Адрес сайта: bm.webbys.ru
Ответы
Ответ 1
Попробуйте добавить "s" в протоколе http://fonts.googleapis.com/css? family=Fira+Sans:300,400,500,700,300italic,400italic,500italic,700italic&subset=latin,cyrillic',
чтобы получилось https://
Ответ 2
Попробуй через @import
И еще попробуй с body убрать определение шрифта, вообще другие шрифты убери, кроме
твоего, и посмотри.
Ответ 3
Попробуйте добавить в head:
Ответ 4
Может поможет пример как я подключал шрифт для странички:
body { font-family: 'PT Sans', sans-serif; }
@font-face {font-family: 'PT Sans';
src: url('../fonts/pts55f_w.eot');
src: local('PT Sans'), url('../fonts/PTS55F_W.eot?#iefix') format('embedded-opentype'),
url('../fonts/PTS55F_W.woff') format('woff'),url('../fonts/PTS55F_W.ttf') format('truetype'),
url('../fonts/PTS55F_W.svg#PTSans-Regular') format('svg');}
Следующий код
function go() {
console.log(document.querySelectorAll("*|*"));
}
Some div
Smth from aSmth from b
Just a p
находит все элементы на странице:
0: html
1: head
2: style
3: body
4: div
5: a:div
6: b:any
7: p
8: button
9: script
length: 10
А как найти только те, у которых задан нестандартный namespace?
0: a:div
1: b:any
length: 2
Ответы
Ответ 1
Могу на JQuery элементы с заранее известными нэймспейсами нати.
function go() {
$('.result').append($('a\\:div'));
}
Some div
Smth from aSmth from b
Just a p
Можно и без JQuery:
function go() {
var elements = document.getElementsByTagNameNS('*','*');
found = [];
[].forEach.call(elements, function(element) {
if (element.nodeName.indexOf(':') > 0) {
found.push(element);
}
});
found.forEach(function(element) {
document.getElementById("result").appendChild(element);
});
}
В сниппете код почему-то не работает, а при загрузке страницы из файла в Google Chrome
— работает.
Почему вы не используете JQuery?
Ответ 2
Сделал так:
function go() {
console.log(Array.prototype.filter.call(document.querySelectorAll("*|*"), function(el) {
return ~el.tagName.indexOf(":");
}));
}
Если, кому-нибудь не трудно, помогите разобраться, а то я сам делал по образцу с
сайта, но у меня получилось, что меню сложилось в один угол. После этого попробовал
еще сам. Опять ерунда. Круто было бы увидеть выпадающее меню по наведению.
Заранее спасибо за советы.
Ответы
Ответ 1
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background: #efefef;
background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
padding: 0 20px;
border-radius: 10px;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: "";
clear: both;
display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: #4b545f;
background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: block;
padding: 25px 40px;
color: #757575;
text-decoration: none;
}
nav ul ul {
background: #5f6975;
border-radius: 0px;
padding: 0;
position: absolute;
top: 100%;
}
nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
nav ul ul li a {
padding: 15px 40px;
color: #fff;
}
nav ul ul li a:hover {
background: #4b545f;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
}
результат:
информация отсюда:
http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu
