Navigacija
Lista poslednjih: 16, 32, 64, 128 poruka.

Problem sa scrolling-om, Kako zaustaviti scrolling background-a

[es] :: Javascript i AJAX :: Problem sa scrolling-om, Kako zaustaviti scrolling background-a

[ Pregleda: 3611 | Odgovora: 6 ] > FB > Twit

Postavi temu Odgovori

Autor

Pretraga teme: Traži
Markiranje Štampanje RSS

serious017

Član broj: 333166
Poruke: 7
*.dynamic.isp.telekom.rs.



Profil

icon Problem sa scrolling-om, Kako zaustaviti scrolling background-a08.04.2016. u 19:05 - pre 97 meseci
Zdravo svima,

imam css i js skripte koje pokrecu mask-u klikom na link, sve ok radi sem jedne "sitnice" zbog koje ostavih noci ne prespavane vec nedelju dana sad.gif

Naime, kao sto rekoh sve ok funkcionise ali kad se mask-a pokrene main stranica se moze skrolovati iako je maska aktivna.
Sobzirom da je main stranica uradjena po sekcijama meni je jako bitno da se skrolovanje main strane onemoguci dok je maska aktivna. Ne znam ni sam sta sve nisam ucinio, pokusao, muvao se po raznim sajtovima i trazio mogucnost ali nista.

Da li neko moze da mi pomogne i sta to treba da ubacim u css i js da bi resio scroll.

OVO JE CSS i JS:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script>

$(document).ready(function() {

//select all the a tag with name equal to modal
$('a[name=modal]').click(function(e) {
//Cancel the link behavior
e.preventDefault();

//Get the A tag
var id = $(this).attr('href');

//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();


//Set heigth and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});

//transition effect
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow",0.;

//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();

//Set the popup window to center
$(id).css('top', winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);

//transition effect
$(id).fadeIn(2000);

});

//if close button is clicked
$('.window .close').click(function (e) {
//Cancel the link behavior
e.preventDefault();

$('#mask').hide();
$('.window').hide();
});

//if mask is clicked
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});

$(window).resize(function () {

var box = $('#boxes .window');

//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();

//Set height and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});

//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();

//Set the popup window to center
box.css('top', winH/2 - box.height()/2);
box.css('left', winW/2 - box.width()/2);

});
});

</script>

<style>
body {
font-family:verdana;
font-size:15px;
}

.noscroll { position: fixed; overflow-y:scroll }

a {color:#333; text-decoration:none}
a:hover {color:#ccc; text-decoration:none}

#mask {
position:absolute;
left:0;
top:0;
z-index:9000;
background-color:#000;
display:none;
}

#boxes .window {
position:fixed;
left:0;
top:0;
width:440px;
height:200px;
display:none;
z-index:9999;
padding:20px;
}

#boxes #dialog_js {
width:750px;
height:660px;
padding:10px;
background-color:#ffffff;
}

#boxes #dialog_vs {
width:750px;
height:660px;
padding:10px;
background-color:#ffffff;
}

#boxes #dialog_es {
width:750px;
height:660px;
padding:10px;
background-color:#ffffff;
}

</style>
 
Odgovor na temu

dusans
Stojanov Dušan
Pančevo

Član broj: 9551
Poruke: 1343
*.dynamic.sbb.rs.



+311 Profil

icon Re: Problem sa scrolling-om, Kako zaustaviti scrolling background-a08.04.2016. u 21:42 - pre 97 meseci
Za nedelju dana nisi uspeo da nađeš rešenje?

Da bi disable-ovao scroll, treba staviti ove stilove u <body>:
Code:

overflow: hidden; position: fixed;


Evo ti js koji to radi,
kada otvoriš masku - pozovi dve linije koje disable-uju scroll,
kada zatvoriš masku - pozovi dve linije koje enable-uju scroll:
Code:

// Disable scroll
$("body").css("overflow", "hidden");
$("body").css("position", "fixed");

// Enable scroll
$("body").css("overflow", "");
$("body").css("position", "");


U buduće, ako već postavljaš primer, postavi ga na https://jsfiddle.net/ da ne moramo da gledamo u pasulj.
 
Odgovor na temu

serious017

Član broj: 333166
Poruke: 7
*.dynamic.isp.telekom.rs.



Profil

icon Re: Problem sa scrolling-om, Kako zaustaviti scrolling background-a08.04.2016. u 23:52 - pre 97 meseci
Jesam potrosio noci i to mu dodje licna stvar, time sam zeleo samo da kazem koliko mi je stalo do ovog kako bi sajt bio potpun.
Sto se tvog resenja tice, na zalost ne daje rezultat jer skroz zamrzne stranicu.
Meni je bitno da se skrolovanje nastavi od pozicije na kojoj je ostalo pre aktiviranja maske!!!
 
Odgovor na temu

dusans
Stojanov Dušan
Pančevo

Član broj: 9551
Poruke: 1343
*.dynamic.sbb.rs.



+311 Profil

icon Re: Problem sa scrolling-om, Kako zaustaviti scrolling background-a09.04.2016. u 08:41 - pre 97 meseci
Onda, stavi primer na https://jsfiddle.net/ pa ću ti pomoći...
 
Odgovor na temu

serious017

Član broj: 333166
Poruke: 7
*.dynamic.isp.telekom.rs.



Profil

icon Re: Problem sa scrolling-om, Kako zaustaviti scrolling background-a09.04.2016. u 12:07 - pre 97 meseci
Postavljeno,

https://jsfiddle.net/serious017/u2ayfpdd/7/

UNAPRED HVALA!!!

[Ovu poruku je menjao serious017 dana 09.04.2016. u 13:28 GMT+1]
 
Odgovor na temu

dusans
Stojanov Dušan
Pančevo

Član broj: 9551
Poruke: 1343
*.dynamic.sbb.rs.



+311 Profil

icon Re: Problem sa scrolling-om, Kako zaustaviti scrolling background-a09.04.2016. u 12:49 - pre 97 meseci
Evo ti rešenja:

https://jsfiddle.net/62fmrqk7/3/

Ima dodataka koji se tiču disable/restore scroll-a u js i dve ispravke u css-u.
 
Odgovor na temu

serious017

Član broj: 333166
Poruke: 7
*.dynamic.isp.telekom.rs.



Profil

icon Re: Problem sa scrolling-om, Kako zaustaviti scrolling background-a09.04.2016. u 13:30 - pre 97 meseci
TI SI VELIKI COVEK :))) Hvala od srca hvala!!!
 
Odgovor na temu

[es] :: Javascript i AJAX :: Problem sa scrolling-om, Kako zaustaviti scrolling background-a

[ Pregleda: 3611 | Odgovora: 6 ] > FB > Twit

Postavi temu Odgovori

Navigacija
Lista poslednjih: 16, 32, 64, 128 poruka.