Databases
StackOverflow2013
Postsdbo
POHow to switch between css with jquery
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to switch between css with jquery
    primarykey
    data
    text
    <p>I have two forms which are places inside a ul and <code>&lt;li id=visa class=active&gt;</code> can be used to show one form and <code>&lt;li id=mastercard class=active&gt;</code> can be used to show the other form at a time.But the jquery I have below is made in such a way that its an onclick function.When I click on a link,visa,visa class is active,whn i click on mastercard,mastercard is active.But instead of onclick function I need a jquery which can make the class active on input given in a card_number field.When I input a number starting with 4,<code>&lt;li id=visa class=active&gt;</code> must be done,and when I insert number starting with 5 <code>&lt;li id=mastercard class=active&gt;</code> must take place.</p> <p>Given below is my html</p> <pre><code> &lt;html lang="en"&gt; &lt;head&gt; &lt;script src="jquery-1.7.2.min.js"&gt;&lt;/script&gt; &lt;script&gt; jQuery(document).ready(function(){ // Switch cards jQuery('.switchCard').click(function(e){ var newCard = jQuery(this).attr('href'); e.preventDefault(); jQuery('.cards li.active').fadeOut('fast',function(){ jQuery(this).removeClass('active'); jQuery(newCard).fadeIn('fast',function(){ jQuery(newCard).addClass('active'); }); }); }); }); &lt;/script&gt; &lt;script src="main.js"&gt;&lt;/script&gt; &lt;link rel="stylesheet" href="style.css" /&gt; &lt;/head&gt; &lt;body&gt; &lt;section class="card-select"&gt; &lt;h2&gt;Select Payment Type&lt;/h2&gt; &lt;div class="wrap"&gt; &lt;a href="#visa" class="switchCard"&gt; &lt;img src="visa.png"&gt; &lt;/a&gt; &lt;a href="#mastercard" class="switchCard"&gt; &lt;img src="mastercard.png"&gt; &lt;/div&gt; &lt;/section&gt; &lt;ul class="cards"&gt; &lt;li id="visa" class="active"&gt; &lt;section class="credit-card visa gr-visa"&gt; &lt;div class="logo"&gt;visa&lt;/div&gt; &lt;form&gt; &lt;h2&gt;Payment Details&lt;/h2&gt; &lt;ul class="inputs"&gt; &lt;li&gt; &lt;label&gt;Card Number&lt;/label&gt; &lt;input type="text" name="cardnumber" pattern="[0-9]{13,16}" class="full gr-input" required /&gt; &lt;/li&gt; &lt;li&gt; &lt;label&gt;Name on card&lt;/label&gt; &lt;input type="text" name="card_name" size="20" class="month gr-input" required /&gt; &lt;li class="expire last"&gt; &lt;label&gt;Expiration&lt;/label&gt; &lt;div class="dropdown"&gt; &lt;select name="one" class="dropdown-select month gr-input"&gt; &lt;option value=""&gt;Month&lt;/option&gt; &lt;option value="1"&gt;Jan&lt;/option&gt; &lt;option value="2"&gt;Feb&lt;/option&gt; &lt;option value="3"&gt;Mar&lt;/option&gt; &lt;option value="4"&gt;Apr&lt;/option&gt; &lt;option value="5"&gt;May&lt;/option&gt; &lt;option value="6"&gt;Jun&lt;/option&gt; &lt;option value="7"&gt;Jul&lt;/option&gt; &lt;option value="8"&gt;Aug&lt;/option&gt; &lt;option value="9"&gt;Sep&lt;/option&gt; &lt;option value="10"&gt;Oct&lt;/option&gt; &lt;option value="11"&gt;Nov&lt;/option&gt; &lt;option value="12"&gt;Dec&lt;/option&gt; &lt;/select&gt; &lt;/div&gt; &lt;div class="dropdown"&gt; &lt;select name="one" class="dropdown-select year gr-input"&gt; &lt;option value=""&gt;Year&lt;/option&gt; &lt;option value="2013"&gt;2013&lt;/option&gt; &lt;option value="2014"&gt;2014&lt;/option&gt; &lt;option value="2015"&gt;2015&lt;/option&gt; &lt;option value="2016"&gt;2016&lt;/option&gt; &lt;option value="2017"&gt;2017&lt;/option&gt; &lt;option value="2018"&gt;2018&lt;/option&gt; &lt;option value="2019"&gt;2019&lt;/option&gt; &lt;option value="2020"&gt;2020&lt;/option&gt; &lt;option value="2021"&gt;2021&lt;/option&gt; &lt;option value="2022"&gt;2022&lt;/option&gt; &lt;option value="2023"&gt;2023&lt;/option&gt; &lt;option value="2024"&gt;2024&lt;/option&gt; &lt;/select&gt; &lt;/div&gt; &lt;div class="clearfix"&gt;&lt;/div&gt; &lt;/li&gt; &lt;li class="cvc-code last"&gt; &lt;label&gt;CVV Code&lt;/label&gt; &lt;input type="text" name="cvc_code" value="174" size="10" class="gr-input" required /&gt; &lt;/li&gt; &lt;input type="post" name="submit" value="Pay Now" class="fsSubmitButton"/&gt; &lt;div class="clearfix"&gt;&lt;/div&gt; &lt;/ul&gt; &lt;/form&gt; &lt;div class="watermark"&gt;visa&lt;/div&gt; &lt;/section&gt; &lt;/li&gt; &lt;li id="mastercard"&gt; &lt;section class="credit-card mastercard gr-mastercard"&gt; &lt;div class="logo"&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt; &lt;form&gt; &lt;h2&gt;Payment Details&lt;/h2&gt; &lt;ul class="inputs"&gt; &lt;li&gt; &lt;label&gt;Card Number&lt;/label&gt; &lt;input type="text" name="card_number" pattern="[0-9]{13,16}" class="full gr-input" required /&gt; &lt;/li&gt; &lt;li&gt; &lt;label&gt;Name on card&lt;/label&gt; &lt;input type="text" name="card_name" size="20" class="month gr-input" required /&gt; &lt;li class="expire last"&gt; &lt;label&gt;Expiration&lt;/label&gt; &lt;div class="dropdown"&gt; &lt;select name="one" class="dropdown-select month gr-input"&gt; &lt;option value=""&gt;Month&lt;/option&gt; &lt;option value="1"&gt;Jan&lt;/option&gt; &lt;option value="2"&gt;Feb&lt;/option&gt; &lt;option value="3"&gt;Mar&lt;/option&gt; &lt;option value="4"&gt;Apr&lt;/option&gt; &lt;option value="5"&gt;May&lt;/option&gt; &lt;option value="6"&gt;Jun&lt;/option&gt; &lt;option value="7"&gt;Jul&lt;/option&gt; &lt;option value="8"&gt;Aug&lt;/option&gt; &lt;option value="9"&gt;Sep&lt;/option&gt; &lt;option value="10"&gt;Oct&lt;/option&gt; &lt;option value="11"&gt;Nov&lt;/option&gt; &lt;option value="12"&gt;Dec&lt;/option&gt; &lt;/select&gt; &lt;/div&gt; &lt;div class="dropdown"&gt; &lt;select name="one" class="dropdown-select year gr-input"&gt; &lt;option value=""&gt;Year&lt;/option&gt; &lt;option value="2013"&gt;2013&lt;/option&gt; &lt;option value="2014"&gt;2014&lt;/option&gt; &lt;option value="2015"&gt;2015&lt;/option&gt; &lt;option value="2016"&gt;2016&lt;/option&gt; &lt;option value="2017"&gt;2017&lt;/option&gt; &lt;option value="2018"&gt;2018&lt;/option&gt; &lt;option value="2019"&gt;2019&lt;/option&gt; &lt;option value="2020"&gt;2020&lt;/option&gt; &lt;option value="2021"&gt;2021&lt;/option&gt; &lt;option value="2022"&gt;2022&lt;/option&gt; &lt;option value="2023"&gt;2023&lt;/option&gt; &lt;option value="2024"&gt;2024&lt;/option&gt; &lt;/select&gt; &lt;/div&gt; &lt;div class="clearfix"&gt;&lt;/div&gt; &lt;/li&gt; &lt;li class="cvc-code last"&gt; &lt;label&gt;CVV Code&lt;/label&gt; &lt;input type="text" name="cvc_code" value="174" size="10" class="gr-input" required /&gt; &lt;/li&gt; &lt;input type="post" name="submit" value="Pay Now" class="fsSubmitButtonM"/&gt; &lt;div class="clearfix"&gt;&lt;/div&gt; &lt;/ul&gt; &lt;/form&gt; &lt;div class="watermark"&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt; &lt;/section&gt; &lt;/li&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>The css is</p> <pre><code>/* === Basic reset === */ * { margin: 0; padding: 0; outline: none; box-sizing:border-box; } a&gt;img { border: none; } header, footer, article, section, nav, aside { display: block; } /* === General === */ body { font-family:Arial; font-size: 14px; background:#ddd; } .clearfix { clear:both; } /* === Credit Card === */ .credit-card { display:block; position:relative; width:93.75%; /* This is 300px on 320px wide screen */ max-width:500px; /* Just to make sure that it doesnt get crazy on bg screens */ min-width:300px; /* And make sure that it contains at least some size */ margin:30px auto; padding:20px; overflow:hidden; border-radius:6px; z-index:1; } .credit-card .inputs { list-style:none; margin-top:30px; } .credit-card .inputs li { margin-bottom:30px; } .credit-card .inputs li.last { margin-bottom:10px; } .credit-card .inputs li.expire { float:left; width:70%; margin-right:5%; } .credit-card .inputs li.expire input{ float:left; width:35%; } .credit-card .inputs li.expire input.month{ width:30%; margin-right:5%; } .credit-card .inputs li.cvc-code { float:right; width:20%; } .creditcatd .inputs ul.cvc-code{ display: inline; } .credit-card .inputs li.cvc-code input { width:70%; } .credit-card .watermark { position:absolute; z-index:10; } .credit-card form { position:relative; z-index:50; } .credit-card .logo { position:absolute; top:15px; right:20px; text-transform:uppercase; font-weight:bold; } /* === Visa === */ .visa { color:#fff; box-shadow: 0px 0px 4px rgba(0,0,0,0.8), inset 0px 1px 3px rgba(255,255,255,0.3), inset 0px 0px 2px rgba(255,255,255,0.2); } .visa h2 { text-shadow:1px 1px 2px rgba(17,121,173,0.8); } .visa .logo { color:rgba(255,255,255,0.9); font-size:2em; font-style:italic; text-shadow:0px 0px 3px rgba(17,123,173,0.9); } .visa .logo:after { content:' '; position:absolute; left:0px; top:5px; width: 0; height: 0; border-top: 10px solid orange; border-left: 10px solid transparent; } .visa .watermark { bottom:-100px; left:-50px; color:rgba(255,255,255,0.06); font-size:20em; font-weight:bold; font-style:italic; } /* === Mastercard === */ .mastercard { color:#fff; box-shadow: 0px 0px 4px rgba(0,0,0,0.8), inset 0px 1px 3px rgba(255,255,255,0.3), inset 0px 0px 2px rgba(255,255,255,0.3); } .mastercard h2 { text-shadow:0px 1px 1px #2D4DAA; } .mastercard label { color:rgba(255,255,255,0.7); text-shadow:0px 1px 1px rgba(0,0,0,0.4); } .mastercard input { border:1px solid rgba(39,70,157,0.8); } .mastercard .logo div { float:left; width:25px; height:25px; border-radius:15px; background:rgba(239,209,57,0.8); } .mastercard .logo div:first-child { background:rgba(223,40,40,0.8); margin-right:-10px; } .mastercard .watermark { bottom:-130px; left:15%; } .mastercard .watermark div { float:left; width:200px; height:200px; border-radius:100px; background:rgba(239,209,57,0.1); } .mastercard .watermark div:first-child { background:rgba(223,40,40,0.1); margin-right:-60px; } /* === Forms === */ label { display:block; margin-bottom:8px; color:rgba(255,255,255,0.6); text-transform:uppercase; font-size:1em; font-weight:bold; text-shadow:0px 1px 2px rgba(17,123,173,0.6); } input { display:block; padding:10px 8px; color:#999; font-size:1em; font-weight:bold; text-shadow:1px 1px 1px #fff; border:1px solid rgba(16,103,133,0.6); box-shadow:0px 0px 3px rgba(255,255,255,0.5), inset 0px 1px 4px rgba(0,0,0,0.2); border-radius:3px; } input.full { width:100%; } /* === Gradients === */ .gr-visa { background: #1db1cf; /* Old browsers */ background: -moz-linear-gradient(top, #1db1cf 0%, #1078ab 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1db1cf), color-stop(100%,#1078ab)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #1db1cf 0%,#1078ab 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #1db1cf 0%,#1078ab 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #1db1cf 0%,#1078ab 100%); /* IE10+ */ background: linear-gradient(to bottom, #1db1cf 0%,#1078ab 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1db1cf', endColorstr='#1078ab',GradientType=0 ); /* IE6-9 */ } .gr-mastercard { background: #4d86ce; /* Old browsers */ background: -moz-linear-gradient(top, #4d86ce 0%, #2d4daa 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d86ce), color-stop(100%,#2d4daa)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #4d86ce 0%,#2d4daa 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #4d86ce 0%,#2d4daa 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #4d86ce 0%,#2d4daa 100%); /* IE10+ */ background: linear-gradient(to bottom, #4d86ce 0%,#2d4daa 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4d86ce', endColorstr='#2d4daa',GradientType=0 ); /* IE6-9 */ } .gr-input { background: #d3d3d3; /* Old browsers */ background: -moz-linear-gradient(top, #d3d3d3 0%, #d9d9d9 38%, #e5e5e5 82%, #e7e7e7 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d3d3d3), color-stop(38%,#d9d9d9), color-stop(82%,#e5e5e5), color-stop(100%,#e7e7e7)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #d3d3d3 0%,#d9d9d9 38%,#e5e5e5 82%,#e7e7e7 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #d3d3d3 0%,#d9d9d9 38%,#e5e5e5 82%,#e7e7e7 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #d3d3d3 0%,#d9d9d9 38%,#e5e5e5 82%,#e7e7e7 100%); /* IE10+ */ background: linear-gradient(to bottom, #d3d3d3 0%,#d9d9d9 38%,#e5e5e5 82%,#e7e7e7 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d3d3d3', endColorstr='#e7e7e7',GradientType=0 ); /* IE6-9 */ } .dropdown { display: inline-block; position: relative; overflow: hidden; height: 28px; width: 150px; background: #f2f2f2; border: 1px solid; border-color: white #f7f7f7 #f5f5f5; border-radius: 3px; background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.06)); background-image: -moz-linear-gradient(top, transparent, rgba(0, 0, 0, 0.06)); background-image: -o-linear-gradient(top, transparent, rgba(0, 0, 0, 0.06)); background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.06)); -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08); } .dropdown:before, .dropdown:after { content: ''; position: absolute; z-index: 2; top: 9px; right: 10px; width: 0; height: 0; border: 4px dashed; border-color: #888 transparent; pointer-events: none; } .dropdown:before { border-bottom-style: solid; border-top: none; } .dropdown:after { margin-top: 7px; border-top-style: solid; border-bottom: none; } .dropdown-select { position: relative; width: 130%; margin: 0; padding: 6px 8px 6px 10px; height: 28px; line-height: 14px; font-size: 12px; color: #62717a; text-shadow: 0 1px white; /* Fallback for IE 8 */ background: #f2f2f2; /* "transparent" doesn't work with Opera */ background: rgba(0, 0, 0, 0) !important; border: 0; border-radius: 0; -webkit-appearance: none; } .dropdown-select:focus { z-index: 3; width: 100%; color: #394349; outline: 2px solid #49aff2; outline: 2px solid -webkit-focus-ring-color; outline-offset: -2px; } .dropdown-select &gt; option { margin: 3px; padding: 6px 8px; text-shadow: none; background: #f2f2f2; border-radius: 3px; cursor: pointer; } /* Fix for IE 8 putting the arrows behind the select element. */ .lt-ie9 .dropdown { z-index: 1; } .lt-ie9 .dropdown-select { z-index: -1; } .lt-ie9 .dropdown-select:focus { z-index: 3; } /* Dirty fix for Firefox adding padding where it shouldn't. */ @-moz-document url-prefix() { .dropdown-select { padding-left: 6px; } } .fsSubmitButton { float:left; width:20%; padding: 7px 12px 8px !important; font-size: 15px !important; background-color: #57d6c7; font-weight: bold; text-shadow: 1px 1px #57D6C7; color: #ffffff; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid #57D6C7; cursor: pointer; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset; -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset; -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset; } .fsSubmitButtonM { float:left; width:20%; padding: 7px 12px 8px !important; font-size: 15px !important; background-color: #3dbdae; font-weight: bold; text-shadow: 1px 1px #57D6C7; color: #ffffff; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid #57D6C7; cursor: pointer; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset; -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset; -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset; } /* === Card Selection === */ .card-select { margin-bottom:40px; } .card-select h2 { font-size:1.5em; color:#555; text-shadow:1px 1px 1px rgba(255,255,255,0.2); } .card-select .wrap { width:300px; margin:20px auto; padding:10px; border:1px solid #A0A0A0; background:rgba(176,176,176,0.4); border-radius:6px; box-shadow:0px 0px 2px rgba(0,0,0,0.5); } .card-select a { text-decoration:none; } .card-select a img { width:15%; } </code></pre> <p>the below css deals with the hiding and showing of the cards</p> <pre><code>/* === Cards === */ .cards {list-style:none;} .cards&gt;li {display:none;} .cards&gt;li.active {display:block;} </code></pre> <p>The jquery code which is used to switch the class using onclick is</p> <pre><code> jQuery(document).ready(function(){ // Switch cards jQuery('.switchCard').click(function(e){ var newCard = jQuery(this).attr('href'); e.preventDefault(); jQuery('.cards li.active').fadeOut('fast',function(){ jQuery(this).removeClass('active'); jQuery(newCard).fadeIn('fast',function(){ jQuery(newCard).addClass('active'); }); }); }); }) ; </code></pre> <p>I dont know how can I modify the above code,so that I can change the class when i enter a numbers starting with so and so in the card number field</p> <p>Im sorry for the long code description,but order to get a clear view,I have given this fully</p> <p>js fiddle <a href="http://jsfiddle.net/KaDy8/" rel="nofollow">http://jsfiddle.net/KaDy8/</a></p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USAjeesh
    1. USAjeesh
    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. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POHow to switch between css with jquery
      1. This table or related slice is empty.
      1. VTUpMod
    1. COmake a jsfiddle
      singulars
      1. POHow to switch between css with jquery
      1. USchiliNUT
    2. COhttp://api.jquery.com/change/ check might help
      singulars
      1. POHow to switch between css with jquery
      1. USAnobik
    3. COhttp://jsfiddle.net/KaDy8/ is the jsfiddle
      singulars
      1. POHow to switch between css with jquery
      1. USAjeesh
 

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