locked
responsive javascript problem RRS feed

  • Question

  • User-605499000 posted

    This is for a magazine that uses fixed javascript for the pages.  I need to have a responsive page and not sure how to do it.  Since each page is fixed with a width of 566, do I need to write 2 programs, one for the computer and one for the tablets; Below is part of the page regarding pages.

    It details the left and right of each page *2.  Since the page is fixed I don't know how to break it up to a single page for a tablet and side by side pages for the computer.

    Any ideas you have would be very helpful.

    Jen

    function BmDisplayCoords(_page, _left, _top) {
    if (_page === 0 || _page === BmPageCount())
    _left -= Math.abs(bmPageWidth / 2);

    if (_left > bmPageWidth) {
    _page++;
    _left -= bmPageWidth;
    }

    if (bmObjNavPageText !== null)
    bmObjNavPageText.firstChild.nodeValue = _page + ", " + _left + ", " + _top;

    function BmMouseCoords(e) {
    if (e.pageX || e.pageY)
    return { x: e.pageX, y: e.pageY };

    if (document.documentElement.clientLeft)
    return { x: e.clientX + document.documentElement.scrollLeft - document.documentElement.clientLeft, y: e.clientY + document.documentElement.scrollTop - document.documentElement.clientTop };
    else
    return { x: e.clientX + document.body.scrollLeft - document.body.clientLeft, y: e.clientY + document.body.scrollTop - document.body.clientTop };
    };

    function BmExpandWindow() {
    top.window.moveTo(0, 0);

    if (document.all) {
    top.window.resizeTo(screen.availWidth, screen.availHeight);
    }
    else {
    if (document.layers || document.getElementById) {
    if (top.window.outerHeight < screen.availHeight || top.window.outerWidth < screen.availWidth) {

    BmWindowResize = function () {
    var windowSize = BmScreenSize();

    _top = BM_NAVIGATION_HEIGHT + (windowSize.height - bmPageHeight - BM_NAVIGATION_HEIGHT) / 2;

    if (_top < BM_NAVIGATION_HEIGHT + 2)
    _top = BM_NAVIGATION_HEIGHT + 2;

    _left = (windowSize.width - bmPageWidth * 2) / 2;

    if (_left < 0)
    _left = 0;

    if (bmObjWrapper) {
    bmObjWrapper.style.top = _top + "px";
    bmObjWrapper.style.left = _left + "px";
    }

    if (bmObjNavWrapper) {
    _navWidth = windowSize.width;

    if (_navWidth < bmPageWidth * 2)
    _navWidth = bmPageWidth * 2;

    bmObjNavWrapper.style.width = _navWidth + "px";
    }
    };

    BmScreenSize = function () {
    var _width = 0;
    var _height = 0;

    if (typeof (window.innerWidth) === "number") {
    //Non-IE
    _width = window.innerWidth;
    _height = window.innerHeight;
    }
    else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
    //IE 6+ in 'standards compliant mode'
    _width = document.documentElement.clientWidth;
    _height = document.documentElement.clientHeight;
    }
    else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
    //IE 4 compatible
    _width = document.body.clientWidth;
    _height = document.body.clientHeight;
    }

    return { width: _width, height: _height };
    };

    function BmResetPageLabel() {
    var _page = (bmCurrentPage === 0) ? "1" : bmCurrentPage.toString();
    _page = _page + " of " + BmPageCount().toString();

    bmObjNavPageText.firstChild.nodeValue = _page;
    };

    //

    InsertDinamicDiv = function (group, id, css, left, top, width, height, onClick, onOver, onOut, onMove) {
    if (group === 1 || group === BmPageCount())
    left += Math.abs(bmPageWidth / 2);
    else if (group % 2 !== 0)
    left += bmPageWidth;

    return bmDynamicDiv.Insert(group, id, css, left, top, width, height, onClick, onOver, onOut, onMove);
    };

    InsertDinamicDivArea = function (group, id, css, x1, y1, x2, y2, onClick, onOver, onOut, onMove) {
    return InsertDinamicDiv(group, id, css, x1, y1, x2 - x1, y2 - y1, onClick, onOver, onOut, onMove);
    };

    DisplayTalkingBalloon = function (text, duration, balloonType) {
    if (bmFlipping || bmAligning || bmSwitching)
    return;

    bmTalkingBalloon.Display(text, duration, bmMouseCoords, BmScreenSize(), balloonType);

    };

    HideTalkingBalloon = function () {
    bmTalkingBalloon.Hide();
    };


    Mag_UserFeedback = function (subject, message) {
    if (subject.length === 0 || message.lenght === 0)
    return "FAILED_FORMAT";

    if (window.XMLHttpRequest)
    xmlHttp = new XMLHttpRequest();
    else // for older IE 5/6
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

    var url = "UserFeedback.aspx?subject=" + subject + "&message=" + message;

    xmlHttp.open("GET", url, false);
    xmlHttp.send(null);

    return xmlHttp.responseText;
    };

    AddIndexToJumpTo = function (page, text) {
    if (bmObjJumpToSelect !== null)
    AddOptionToDropdown(bmObjJumpToSelect, text, page);
    };

    AddOptionToDropdown = function (dropdownObj, text, value) {
    if (dropdownObj === null)
    return;

    var opt = document.createElement("option");

    opt.text = text;
    opt.value = value;

    dropdownObj.options.add(opt);
    };

    // properties
    BmPageCount = function () { return bmPages.length - 1; };
    BmSpreadCount = function () { return Math.abs(BmPageCount() / 2 + BmPageCount() % 2); };

    // default magazine info
    var bmPageWidth = 566;
    var bmPageHeight = 680;
    var bmCurrentPage = 0;
    var bmNextPage = 0;
    var bmPages = new Array();

    unction BmPageAction(page, action) {
    if (page !== 0) {
    if (action === Actions.OPEN)
    bmDynamicDiv.ShowGroup(bmCurrentPage);
    else
    bmDynamicDiv.HideGroup(bmCurrentPage);

    BmActionPageInOut(bmCurrentPage, action);
    }

    if (page !== BmPageCount()) {
    if (action === Actions.OPEN)
    bmDynamicDiv.ShowGroup(bmCurrentPage + 1);
    else
    bmDynamicDiv.HideGroup(bmCurrentPage + 1);

    BmActionPageInOut(bmCurrentPage + 1, action);
    }
    }

    // --------------------------------------------------------------------------------------------------------------
    // --------------------------------------------------------------------------------------------------------------

    var bmActionsInOut = new Array();
    var bmActionsInOutCount = 0;

    function BmActionInOut(page, actionIn, actionOut) {
    this.page = page;
    this.actionIn = actionIn;
    this.actionOut = actionOut;
    }

    function BmAddActionInOut(page, actionIn, actionOut) {
    bmActionsInOut[bmActionsInOutCount] = new BmActionInOut(page, actionIn, actionOut);
    bmActionsInOutCount++;
    }

    function BmActionPageInOut(_page, _action) {
    //alert(_page + "," +_action);

    for (i = 1; i <= bmActionsInOutCount; i++) {
    if (bmActionsInOut[i - 1].page === _page) {
    if (_action === Actions.OPEN)
    eval(bmActionsInOut[i - 1].actionIn);
    else
    eval(bmActionsInOut[i - 1].actionOut);
    }
    }
    }
    //

    BmLeftMostPosition = function () {
    var _pageLeft = parseInt(bmObjPageLeft.style.left);
    var _pageRight = parseInt(bmObjPageRight.style.left);

    return Math.min(_pageLeft, _pageRight);
    };

    BmRightMostPosition = function () {
    var _pageLeft = parseInt(bmObjPageLeft.style.left) + parseInt(bmObjPageLeft.style.width);
    var _pageRight = parseInt(bmObjPageRight.style.left) + parseInt(bmObjPageRight.style.width);

    return Math.max(_pageLeft, _pageRight);
    };

    // Page Left
    bmObjPageLeft = document.createElement("div");
    bmObjPageLeft.setAttribute("id", "bmPageLeft");

    bmObjPageLeft.style.display = "block";
    bmObjPageLeft.style.margin = "0px";
    bmObjPageLeft.style.padding = "0px";
    bmObjPageLeft.style.position = "absolute";
    bmObjPageLeft.style.overflow = "hidden";
    bmObjPageLeft.style.zIndex = 53;
    bmObjPageLeft.style.backgroundColor = "#ffffff";
    bmObjPageLeft.style.backgroundImage = "none";
    bmObjPageLeft.style.backgroundRepeat = "no-repeat";
    bmObjPageLeft.style.backgroundPosition = "right";
    bmObjPageLeft.style.top = "0px";
    bmObjPageLeft.style.left = (bmPageWidth / 2) + "px";
    bmObjPageLeft.style.width = "0px";
    bmObjPageLeft.style.height = bmPageHeight + "px";

    bmObjContainer.appendChild(bmObjPageLeft);

    // Page Right
    bmObjPageRight = document.createElement("div");
    bmObjPageRight.setAttribute("id", "bmPageRight");

    bmObjPageRight.style.display = "block";
    bmObjPageRight.style.margin = "0px";
    bmObjPageRight.style.padding = "0px";
    bmObjPageRight.style.position = "absolute";
    bmObjPageRight.style.overflow = "hidden";
    bmObjPageRight.style.zIndex = 54;
    bmObjPageRight.style.backgroundColor = "#ffffff";
    bmObjPageRight.style.backgroundImage = "none";
    bmObjPageRight.style.backgroundRepeat = "no-repeat";
    bmObjPageRight.style.backgroundPosition = "left";
    bmObjPageRight.style.top = "0px";
    bmObjPageRight.style.left = (bmPageWidth / 2) + "px";
    bmObjPageRight.style.width = bmPageWidth + "px";
    bmObjPageRight.style.height = bmPageHeight + "px";

    bmObjContainer.appendChild(bmObjPageRight);


    // Next Page Left
    bmObjNextPageLeft = document.createElement("div");
    bmObjNextPageLeft.setAttribute("id", "bmNextPageLeft");

    bmObjNextPageLeft.style.display = "block";
    bmObjNextPageLeft.style.margin = "0px";
    bmObjNextPageLeft.style.padding = "0px";
    bmObjNextPageLeft.style.position = "absolute";
    bmObjNextPageLeft.style.overflow = "hidden";
    bmObjNextPageLeft.style.zIndex = 3000;
    bmObjNextPageLeft.style.backgroundColor = "Transparent";
    bmObjNextPageLeft.style.backgroundImage = "none";
    bmObjNextPageLeft.style.backgroundRepeat = "no-repeat";
    bmObjNextPageLeft.style.backgroundPosition = "left";
    bmObjNextPageLeft.style.top = "0px";
    bmObjNextPageLeft.style.left = (bmPageWidth + bmPageWidth / 2) + "px";
    bmObjNextPageLeft.style.width = "0px";
    bmObjNextPageLeft.style.height = bmPageHeight + "px";

    bmObjContainer.appendChild(bmObjNextPageLeft);

    // Next Page Right
    bmObjNextPageRight = document.createElement("div");
    bmObjNextPageRight.setAttribute("id", "bmNextPageRight");

    bmObjNextPageRight.style.display = "block";
    bmObjNextPageRight.style.margin = "0px";
    bmObjNextPageRight.style.padding = "0px";
    bmObjNextPageRight.style.position = "absolute";
    bmObjNextPageRight.style.overflow = "hidden";
    bmObjNextPageRight.style.zIndex = 3001;
    bmObjNextPageRight.style.backgroundColor = "Transparent";
    bmObjNextPageRight.style.backgroundImage = "none";
    bmObjNextPageRight.style.backgroundRepeat = "no-repeat";
    bmObjNextPageRight.style.backgroundPosition = "right";
    bmObjNextPageRight.style.top = "0px";
    bmObjNextPageRight.style.left = (bmPageWidth + bmPageWidth / 2) + "px";
    bmObjNextPageRight.style.width = "0px";
    bmObjNextPageRight.style.height = bmPageHeight + "px";

    bmObjContainer.appendChild(bmObjNextPageRight);

    if (bmNextPage > bmCurrentPage) {
    // Pages
    bmObjNextPageLeft.style.left = (bmPageWidth * 2 - _size * 2) + "px";
    bmObjNextPageLeft.style.width = _size + "px";

    bmObjNextPageRight.style.left = (bmPageWidth * 2 - _size) + "px";
    bmObjNextPageRight.style.width = _size + "px";

    // Next Pages
    if (bmCurrentPage === 0) {
    bmObjPageLeft.style.left = (bmPageWidth * 2 - _size * 2) + "px";
    bmObjPageLeft.style.width = (_size) + "px";
    }
    else {
    bmObjPageLeft.style.left = "0px";
    bmObjPageLeft.style.width = bmPageWidth + "px";
    }

    if (bmNextPage === BmPageCount()) {
    bmObjPageRight.style.left = bmPageWidth + "px";
    bmObjPageRight.style.width = (bmPageWidth - _size) + "px";
    }
    else {
    bmObjPageRight.style.left = bmPageWidth + "px";
    bmObjPageRight.style.width = bmPageWidth + "px";
    }


    top.window.outerHeight = screen.availHeight;
    top.window.outerWidth = screen.availWidth;
    }
    }

    Sunday, May 19, 2019 11:39 PM

All replies

  • User-2054057000 posted

    Are you implementing responsive design in your web page then you should use Bootstrap to create responsive designs easily. Here you don't have to create such JavaScript methods to detect screen size as bootstrap will do it automatically.

    Monday, May 20, 2019 3:52 AM
  • User839733648 posted

    Hi bumples18,

    According to your description and code, I'm sorry that I could not reproduce your issue successfully.

    If possible, please provide more details like related html code so that it will be easier for us to help with you.

    Besides, my suggestion for a responsive page is that you could use library like bootstrap to design.

    Bootstrap is an open source toolkit for developing with HTML, CSS, and JS.

    Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system,

    extensive prebuilt components, and powerful plugins built on jQuery.

    The page will automatically fit the PC or mobile or any other page size and the design of the page is pleasing.

    Best Regards,

    Jenifer

    Monday, May 20, 2019 4:16 AM
  • User-605499000 posted

    Thanks for getting back to me. I had sent only parts of the javascript page to you which I was afraid was going to be confusing. Sorry about that.  

    Bootstrap will not work, I tried that.  If you go to bumples.com you can see an issue.  The magazine has the fixed javascript with the story and then the games which are also in javascript.  I am using visual studio asp.net c#.

    The problem is the pages are fixed at 566px width and 660 height.  

    html, css and javascript are all in use. I have not tried sass or jquery but maybe that is the solution.  

    Thanks Jen

    Monday, May 20, 2019 3:02 PM
  • User753101303 posted

    Hi,

    Sass (a CSS processor) and jQuery (a JavaScript library) won't make any real change on how your browser works. Not sure which problem you had with bootstrap.

    I would suggest to start with CSS. Do you want something  like https://css-tricks.com/almanac/properties/c/columns/ to show one or two columns ?

    Monday, May 20, 2019 4:19 PM
  • User-605499000 posted

    Thank you everyone, I have decided that for right now I have reduced the width of the magazine and that should allow everyone to see both pages.

    Thanks again,

    Jen

    Tuesday, May 28, 2019 2:51 PM