making javascript pages reponsive in a magazine[Answered] RSS

• • Reply
  bumples18

  Member

  9 Points

  214 Posts

  making javascript pages reponsive in a magazine

  Apr 20, 2020 08:30 PM|bumples18|LINK

  Below is part of a code that was written in 09.  The pages in the magazine is javascipt. I need to make it responsive to tablets and phones. Right now it only works on desktop.

  If you go to bumples.com you can see the magazine but only using a desktop.  The magazine has fixed pages with JavaScript games.  

  Below is part of the code that was used for the mag. I need to change it for mobiles and phones. Any advice or program that you think would work would be great.  I am rewriting the whole program on aspnet core 3 mvc.  I am using bootstrap on the start of the web site.

  var debug1 = false;
  var debug2 = false;

  (function ($) {

  // Detect touch support
  $.support.touch = 'ontouchend' in document;

  // Ignore browsers without touch support
  if (!$.support.touch) {
  return;
  }
  // --------------------------------------------------------------------------------------------------------------
  //
  // Controls
  //
  // --------------------------------------------------------------------------------------------------------------

  var bmDragObject = null;
  var bmMoveObjectFunc = null;
  var bmMouseOffset = bmMouseCoords;

  function BmInitDragAndDrop(obj, func) {
  bmDragObject = obj;
  bmDragObject.style.cursor = "move";

  bmMoveObjectFunc = func;

  bmMouseOffset = bmMouseCoords;
  bmMouseOffset.x -= parseInt(bmDragObject.style.left);
  bmMouseOffset.y -= parseInt(bmDragObject.style.top);
  }

  function BmEndDragAndDrop(obj) {
  bmDragObject = null;
  obj.style.cursor = "pointer";
  }

  function BmInitializeEvents() {
  window.onresize = BmWindowResize;
  BmWindowResize(); // First call

  document.onmousemove = BmMouseMove;
  document.onmouseup = BmMouseUp;
  //document.onmouseout = BmMouseUp;
  //document.onmousedown = OnKeyPress;
  document.onkeydown = OnKeyDown;
  //document.onkeypress = OnKeyPress;

  document.oncontextmenu = function () { return false; };
  }

  OnMouseDown = function (e) {
  e = window.event || e; //e.button;
  };

  OnKeyPress = function (e) {
  e = window.event || e; //e.keyCode;
  };

  OnKeyDown = function (e) {
  e = window.event || e;

  switch (e.keyCode) {
  case 37: BmFlipPrevious(); break;
  case 38: BmFlipFirst(); break;
  case 39: BmFlipNext(); break;
  case 40: BmFlipLast(); break;
  default: break;
  }
  };

  function BmMouseMove(e) {
  if (!bmObjWrapper)
  return;

  e = e || window.event;
  bmMouseCoords = BmMouseCoords(e);

  // Mouse Position
  _left = bmMouseCoords.x;
  _top = bmMouseCoords.y;
  _page = bmCurrentPage;

  if (debug1)
  BmDisplayCoords(_page, _left, _top);

  // In relation to div
  _left = _left - BM_SHADOW_SIZE - parseInt(bmObjWrapper.style.left);
  _top = _top - BM_SHADOW_SIZE - parseInt(bmObjWrapper.style.top);

  if (debug2)
  BmDisplayCoords(_page, _left, _top);

  if (bmDragObject) {
  var obj = bmDragObject;
  var left = bmMouseCoords.x - bmMouseOffset.x;
  var top = bmMouseCoords.y - bmMouseOffset.y;

  bmMoveObjectFunc.MovePiece(obj, left, top);
  return false;
  }

  }

  function BmMouseUp() {
  if (bmDragObject !== null)
  bmDragObject.onmouseup();
  }

  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 };
  }

  I have looked at turn.js and that would change the pages but I still would have problems with the pages being responsive. Would jquery work or jquery mobile.

  Thanks jen

• • Reply
  yij sun

  Contributor

  4060 Points

  1575 Posts

  Re: making javascript pages reponsive in a magazine

  Apr 21, 2020 07:13 AM|yij sun|LINK

  Hi bumples18,

  Accroding to your description and codes,you haven't post any codes of bootstrap.As far as I think,bootstrap is adaptive.Could you tell us why you need to use turn.js?

  I suggest you could use bootstrap and you need note:

  1.Setting Up:ensuring you get a responsive Bootstrap website is as simple as placing the correct meta tag inside the head:

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  2.The container is used to contain everything.

  3.For the content section, you need to use  the new Flexbox-based Bootstrap grid system.

  More details,you could refer to below article:

  https://v4-alpha.getbootstrap.com/layout/overview/

  Best regards,

  Yijing Sun

  ASP.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today. Learn more >
• • Reply
  bumples18

  Member

  9 Points

  214 Posts

  Re: making javascript pages reponsive in a magazine

  Apr 21, 2020 02:39 PM|bumples18|LINK

  Thank you I am using bootstrap in the front end of the site but I don't think bootstrap will work on the magazine itself. I am studying jquery mobile and I think that will work. But I will try bootstrap first.  jQuery looks like it is more manageable and bootstrap is pretty rigid. I don't need turn.js because jquery mobile will do what I need for that page.

  Thank you very much for helping me.  

  Jen