Форум hotibo.ru

Сайты - по стандартам, но не стандартные сайты!





#1 29.03.2010 12:08

Wizard
Опытный
Зарегистрирован: 16.03.2010
Сообщений: 63

Плавающие блоки

Есть блочная структура страницы, хочется запрограммировать один из блоков так, чтобы он плавно перемещался в один и тот же конец дисплея, если не помещается на экран. То есть, чтобы после того как пользователь опустит скролл этот блок оставался бы видным и распологался в том же месте относительно дисплея.

К сожалению, мой скрипт банально придайт конкретные значения width и heigth блока *html #scrollbox{...}. Таким образом, пока пользователь не отпустит скролл (ну или колёсико мыши), не подождёт 5 секунд, блок #scrollbox не будет видет.

Есть ли идеи на счёт альтернативного скрипта?


Жизнь- игра. Сюжет хреновый, зато какая графика!

Нет на форуме

 

#2 29.03.2010 14:03

AKS
Профессионал
Зарегистрирован: 25.12.2009
Сообщений: 237
Вебсайт

Re: Плавающие блоки

Wizard
Не понял... Явно тут без макета страницы не обойтись.

Нет на форуме

 

#3 29.03.2010 17:40

Wizard
Опытный
Зарегистрирован: 16.03.2010
Сообщений: 63

Re: Плавающие блоки

Времяни нет, вечером всё продемонстрирую.


Жизнь- игра. Сюжет хреновый, зато какая графика!

Нет на форуме

 

#4 30.03.2010 02:19

Wizard
Опытный
Зарегистрирован: 16.03.2010
Сообщений: 63

Re: Плавающие блоки

Выкладываю код, по ходу комментирую:

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 в одно место экрана, причём не рывками его туда тянет, а плавно.
???????????????
???????????????

часто такое используют рекламщики, знаете-ли, чтобы баннер не уходил из поля зрения посететеля. вся проблема в скрипте и в методе его использования- неужели при каждом движении скролла будет запускатся скрипт, а потом функция, в которой подсчитается новое значение блока и сразу ему присвоется? это ровно то что было сделано, результат неудовлетворительный.neutral


Жизнь- игра. Сюжет хреновый, зато какая графика!

Нет на форуме

 

#5 30.03.2010 14:15

AKS
Профессионал
Зарегистрирован: 25.12.2009
Сообщений: 237
Вебсайт

Re: Плавающие блоки

Wizard
Странно, что не получается плавного движения и откуда берутся эти 5 секунд? Кроме того, что блок может передвигаться со скоростью полосы прокрутки, можно вообще его заставить двигаться, как поплавок, когда он будет медленно набирать скорость, двигаясь в нужном направлении, и также медленно сбрасывать скорость передвижения по мере приближения к конечной позиции. Да что там рассказывать, Вы это уже тысячу раз в сети видели...
Выкладывайте скрипт, посмотрим, что не так.

Нет на форуме

 

#6 30.03.2010 18:56

Wizard
Опытный
Зарегистрирован: 16.03.2010
Сообщений: 63

Re: Плавающие блоки

Так я и хочу, чтобы как попловок или хоть не болтаясь, тоже ничего.
Выкладываю весь блок:

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' )+ '
\n'+ ' \n'+ ((oLev||oBase.oOrient)?'':' \n'); for( var i = 0; i \n':'')+ ( oOb[i].sub.length ? ' '+((oLev||oBase.oOrient)?'\n ':'')+'\n'; } oLineOut += ((oLev||oBase.oOrient)?'':' \n')+ '
\n'+ ( document.layers ? ' \n' : '' )+ ' '+oOb[i].text+'\n'+ ( document.layers ? ' \n'+ ' '+oOb[i].text+'\n'+ ' \n' : '' ) : ( oOb[i].link ? ' \n'+ ( document.layers ? ' \n' : '' )+ ' '+oOb[i].text+'\n'+ ( document.layers ? ' \n'+ ' '+oOb[i].text+'\n'+ ' \n' : '' ) : ' \n'+ ( document.layers ? ' \n' : '' )+ ' '+oOb[i].text+'\n' ) )+ ( document.layers ? ' '+((oOb[i].sub.length||oOb[i].link)?'':'')+oOb[i].text+((oOb[i].sub.length||oOb[i].link)?'':'')+'\n' : '' )+ '
\n
\n'+ ( 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_

нету, на этот раз.


Жизнь- игра. Сюжет хреновый, зато какая графика!

Нет на форуме

 

#7 30.03.2010 19:00

AKS
Профессионал
Зарегистрирован: 25.12.2009
Сообщений: 237
Вебсайт

Re: Плавающие блоки

Wizard
Сейчас начну копаться, но сразу должен спросить: почему не на onscroll?

Нет на форуме

 

#8 30.03.2010 19:02

Wizard
Опытный
Зарегистрирован: 16.03.2010
Сообщений: 63

Re: Плавающие блоки

Я не хотел всё выкладывать, может кто-то просто подскажет как банально привезать блок в скроллу, вот что мне нужно. Этот скрипт это мутация 3-х разных скриптов, мне не удалось вырезать кусок, отвечающий за скролл, потому что всё рушется. Лучше всего сделать тоже самое меню с помощью css, в этом я уже убедился. Осталось привязать меню, иначе от него никакого смысла.


Жизнь- игра. Сюжет хреновый, зато какая графика!

Нет на форуме

 

#9 30.03.2010 19:08

Wizard
Опытный
Зарегистрирован: 16.03.2010
Сообщений: 63

Re: Плавающие блоки

эээ, онскролл? hmm сейчас попробую...)) если бы знал сразу попробывал бы.


Жизнь- игра. Сюжет хреновый, зато какая графика!

Нет на форуме

 

#10 31.03.2010 10:11

AKS
Профессионал
Зарегистрирован: 25.12.2009
Сообщений: 237
Вебсайт

Re: Плавающие блоки

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;

Кстати, покажите уж нам остатки кода, ведь так хочется увидеть скрытые пункты меню...

Нет на форуме

 

#11 31.03.2010 16:35

Wizard
Опытный
Зарегистрирован: 16.03.2010
Сообщений: 63

Re: Плавающие блоки

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


Жизнь- игра. Сюжет хреновый, зато какая графика!

Нет на форуме

 

#12 31.03.2010 18:23

Wizard
Опытный
Зарегистрирован: 16.03.2010
Сообщений: 63

Re: Плавающие блоки

Ну если интересно видеть всю страницу, покажу детально:

Код:

    
        
        
        Multi-menu
        
        
        
    
    
...
...
...

Это была html-страничка, в которой одно меню дублируется дважды, но один вариант всегда сверху странички, а другой следует за скроллом (но это ещё старый вариант, тот что мне не нравился).


Жизнь- игра. Сюжет хреновый, зато какая графика!

Нет на форуме

 

#13 31.03.2010 18:55

Wizard
Опытный
Зарегистрирован: 16.03.2010
Сообщений: 63

Re: Плавающие блоки

Теперь второй скрипт, который не выкладывалЖ

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_

Код:

Тысяча извинений за объем текста;)


Жизнь- игра. Сюжет хреновый, зато какая графика!

Нет на форуме

 

#14 01.04.2010 13:40

AKS
Профессионал
Зарегистрирован: 25.12.2009
Сообщений: 237
Вебсайт

Re: Плавающие блоки

Wizard
Вот теперь все на месте! Спасибо за отличный пример, который с удовольствием буду анализировать.

Нет на форуме

 

#15 02.04.2010 21:17

Wizard
Опытный
Зарегистрирован: 16.03.2010
Сообщений: 63

Re: Плавающие блоки

AKS, всегда пожалуйста, если есть спрос- будут и скрипты smile)))


Жизнь- игра. Сюжет хреновый, зато какая графика!

Нет на форуме

 

Board footer