<MyRusakov.ru />

Создание Интернет-магазина на PHP и MySQL

Создание Интернет-магазина на PHP и MySQL

Видеокурс "Создание Интернет-магазина на PHP и MySQL" - это уникальный курс по созданию Интернет-магазина с нуля. Особенностью данного курса является то, что создание идёт с самого начала, то есть от идеи. Далее создаётся дизайн всех необходимых страниц, после делается их вёрстка. Затем создаётся движок на PHP и MySQL, после делается Admin-панель и, наконец, готовый сайт размещается в Интернете.

Адрес созданного в этом курсе сайта: http://storedvd.ru

Всё создание сайта будет происходить на Ваших глазах, поэтому Вы легко сможете повторить весь процесс создания сложного функционального сайта уже при разработке своего портала.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Форум сайта MyRusakov.ru

Кнопка наверх без jQuery
26.11.2013 17:24:00 Кнопка наверх без jQuery Сообщение #1
ilyadenisovid

ilyadenisovid

Мастер

Мастер

Дата регистрации:
28.01.2013 18:32:29

Сообщений: 213

Здравствуйте! Делаю кнопку 'наверх' на сайт, нужно сделать без jQuery, но с JS. JS нужен для того, чтобы кнопка появлялась только если страница прокручена вниз. Делдаю так, но не выходит.

<script type = "text/javascript">
var top = document.documentElement.scrollTop;
if (top <> '0') document.write('<div id = "up"><a href = "#" title = "Наверх">↑ Наверх</a></div>');
</script>
Профиль Ответить
26.11.2013 18:53:13 Кнопка наверх без jQuery Сообщение #2
tikkiwiki

tikkiwiki

Модератор

Модератор

Дата регистрации:
15.11.2013 15:36:59

Сообщений: 194

Здравствуйте ilyadenisovid. Есть решение:


HTML:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="scriptjava.js"></script>
<title>Стрелка вверх вниз</title>
</head>

<body>
<script type="text/javascript">
(function () {
var page_up_div;
var page_up_key;
var page_up_nokey;
var page_up_div_create = function () {
page_up_div = $$i({
create:'div',
attribute: {},
insert:$$().body
}).$$('position','fixed').$$('top',($$s.clientsize().h-50)+'px').$$('left',($$s.scrollpos().l+$$s.clientsize().w-67)+'px').$$('zIndex','5').$$('width','14px').$$('height','7px').$$('backgroundImage','url(updown.png)').$$('backgroundPosition','0 0').$$('backgroundRepeat','no-repeat').$$('cursor','pointer');
}

var page_up_timer = function () {
if(page_up_nokey) {
if($$s.scrollpos().t>=0 && $$s.scrollpos().t<=300) {
$$(page_up_div).$$('visibility','hidden');
}
else if($$s.scrollpos().t>300 && $$s.scrollpos().t<=1000) {
page_up_key=false;
$$(page_up_div).$$('visibility','visible').$$('top','50px').$$('left',($$s.scrollpos().l+$$s.clientsize().w-67)+'px').$$('backgroundPosition','0 -7px');
}
else if($$s.scrollpos().t>1000) {
page_up_key=true;
$$(page_up_div).$$('visibility','visible').$$('top',($$s.clientsize().h-50)+'px').$$('left',($$s.scrollpos().l+$$s.clientsize().w-67)+'px').$$('backgroundPosition','0 0');
}
}
}

var pos_top,z;
var page_up_to_up_go = function () {
if(page_up_key) {
pos_top=pos_top-z;
z=z+10;
if(pos_top<0) {
page_up_nokey=true;
pos_top=0;
}
window.scrollTo(0, pos_top);
if(pos_top>0) {
setTimeout(function() { page_up_to_up_go(); },10);
}
}
else {
pos_top=pos_top+z;
z=z+10;
if(pos_top>=($$s.scrollsize().h-$$s.clientsize().h)) {
page_up_nokey=true;
pos_top=($$s.scrollsize().h-$$s.clientsize().h);
}
window.scrollTo(0, pos_top);
if(pos_top<($$s.scrollsize().h-$$s.clientsize().h)) {
setTimeout(function() { page_up_to_up_go(); },10);
}
}
}

var page_up_to_up = function (event) {
page_up_nokey=false;
z=10;
pos_top=$$s.scrollpos().t;
setTimeout(function() { page_up_to_up_go(); },10);
}

$$r(function() {
if(($$s.scrollsize().h-$$s.clientsize().h)>1000) {
page_up_nokey=true;
page_up_div_create();
$$e.add($$(page_up_div),'click',page_up_to_up);
page_up_timer();
setInterval(function() { page_up_timer(); },100);
}
});
})();
</script>
Немного прокрути скроллинг вниз, справа появится стрелка.<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
1<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
2<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
3<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
4<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
5<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
6<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
7<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
8<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
9<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
10<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
11<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
12<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
13<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
14<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
15<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
16<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
17<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
18<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
19<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
20<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
21<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
22<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
23<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
24<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
25<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
26<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
27<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
28<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
29<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
30<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</body>
</html>


