ten1seven/jrespond

⛔️ DEPRECATED: jRespond is a simple way to globally manage javascript on responsive websites.

jrespond's Issues

which cases that document.body.clientWidth equal document.documentElement.clientWidth

I need to know the difference between
document.body.clientWidth and document.documentElement.clientWidth
and what is the different cases that make two values equal ?

What would be the best way to load a jQuery plugin in a enter:function()?

Hi I really love your plugin, works great.

That I want to do is only load a image slider at screen width of 640 and more..
so I do this:

 // call jRespond and add breakpoints
   var jRes = jRespond([
   {
      label: 'desktop',
      enter: 640,
      exit: 10000
   }
 ]);
// register enter and exit functions for a single breakpoint
 jRes.addFunc({
   breakpoint: 'desktop',
   enter: function() {
      // Load the Flexslider
      $('.flexslider').flexslider();
   },
      exit: function() {
   }
});

But Now I still need jQuery and the flexslider plugin loaded, how would I only load these within the enter:function as well?

Debugging with firebug almost impossible

Hi,

When jRespond is enabled in a website, it makes it very difficult (almost impossible) to debug the source code with firebug.

When you inspect the HTML source code with firebug, any dom node you unfold is automatically folded again, since the plugin alters attributes/elements in the dom and firebug, as usual, refreshes the view.

How do you tackle debugging when jRespond is enabled?

winWidth method is using IE conditional in Chrome when in an iframe

I'm noticing that when using jRespond inside an iframe in Chrome, the winWidth method is going inside the IE conditional. After looking into the issue, it appears the window.innerWidth is returning 0 which sets the !window.innerWidth conditional to be truthy. I would expect if window.innerWidth returns any number (including 0) then we should not be going inside the IE conditional. Is this expectation correct?

Below is the current winWidth conditional:

    // cross browser window width
    var winWidth = function() {

      var w = 0;

      // IE
      if (!window.innerWidth) {

        if (!(document.documentElement.clientWidth === 0)) {

          // strict mode
          w = document.documentElement.clientWidth;
        } else {

          // quirks mode
          w = document.body.clientWidth;
        }
      } else {

        // w3c
        w = window.innerWidth;
      }

      return w;
    };

Below is what I changed to get this working as I'm expecting:

    // cross browser window width
    var winWidth = function() {

      var w = 0;

      // IE
      if (window.innerWidth == null || window.innerWidth == undefined) {

        if (!(document.documentElement.clientWidth === 0)) {

          // strict mode
          w = document.documentElement.clientWidth;
        } else {

          // quirks mode
          w = document.body.clientWidth;
        }
      } else {

        // w3c
        w = window.innerWidth;
      }

      return w;
    };

I wanted to run this past you first to get your thoughts on if this was the expected behavior before issuing a pull request.

jRespond and Firefox select menu

Hello, I'm having a problem with jRespond in Firefox. My dropdown menus are redrawing or closing and reopening every half second when they are clicked on and open, causing a jumping effect. I'm using it with jPanelMenu. I'm not seeing it in any other browser. Am I doing something wrong? Here's the code:

<label for="departmentSelect" style="font-size:18px; line-height:22px; padding:0; margin:12px 4px 0 0; font-weight: bold;">Department / Interest:</label>
<select name="departmentSelect" onChange="MM_jumpMenu('parent',this,0)">
<option value="contact_us.asp" selected>Select one...</option>
<option value="contact_us.asp?d=1" >Department 1</option>
<option value="contact_us.asp?d=2" >Department 2</option>
<option value="contact_us.asp?d=3" >Department 3</option>
<option value="contact_us.asp?d=4" >Department 4</option>
<option value="contact_us.asp?d=5" >Department 5</option>
</select>

 //jRespond - responsive javascript management tool
            var jRes = jRespond([
                    {
                            label: 'small',
                            enter: 0,
                            exit: 800
                    },{
                            label: 'large',
                            enter: 801,
                            exit: 10000
                    }
            ]);
            jRes.addFunc({
                    breakpoint: 'small',
                    enter: function() {
                            jPM.on();
                    },
                    exit: function() {
                            jPM.off();
                    }
            });

