Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Well i was trying to implement a slider in html using css and javascript. Found few references but they were not completely helpful. So find below my implementation. Part of it is taken from somewhere else in the web tho i dont remember from where. Anyway here it goes: 1>This slider is based on a button that you click.</p> <p>1>HTML code</p> <pre><code>&lt;div class="SwitchBtn" &gt; &lt;input type="checkbox" class = "SwitchBtn_Check" id = "checkboxForSwitch" style = "display:none;"/&gt; &lt;div class = "transitionSwitch"&gt; &lt;input type = "button" class = "SwitchBtn_Btn off" id="buttonForSwitch" name = "TurnOn" onclick = "toggleStandBy()" /&gt; &lt;div class = "slider_label off" id = "labelForSwitch" &gt; &lt;div class = "SwitchBtn_active" id= "btnAct" &gt;&lt;span class = "switchOn"&gt;On&lt;/span&gt;&lt;/div&gt; &lt;div class = "SwitchBtn_inactive" id= "btnInact" &gt;&lt;span class = "switchOff"&gt;Off&lt;/span&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>2>CSS code</p> <pre><code>/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@Related to switch button start@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */ .SwitchBtn{ position: relative; /*this is very important or else precentage used in its child nodes will take effect of the next parent which has anything other than static*/ overflow: hidden; height:44.56px; width:148.10px; -webkit-box-shadow: 0 0 0 2px rgb(145, 149, 155); -moz-box-shadow: 0 0 0 2px rgb(145, 149, 155); box-shadow: 0 0 0 2px rgb(145, 149, 155); -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; -webkit-user-select:none; -moz-user-select:none; } .transitionSwitch{ overflow: hidden; margin-left: 0; width:100%; height: 100%; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; -moz-transition: margin 0.3s ease-in 0s; -webkit-transition: margin 0.3s ease-in 0s; transition: margin 0.3s ease-in 0s; } .SwitchBtn_Check:checked+ .transitionSwitch{ margin-left:50%; } .slider_label{ position:absolute; width:150%; height:100%; overflow: hidden; margin-left:-50%; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: 0 0 0 2px rgb(145, 149, 155); -moz-box-shadow: 0 0 0 2px rgb(145, 149, 155); box-shadow: 0 0 0 2px rgb(145, 149, 155); } .switchOn { position:relative; top:5.57px; /*vvvsma half of vvsma i.e. 11.14px*/ left:11.14px; /*vvsma half of vsma i.e. 22.28px*/ } .switchOff { position:relative; top:5.57px; left:11.14px; } .SwitchBtn_active{ position:absolute; width:50%; height:100%; vertical-align:center; left:0; font-weight: normal; font-family: Avenir, Tahoma, Arial, Verdana; color: #FCF9F9; font-size: 26.21px; text-indent:10px; background-image: -moz-linear-gradient(top, #7EA3D5 0%, #5C89C7 50%, #3966B0 51%, #3764AF 100%); background-image: -webkit-linear-gradient(top, #7EA3D5 0%, #5C89C7 50%, #3966B0 51%, #3764AF 100%); background-image: -o-linear-gradient(top, #7EA3D5 0%, #5C89C7 50%, #3966B0 51%, #3764AF 100%); background-image: linear-gradient(top, #7EA3D5 0%, #5C89C7 50%, #3966B0 51%, #3764AF 100%); -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; } .SwitchBtn_inactive { width:50%; height:100%; vertical-align:center; position:absolute; right:0; font-weight: normal; font-family: Avenir, Tahoma, Arial, Verdana; color: #291818; font-size: 26.21px; text-indent:45px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; background-image: -moz-linear-gradient(top, rgb(236,236,237) 0%, rgb(208,209,211) 50%, rgb(185,187,189) 51%, rgb(190,191,194) 100%); background-image: -webkit-linear-gradient(top, rgb(236,236,237) 0%, rgb(208,209,211) 50%, rgb(185,187,189) 51%, rgb(190,191,194) 100%); background-image: -o-linear-gradient(top, rgb(236,236,237) 0%, rgb(208,209,211) 50%, rgb(185,187,189) 51%, rgb(190,191,194) 100%); background-image: linear-gradient(top, rgb(236,236,237) 0%, rgb(208,209,211) 50%, rgb(185,187,189) 51%, rgb(190,191,194) 100%); } .SwitchBtn_Btn{ width:50%; height:100%; position:absolute; z-index:1; margin-left:0; -webkit-box-shadow: 0 0 0 0.5px rgb(145, 149, 155); -moz-box-shadow: 0 0 0 0.5px rgb(145, 149, 155); box-shadow: 0 0 0 0.5px rgb(145, 149, 155); background-image: -moz-linear-gradient(top, rgb(236,236,237) 0%, rgb(208,209,211) 50%, rgb(185,187,189) 51%, rgb(190,191,194) 100%); background-image: -webkit-linear-gradient(top, rgb(236,236,237) 0%, rgb(208,209,211) 50%, rgb(185,187,189) 51%, rgb(190,191,194) 100%); background-image: -o-linear-gradient(top, rgb(236,236,237) 0%, rgb(208,209,211) 50%, rgb(185,187,189) 51%, rgb(190,191,194) 100%); background-image: linear-gradient(top, rgb(236,236,237) 0%, rgb(208,209,211) 50%, rgb(185,187,189) 51%, rgb(190,191,194) 100%); -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; } /* @@@@@@@@@@@@@@@@@@@@@@@Related to switch button End@@@@@@@@@@@@@@@@ */ </code></pre> <p>3>Javascript Code a>The below example is with respect to Ajax</p> <pre><code>function toggleStandBy() { var xmlhttp; if(window.XMLHttpRequest) xmlhttp = new XMLHttpRequest(); else xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState==4 &amp;&amp; xmlhttp.status==200) { if(xmlhttp.responseText == "1") { document.getElementById('checkboxForSwitch').checked = !document.getElementById('checkboxForSwitch').checked; } } } xmlhttp.open("POST","http://192.168.1.x/sample.php",true); xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); if(document.getElementById('buttonForSwitch').name == "TurnOn") { document.getElementById('buttonForSwitch').name = "TurnOff"; xmlhttp.send("state=1"); } else if(document.getElementById('buttonForSwitch').name == "TurnOff") { document.getElementById('buttonForSwitch').name = "TurnOn"; xmlhttp.send("state=0"); } } </code></pre> <p>a>The below is a simple example</p> <pre><code>function toggleStandBy() { if(document.getElementById('buttonForSwitch').name == "TurnOn") { document.getElementById('buttonForSwitch').name = "TurnOff"; } else if(document.getElementById('buttonForSwitch').name == "TurnOff") { document.getElementById('buttonForSwitch').name = "TurnOn"; } document.getElementById('checkboxForSwitch').checked = !document.getElementById('checkboxForSwitch').checked; } </code></pre> <p>The images of how the button appears is as below</p> <p><img src="https://i.stack.imgur.com/7dl4N.jpg" alt="Off button"> <img src="https://i.stack.imgur.com/fYFe0.jpg" alt="On button"> <img src="https://i.stack.imgur.com/zJ8Br.jpg" alt="Toggle slide"></p> <p>The appearance changes a tiny winy bit based on the browser.(Obviously dont get expect it to look completely proper on IE. If you remove gradient and put normal colors it will work in IE as well OR "just add background-color: property along with background-image: in CSS and since IE takes background-color: and does not support background-image: your reqd background color will be shown without the need for any particular browser sepcification implementations")</p>
    singulars
    1. This table or related slice is empty.
    1. POHTML toggle buttons
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USKasper van den Berg
    1. USebdo
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload