2

I have two forms that have to use the same IDs, etc. however, one is specifically for mobile viewing and the other for everything else. I am using media queries and display: none to show/hide each, but of course they are both technically still coded ON the page, which means neither of them work. So instead I am trying to think of a way to totally remove the element based on screen size. It has to be actually removed and not simply hidden.

I'm stuck and I need to get the site migrated by tonight. Any suggestions would be most appreciated!!!

Beverly Lodge
  • 88
  • 9
  • you could use js, but are the forms completely different? could you not just have one form and resize the form fields to suit the screen size or just hide the fields you dont want? – David Aug 14 '15 at 00:30
  • Maybe you can try this `window.matchMedia` http://www.sitepoint.com/javascript-media-queries/ – Lin Yuan Aug 14 '15 at 00:36
  • The trouble is, the submit buttons do the same function. With two of them on the page, they both break. So I literally need to serve one or the other. – Beverly Lodge Aug 14 '15 at 00:41

1 Answers1

-1

Use the jQuery solution here to add a 'resize' event listener to window: jQuery on window resize

In your event handler check the screen size (Get the size of the screen, current web page and browser window)

Use jQuery remove() to remove the element http://api.jquery.com/remove/ then append() to add the new one: http://api.jquery.com/append/

(only remove and add elements when changing from one size range to the other, not on every window resize)

Community
  • 1
  • 1
HankScorpio
  • 3,612
  • 15
  • 27
  • I'm pretty new to jquery so Im not sure how to write it. But I figured it would be best handled with jquery. I just need it to be able to say "remove this named element from screen sizes above 640px" or something like that... – Beverly Lodge Aug 14 '15 at 00:39
  • Yeah, you've got to write that function yourself. There's no built-in method for that. $(window).on('resize', function(){ // Check screen size. If it's above X, do blah. If it's below X, do bleh; }); – HankScorpio Aug 14 '15 at 00:40
  • So far I've got something like this, but it's not working... $(document).ready(function () { if($(this).width() >500){ $('div.mobivis').remove(); } }); – Beverly Lodge Aug 14 '15 at 01:29
  • Put what I wrote `$(window).on('resize', function...)` into that `ready` function, the put your width calculation etc inside that new event listener function. – HankScorpio Aug 15 '15 at 02:33