Сайты - по стандартам, но не стандартные сайты!
Есть блочная структура страницы, хочется запрограммировать один из блоков так, чтобы он плавно перемещался в один и тот же конец дисплея, если не помещается на экран. То есть, чтобы после того как пользователь опустит скролл этот блок оставался бы видным и распологался в том же месте относительно дисплея.
К сожалению, мой скрипт банально придайт конкретные значения width и heigth блока *html #scrollbox{...}. Таким образом, пока пользователь не отпустит скролл (ну или колёсико мыши), не подождёт 5 секунд, блок #scrollbox не будет видет.
Есть ли идеи на счёт альтернативного скрипта?
Нет на форуме
Wizard
Не понял... Явно тут без макета страницы не обойтись.
Нет на форуме
Времяни нет, вечером всё продемонстрирую.
Нет на форуме
Выкладываю код, по ходу комментирую:
css_
#menu { background:url(../img/menu/list_bg.gif); position:absolute; z-index:5; left:0px; top:48px; width:138px; }
dhtml_
... ......
...(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date(); for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }} k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://cdn.jsdelivr.net/npm/yandex-metrica-watch/tag.js", "ym"); ym(94593784, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true });
javascript_
??????????????? ??????????????? тут следует скрипт, который прижимает блок #menu в одно место экрана, причём не рывками его туда тянет, а плавно. ??????????????? ???????????????
часто такое используют рекламщики, знаете-ли, чтобы баннер не уходил из поля зрения посететеля. вся проблема в скрипте и в методе его использования- неужели при каждом движении скролла будет запускатся скрипт, а потом функция, в которой подсчитается новое значение блока и сразу ему присвоется? это ровно то что было сделано, результат неудовлетворительный.
Нет на форуме
Wizard
Странно, что не получается плавного движения и откуда берутся эти 5 секунд? Кроме того, что блок может передвигаться со скоростью полосы прокрутки, можно вообще его заставить двигаться, как поплавок, когда он будет медленно набирать скорость, двигаясь в нужном направлении, и также медленно сбрасывать скорость передвижения по мере приближения к конечной позиции. Да что там рассказывать, Вы это уже тысячу раз в сети видели...
Выкладывайте скрипт, посмотрим, что не так.
Нет на форуме
Так я и хочу, чтобы как попловок или хоть не болтаясь, тоже ничего.
Выкладываю весь блок:
J_
var meDisDelay, meDisLev = [0], meDisNum = 0, meDisArray = []; function autoMenu(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o) { //create the menu object. This just holds the variables together so I can find them this.oWidth = a; this.rightimg = b; this.downimg = c; this.oNormCol = d; this.oHighCol = e; this.oNormColF = f; this.oHighColF = g; this.oBordCol = h; this.oBordWid = i; this.linkStyle = j; this.oDelay = k; this.lPos = l; this.tPos = m; this.oOrient = n; this.oScroll = o; this.sub = new Array(); this.buildMenu = buildMenu; return this; } function menuBox( oTxt, oLnk, oTgt ) { //create a menu item this.text = oTxt; this.link = oLnk; this.target = oTgt; this.sub = new Array(); return this; } function buildMenu() { //prepare to draw a menu. Set up so that the same menu object can be used more than once this.oName = meDisNum; meDisNum++; var firstName = 'display:block;'+(document.layers?'':'width:100%;font-size:16px;line-height:19px;')+this.linkStyle+((this.linkStyle.charAt(this.linkStyle.length-1)==';')?'':';')+'color:'+this.oNormColF+';'; var lastName = this.linkStyle+((this.linkStyle.charAt(this.linkStyle.length-1)==';')?'':';')+'color:'+this.oHighColF+';'; if( document.layers && navigator.mimeTypes['*'] ) { //inline styles in layers in NS4 causes the browser to hang, so I will use stylesheets not in the head (non-standard) document.write('\n'); firstName = 'class="meDisA'+this.oName+'"'; lastName = 'class="meDisB'+this.oName+'"'; } else { firstName = 'style="'+firstName+'"'; lastName = 'style="'+lastName+'"'; } buildTree(this.sub,0,this.tPos,this.lPos,this,'',firstName,lastName); } function buildTree(oOb,oLev,oVOffset,oOffset,oBase,oI,firstName,lastName) { //draw a set of menu boxes if( oBase.oScroll ) { meDisArray[meDisArray.length] = ['meDi'+oBase.oName+oI,oVOffset,oOffset]; } var oLineOut = ( document.layers ? '\n' : ' \n' ); document.write( oLineOut ); } function tryToFindParent(oOb,oInd,oStr,oLev,toShow){ //if they click a link, try to reference the container to highlight it //if they use keys without ever mouseovering, there will be no effect //once they mouseover, there will always be an effect oOb = document.layers ? document.layers[oStr].document.layers[oInd].document.layers[0] : oOb = oOb.offsetParent; if( oOb && oOb.oNormCol ) { showdivCol(toShow,oLev); giveCol(oOb); meDisLev[oLev] = oOb; return false; } return true; } function hideAll( oNum ) { //return highlighted (parent) cells to normal colour for( var x = oNum; x
HTM|_
CSS&DIV_
нету, на этот раз.
Нет на форуме
Wizard
Сейчас начну копаться, но сразу должен спросить: почему не на onscroll?
Нет на форуме
Я не хотел всё выкладывать, может кто-то просто подскажет как банально привезать блок в скроллу, вот что мне нужно. Этот скрипт это мутация 3-х разных скриптов, мне не удалось вырезать кусок, отвечающий за скролл, потому что всё рушется. Лучше всего сделать тоже самое меню с помощью css, в этом я уже убедился. Осталось привязать меню, иначе от него никакого смысла.
Нет на форуме
эээ, онскролл? сейчас попробую...)) если бы знал сразу попробывал бы.
Нет на форуме
Wizard
Да, раз это - меню, то заставлять его плавать по экрану нет смысла. А вот поместить его в строго указанную область экрана - решение, как Вы уже заметили, действительно "банальное". Так в чем опять проблема? На всякий случай напишу о своем предложении.
Итак, вместо:
window.setInterval('checkScroll();',75);
надо попробовать что-то, типа:
function getScrollRange() { /*вычисляет позиции вертикальной и горизонтальной полос прокрутки*/ return { top : /**/, left : /**/ } } function setScrollMenu() { var scroll = getScrollRange(), /* поместим в переменную два значения, возвращаемых конструктором getScrollRange() - top & left соответственно*/ obj = document.getElementById(/*id для меню, в Вашем случае - это "menu"*/); obj.style.top = Math.round(top/*расстояние от верхнего края окна*/ + scroll.top) + "px"; obj.style.left = Math.round(left/*расстояние от левого края окна*/ + scroll.left) + "px"; // если top & left == 0, то пусть будет указываться только scroll.top & scroll.left; // возможно меню будет посередине окна, тогда надо будет высчитывать соответствующие параметры окна, // совать их в left и добавить обработку onresize. } window.onscroll = setScrollMenu;
Кстати, покажите уж нам остатки кода, ведь так хочется увидеть скрытые пункты меню...
Нет на форуме
Здорово, большое спасибо. Я пытался вчера что-то подобное сделать, но у меня вышло гораздо больше личних строчек, так что сейчас буду пробовать Ваш скрипт на своём примере.
Нет на форуме
Ну если интересно видеть всю страницу, покажу детально:
Multi-menu ... ... ...
Это была html-страничка, в которой одно меню дублируется дважды, но один вариант всегда сверху странички, а другой следует за скроллом (но это ещё старый вариант, тот что мне не нравился).
Нет на форуме
Теперь второй скрипт, который не выкладывалЖ
Jscript_2 (showhidelevels.js)_
window.onerror = null; //initialise all variables var olddiv = new Array(); //this will become a reference to the objects that are being shown or were last shown function getRefToDivNest( divID, oDoc ) { if( !oDoc ) { oDoc = document; } if( document.layers ) { if( oDoc.layers[divID] ) { return oDoc.layers[divID]; } else { for( var x = 0, y; !y && x
Я намерено не фиксирую в своём скрипте тип браузера. Зато я определяю их способности к той или иной методике и последовательностям, и использую это, таким образом неизвестные мне браузеры будут работать так, как и все другие.
ps_
Не хочу никого заставлять вникать в свой код только ради того, чтобы посмотреть как он неправильно работает:)
Этими тегами-ссылками на функции можно:
html_
Сюда пойдёт содержимое*** Лицо_ссылки *** Лицо_ссылки
Хороший феб-дизайнер заботитрся о несчастных посетителей со слабым оборудованием,
для переключения в режим без использования javascript_
Тысяча извинений за объем текста;)
Нет на форуме
Wizard
Вот теперь все на месте! Спасибо за отличный пример, который с удовольствием буду анализировать.
Нет на форуме
AKS, всегда пожалуйста, если есть спрос- будут и скрипты )))
Нет на форуме