Archief - jQuery position probleem

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
B

Bamboebahr

Legacy Member
Hallo

Ik heb hier een probleem met m'n javaScript, heb dit eerst proberen oplossen met native JS, zonder succes. Daarna zitten rondklooien met jQuery maar nog altijd geen succes,hopelijk kan iemand me hier op m'n fout wijzen.

De bedoeling is dus om een soort hoverbaar menutje te krijgen die gepositioneerd wordt onderaan het scherm,gelijk welke resolutie de gebruiker heeft. (vergelijkbaar met de chat bij facebook)

Ik heb de volgende DIV (die rechtstreeks onder de body staat,dus niet in een andere container ofzo):

Code: 
<div id="slider">
<ul>
<li><a href="#" title="Slidercontrol"> Ga naar opdracht</a>
<ul id="uitleg">
<li>Uitleg Uitleg Uitleg Uitleg Uitleg Uitleg Uitleg Uitleg Uitleg Uitleg Uitleg Uitleg Uitleg Uitleg Uitleg Uitleg Uitleg Uitleg Uitleg Uitleg</li>
</ul>
</li>
</ul>
</div>

Waarop de volgende CSS slaat:

Code: 
#slider{
	position:absolute;
	background-image:url(../images/sliderbutton.png);
	background-repeat:no-repeat;
	width:429px;
	height:68px;
	text-align:center;

}

#slider a{
	font-family:"Bookman Old Style",serif;
	font-size:36px;
	line-height:60px;
	text-decoration:none;
}

#slider a:hover{
	color:#1a354b;
	
}

#slider ul{
	list-style:none;
}

#slider ul li:hover #uitleg{
display:block;
width:429px;
background-image:url(../images/sliderBg.png);
margin-top:8px;
}

Nu heb ik na een hoop googelen en proberen deze Jquery code:
Code: 
$(document).ready(function(){
	position();
});

function position(){
$("#slider").position({
	"my":"center center","at":"center bottom","of": $("#container")
	});
	console.log($("#slider").offset);
}

Zoals je ziet heb ik geprobeerd om de offset van het element eens te loggen,maar geen succes, ik krijg gewoon het element niet te pakken :s
Alvast bedankt
D

Dastardly

Legacy Member
als je het gewoon ergens wilt positioneren doe je dat volgens mij het beste met css.

Jquery is handig om css en andere zaken on the fly aan te passen, maar als het puur gaat om een div ergens absoluut te centreren zie ik het nut er echt niet van in.

normaal gezien gaat die in 't midden staan als ge 't volgende doet:

Code: 
#slider{
	position:absolute;
	background-image:url(../images/sliderbutton.png);
	background-repeat:no-repeat;
	width:429px;
	height:68px;
	text-align:center;
[COLOR="Red"]        left:50%;
        bottom:0px;
        margin-left:-215px; (helft van de breedte)[/COLOR]
}

't is wat uit mijn duim gezogen, maar normaal werkt dit toch.
C

ChickenTik

Legacy Member
Bij de CSS van uw div kunt ge al bottom: 0px toevoegen zodat hij tegen de bodem van uw scherm plakt (zoals bij Facebook).

Wat wilt ge dan juist bereiken met JQuery? Die DIV centreren? Da kunt ge gewoon met css doen:

left: 50%;
margin-left: -#breedte van uw div / 2#px

dus als uw div 100px breed is:

margin-left: -50px

Tenzij ge een variabele div breedte hebt maar ik vermoed van niet? :)

*edit: tedju te laat ;)

*edit: voor moest ge het toch in jquery willen doen:

var div-width = $('#slider').width();
$('#slider').css('margin-left',(div-width / 2) + 'px' );
$('#slider').css('left','50%' );

Da zou normaal gezien ook moeten werken. (syntax niet gechecked) Maar CSS is hier dus wel de makkelijkere manier.
B

Bamboebahr

Legacy Member
dat werkt idd, maar het is de bedoeling als je over die knop hovert dat hij "omhoog" gaat en het (eerst verborgen) onderste deel toont, een soort van slide-up menu, en daarvoor heb ik dus een uitbreiding ook nodig op die JS.

Also,correct me if I'm wrong, maar zou dit stukje CSS geen x-browser issues geven?
C

ChickenTik

Legacy Member
Dan zet je in je css dit:

bottom: -60px

Dan zal hij nog 8px van de bovenkant van de div laten zien. In Jquery kan je dan dit doen:

Code: 
$('#slider').hover(function(){

$(this).animate({
    bottom: '0px'
  }, 1000);

},function(){

$(this).animate({
    bottom: '-60px'
  }, 1000);

});

});

Dit zal je blok naar boven doen glijden en duurt 1 seconde (die 1000 daar). Als je met je muis uit de div beweegt zal die naar zijn oorspronkelijke positie animeren.


Die CSS zal normaal gezien geen problemen geven. Of je moest op IE6 gaan kijken...
B

Bamboebahr

Legacy Member
Dat werkt nu wel,bedankt.

Wat ik mij nu wel afvraag: als ik dit nu niet wil animeren,maar gewoon doen verschijnen, zou dit dan werken:

$(this).bottom: '-60px'; of moet ik dit nog anders aanpakken?

(en geloof het of niet,maar we worden opgeleerd nu om ook nog met IE6 rekening te houden,gelukkig niet van toepassing op dit project -_-)
C

ChickenTik

Legacy Member
Je kan dan gewoon dit doen:

Code: 
$(this).css('bottom','-60px');


En IE6: Op mijn werk beheer ik een aantal websites waaronder één met zo'n 20000 bezoekers per dag. Daarvan gebruiken ongeveer 500 mensen IE6. Dus je zou kunnen zeggen dat je website in IE6 nog wel bereikbaar moet zijn en moet werken, maar eigenlijk valt dit aantal te verwaarlozen. Zeker als je weet hoeveel hacks en dergelijke je nodig hebt om je website te laten werken. :)
D

Dastardly

Legacy Member
$(this).css('bottom', '-60px');

gaat werken.

IE6 is nu eenmaal een klucht waar je niet rond kan, veel bedrijven gebruiken dit nog en laten niemand toe er iets anders op te zetten.

edit: nu was ik net te laat :p
B

Bamboebahr

Legacy Member
Alvast bedankt alletwee, nu kan ik weer wat verder doen ^^
Nu hoef ik enkel nog maar het probleem op te lossen dat het ding vanonder moet blijven als ik naar onder wil scrollen... back to the API's ^^

reps inc ;)
C

ChickenTik

Legacy Member
Als je een bottom waarde geeft dan blijft die toch vanonder aan je scherm plakken? Of bedoel je iets anders?
B

Bamboebahr

Legacy Member
Srry voor de trage reactie:
Als je die bottom waarde instelt op een absoluut gepositioneerd element, en ik moet scrollen omdat m'n tekst te groot is, dan blijft dat element niet aan de onderkant plakken maar scroll het mee omhoog. (dit is toch zo in firefox)
D

Dastardly

Legacy Member
position: absolute is dan ook relatief aan een 'parent' element.

als je position:fixed gebruikt is het relatief aan uw browservenster en zal hij wel vanonder blijven.
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan