CODEWITHSUNDEEP
jquery-mobilesliderhide
Ossama
Ossama

Reputation: 2433

hide jquery mobile slider

I am Unable to hide the following slider using jquery mobile, here is my code can anyone help

javascript code:

$(document).ready(function($) {
$("#d_c").hide(); 
}

html code:

<label for="d_c" class="containing-element5">Design & Construct Type Project:</label>
<select name="d_c" id="d_c" data-role="slider" class="containing-element3" data-mini="true">
<option value="off">No</option>
<option value="on">Yes</option>
</select>

Upvotes: 0

Views: 273

Answers (1)

deblocker
deblocker

Reputation: 7687

To hide the native select element behind that nice label which looks like a Flipswitch, JQM is using absolute positioning, so you are out of luck here just because you are hiding the wrong element.

Please, let say it is somewhat unusual to hide just the Flipswitch and keep the corresponding caption visible but anyway, up to you. The solution here is to set a wrapper container and use the standard JQM class ui-screen-hidden to get the job done. You may use for that a trivial standard naming convention and attach to all your wrappers the suffix -container. Here is an example:

function toggleFlipswitch() {
  $("#d_c-container").toggleClass("ui-screen-hidden");
}

$(document).on("pagecreate", "#page-one", function() {
  $("#d_c-container").addClass("ui-screen-hidden");
});
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
  <div data-role="page" id="page-one">
    <div data-theme="a" data-role="header" data-position="fixed">
      <a href="#" onclick="toggleFlipswitch()" class="ui-btn-left ui-btn ui-btn-inline ui-mini ui-corner-all ui-btn-icon-left ui-icon-grid">Show/Hide Flipswitch</a>
      <span class="ui-title"></span>
    </div>
    <div data-role="content">
      <div id="d_c-container">
        <label for="d_c" class="containing-element5">Design & Construct Type Project:</label>
        <select name="d_c" id="d_c" data-role="slider" class="containing-element3" data-mini="true">
          <option value="off">No</option>
          <option value="on">Yes</option>
        </select>
      </div>
    </div>
  </div>
</body>
</html>

Upvotes: 1

Related Questions