CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstrap
Tom Rudge
Tom Rudge

Reputation: 3272

Responsive viewport switch

Okay, so I'm building a site using the Bootstrap framework. I've found two excellent bits of functionality that I have added - the only thing is it would be great i they could work together.

1) Viewport button - this gives the user an option to see desktop version when on tablet and vice versa - this came from http://responsiveviewport.com/

2) A toggle switch - this turns an input boxes into a on/off switch or whatever switch you want - http://www.bootstrap-switch.org/

I've had a go at combining the two but my Jquery skills are still more towards amateur level. The issue I had was that the responsive button is a a href and not an input field I think the input needs to accept the URL to redirect to the page or refresh.

Can this be done? Would be a great little bit of functionality for all to use.

The below link is the viewport button:

            <a class='reView pull-left visible-xs visible-sm navbar-toggle' data-defaultText='Mobile View' data-coreText='Desktop View' href='index.html'>Desktop View</a>

Upvotes: 0

Views: 676

Answers (1)

Rob Quincey
Rob Quincey

Reputation: 2896

I'm guessing you want a toggle switch that says Mobile view | Desktop view? If so could you attach the setMobile()/setDefault() functions (Docs - scroll down to Extensions) of reView to the event handler of Bootstrap Switch.

Big flashing neon sign here to say that this is not working code, just some semi-pseudo code (is that a thing?)

$('#switch-change').on('switch-change', function (e, data) {
  //interrogate the switch to work out what position it has been switched to
  //if mobile
  reView.setMobile();
});

From what I understand from the docs, you should be able to use that to change the page to 'Mobile' view on the change event of the switch, without having to use <a>.

It does mean you will likely have to implement your own handling code on load to set the switch to the right position in the first place (likely using reView.mode;)

That's an educated guess anyway, I have not used either of these before (although I rather like the looks of Bootstrap Switch, so cheers for that).

Upvotes: 1

Related Questions