IPB

Welcome Guest ( Log In | Register )

> Reguli

Ii rugam INSISTENT pe cei care vin cu diverse "probleme" mai mult sau mai putin urgente sa faca un efort si sa dea toate detaliile de la inceput. Lumea isi rupe din timp ca sa va ajute, e o dovada de respect sa faceti si voi la fel.

 
 Reply to this topicStart new topic
> Script Pentru Scroll Al Unui Div
Rating 5 V
Denied
post 2007-10-18 12:51
Post #1


Junior Member
Reputation:

Group: Membri
Joined: 12-2006
From: Bucuresti
Member No.: 1.127
Stie cineva un script similar cu acesta: http://www.dynamicdrive.com/dynamicindex2/pagescroller.htm dar pentru un div? Adica vreau sa fac scroll la fel ca asta dar la un div. Sau stiti cum pot modifica scriptul ca sa functioneze pentru div-ul x?
Go to the top of the page
+Quote Post
skid
post 2007-10-18 13:40
Post #2


Pleasure Delayer
Reputation:

Group: Moderatori
Joined: 06-2006
From: Cluj-Napoca
Member No.: 77
Nu-mi place sa modific script-uri de genu gata facute, nici macar sa ma uit peste ele. (IMG:style_emoticons/huge/smile.gif)

Ti-am facut un exemplu rapid: ENJOY.
Go to the top of the page
+Quote Post
Ionut Botizan
post 2007-10-18 15:08
Post #3


prafuitu
Reputation:

Group: #Administratori
Joined: 12-2006
Member No.: 1.085
* Merge fara alt cod in plus
* Poti da ca parametru ID-ul containerului sau un obiect
* Testat pe IE7, FF2, Opera 9.21, Safari 3 (Windows)


Astea-s functiile:
CODE
var SPEED = 1;

function ScrollDown(ELEM){
    if(typeof ELEM == 'string')
        ELEM = document.getElementById(ELEM);

    if(ELEM)
        ELEM.scrolling = setInterval(function(){document.getElementById('test').scrollTop+=SPEED;}, 20);
}

function ScrollUp(ELEM){
    if(typeof ELEM == 'string')
        ELEM = document.getElementById(ELEM);

    if(ELEM)
        ELEM.scrolling = setInterval(function(){document.getElementById('test').scrollTop-=SPEED;}, 20);
}

function StopScroll(ELEM){
    if(typeof ELEM == 'string')
        ELEM = document.getElementById(ELEM);

    if(ELEM)
        clearInterval(ELEM.scrolling);
}



si asa le folosesti:
CODE
<a href="#" onmouseout="java script:StopScroll('test');" onmouseover="java script:ScrollDown('test');" >down</a>
<a href="#" onmouseout="java script:StopScroll('test');" onmouseover="java script:ScrollUp('test');" >up</a>


*NOTA: java script trebuie sa fie de fapt fara spatiu, si anume javascript

This post has been edited by prafuitu: 2007-10-18 15:14
Go to the top of the page
+Quote Post
Daniel Chiriţă
post 2007-10-18 19:44
Post #4


Reputat
Reputation:

Group: #Administratori
Joined: 06-2006
From: Timişoara
Member No.: 5
Am si eu o chestie gata facuta:

Html:
CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title>Widget - Scroller</title>
<style>
    * {
        font-family: arial;
        font-size: 11px;
    }
    
    a {
        color: blue;
    }
</style>

<script type="text/javascript" src="./js/widgets/scroller.js"></script>

<link rel="stylesheet" type="text/css" href="./styles/widgets/scroller.css"/>
</head>
<body>
<div id="orase" class="scroller">
    <ul id="orase_c">
        <li><a href="#">Alba</a></li>
        <li><a href="#">Bistrita-Nasaud</a></li>
        <li><a href="#">Arad</a></li>
        <li><a href="#">Arges</a></li>
        <li><a href="#">Brasov</a></li>
        <li><a href="#">Arges</a></li>
        <li><a href="#">Timis</a></li>
        <li><a href="#">Constanta</a></li>
        <li><a href="#">Maramures</a></li>
        <li><a href="#">Mures</a></li>
        <li><a href="#">Giurgiu</a></li>
        <li><a href="#">Hunedoara</a></li>
        <li><a href="#">Caras Severin</a></li>
    </ul>

    <div class="navi">
        <div class="topper" onmouseover="scrollControlUp('orase_c');" onmouseout="stopScroll();" onclick="_scrollTop('orase_c');"></div>    
        <div class="bottomer" onmouseover="scrollControlDown('orase_c');" onmouseout="stopScroll();" onclick="_scrollBottom('orase_c');"></div>
    </div>
