<script type="text/javascript">
$(document).ready(
function() {
//назначаем обработчик нажатия на Ctrl (код 17)или Alt (код 18) + Enter (код 13)
var isCtrl = false;
$(document).keyup(function (e) {
if(e.which == 18) isCtrl=false;
}).keydown(function (e) {
if(e.which == 18) isCtrl=true;
if(e.which == 13 && isCtrl == true) {
//...ищем выделенный текст...
if (window.getSelection) {
var selectedText = window.getSelection();
}
else if (document.getSelection) {
var selectedText = document.getSelection();
}
else if (document.selection) {
var selectedText = document.selection.createRange().text;
}
//...и отправляем запрос в форму
document.f1.text.value = selectedText;
document.f1.url.value = window.location.href;
$("#f1orm").css('display','block');
}
});
});
</script>
<style>
#f1orm {display:none;background-color:#E9F5FC; border:1px solid #7F9DB9;width:450px;padding:15px;position:absolute;margin:0 auto; top:40%;}
#f1orm label {display:block;float:left;width:130px;color:#153290;text-align:right;padding-right:15px;}
#f1orm input, #f1orm textarea{width:250px;margin-bottom:20px;border:1px solid #7F9DB9;}
#f1orm br {clear:left;}
#say {width:100px !important;margin-left:295px;}
</style>
<form action="" method="post" name="f1" id="f1orm">
<label for="url">Адрес страницы:</label><input name="url" type="text" id="url" /><br>
<label for="text">Очепятка в тексте:</label><textarea name="text" id="text" rows="5" ></textarea><br>
<label for="pravka">Как нужно:</label><textarea name="pravka" id="pravka" rows="5"></textarea><br>
<label for="milo">Ваш E-Mail:</label><input name="milo" type="text" id="milo" /><br>
<input name="say" type="submit" value="Сообщить" id="say" />
</form>
<div class="clear"></div>
<style>
div#overlay {background-color:#333333;display:block;height:100%;left:0;position:fixed;top:0;width:100%;z-index:630;opacity: 0.8; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=80)";
-width: expression(document.body.clientWidth + "px");
-height: expression(document.body.clientHeight + "px");
-position:absolute;}
#example_ny{position:absolute;width:500px;height:390px;color:#000000;z-index:631; font:12px italic;margin-left:-260px;left:50%;top:75px;padding:10px;background:#ffffff url(/upload/medialibrary/bae/ng11.jpg) 10px 10px no-repeat;}
</style>
<script type="text/javascript">
function divout() {
document.getElementById('example_ny').style.display='none';
document.getElementById('overlay').style.display='none';
};
setTimeout(divout, 4000);
</script>
<?if(empty($_SESSION['NEW_YEAR'])):?>
<div id="overlay"></div>
<div id="example_ny"></div>
<?endif;
$_SESSION['NEW_YEAR'] = 'po';
?>
*:first-child+html ваш_элемент {...} /* только для ie7 */
*+html ваш_элемент {...} /* только для ie7 */
div {
background: red; /* для нормальных браузеров */
//background: green; /* для всех ie */
-background: blue; /* для ie6 */
}
* html div {
background: blue; /* ещё один способ для ie6 */
}
Альтернатива
Кроме вышеупомянутого способа существует ещё один способ, позволяющий подключить отдельный стилевой файл, не воспринимаемый определенной версией любимого браузера — условные комментарии.
* для всех версий ie:
<![if !IE]>
<link rel="stylesheet" type="text/css" href="not-ie.css" />
<![endif]>
* для версий 5, 6 и 7 соответственно:
<![if !IE 5]>
<link rel="stylesheet" type="text/css" href="not-ie5.css" />
<![endif]>
<![if !IE 6]>
<link rel="stylesheet" type="text/css" href="not-ie6.css" />
<![endif]>
<![if !IE 7]>
<link rel="stylesheet" type="text/css" href="not-ie7.css" />
<![endif]>
Любопытно также, что таким способом можно скрывать HTML код от определенной или всех версий ie. Например, надпись «HTML-код» будет отображаться во всех браузерах кроме ie6, если поместить её в if-ie следующим образом:
<![if !IE 6]>
<p>HTML-код</p>
<![endif]>
В довесок
Так же, как и для любимого IE, существуют специальные хаки(трюки), позволяющие показывать стили только браузерам FireFox и Opera.
Css хаки для FireFox:
html:root ваш_элемент {...} /* этот работает ещё и для Safari */
или
@-moz-document url-prefix() {
ваш_элемент {...}
}
или
ваш_элемент, x:-moz-any-link {...}
Css хаки для Opera:
html:first-child ваш_элемент {...}
или
@media all and (min-width: 0) {
ваш_элемент {...}
}
<style type="text/css">
.vertical { overflow:hidden; font-size:12px; float:left; margin-right:20px; line-height:30px; position:relative; white-space:nowrap; width:30px; height:200px; border:1px solid #999; }
.vertical object { width:30px; height:200px; display:block; }
.vertical span { display:none; }
.vertical3, .vertical3 object, .vertical4, .vertical4 object { width:200px; }
</style>
<!--[if IE]>
<style type="text/css">
.vertical span { filter:flipv() fliph(); writing-mode:tb-rl; display:block; position:absolute; left:0; bottom:0; height:200px; width:30px; }
.vertical object { display:none; }
.vertical2 span { filter:none; }
.vertical3 span { top:-8px; left:-31px; width:200px; writing-mode:lr-tb; filter:progid:DXImageTransform.Microsoft.Matrix(M11='0.985', M12='-0.174', M21='0.174', M22='0.985', SizingMethod="auto expand"); }
.vertical4 span { top:-28px; left:-6px; width:300px; writing-mode:lr-tb; filter:progid:DXImageTransform.Microsoft.Matrix(M11='0.707', M12='0.707', M21='-0.707', M22='0.707', SizingMethod="auto expand"); }
</style>
<![endif]-->
<div class="vertical"><span>вертикальный текст</span>
<object type="image/svg+xml" data="data:image/svg+xml; charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg'><text x='-200' y='18' font-family='Arial' font-size='12' fill='#000000' transform='rotate(-90)' text-rendering='optimizeSpeed'>вертикальный текст</text></svg>">
</object>
</div>
<div class="vertical vertical2"> <span>вертикальный текст</span>
<object type="image/svg+xml" data="data:image/svg+xml; charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg'><text x='0' y='-11' font-family='Arial' font-size='12' fill='#000000' transform='rotate(90)' text-rendering='optimizeSpeed'>вертикальный текст</text></svg>">
</object>
</div>
<div class="vertical vertical3"><span>текст повернутый на 10 градусов</span>
<object type="image/svg+xml" data="data:image/svg+xml; charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg'><text x='2' y='12' font-family='Arial' font-size='12' fill='#000000' transform='rotate(10)' text-rendering='optimizeSpeed'>текст повернутый на 10 градусов</text></svg>">
</object>
</div>
<div class="vertical vertical4"><span>текст повернутый на -45 град., достает до края)</span>
<object type="image/svg+xml" data="data:image/svg+xml; charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg'><text x='-135' y='145' font-family='Arial' font-size='12' fill='#000000' transform='rotate(-45)' text-rendering='optimizeSpeed'>текст повернутый на -45 град., достает до края)</text></svg>">
</object>
</div>