scriptjava.js



/**
* scriptjava.js
* save time
* scriptjava.ru
* scriptjava.net
* scriptjava.org
*/

var _$$={
version:20120201,
$:function () {
var obj;
switch(arguments.length) {
case 0:
return document;
break;
case 2:
_$$.$(arguments[0]).innerHTML=arguments[1];
break;
case 3:
_$$.$(arguments[0]).style[arguments[1]]=arguments[2];
break;
}
if(arguments.length>0) {
if(typeof arguments[0] == 'string') {
obj=_$$.$().getElementById(arguments[0]);
}
else {
obj=arguments[0];
}
}
obj.$$ = function() {
switch(arguments.length) {
case 0:
this.$$ = function () {
return _$$.$.apply(null,arguments);
}
break;
case 1:
obj.innerHTML=arguments[0];
break;
case 2:
obj.style[arguments[0]] = arguments[1];
break;
case 3:

break;
}
return obj;
};
return obj;
},
$a:function (arg) {
arg = arg || {};

var default_arg = {
type:'get',
url:'',
data:{},
response:'text',
header:{
'Content-Type':'application/x-www-form-urlencoded; charset=windows-1251',
'Referer':location.href
},
async:true,
username:'',
password:'',
errrep:true,
error:function(num) {
var arr=['Your browser does not support Ajax',
'Request failed',
'Address does not exist',
'The waiting time left'];

alert(arr[num]);
},
status:function (number) {

},
endstatus:function (number) {

},
success:function (data) {

},
timeout:5000
}

for(var index in default_arg) {
if(typeof arg[index] == "undefined" arg[index] = default_arg[index];
}


var type = arg['type'];
var url = arg['url'];
var data = arg['data'];
var response = arg['response'];
var header = arg['header'];
var async = arg['async'];
var username = arg['username'];
var password = arg['password'];
var errrep = arg['errrep'];
var error = arg['error'];
var status = arg['status'];
var endstatus = arg['endstatus'];
var success = arg['success'];
var timeout = arg['timeout'];


var obj = function () {
var req = null;
if (window.XMLHttpRequest) {
try {
req = new XMLHttpRequest();
}
catch (e){
}
}
else if (window.ActiveXObject) {
try {
req = new ActiveXObject('Msxml2.XMLHTTP');
}
catch (e) {
try {
req = new ActiveXObject('Microsoft.XMLHTTP');
}
catch (e) {
}
}
}
return req;
}


var encurl=function (d) {
var query = [];
if (d instanceof Object) {
for (var k in d) {
query.push(encodeURIComponent(k) + '=' + encodeURIComponent(d[k]));
}
return query.join('&');
}
else {
return encodeURIComponent(d);
}
}


var parsehead = function(headertxt) {
var headers = {};
var ls = /^\s*/;
var ts = /\s*$/;
var lines = headertxt.split("\n";
for(var i = 0; i < lines.length; i++) {
var line = lines[i];
if (line.length == 0) continue;
var pos = line.indexOf(':');
var name = line.substring(0, pos).replace(ls, "".replace(ts, "";
var value = line.substring(pos+1).replace(ls, "".replace(ts, "";
headers[name] = value;
}
return headers;
}


var req=obj();

if(req!==null) {

var fullurl=url+'?'+encurl(data);

if(type=='get') {
(username=='' && password=='') ? req.open("GET", fullurl, async) : req.open("GET", fullurl, async, username, password);
}
else if(type=='post') {
(username=='' && password=='') ? req.open("POST", url, async) : req.open("POST", url, async, username, password);
}
else if(type=='head') {
(username=='' && password=='') ? req.open("HEAD", fullurl, async) : req.open("HEAD", fullurl, async, username, password);
}

if (header instanceof Object) {
for(var key in header) {
req.setRequestHeader(key,header[key]);
}
}


if(!async) {

if(type=='get' || type=='head') {
req.send(null);
}
else if(type=='post') {
req.send(encurl(data));
}


endstatus(req.status);

if(req.status == 200) {

if(type=='get' || type=='post') {
if(response=='text') {
success(req.responseText);
}
else if(response=='xml') {
success(req.responseXML);
}
}
else if(type=='head') {
success(parsehead(req.getAllResponseHeaders()));
}

}
else if(req.status == 404) {
if(errrep) {error(2);}
}
else {
if(errrep) {error(1);}
}


}
else {

req.onreadystatechange = function () {

status(req.readyState);

if(req.readyState == 4) {

if(reqtime) {
clearTimeout(reqtime);
}

endstatus(req.status);

if(req.status == 200) {

if(type=='get' || type=='post') {
if(response=='text') {
success(req.responseText);
}
else if(response=='xml') {
success(req.responseXML);
}
}
else if(type=='head') {
success(parsehead(req.getAllResponseHeaders()));
}

}
else if(req.status == 404) {
if(errrep) {error(2);}
}
else {
if(errrep) {error(1);}
}
}

}

if(type=='get' || type=='head') {
req.send(null);
}
else if(type=='post') {
req.send(encurl(data));
}


if(timeout>0) {
var reqtime = setTimeout(function () { if(req.readyState!=4) { req.abort(); if(errrep) {error(3);} } }, timeout);
}

}


}
else {
if(errrep) {error(0);}
}

},
$c:{
set: function(cookie_name, cookie_value, cookie_expires, cookie_path, cookie_domain, cookie_secure) {
if(cookie_name!==undefined) {
cookie_expires=cookie_expires || 0;
var expire_date = new Date;
expire_date.setTime(expire_date.getTime() + (cookie_expires*1000));
_$$.$().cookie = cookie_name + "=" + encodeURIComponent(cookie_value)+'; ' +
((cookie_expires === undefined) ? '' : 'expires=' + expire_date.toGMTString()+'; ') +
((cookie_path === undefined) ? 'path=/;' : 'path='+cookie_path+'; ') +
((cookie_domain === undefined) ? '' : 'domain='+cookie_domain+'; ') +
((cookie_secure === true) ? 'secure; ' : '');
}
},
get: function(cookie_name) {
var cookie = _$$.$().cookie, length = cookie.length;
if(length) {
var cookie_start = cookie.indexOf(cookie_name + '=');
if(cookie_start != -1) {
var cookie_end = cookie.indexOf(';', cookie_start);
if(cookie_end == -1) {
cookie_end = length;
}
cookie_start += cookie_name.length + 1;
return decodeURIComponent(cookie.substring(cookie_start, cookie_end));
}
}
},
erase: function(cookie_name) {
this.set(cookie_name, '', -1);
},
test: function() {
this.set('test_cookie', 'test', 10);
var work = (this.get('test_cookie') === 'test') ? true : false;
this.erase('test_cookie');
return work;
}
},
$e:{
add:function(elem, type, handler) {
if(elem.event_list==undefined) elem.event_list = {};
if(elem.event_list[type]==undefined) {
elem.event_list[type] = [];
var func = function(event) {
var event = event||window.event;
var list = elem.event_list[type];
for(var i in list) {
list[i](event);
}
}
if(elem.addEventListener) {
elem.addEventListener(type,func,false);
}
else if(elem.attachEvent) {
elem.attachEvent('on'+type,func);
}
else {
elem['on'+type] = func;
}
}
var list = elem.event_list[type];
var exist = false;
for(var i in list) {
if(list[i]==handler) exist = true;
}
if(!exist) {
elem.event_list[type].push(handler);
}
},
remove:function(elem, type, handler) {
if(elem.event_list==undefined) return false;
if(elem.event_list[type]==undefined) return false;
var list = elem.event_list[type];
for(var i in list) {
if(list[i]==handler) {
list = list.splice(i,1);
return true;
}
}
return false;
}
},
$f:function (arg) {
arg = arg || {};
var default_arg = {
formid:'',
url:'',
onstart:function () {

},
onsend:function () {

}
}

for(var index in default_arg) {
if(typeof arg[index] == "undefined" arg[index] = default_arg[index];
}

var formid = arg['formid'];
var url = arg['url'];
var onsend = arg['onsend'];
var onstart = arg['onstart'];

var id='f' + _$$.$s.randnum(0,1000000);

var div=_$$.$i({
create:'div',
attribute: {},
insert:_$$.$().body
});


div.innerHTML = '<iframe style="width:250px;height:200px;" src="about:blank" id="'+id+'" name="'+id+'" onload="if(this.onsendcomplete) {if(this.contentDocument) {var d = this.contentDocument;}else if(this.contentWindow) {var d = this.contentWindow.document;}else {var d = window.frames[this.id].document;}if(d.location.href != \'about:blank\') {this.onsendcomplete();}}"></iframe>';
div.style.display='none';

_$$.$(id).onsendcomplete = function() { onsend(); };

_$$.$(formid).setAttribute('target', id);
_$$.$(formid).setAttribute('action', url);
_$$.$(formid).submit();
onstart();

return div;
},
$i:function (arg) {
arg = arg || {};
var default_arg = {
create:'script',
attribute: {
'type':'text/javascript'
},
insert:_$$.$().body,
onready:function () {

}
}

for(var index in default_arg) {
if(typeof arg[index] == "undefined" arg[index] = default_arg[index];
}

var create = arg['create'];
var attribute = arg['attribute'];
var insert = arg['insert'];
var onready = arg['onready'];

var s = _$$.$().createElement(create);

for(var key in attribute) {
s.setAttribute(key,attribute[key]);
}

if(create=='script' && (typeof attribute.src != "undefined") {
if (s.readyState) {
s.onreadystatechange = function() {
if(s.readyState == "loaded" || s.readyState == "complete" {
s.onreadystatechange = null;
onready();
}
}
}
else {
s.onload = function() {
onready();
}
}
}

insert.appendChild(s);

if(create=='script' && (typeof attribute.src == "undefined") {
s.$$=function () {
s.text=arguments[0];
}
}
else if(create=='style') {
s.$$=function () {
if(s.styleSheet) {
s.styleSheet.cssText = _$$.$().createTextNode(arguments[0]).nodeValue;
}
else {
s.appendChild(_$$.$().createTextNode(arguments[0]));
}
}
}
else {
return _$$.$(s);
}

return s;
},
$r:{
rl:[],
or:function (handler) {

if (!_$$.$r.rl.length) {
_$$.$r.br(function() {
for(var i=0; i<_$$.$r.rl.length; i++) {
_$$.$r.rl[i]();
}
});
}

_$$.$r.rl.push(handler);
},
br:function (handler) {

var called = false;

var ready = function () {
if (called) return;
called = true;
handler();
}

if (document.addEventListener) {
document.addEventListener("DOMContentLoaded", function(){
document.removeEventListener( "DOMContentLoaded", arguments.callee, false);
ready();}, false);
}
else if(document.attachEvent) {
if(document.documentElement.doScroll && window == window.top) {
var tryScroll = function (){
if (called) {
return;
}
try {
document.documentElement.doScroll("left";
ready();
}
catch(e) {
setTimeout(tryScroll, 10);
}
}
tryScroll();
}

document.attachEvent("onreadystatechange", function(){
if (document.readyState === "complete" {
document.detachEvent( "onreadystatechange", arguments.callee);
ready();
}
});
}


if(window.addEventListener) {
window.addEventListener('load', ready, false);
}
else if(window.attachEvent) {
window.attachEvent('onload', ready);
}
else {
window.onload=ready;
}
}

},
$s:{
screensize:function () {
return {"w":screen.width,"h":screen.height};
},
windowpos:function () {
if (window.screenLeft || window.screenTop) {
return {"l":window.screenLeft,"t":window.screenTop};
}
else if (window.screenX || window.screenY) {
return {"l":window.screenX,"t":window.screenY};
}
else {
return {"l":0,"t":0};
}
},
clientsize:function () {
if (window.innerWidth || window.innerHeight) {
return {"w":window.innerWidth,"h":window.innerHeight};
}
else if (_$$.$().documentElement && (_$$.$().documentElement.clientWidth || _$$.$().documentElement.clientHeight)) {
return {"w":_$$.$().documentElement.clientWidth,"h":_$$.$().documentElement.clientHeight};
}
else if (_$$.$().body.clientWidth || _$$.$().body.clientHeight) {
return {"w":_$$.$().body.clientWidth,"h":_$$.$().body.clientHeight};
}
else {
return {"w":0,"h":0};
}
},
scrollpos:function () {
if (window.innerWidth || window.innerHeight) {
return {"l":window.pageXOffset,"t":window.pageYOffset};
}
else if (_$$.$().documentElement && (_$$.$().documentElement.clientWidth || _$$.$().documentElement.clientHeight)) {
return {"l":_$$.$().documentElement.scrollLeft,"t":_$$.$().documentElement.scrollTop};
}
else if (_$$.$().body.clientWidth || _$$.$().body.clientHeight) {
return {"l":_$$.$().body.scrollLeft,"t":_$$.$().body.scrollTop};
}
else {
return {"l":0,"t":0};
}
},
scrollsize:function () {
if (_$$.$().documentElement && (_$$.$().documentElement.scrollWidth || _$$.$().documentElement.scrollHeight)) {
return {"w":_$$.$().documentElement.scrollWidth,"h":_$$.$().documentElement.scrollHeight};
}
else if (_$$.$().body.scrollWidth || _$$.$().body.scrollHeight) {
return {"w":_$$.$().body.scrollWidth,"h":_$$.$().body.scrollHeight};
}
else {
return {"w":0,"h":0};
}
},
mousepos:function (e) {
var x = 0, y = 0;
if (!e) e = window.event;
if (e.pageX || e.pageY){
x = e.pageX;
y = e.pageY;
}
else if (e.clientX || e.clientY) {
x = e.clientX+this.scrollpos().l-_$$.$().documentElement.clientLeft;
y = e.clientY+this.scrollpos().t-_$$.$().documentElement.clientTop;
}
return {"x":x, "y":y};
},
mouseelpos:function (e) {
var x = 0, y = 0;
if (!e) e = window.event;
if (e.layerX || e.layerY) {
x = e.layerX;
y = e.layerY;
}
else if (e.offsetX || e.offsetY) {
x = e.offsetX;
y = e.offsetY;
}
return {"x":x, "y":y};
},
elementpos:function (el) {
var l = 0, t = 0;
while (el) {
l += el.offsetLeft;
t += el.offsetTop;
el = el.offsetParent;
}
return {"l":l, "t":t};
},
getelbyclass:function (n,t) {
t = t || '*';
var elms=[], relm=[];
elms=_$$.$().getElementsByTagName(t);
for(var i=0;i<elms.length;i++) {
if (elms[i].className==n) {
relm.push(elms[i]);
}
}
return relm;
},
getelbytag:function (t) {
t = t || '*';
var elms=[], relm=[];
elms=_$$.$().getElementsByTagName(t);
for(var i=0;i<elms.length;i++) {
relm.push(elms[i]);
}
return relm;
},
getelbyname:function (n,t) {
t = t || '*';
var elms=[], relm=[];
elms=_$$.$().getElementsByTagName(t);
for(var i=0;i<elms.length;i++) {
if(elms[i].getAttribute('name')==n) {
relm.push(elms[i]);
}
}
return relm;
},
geteventtype:function (e) {
if (!e) e = window.event;
return e.type;
},
mousebutton:function (e) {
if(e.which == null) {
return (e.button < 2) ? "left" : ((e.button == 4) ? "middle" : "right";
}
else {
return (e.which < 2) ? "left" : ((e.which == 2) ? "middle" : "right";
}
},
randnum: function(rmin, rmax) {
return Math.floor(Math.random() * (rmax - rmin + 1)) + rmin;
},
browsername: function () {
var useragent=navigator.userAgent;
var navigatorname;
if(useragent.indexOf('MSIE')!= -1) {
navigatorname="MSIE";
}
else if(useragent.indexOf('Safari')!= -1) {
if(useragent.indexOf('Chrome')!= -1) {
navigatorname="Chrome";
}
else {
navigatorname="Safari";
}
}
else if(useragent.indexOf('Gecko')!= -1) {
if(useragent.indexOf('Chrome')!= -1) {
navigatorname="Chrome";
}
else {
navigatorname="Mozilla";
}
}
else if(useragent.indexOf('Mozilla')!= -1) {
navigatorname="Old Netscape or Mozilla";
}
else if(useragent.indexOf('Opera')!= -1) {
navigatorname="Opera";
}
return navigatorname;
}
}
};

var $ver=_$$.version;
var $$=_$$.$;
var $$a=_$$.$a;
var $$c=_$$.$c;
var $$e=_$$.$e;
var $$f=_$$.$f;
var $$i=_$$.$i;
var $$r=_$$.$r.or;
var $$s=_$$.$s;



Картинка за Вами...
Профиль Ответить
26.11.2013 18:59:57 Кнопка наверх без jQuery Сообщение #3
ilyadenisovid

ilyadenisovid

Мастер

Мастер

Дата регистрации:
28.01.2013 18:32:29

Сообщений: 213

Извините, модератор, но за чем скачивать из интернета какой-то бездарный скрипт, у данного вопроса, есть простое решение, а вот это я уже находил в интернете, тем более сторонняя библиотека подключается. Единственное, что тут нужно, проверить, если верхняя координата не равна 0, то появляется ссылка. Проблема только в коде. На будущее, не стоит несмотря скачивать скрипт из интернета.
Профиль Ответить
26.11.2013 20:55:20 Кнопка наверх без jQuery Сообщение #4
tikkiwiki

tikkiwiki

Модератор

Модератор

Дата регистрации:
15.11.2013 15:36:59

Сообщений: 194

Уважаемый ilyadenisovid, так пользуйтесь интернетом и решите Вашу проблему. Я не знаю на сколько Вы "умны", может Вы не умеете пользоваться интернетом.
На будущее- не стоит умничать.
Профиль Ответить
27.11.2013 00:52:12 Кнопка наверх без jQuery Сообщение #5
alexandrdante

alexandrdante

Модератор

Модератор

Дата регистрации:
15.11.2013 15:33:40

Сообщений: 207

а зачем Вам скрипты вообще?
сделайте якорь вверху,потом просто кнопку вставьте,в position:fixed

только в див какой-нибудь,который будет появляться когда чуть ниже опустится экран
Профиль Ответить
27.11.2013 06:43:01 Кнопка наверх без jQuery Сообщение #6
ilyadenisovid

ilyadenisovid

Мастер

Мастер

Дата регистрации:
28.01.2013 18:32:29

Сообщений: 213

Я и говорю, мне скрипт не нужен. Мне нужно буквально пару строчек js, нужно узнать если верхняя координата не 0(то есть пользователь прокрутил страницу), то появляется кнопка. Просто неинтересно, когда кнопка даже в начале страницы висит
Профиль Ответить
27.11.2013 15:18:15 Кнопка наверх без jQuery Сообщение #7
alexandrdante

alexandrdante

Модератор

Модератор

Дата регистрации:
15.11.2013 15:33:40

Сообщений: 207

тогда так:

<a href="#" title="Вернуться к началу" class="topbutton">^Наверх</a>



.topbutton {
width:100px;
border:2px solid #ccc;
background:#f7f7f7;
text-align:center;
padding:10px;
position:fixed;
bottom:50px;
right:50px;
cursor:pointer;
color:#333;
font-family:verdana;
font-size:12px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
}



В стилях можно поиграться немного,например процентное соотношение отступа кнопки от верхней части экрана.Чтобы её сразу же не было видно на экране.


Плавного появления и прокрутки без скриптов не выйдет.
Пробовал пару способов,но безуспешно



с border-radius просто привычка добавлять -moz -webkit =)
Профиль Ответить
27.11.2013 15:33:50 Кнопка наверх без jQuery Сообщение #8
alexandrdante

alexandrdante

Модератор

Модератор

Дата регистрации:
15.11.2013 15:33:40

Сообщений: 207

Нашёл такую реализацию.
С плавным движением

<div id="scrollup"><img class="up" alt="Прокрутить вверх" src="/img/up.png" /></div>


#scrollup {
position: fixed; /* фиксированная позиция */
opacity: 0.8; /* прозрачность */
padding: 15px 10px 10px; /* отступы */
background: #aaa;
border-radius: 5px; /* скругление углов */
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
left: 10px; /* отступ слева */
bottom: 10px; /* отступ снизу */
display: none; /* спрятать блок */
cursor: pointer;
}



ну и простенький яваскрипт:
window.onload = function() { // после загрузки страницы

var scrollUp = document.getElementById('scrollup'); // найти элемент

scrollUp.onmouseover = function() { // добавить прозрачность
scrollUp.style.opacity=0.3;
scrollUp.style.filter = 'alpha(opacity=30)';
};

scrollUp.onmouseout = function() { //убрать прозрачность
scrollUp.style.opacity = 0.5;
scrollUp.style.filter = 'alpha(opacity=50)';
};

scrollUp.onclick = function() { //обработка клика
window.scrollTo(0,0);
};

// show button

window.onscroll = function () { // при скролле показывать и прятать блок
if ( window.pageYOffset > 0 ) {
scrollUp.style.display = 'block';
} else {
scrollUp.style.display = 'none';
}
};
};




как видите,тут используется ScrollUp ScrollTo
Профиль Ответить
27.11.2013 16:55:21 Кнопка наверх без jQuery Сообщение #9
ilyadenisovid

ilyadenisovid

Мастер

Мастер

Дата регистрации:
28.01.2013 18:32:29

Сообщений: 213

У меня с CSS проблем не было, все было как у Вас, функции прозрачности я убрал, все делаю правильно, но вообще теперь блок не появляется.
window.onload = function() {
var scrollUp = document.getElementById('up');
window.onscroll = function () {
if (window.pageYOffset > 0) {
scrollUp.style.display = 'block';
}
else {
scrollUp.style.display = 'none';
}
};
};
Профиль Ответить
27.11.2013 20:14:27 Кнопка наверх без jQuery Сообщение #10
alexandrdante

alexandrdante

Модератор

Модератор

Дата регистрации:
15.11.2013 15:33:40

Сообщений: 207

можно весь код глянуть,со стилями?
может где-то забыли что-то.
а попробуйте с прозрачностью =)
Там же просто opacity
парой строк больше)


буду пробовать работу без прозрачности.Ожидайте.

И там в стилях через картинку реализация:вы так делали? или нет?
Профиль Ответить