</div>
</body>
</html>


CSS:
CODE
.scroller {
    border-left: 1px solid #aaa;
    border-top: 1px solid #aaa;
    border-right: 3px solid #aaa;
    border-bottom: 3px solid #aaa;
    width: 160px;
    height: 100px;
}

.scroller ul {
    margin: 0;
    padding: 2px;
    list-style: none;
    line-height: 18px;
    overflow: hidden;
    float: left;
    height: 96px;
    width: 132px;
}

.scroller ul li {
    display: block;
    background: #fff url('../../images/widgets/del.jpg') no-repeat 2px center;
}

.scroller ul li a {
    display: block;
    height: 18px;
    text-decoration: none;
    padding-left: 14px;
    border: 0;
}

.scroller ul li a:hover {
    background: #eee url('../../images/widgets/del.jpg') no-repeat 2px center;
}

.topper, .bottomer {
    font-family: arial;
    font-size: 10px;
    cursor: pointer;
    height: 18px;
    padding-top: 1px;
}

.navi {
    background-color: #fcfcfc;
    height: 100px;
    margin-left: 134px;
    border-left: 1px solid #ccc;
}

.topper {
    border-bottom: 1px solid #ccc;      
    background: #fff url('../../images/widgets/up.jpg') no-repeat center center;
    text-align: left;  
    height: 22px;
}

.bottomer {
    border-top: 1px solid #ccc;
    background: #fff url('../../images/widgets/down.jpg') no-repeat center center;
    margin-top: 56px;
}


JS:
CODE
var _scroller_time;
var _scroler_controlName;
var _scroler_up;

function stopScroll() {
    if (_scroller_time)
        clearTimeout(_scroller_time);
}

function scrollControlUp(name) {
    _scroler_up = true;
    _scroler_controlName = name;
    
    scrollControl();
}

function scrollControlDown(name) {
    _scroler_up = false;
    _scroler_controlName = name;
    
    scrollControl();
}

function scrollControl() {
    var BY_PX = 6;
    if (!_scroler_up) {
        document.getElementById(_scroler_controlName).scrollTop = document.getElementById(_scroler_controlName).scrollTop + BY_PX;
    }
    else {
        document.getElementById(_scroler_controlName).scrollTop = document.getElementById(_scroler_controlName).scrollTop - BY_PX;
    }
    
    _scroller_time = setTimeout('scrollControl()', 100);  
}

function _scrollTop(name) {
    stopScroll();
    document.getElementById(name).scrollTop = 0;        
}

function _scrollBottom(name) {
    stopScroll();
    document.getElementById(name).scrollTop = 10000;        
}


Am vrut sa il folosesc intr-un proiect, dar nu mi-a mai fost necesar. S-ar putea sa mai aiba ceva probleme, dar functioneaza decent.

Numai bine!™
Go to the top of the page
+Quote Post
Denied
post 2007-10-18 21:10
Post #5


Junior Member
Reputation:

Group: Membri
Joined: 12-2006
From: Bucuresti
Member No.: 1.127
Multumesc mult pentru solutii, voi integra una din ele in site-ul pe care il fac. Stiti cum se poate ascunde scrollbar-ul (indiferent ca e vorba de scrollbar-ul paginii sau al unui div)?
Go to the top of the page
+Quote Post
skid
post 2007-10-18 21:14
Post #6


Pleasure Delayer
Reputation:

Group: Moderatori
Joined: 06-2006
From: Cluj-Napoca
Member No.: 77
QUOTE (Denied @ 2007-10-18 22:10) *
Multumesc mult pentru solutii, voi integra una din ele in site-ul pe care il fac. Stiti cum se poate ascunde scrollbar-ul (indiferent ca e vorba de scrollbar-ul paginii sau al unui div)?

