JS centering question

1,613 Posts

fourroses666 Reply #11, 13 years, 11 months ago

Hi Benmarte,

I had to move the website on a online server and fixed that refresh issue only on the live site (and now on the development one).
Your "bug" probably had to do with caching the page, FF and IE where oké. Now there are no problems except the centering?
It was almost centered because it does work when i say leftScroll = 500 then the map starts at left:500px; but I can't absolute center because I don't know browserwidth, so 500px is about center to many screens but not all.

I removed the left and top position again to test your script again, [the overscroll is only on the homepage]

I'm gone retry your script again right now, if I really can't fix it, if you don't mind, I can give you login.

##################

I can't get it to work, your script works but doesn't work into the overscroll script.
When I add a div arround overscroll it doesnt work, and giving the map img an id and your script directed to that I see the style being left being calculated but that doesn't do the center. (only need left / right center)

I really think it has to be set into the overscroll script, somewhere the leftScroll = is set in overscroll.js, with my rookie skills with js I think about line 490 lol.

When I look into the source the overscroll scripts sets the #overscroll div:
left: 0px; top: 0px; position: relative; overflow: hidden; cursor: -moz-grab; so that has to be changed, your script need to overrule it.

Dunno if you understand what im talking about lipsrsealed

X
In FF i see this is being add to the source:

img id="test" src="/assets/templates/spring/img/kaart-wide.gif" style = "left: -578.5px;

[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 #12, 13 years, 11 months ago

If your on skype add me ben-marte I think I have an idea on how to solve it.

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

1,613 Posts

fourroses666 Reply #13, 13 years, 11 months ago

I'm not on Skype, I have msn or facebook (chat).

I think if somehow the left = position which is being added by the overscroll script needs to be commented out and hopefully your script adds the left= into the style?

// If its I small change which you can easely do when you have access to modx I can give you access to the develop site.

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

☆ A M B ☆
894 Posts

benmarte Reply #14, 13 years, 11 months ago

Try doing this:


//get the width of the stage 
var stageWidth = $(window).outerWidth();

//get the height of the stage
var stageHeight = $(window).outerHeight();

//the object to center
var objectToCenter = $('#overscroll');

//gets the outer width of the object to center
var objectWidth = objectToCenter.outerWidth();

//gets the outer height of the object to center
var objectHeight = objectToCenter.outerHeight();

//sets the left position of the object
var objectLeft = (stageWidth/2) - (pointerWidth/2);

//sets the top position of the object
var objectTop = (stageHeight/2) - (pointerHeight/2);

$(function(o){  
o = $("#overscroll").overscroll({
  cancelOn: '.no-drag',
        scrollLeft: objectLeft,
        scrollTop: objectTop
    }).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;
        }
    });
});

Hopefully that will solve your issue, let me know if it works.

Good luck,

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

1,613 Posts

fourroses666 Reply #15, 13 years, 11 months ago

No succes

The script is placed, probably its conflicting, can't drag the map.

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

☆ A M B ☆
894 Posts

benmarte Reply #16, 13 years, 11 months ago

Last thing I can suggest is to make the scrollLeft half the width of the image which is 1300 and the same for the scrollTop which is 861 and get rid of the code I made and see if that works.

Running out of ideas since I can't test it sorry.

Update:

I went to your page and saw theres some JS errors, make sure to change pointerWidth and pointerHeight to objectHeight and objectWIdth, that was a mistake on my part when I changed the JS that should fix it. [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 #17, 13 years, 11 months ago

I have changed it, indeed chrome gave an error, no more errors now, gona use the errorconsole more often.

Still no centering sad

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

1,613 Posts

fourroses666 Reply #18, 13 years, 11 months ago

Benmarte,

I think I've found the spot to fix this, on line 582 of the github script the starting margins and left position are set.

Here is the overscroll script: https://github.com/azoff/Overscroll/blob/master/jquery.overscroll.js

On line 582:

getThumbCss = function(size, options) {
  return {
    position: 'absolute',
    opacity: options.persistThumbs ? settings.thumbOpacity : 0,
    'background-color': 'black',
    width: size.width + 'px',
    height: size.height + 'px',
    'border-radius': size.corner + 'px',
    'margin': size.top + 'px 0 0 ' + size.left + 'px',
    'z-index': options.zIndex
  };
},

When i look at the source in FF I see this is being added to the #overscroll div, now need to calculate the center. (only need the left centering).

So I think this:
'margin': size.top + 'px 0 0 ' + size.left + 'px',

Needs to be something like:
'margin': size.top + 'px 0 0 ' + size.left + 'px' : 2 - half size.left ??

#edit

Second thoughts about it, i think it needs to be 50% browserwith - 50% div width.

[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 #19, 13 years, 11 months ago

The problem is we are getting the width of the wrong item, either put an id on the gif or a class we can target and change the objectToCenter variable to target this new ID or Class.

Overscrolls width and height equals the same as the browser window since it has overflow hidden that's why it's not working, if you do what I said above it should work because you are getting the width and height of the actual image and centering it based on the browser window.

Let me know if that works.

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

1,613 Posts

fourroses666 Reply #20, 13 years, 11 months ago

Wow, it works, thank you very much Ben!

Really appreciate sharing your time and knowledge with me.

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