0

I want to know how to make responsive switching options panel for the demo of the website. I want to know when user clicks on any responsive icon e.g, Desktop, mobile etc. the template should change its responsiveness automatically. Below is the example link of the site which having the same responsive panel option at the bottom of the page.

http://kopatheme.com/demo/upside-demo/

I want the same panel for my demo.

Samarth
  • 49
  • 2
  • 13
  • The website is using CSS [bootstrap](http://getbootstrap.com/) framework. You can build a similar panel once you learn how to use Bootstrap. – Ahs N Jul 27 '15 at 08:13
  • http://html5css3tuts.com/panth/ – Samarth Jul 27 '15 at 08:13
  • you can see that at bottom of the page there is a responsive switcher option having icons of mobile and tablet and kopathemes logo. I want that swticher. – Samarth Jul 27 '15 at 08:15

1 Answers1

0

They use Javascript/JQuery to control the buttons. When you press the button they place the content of the website in an iframe that they can modify with hight and length. So it gives an example of how it will look on a desktop, tablet or mobile. They just change the iframe height and length, the css will do the rest. They use an image as background just to make it a bit more fancy.

for more information about iframes: http://www.w3schools.com/tags/tag_iframe.asp

Jim
  • 361
  • 4
  • 16
  • ok thanks man but seriously i dont know how to apply it in iframe. Can you please tell the steps in short. it will be nice of you. – Samarth Jul 27 '15 at 08:31
  • @Samarth maybe this helps a bit http://stackoverflow.com/questions/25228056/responsive-iframe-using-bootstrap. I am not gonna help by writing code out, sorry – Jim Jul 27 '15 at 08:40
  • @Samarth if You think my answer is the best, please mark it as best answer. It helps other people when they search for answers – Jim Jul 27 '15 at 09:39