jRespond and Blendid

Hi there, have been struggling for days to get blendid and jRespond to work together, adding the

provide: {
$: "jquery",
jQuery: "jquery",
"window.jQuery" : "jquery"
}

has sorted the majority of the issues I had with 3rd party libraries in the legacy codebase im using.
The main issue i have now is jRespond remains undefined.
I have tried "import { jRespond } from 'jrespond';
also have tried to import the alternatives from both the 0.1.0 package as well as the 1.0.0 package using yarn to add the packages.

Have i missed something in the task.config ? Have you any advice to get jRespond to work with Blendid ?

document.documentElement.clientWidth vs window.innerWidth

On Google Chrome 20.0 for OSX window.innerWidth seems to return the width including scrollbar on the right side and document.documentElement.clientWidth excluding the scrollbar.

I think document.documentElement.clientWidth should be the value returned by the winWidth() function. I understand that these values differ from browser to browser.

Add change function for breakpoints.

It would be useful for some cases to have a function that triggers when the window size changes within a breakpoint.

For instance, I had to resort to using jQuery to create equal height columns within a grid system. This of course needs to be updated every time the width changes within the desired range.

Thanks

Add Version

Hello, trying to install this library with RailsAssets. It looks like you need to add versioning to the repo for it to work.

https://rails-assets.org/components/new

jRespond has no versions defined. Please create an issue in component's repository.

publish to npmjs respository

for those who don't use bower but npm

Addition to remove function

Hey!

In my project I needed a way to dynamically remove functions for certain breakpoints so I added a removeFunc:

var removeFunction = function(opts) {

    var listener;

    if (opts && opts.breakpoint && (opts.enter || opts.exit)) {

        for (var i = mediaListeners.length - 1; i >= 0; i--) { // Loop backwards since we might remove items during the loop.

            listener = mediaListeners[i];

            if (listener.breakpoint == opts.breakpoint) {

                if (listener.enter == opts.enter) {
                    listener.enter = null;
                }

                if (listener.exit == opts.exit) {
                    listener.exit == null;
                }

                if (!listener.enter && !listener.exit) {
                    mediaListeners.splice(i, 1); // Remove breakpoint if no breakpoint listeners.
                }

            }

        }

    }

};

Bower

It would be nice if jRespond was available as a Bower package 👍

compare to cssobj

This lib https://github.com/cssobj/cssobj/ also do responsive for old browsers based on JS Object.

How this lib compared to cssobj ?

function is not triggered when page load.

Here is the code

            var outputStr = jQuery('body');

    jRes.addFunc({
        breakpoint: 'tablet',
        enter: function() {
            jQuery(outputStr).addClass('tablet'); // working when page load
            jQuery('.headertopnav').hide(); // is not working when page load

        },
        exit: function() {
            jQuery(outputStr).removeClass('tablet'); // working when page load
            jQuery('.headertopnav').show(); // is not working when page load

        }
    });

Above code is working fine when i am resizing browser but when i reload load page second line of function is not working.

Overlapping breakpoints

I would be REALLY useful to be able to create overlapping breakpoint.

Ex:

  jRes = jRespond([
  {
    label: 'phone',
    enter: 0,
    exit: 480
  },
  {
    label: 'tablet',
    enter: 481,
    exit: 980
  },
  {
    label: 'tablet-and-less',
    enter: 0,
    exit: 980
  }])

Actualy, it break and does'nt work.

Function doesn't load at breakpoint only when entering breakpoint

Seems strange. It runs the function only when I enter the breakpoint (make the screen wide then small again to enter a mobile breakpoint). It doesn't work when I refresh the page at a certain breakpoint.

Working locally so I can't provide an example... but I hope you have some help for me...