Pt un div: overflow: hidden;

La pagina nu prea poti, doar daca eventual ai baga tot intr-un div cu overflow: hidden. (IMG:style_emoticons/huge/smile.gif)
Go to the top of the page
+Quote Post
ketamynx
post 2007-10-18 22:31
Post #7


• • • Inna KorR • • •
Reputation:

Group: Membri
Joined: 12-2006
From: Geosynchronous orbit
Member No.: 1.142
QUOTE
La pagina nu prea poti


Ba da, se poate.

HTML
<style type="text/css" media="all">
html, body {height:100%;}
body{overflow:hidden;}
</style>
Go to the top of the page
+Quote Post
Ionut Botizan
post 2007-10-19 8:09
Post #8


prafuitu
Reputation:

Group: #Administratori
Joined: 12-2006
Member No.: 1.085
Asa ar trebui sa fie... Gresisem ceva la functii mai sus! (IMG:style_emoticons/huge/4.gif)

QUOTE (prafuitu)
* Merge fara alt cod in plus
* Poti da ca parametru ID-ul containerului sau un obiect
* Testat pe IE7, FF2, Opera 9.21, Safari 3 (Windows)


Astea-s functiile:
CODE
var SPEED = 1;

function ScrollDown(ELEM){
    if(typeof ELEM == 'string')
        ELEM = document.getElementById(ELEM);

    if(ELEM)
        ELEM.scrolling = setInterval(function(){ELEM.scrollTop+=SPEED;}, 20);
}

function ScrollUp(ELEM){
    if(typeof ELEM == 'string')
        ELEM = document.getElementById(ELEM);

    if(ELEM)
        ELEM.scrolling = setInterval(function(){ELEM.scrollTop-=SPEED;}, 20);
}

function StopScroll(ELEM){
    if(typeof ELEM == 'string')
        ELEM = document.getElementById(ELEM);

    if(ELEM)
        clearInterval(ELEM.scrolling);
}



si asa le folosesti:
CODE
<a href="#" onmouseout="java script:StopScroll('test');" onmouseover="java script:ScrollDown('test');" >down</a>
<a href="#" onmouseout="java script:StopScroll('test');" onmouseover="java script:ScrollUp('test');" >up</a>


*NOTA: java script trebuie sa fie de fapt fara spatiu, si anume javascript
Go to the top of the page
+Quote Post
Denied
post 2007-10-19 9:31
Post #9


Junior Member
Reputation:

Group: Membri
Joined: 12-2006
From: Bucuresti
Member No.: 1.127
Va multumesc mult pentru ajutor. Am rezolvat problema, cu ajutorul vostru.
Go to the top of the page
+Quote Post
Denied
post 2007-11-06 15:39
Post #10


Junior Member
Reputation:

Group: Membri
Joined: 12-2006
From: Bucuresti
Member No.: 1.127
Aveti idee daca solutiile de mai sus dau rateuri la indexarea google pentru ca folosesc overflow: hidden ? Adica bootul google cand vine pe site "stie" sa faca mouse over la sagetile alea, pentru a "vedea" ca nu e spam, ca nu e text ascuns?
Go to the top of the page
+Quote Post
andi_t
post 2007-11-06 16:18
Post #11


Wannabe
Reputation:

Group: Membri
Joined: 06-2007
From: Bucuresti
Member No.: 1.893
Pai google-bot nu analizeaza paginile din punct de vedere grafic (asa cum vedem noi un site). Deschide pagina cu un browser text (lynx, retawq, sau altele) si vei vedea diferenta.
Go to the top of the page
+Quote Post
Denied
post 2007-11-06 22:59
Post #12


Junior Member
Reputation:

Group: Membri
Joined: 12-2006
From: Bucuresti
Member No.: 1.127
QUOTE (andi_t @ 2007-11-06 16:18) *
Pai google-bot nu analizeaza paginile din punct de vedere grafic (asa cum vedem noi un site). Deschide pagina cu un browser text (lynx, retawq, sau altele) si vei vedea diferenta.

