Есть таблица с элементами последний из которых наполовину размыт, вот пример:
можно ли сделать подобный эффект средствами css?
Ответы
Ответ 1
Попробуйте добиться желаемого результата с помощью комбинации свойства opacity и
свойства background: linear-gradient()
body {
background: url('http://lorempixel.com/output/nature-q-c-640-480-3.jpg');
max-width: 600px;
}
div {
background: #fff;
border-radius: 4px;
padding: 15px;
margin-bottom: 10px;
}
div.last {
background: linear-gradient(0, transparent, #fff);
opacity: .4;
}
Создаю автоматический файловую структуру. И на папке Private, нужно отключить наследование.
Но у меня не получается.
Вот мой код.
if (!Directory.Exists(path))
{
Directory.CreateDirectory(path);
SetFolderPermission(path, userName, FileSystemRights.ReadAndExecute);
SetFolderPermission(path, userName, FileSystemRights.Write);
RemoveFileSecurity(path, domainUsers, FileSystemRights.Write);
RemoveFileSecurity(path, domainUsers, FileSystemRights.Read);
}
И два метода
public static void SetFolderPermission(string folderPath, string userName, FileSystemRights
rights)
{
var directoryInfo = new DirectoryInfo(folderPath);
var directorySecurity = directoryInfo.GetAccessControl();
var fileSystemRule = new FileSystemAccessRule(userName,
rights,
InheritanceFlags.ObjectInherit |
InheritanceFlags.ContainerInherit,
PropagationFlags.None,
AccessControlType.Allow);
directorySecurity.AddAccessRule(fileSystemRule);
directoryInfo.SetAccessControl(directorySecurity);
}
public static void RemoveFileSecurity(string folderPath, string userName,
FileSystemRights rights)
{
var directoryInfo = new DirectoryInfo(folderPath);
var directorySecurity = directoryInfo.GetAccessControl();
var fileSystemRule = new FileSystemAccessRule(userName,
rights,
InheritanceFlags.ContainerInherit |
InheritanceFlags.ContainerInherit ,
PropagationFlags.InheritOnly,
AccessControlType.Allow);
directorySecurity.RemoveAccessRule(fileSystemRule);
directoryInfo.SetAccessControl(directorySecurity);
}
В первом методе я даю пользователю права на папку, а во втором пытаюсь отключить
наследование для пользователей домена. И это скорее всего не правильно. Мне нужно поправить
этот метод, чтобы он просто отключал бы наследование. Как мне это сделать?
Ответы
Ответ 1
directorySecurity.SetAccessRuleProtection(true, false);
О методе SetAccessRuleProtection
Есть 2 дива стоящих друг за другом, нужно сделать скошеную черту между ними посредине
, и сделать так что бы при наведении заливалось другим дивом до все скошеную часть
, а не за ее пределы. Как это можно сделать ?
Думаю можно сделать с js svg , но есть ли варики без них ?
.parent {
overflow: hidden;
width: 600px;
}
.hid {
display: none;
position: absolute;
top:0;
left:0;
width:100%;
height: 200px;
background: green;
}
.child {
float: left;
width: 50%;
height: 200px;
background: violet;
position: relative;
}
.child2 {
background: #000;
float: left;
width: 50%;
height: 200px;
position: relative;
}
.child:hover > .hid,
.child2:hover > .hid{
display: block;
}
Можно ли сделать такое же выравнивание изображения img, как это делается с помощью
background-size: cover?
Видел решения с помощью object-fit, также смотрел другие вырианты, но ни одно не
работает. Можно ли сделать без object-fit?
Ответы
Ответ 1
Свойство object-fit прекрасно работает. Скорее всего вы неправильно его применяли
или смотрели в IE. Ниже привожу пример правильного использования свойства:
#bg{
height: 100vh;
width: 100%;
position: relative;
}
#bg img{
object-fit: cover;
height: 100%;
width: 100%;
}
Как открыть из Android приложения Яндекс.Диск Intent'ом?
Ответы
Ответ 1
Нужно просто создать Intent для запуска приложения на основе имени пакета.
Проверка на null обязательна (вдруг приложение не установлено).
Intent intent = getPackageManager().getLaunchIntentForPackage("ru.yandex.disk");
if (intent != null) {
intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
startActivity(intent);
}
Встретился с проблемой: когда у всех дочерних элементов указал float, то у родителя
потерялась высота, т.е. ушла в 0px.
Пример:
.parent {
width: 162px;
border: 2px solid red;
}
.children {
width: 50px;
height: 50px;
border: 2px solid blue;
float: left;
}
Почему родитель перестал учитывать высоту дочерних элементов? Как исправить?
Ответы
Ответ 1
Родитель перестал учитывать высоту дочерних элеметов потом, что элементы с float
создают новый контекст наложения и выпадают из потока элементов.
Есть четыре варианта решения вашего вопроса:
Если у всех дочерних элементов фиксированная высота, то и у родителя указываем фиксированную
высоту:
.parent {
width: 162px;
border: 2px solid red;
/* Фиксированная высота */
height: 54px;
}
.children {
width: 50px;
height: 50px;
border: 2px solid blue;
float: left;
}
Самый распространённый вариант ― clearfix. Создаём отдельный элемент или псевдоэлемент
со стилем cler: both;:
.parent {
width: 162px;
border: 2px solid red;
}
.children {
width: 50px;
height: 50px;
border: 2px solid blue;
float: left;
}
/* Clearfix */
.clearfix {
display: table;
clear: both;
visibility: hidden;
}
.parent.b:after {
content: '';
display: table;
clear: both;
visibility: hidden;
}
С элементом:
С псевдоэлементом:
Один из самых интересных, но недейственных вариантов ― указать родителю float и тогда
он тоже выпадет из общего потока и "соединится" с дочерними элементами:
.parent {
width: 162px;
border: 2px solid red;
/* Float */
float: left;
}
.children {
width: 50px;
height: 50px;
border: 2px solid blue;
float: left;
}
И последний вариант ― указать родителю overflow. Overflow создаёт отдельный контекст
форматирования для выбранного элемента, тем самым локализуя действие свойства float
внутри элемента к которому применён. Подробнее...
.parent {
width: 162px;
border: 2px solid red;
/* Overflow */
overflow: auto;
/* Можно устанавливать следущие значения:
auto, hidden, overlay, scroll
*/
}
.children {
width: 50px;
height: 50px;
border: 2px solid blue;
float: left;
}
У меня есть HTML код, в нём есть div, который имеет ширину в 100%. Он содержит несколько
элементов. При изменении размера окна внутренние элементы могут быть перегруппированы,
и размер div может измениться.
Можно ли подключить событие изменения размера div? И как это сделать?
В настоящее время я привязываю функцию обратного вызова к событию resize jQuery на
нужный div, однако результат не выводится, см. Ниже:
Ответы
Ответ 1
Существует очень эффективный метод определения того, был ли изменен размер элемента.
http://marcj.github.io/css-element-queries/
Код библиотеки:
/**
* Copyright Marc J. Schmidt. See the LICENSE file at the top-level
* directory of this distribution and at
* https://github.com/marcj/css-element-queries/blob/master/LICENSE.
*/
;
(function(root, factory) {
if (typeof define === "function" && define.amd) {
define(factory);
} else if (typeof exports === "object") {
module.exports = factory();
} else {
root.ResizeSensor = factory();
}
}(this, function() {
// Make sure it does not throw in a SSR (Server Side Rendering) situation
if (typeof window === "undefined") {
return null;
}
// Only used for the dirty checking, so the event callback count is limited to
max 1 call per fps per sensor.
// In combination with the event based resize sensor this saves cpu time, because
the sensor is too fast and
// would generate too many unnecessary events.
var requestAnimationFrame = window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
function(fn) {
return window.setTimeout(fn, 20);
};
/**
* Iterate over each of the provided element(s).
*
* @param {HTMLElement|HTMLElement[]} elements
* @param {Function} callback
*/
function forEachElement(elements, callback) {
var elementsType = Object.prototype.toString.call(elements);
var isCollectionTyped = ('[object Array]' === elementsType ||
('[object NodeList]' === elementsType) ||
('[object HTMLCollection]' === elementsType) ||
('[object Object]' === elementsType) ||
('undefined' !== typeof jQuery && elements instanceof jQuery) //jquery
||
('undefined' !== typeof Elements && elements instanceof Elements) //mootools
);
var i = 0,
j = elements.length;
if (isCollectionTyped) {
for (; i < j; i++) {
callback(elements[i]);
}
} else {
callback(elements);
}
}
/**
* Class for dimension change detection.
*
* @param {Element|Element[]|Elements|jQuery} element
* @param {Function} callback
*
* @constructor
*/
var ResizeSensor = function(element, callback) {
/**
*
* @constructor
*/
function EventQueue() {
var q = [];
this.add = function(ev) {
q.push(ev);
};
var i, j;
this.call = function() {
for (i = 0, j = q.length; i < j; i++) {
q[i].call();
}
};
this.remove = function(ev) {
var newQueue = [];
for (i = 0, j = q.length; i < j; i++) {
if (q[i] !== ev) newQueue.push(q[i]);
}
q = newQueue;
}
this.length = function() {
return q.length;
}
}
/**
*
* @param {HTMLElement} element
* @param {Function} resized
*/
function attachResizeEvent(element, resized) {
if (!element) return;
if (element.resizedAttached) {
element.resizedAttached.add(resized);
return;
}
element.resizedAttached = new EventQueue();
element.resizedAttached.add(resized);
element.resizeSensor = document.createElement('div');
element.resizeSensor.className = 'resize-sensor';
var style = 'position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow:
hidden; z-index: -1; visibility: hidden;';
var styleChild = 'position: absolute; left: 0; top: 0; transition: 0s;';
element.resizeSensor.style.cssText = style;
element.resizeSensor.innerHTML =
'
' +
'' +
'
' +
'
' +
'' +
'
';
element.appendChild(element.resizeSensor);
if (element.resizeSensor.offsetParent !== element) {
element.style.position = 'relative';
}
var expand = element.resizeSensor.childNodes[0];
var expandChild = expand.childNodes[0];
var shrink = element.resizeSensor.childNodes[1];
var dirty, rafId, newWidth, newHeight;
var lastWidth = element.offsetWidth;
var lastHeight = element.offsetHeight;
var reset = function() {
expandChild.style.width = '100000px';
expandChild.style.height = '100000px';
expand.scrollLeft = 100000;
expand.scrollTop = 100000;
shrink.scrollLeft = 100000;
shrink.scrollTop = 100000;
};
reset();
var onResized = function() {
rafId = 0;
if (!dirty) return;
lastWidth = newWidth;
lastHeight = newHeight;
if (element.resizedAttached) {
element.resizedAttached.call();
}
};
var onScroll = function() {
newWidth = element.offsetWidth;
newHeight = element.offsetHeight;
dirty = newWidth != lastWidth || newHeight != lastHeight;
if (dirty && !rafId) {
rafId = requestAnimationFrame(onResized);
}
reset();
};
var addEvent = function(el, name, cb) {
if (el.attachEvent) {
el.attachEvent('on' + name, cb);
} else {
el.addEventListener(name, cb);
}
};
addEvent(expand, 'scroll', onScroll);
addEvent(shrink, 'scroll', onScroll);
}
forEachElement(element, function(elem) {
attachResizeEvent(elem, callback);
});
this.detach = function(ev) {
ResizeSensor.detach(element, ev);
};
};
ResizeSensor.detach = function(element, ev) {
forEachElement(element, function(elem) {
if (!elem) return
if (elem.resizedAttached && typeof ev == "function") {
elem.resizedAttached.remove(ev);
if (elem.resizedAttached.length()) return;
}
if (elem.resizeSensor) {
if (elem.contains(elem.resizeSensor)) {
elem.removeChild(elem.resizeSensor);
}
delete elem.resizeSensor;
delete elem.resizedAttached;
}
});
};
return ResizeSensor;
}));
Эта библиотека имеет класс ResizeSensor, который можно использовать для определения
размера.
Он основан на событиях, поэтому он чертовски быстро определяет и не нагружает процессор.
Пример:
new ResizeSensor(jQuery('#divId'), function(){
console.log('content dimension changed');
});
Пожалуйста, не используйте плагин resize для jQuery, поскольку он использует цикл
setTimeout() для проверки изменений.
Ответ 2
Самое простое решение:
var blockWidth = $('.block').outerWidth();
$(window).resize(function() {
if (blockWidth != $('.block').outerWidth()) {
console.log('resized')
}
});
.block {
max-width:300px;
height:100px;
background:#000;
}
Конкретно на вашем примере:
var blockWidth = $('#test_div').outerWidth();
$(window).resize(function() {
if (blockWidth != $('#test_div').outerWidth()) {
console.log('resized')
}
});
.block {
max-width: 300px;
height: 100px;
background: #000;
}
