Ага все вижу, вот думаю много ли браузеров поддерживает данный скрипт загрузки или мало, может стоит другой попробовать, который больше всего поддерживает.
Дикий пионер: Лично я на на поддержку всеми устройствами не рассчитывал, но скорее всего поддерживает достаточно большой процент, чтобы использовать это решение.
Да было бы хорошо, а вот как проверить если нет нетбука и планшета и т.д
Вопрос такой, как сделать так, что бы не приходилось нажимать закрыть авторизацию, а просто мышкой щелкнул где ни будь и он закрыл, что бы и кнопка работала и мышкой если щелкнул, а как еще сделать что бы сайт затемнялся когда раскрываешь форму.
Ага все вижу, вот думаю много ли браузеров поддерживает данный скрипт загрузки или мало, может стоит другой попробовать, который больше всего поддерживает.
ну так это в брайзерах, а айпада чет нет там.
http://caniuse.com/#feat=fileapi например так
а как там проверять то ?
я там ссылку ввел и что то ничего !
Лично я на на поддержку всеми устройствами не рассчитывал, но скорее всего поддерживает достаточно большой процент, чтобы использовать это решение.
Да было бы хорошо, а вот как проверить если нет нетбука и планшета и т.д
Вы видите чем у вас отличается код input.addzagryzkafoto от input.addzagryzkafoto:hover?
Конечно будет мерцать.
А именно отличие в этом:
да вижу, при наведении мышкой он меняет, но он как то плохо срабатывает ! мышка дергается когда ведешь по кнопке.
если див делаю то норма, тут дело не в этом, тут в инпуте этом ! можно ли как то кнопку переделать что бы она работала но была не инпут.
---------- Добавлено 09.06.2014 в 22:02 ----------
Загрузчик фото на фаремвор кохане.
Кусок кода загручика, где стили то же ! может тут что не так.
/**
* Creates invisible file input above the button
*/
_createInput : function(){
var self = this;
var input = d.createElement("input");
input.setAttribute('type', 'file');
input.setAttribute('name', this._settings.name);
var styles = {
'position' : 'absolute'
,'width': '220px'
,'height': '30px'
,'fontSize': '14px'
,'opacity': 0
,'cursor': 'pointer'
,'display' : 'none'
,'zIndex' : 2147483583 //Max zIndex supported by Opera 9.0-9.2x
// Strange, I expected 2147483647
};
for (var i in styles){
input.style = styles;
}
А какой код css у id="upload" и class="addzagryzkafoto"?
Я тут на одном сайте увидел что так сделано как то.
<div class="ibtn ibtn-blue" onclick="$('#file-of-image').click();" id="pc-upload-btn">Загрузить с компьютера </div>
Вот и подумал что импут может то же как то так переделать можно.
нашел стиль затемнения всего кроме самой выдвижной формы.
.mask {
position: fixed;
top: 0;
left: 0;
z-index: 9990;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
}
как правильно теперь сделать, что бы она работала ?
сам код выше html
а вот css
.menutop {
text-transform: uppercase;
position: relative;
display: block;
font-size: 14px;
font-weight: bold;
background: #F89DC2;
text-align: center;
width: 340px;
height: 40px;
line-height: 40px;
color: #000;
text-decoration: none;
border-left: solid 3px #fff;
border-right: solid 3px #fff;
border-bottom: solid 3px #fff;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
border-bottom-right-radius: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
border-bottom-left-radius: 10px;
margin-bottom: 15px;
-webkit-box-shadow: 0px 5px 9px 0px rgba(50, 50, 50, 0.32);
-moz-box-shadow: 0px 5px 9px 0px rgba(50, 50, 50, 0.32);
box-shadow: 0px 5px 9px 0px rgba(50, 50, 50, 0.32);
-webkit-transition: background 0.8s ease;
-moz-transition: background 0.8s ease;
-o-transition: background 0.8s ease;
-khtml-transition: background 0.8s ease;
transition: background 0.8s ease;
}
.menutop a{
color: #000;
}
.menutop:hover{
background: #D23771;
color: #fff;
border-left: solid 3px #fff;
border-right: solid 3px #fff;
border-bottom: solid 3px #fff;
-webkit-transition: background 0.8s ease;
-moz-transition: background 0.8s ease;
-o-transition: background 0.8s ease;
-khtml-transition: background 0.8s ease;
transition: background 0.8s ease;
}
#skryt {
margin-top: -15px;
background: #FFCCE2;
height: 300px;
width:346px;
-webkit-box-shadow: 0px 5px 9px 0px rgba(50, 50, 50, 0.32);
-moz-box-shadow: 0px 5px 9px 0px rgba(50, 50, 50, 0.32);
box-shadow: 0px 5px 9px 0px rgba(50, 50, 50, 0.32);
border-bottom: solid 3px #D23771;
}
.menutophover {
margin-top: 227px;
text-transform: uppercase;
position: relative;
display: block;
font-size: 14px;
padding-bottom:3px;
font-weight: bold;
background: #D23771;
text-align: center;
width: 340px;
height: 40px;
line-height: 40px;
color: #fff;
text-decoration: none;
border-left: solid 3px #fff;
border-right: solid 3px #fff;
border-bottom: solid 3px #fff;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
border-bottom-right-radius: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
border-bottom-left-radius: 10px;
margin-bottom: 15px;
-webkit-box-shadow: 0px 5px 9px 0px rgba(50, 50, 50, 0.32);
-moz-box-shadow: 0px 5px 9px 0px rgba(50, 50, 50, 0.32);
box-shadow: 0px 5px 9px 0px rgba(50, 50, 50, 0.32);
-webkit-transition: background 0.8s ease;
-moz-transition: background 0.8s ease;
-o-transition: background 0.8s ease;
-khtml-transition: background 0.8s ease;
transition: background 0.8s ease;
}
.menutophover a{
color: #fff;
}
.menutophover:hover{
background: #fff;
color: #000;
border-left: solid 3px #fff;
border-right: solid 3px #fff;
border-bottom: solid 3px #fff;
-webkit-transition: background 0.8s ease;
-moz-transition: background 0.8s ease;
-o-transition: background 0.8s ease;
-khtml-transition: background 0.8s ease;
transition: background 0.8s ease;
}
Реализовал немного по другому, нашел css код без всяких js
HTML
<div id="pokazat">
<a href="#" class="menutop" onClick="document.getElementById('pokazat').style.display='none';document.getElementById('skryt').style.display='';return false;">Авторизация</a></div>
<div id="skryt" style="display:none">
<p style="padding:20px">Тут пишем текст, который нужно показывать и скрывать</p>
<a href="#" class="menutophover" onClick="document.getElementById('skryt').style.display='none';document.getElementById('pokazat').style.display='';return false;">Закрыть авторизацию</a>
</div>
Вопрос такой, как сделать так, что бы не приходилось нажимать закрыть авторизацию, а просто мышкой щелкнул где ни будь и он закрыл, что бы и кнопка работала и мышкой если щелкнул, а как еще сделать что бы сайт затемнялся когда раскрываешь форму.
И чего?
Вы написали - "помогите отцентрировать".
Какие вопросы?
Если чот еще там подразумевалось прочесть телепатически - это уже сверхурочные ))
Направление задано, дальше уже сами.
Щас все ок, работает _)))
Я код там по ссылке взял ! подправил чуть и все ока.
1. Перед <ul class="pagination"> поставьте <center> и в конце </center>
2. Поиграйтесь с .pagination
я делал такое ) не сработало.
---------- Добавлено 30.05.2014 в 01:00 ----------
Ну да, естественно )) Забыл упомянуть 🍻
вся погинация по центру )
и там друг на друге ) страницы, ну переходы, все в куче.
---------- Добавлено 30.05.2014 в 01:06 ----------
L3n1n, ппц, чем такую хрень советовать лучше молчать.
Для li задайте display: inline-block;
для .pagination - text-align: center;
Будет вот так - http://codepen.io/bazhenov/pen/GwluE
Да, спасибо, щас по центру !
что бы по центру вышло, пришлось так сделать width: 1005px;