JS centering question

1,613 Posts

fourroses666 Reply #1, 13 years, 11 months ago

(It's not really Modx related accept its build in modx, hope someone can help me out)

I'm using a nice script where I can do dragging on a map, it's full screen and looks a bit like googlemaps.

Example of dev site: http://tinyurl.com/bogwvle/

My problem:
On loading of the page the map starts at a given startingpoint. I can tell howmany pics from the left. I need to have it be loaded onto the center of the map.

Here is a little script where I can say start at left ..px

	$(function(o){	
	o = $("#overscroll").overscroll({
	  cancelOn: '.no-drag',
			scrollLeft: 350,
			scrollTop: 400
		}).on('overscroll:dragstart overscroll:dragend overscroll:driftstart overscroll:driftend', function(event){
			console.log(event.type);
		});
		$("#link").click(function(){
			if(!o.data("dragging")) {
				console.log("clicked!");
			} else {
				return false;
			}
		});
	});

Is there anyone with some js skills who knows how to solve my problem?

scrollLeft: 350, -> browser-width: 2 - 50% of map width?

Evolution user, I like the back-end speed and simplicity

☆ A M B ☆
894 Posts

benmarte Reply #2, 13 years, 11 months ago

Here you go I made this jsfiddle for you.

Hope that helps or at least gets you on the right track.

Good Luck.

Benjamin Marte
Interactive Media Developer
Follow Me on Twitter | Visit my site | Learn MODX

1,613 Posts

fourroses666 Reply #3, 13 years, 11 months ago

My js skills are not that great, thanks for the example, i think there is some script overruling it.
When commenting out the scrollLeft and add the center script on #overscroll it doesnt center. sad

Evolution user, I like the back-end speed and simplicity

☆ A M B ☆
894 Posts

benmarte Reply #4, 13 years, 11 months ago

Do you have a link I can look at so I can see what is causing the issue?

Sorry didn't see the link at top, it was early LOL, what exactly is it your trying to center on this page?

I see a bunch of pinkish dots and the sidebar. [ed. note: benmarte last edited this post 13 years, 11 months ago.]

Benjamin Marte
Interactive Media Developer
Follow Me on Twitter | Visit my site | Learn MODX

1,613 Posts

fourroses666 Reply #5, 13 years, 11 months ago

The (development) site is here:
http://tinyurl.com/bogwvle/

The map starts at top:0 left:0 which i like to have at the center (only the left one), the top can be the number. I added your code.

I think your code has to be placed into: jquery.overscroll.js ?
[ed. note: fourroses666 last edited this post 13 years, 11 months ago.]

Evolution user, I like the back-end speed and simplicity

☆ A M B ☆
894 Posts

benmarte Reply #6, 13 years, 11 months ago

Is this what you want to center?

If so that is one huge image, I would suggest cutting it to just have the map visible and use a solid color for the body background.

I don't know what overscroll is supposed to do but I'm sure the issue is the image is 2600px wide and it's left aligning it to the overscroll div which is 100% width of the browser, and it is scaling the image to the overscroll width so it will never center it.

You might just be able to do this with pure css if you cut the image and set the left margin in css half of the width of the image or you can put the image in a div specify it's width and use margin:0 auto to have it centered.

Good Luck.

Benjamin Marte
Interactive Media Developer
Follow Me on Twitter | Visit my site | Learn MODX

1,613 Posts

fourroses666 Reply #7, 13 years, 11 months ago

yes that image needs to be centered, actually, the whole div with clickable bullets etc.

I'll try to explain,

It's so uge because else some clickable bullets/dots are not reachable on large/wide screens, you can't move the map sideways then and the white contentfield overlaps. If you have a look right now, i can set a left and top px number, but its not the absolute center, not every screen has the same width.

Where I say leftScroll = 350 that needs to be (stageWidth/2) - (pointerWidth/2)+'px'

But that probably needs to be calculated in the jquery.overscroll.js script.

On line 493 there it the script says:

options.scrollLeft = options.scrollLeft === none ? null : math.abs(options.scrollLeft);

[ed. note: fourroses666 last edited this post 13 years, 11 months ago.]

Evolution user, I like the back-end speed and simplicity

☆ A M B ☆
894 Posts

benmarte Reply #8, 13 years, 11 months ago

Did you try putting the JS I gave you in after the script tag in your html file?

The code I gave you should not be in the overscroll, I checked the overscroll.js site and they are using a container for it you are using the body as a container so that might be an issue.

Benjamin Marte
Interactive Media Developer
Follow Me on Twitter | Visit my site | Learn MODX

1,613 Posts

fourroses666 Reply #9, 13 years, 11 months ago

I'm not sure where to put the script, I just added the (correct) fiddle script below the overscroll script in its own script tag. I doubt it will work that way, I can play a little arround with it trying to get it to work, setting another div arround it won't fix it. I'm glad I solved another problem with Chrome and Safari by setting off the cache, that was my biggest issue.

p.s. this is the script I use for the map:
http://www.azoffdesign.com/overscroll

Evolution user, I like the back-end speed and simplicity

☆ A M B ☆
894 Posts

benmarte Reply #10, 13 years, 11 months ago

Something is definitely wrong because your page never scrolls and theres no JS errors so I would say you markup for using overscroll is wrong, since it never scrolls and the sample on the site works just fine on my browser.

I downloaded a copy to my local to see if I can mess with it later today and see whats wrong.

Update: Something is definitely wrong I have to click on the spring logo in order to get the overscroll functionality working, when I do that the image is almost centered, weird.

Try running the centering code before the overscroll.

[ed. note: benmarte last edited this post 13 years, 11 months ago.]

Benjamin Marte
Interactive Media Developer
Follow Me on Twitter | Visit my site | Learn MODX