Asa stiam si eu, ca nu analizeaza grafica, dar m-am intalnit acum o luna cu un fost angajat al google care mi-a spus ca google ar avea un fel de browser intern si ca nu ar indexa decat elementele care sunt vizibile. Dar ma cam indoiesc de ce mi-a spus, nu sunt convins ca ar fi posibil asa ceva pentru ca ar insemna ca ar putea sa ia in considerare si textul din imagini, ceea ce nu e posibil.
Go to the top of the page
+Quote Post
Ionut Botizan
post 2007-11-07 8:06
Post #13


prafuitu
Reputation:

Group: #Administratori
Joined: 12-2006
Member No.: 1.085
Esti sigur ca ala era fost angajat Google?! Si daca chiar era, esti sigur ca a avut o functie mai inalta de maturator?! Ma-ndoiesc ca toti angajatii Google stiu exact cum merge motorul de cautare!
Go to the top of the page
+Quote Post
Denied
post 2007-11-07 9:23
Post #14


Junior Member
Reputation:

Group: Membri
Joined: 12-2006
From: Bucuresti
Member No.: 1.127
QUOTE (prafuitu @ 2007-11-07 8:06) *
Esti sigur ca ala era fost angajat Google?! Si daca chiar era, esti sigur ca a avut o functie mai inalta de maturator?! Ma-ndoiesc ca toti angajatii Google stiu exact cum merge motorul de cautare!

Da, chiar a fost angajat al Google vreo 5 ani, si nu ca maturator, ci ca programator. Dar am spus mai sus, ma indoiesc ca Google chiar ar randa toate paginile.
Go to the top of the page
+Quote Post
Andrei Pfeiffer
post 2007-11-07 9:54
Post #15


Fotografiator
Reputation:

Group: Membri
Joined: 02-2007
From: Timisoara
Member No.: 1.314
Se poate sa aibe dreptate prietenul ala al tau (IMG:style_emoticons/huge/10.gif) .

Prin elemente VIZIBILE se refera la faptul ca nu sunt ASCUNSE:

CODE
display: none;
visibility: hidden;
text-indent: -9999px;


Multi puneau astfel de continut care nu era vizibil, dar era totusi indexat de google. Ganditi-va cum ar fi sa ai zeci de <H1> ascunse cu diferite cuvinte cheie. La inceput erau indexate. Acum din cate stiu sunt chiar depunctate.

This post has been edited by Andrei Pfeiffer: 2007-11-07 9:54
Go to the top of the page
+Quote Post
Ionut Botizan
post 2007-11-07 14:03
Post #16


prafuitu
Reputation:

Group: #Administratori
Joined: 12-2006
Member No.: 1.085
Asta da, asa e! Si pe langa alea, mai adauga si textul cu aceeasi culoare ca si fundalul. Insa asta nu inseamna ca randeaza pagina pentru a "vedea" ce-i ascuns si ce nu! Sau poate ca @Denied a inteles gresit ce i-a spus prietnul sau si a tras singur concluzia ca crawler-ul Google ar randa paginile!
Go to the top of the page
+Quote Post
ketamynx
post 2007-11-07 14:29
Post #17


• • • Inna KorR • • •
Reputation:

Group: Membri
Joined: 12-2006
From: Geosynchronous orbit
Member No.: 1.142
- Pentru visibility:hidden; elementul nu este vizibil, in rest, el ocupa spatiu in pagina.
- Pentru display:none; nici macar nu se cunoaste ca elementul ar fi fost acolo.

N-are rost sa le combinati.

Daca Google nu stie sa execute javascript, o solutie rapida ar fi HTMLElement.style.display = 'none'; la incarcarea paginii, dar din cate experiente am avut cu Google pana acum, sunt sigur ca trece el cumva si peste asta.

Test it up, guys.
Go to the top of the page
+Quote Post
Denied
post 2007-11-07 15:47
Post #18


Junior Member
Reputation:

Group: Membri
Joined: 12-2006
From: Bucuresti
Member No.: 1.127
QUOTE (prafuitu @ 2007-11-07 14:03) *
Asta da, asa e! Si pe langa alea, mai adauga si textul cu aceeasi culoare ca si fundalul. Insa asta nu inseamna ca randeaza pagina pentru a "vedea" ce-i ascuns si ce nu! Sau poate ca @Denied a inteles gresit ce i-a spus prietnul sau si a tras singur concluzia ca crawler-ul Google ar randa paginile!

Nu, nu am inteles gresit, chiar asta a spus, dar sunt convins ca nu toti angajatii google stiu in detaliu tot algoritmul de indexare, asa ca si eu prefer sa cred ca google nu randeaza paginile (mult prea mare risipa de resurse) ci doar citeste html-ul si coreleaza cu css-ul, apoi "trage concluziile" pentru a vedea daca exista continut ascuns doar folosind niste algoritmi.
Go to the top of the page
+Quote Post
Denied
post 2007-11-13 18:19
Post #19


Junior Member
Reputation:

Group: Membri
Joined: 12-2006
From: Bucuresti
Member No.: 1.127
As vrea sa extind aceasta solutie pentru urmatorul caz: sageata in sus si sageata in jos pentru scroll sa nu mai existe, ci sa se faca scroll up atunci cand cineva se duce in partea de sus (sa zicem primul sfert al div-ului) de scroll-uit, si scroll down cand se trece cu mouse-ul pe ultimul sfert al div-ului de scroll-uit (ma refer la partea vizibila, nu la ce e overflow, care implicit e ascuns. Aveti vreo idee de genul acesta? Ceva in genul la http://www.dynamicdrive.com/dynamicindex4/...iongallery2.htm dar mult mai simplu, fara schimbarea vitezei si alte chestii. Am incercat sa pun cmotion gallery, si functioneaza, dar daca bag si google maps si alte scripturi js, nu vrea sa-si mai faca treaba.
Go to the top of the page
+Quote Post
Ionuţ Staicu
post 2007-11-14 18:10
Post #20


Banned
Reputation:

Group: Moderatori
Joined: 06-2006
From: Constanţa
Member No.: 3
@denied: încearcă Moo: http://demos.mootools.net/Scroller (al doilea demo)
Go to the top of the page
+Quote Post
w4u
post 2008-05-02 23:51
Post #21


Wannabe
Reputation:

Group: Membri
Joined: 07-2007
Member No.: 2.080
QUOTE (skid @ 2007-10-18 9:40) *
Nu-mi place sa modific script-uri de genu gata facute, nici macar sa ma uit peste ele. (IMG:style_emoticons/huge/smile.gif)

Ti-am facut un exemplu rapid: ENJOY.


Foarte usor scriptul tau. Am incercat cu <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> si nu mai merge in IE6 si IE7.
Ai cumva o solutie?

Multumesc.
Go to the top of the page
+Quote Post
skid
post 2008-05-04 20:07
Post #22


Pleasure Delayer
Reputation:

Group: Moderatori
Joined: 06-2006
From: Cluj-Napoca
Member No.: 77
QUOTE (w4u @ 2008-05-03 0:51) *
Foarte usor scriptul tau. Am incercat cu <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> si nu mai merge in IE6 si IE7.
Ai cumva o solutie?

Multumesc.

Ai pus doctype-ul gresit, e o corcitura intre strict si transitional. (IMG:style_emoticons/huge/smile.gif)

Pune:
QUOTE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
sau
QUOTE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


Dar de fapt e un bug de IE. O combinatie de overflow: hidden, position: relative cu doctype... (IMG:style_emoticons/huge/smile.gif)

Am modificat putin si merge acum, ma folosesc de margin in loc de top, nu stiu la ce ma gandeam ca l-am facut. (IMG:style_emoticons/huge/10.gif)

Bafta!

This post has been edited by skid: 2008-05-04 20:24
Go to the top of the page
+Quote Post
« Next Oldest · Client Side Scripting · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

RSS Lo-Fi Version Time is now: 2010-09-03 4:59:24
Termeni si Conditii |
Powered By IP.Board © 2010  IPS, Inc.
Licensed to: Webdesignbox.ro