Helpful codes, snippets, tips and tricks: CSS, HTML, JQuery, JavaScript, PHP

How to Show/Hide a div based on day of the week with jQuery

By Mika | Published: 07/13/2010

JavaScritpt

<script type="text/javascript">
$(document).ready(function() {
today=new Date()
thisDay=today.getDay()
$("#sunday").hide();
$("#monday").hide();
$("#tuesday").hide();
$("#wednesday").hide();
$("#thursday").hide();
$("#friday").hide();
$("#saturday").hide();
if (thisDay == 0){
$("#sunday").show();
}
if (thisDay == 1){
$("#monday").show();
}
if (thisDay == 2){
$("#tuesday").show();
}
if (thisDay == 3){
$("#wednesday").show();
}
if (thisDay == 4){
$("#thursday").show();
}
if (thisDay == 5){
$("#friday").show();
}
if (thisDay == 6){
$("#saturday").show();
}
});
</script>

Html

<div id="sunday">
<h3>Sunday</h3>
</div>
<div id="monday">
<h3>Monday</h3>
</div>
<div id="tuesday">
<h3>Tuesday</h3>
</div>
<div id="wednesday">
<h3>Wednesday</h3>
</div>
<div id="thursday">
<h3>Thrursday</h3>
</div>
<div id="friday">
<h3>Friday</h3>
</div>
<div id="saturday">
<h3>Saturday</h3>
</div>

Posted in JavaScript, jQuery | Tagged date, day of week, getDay, hide, JavaScript, jQuery, show | Leave a comment

How to change the message “No bookings found.” on Business Catalyst using JavaScript.

By Mika | Published: 07/08/2010

First wrap your module with an div like: <div id="app">{module...}</div>

Then include the following JavaScript code:

JavaScript

<script type="text/javascript">
$(document).ready(function() {
var td = document.getElementById(‘app’).innerHTML;
if(td=="No bookings found."){
document.getElementById(‘app’).innerHTML = "No events at this time";
}
});
</script>

Please, remove any blank space or break line between the div and module tag.

Posted in Business Catalyst / GoodBarry | Tagged bookings, Business Catalyst, change, found, JavaScript, message | Leave a comment

How to Force Opt-In automatically instead of having to go into each contacts details – Business Catalyst

By Mika | Published: 07/06/2010

just add: &Optin=True at the form action, see example below:

HTML example

<form action="/FormProcessv2.aspx?WebFormID=10090&OID={module_oid}&OTYPE={module_otype}&EID={module_eid}&CID={module_cid}&Optin=True" enctype="multipart/form-data" onsubmit="return checkWholeForm13472(this)" method="post" name="catwebformform13472">

Posted in Business Catalyst / GoodBarry | Tagged automatically, Business Catalyst, contacts, Force, How, Opt-In | Leave a comment

How to add a surcharge to the Amex option for the checkout form in the Online Store – Business Catalyst

By Mika | Published: 07/06/2010

Use onchange to alert the customer that a charge will occur and then the function doMath() calculates the surcharge.

JavaScript

<script type="text/javascript">
function checkSel(obj) {
var ind = obj.selectedIndex;
if (ind == 3) {
alert(‘This Card incurs a 3.5% Surcharge.’);
}
}
function doMath() {
if (CardType = "AMEX") {
var one = eval(document.catwebformform7818.Amount.value)
var prod = one * 1.03
document.catwebformform7818.Amount.value=custRound(prod,2);}
}
function custRound(x,places) {
return (Math.round(x*Math.pow(10,places)))/Math.pow(10,places)
}
</script>

Add the onchange into the dropdown:

HTML

<div class="item"><label>Card Type <span class="req">*</span></label> <select class="cat_dropdown" id="CardType" onchange="checkSel(this);" name="CardType">
<option value="1" selected="true">Visa</option>
<option value="2">Master Card</option>
<option value="3">Bank Card</option>
<option value="4">American Express</option>
<option value="5">Diners Club</option>
</select> </div>

Then add the onclick to the submit button to action the Maths script:

<input id="catwebformbutton" onclick="doMath()" type="submit" value="Submit" />

If you want apply this for Diners card as well, use the following:

if (ind == 3 || ind == 4) { alert(‘AMEX incurs a 3% Surcharge.\n Total Amount will be updated upon hitting the submit button.’); }

Posted in Business Catalyst / GoodBarry | Tagged add, American Express, Amex, Business Catalyst, checkout, Diners, form, GoodBarry, How, Online Store, surcharge | Leave a comment

How to Create a Drop Down Select with Links without a form submit.

By Mika | Published: 06/30/2010

HTML

<form action="../">
<select onchange="window.open(this.options[this.selectedIndex].value,’_top’)">
<option value="contact.html">Contact Page</option>
<option value="http://www.apple.com">Apple</option>
<option value="http://www.yahoo.com">Yahoo</option>
<option value="http://www.google.com">google</option>
<option value="about.html">About Us</option>
</select>
</form>

Demo

Posted in HTML, JavaScript | Tagged Drop Down, form, How to, HTML, JavaScript, Links, Select, submit | Leave a comment

How to Submit Form on Selection of Dropdown Item

By Mika | Published: 03/10/2010

HTML

<select class="dropdown" id="form2" name="form2" onchange="this.form.submit();">
<option value="*">– All –</option>
<option selected="selected" value="NSW">NSW</option>
<option value="WA">WA</option>
<option value="QLD">QLD</option>
<option value="VIC">VIC</option>
<option value="ACT">ACT</option>
<option value="NT">NT</option>
<option value="NZ">NZ</option>
</select>

Posted in HTML, JavaScript | Tagged Dropdown, onchange, Selection, Submit Form | 1 Comment

How to Automatically Re-size Images for iPhones/ iPods

By Mika | Published: 03/09/2010

CSS

@media screen and (max-device-width: 480px){
img{
max-width:100%;
height:auto;
}
}

Posted in CSS | Tagged auto, images, Iphone, Ipod, re-size, size | 1 Comment

How to Apply CSS styles to iPhones/iPods only

By Mika | Published: 03/09/2010

CSS

@media screen and (max-device-width: 480px){
/* All iPhone only CSS goes here */
}

Posted in CSS | Tagged CSS, How to, iPhones, iPods, only, styles | Leave a comment

How to Detect iPhone with JavaScript

By Mika | Published: 03/09/2010

Use Javascript to detect then apply different style for iPhone.

JavaScript

if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
if (document.cookie.indexOf("iphone_redirect=false") == -1) {
window.location = "http://yoursite.com/iphone";
}
}

Posted in JavaScript | Tagged Detect iPhone, How to, JavaScript | Leave a comment

Basic Default CSS Print Template

By Mika | Published: 02/23/2010

CSS

/* Set default width, margin, float, and
background. */
body, #wrap, #content, #container, {
width: 100%;
margin: 0;
float: none;
background: #fff url(none);
}
/* Remove any elements not needed in print.
This would include navigation, ads, sidebars, etc. */
#nav, .noprint, #footer {
display: none;
}
/* Set body font face, size, and color.
Consider using a serif font for readability. */
body {
font: 1em Arial, "Times New Roman", Times, serif;
color: #000;
}
/* Set heading font face, sizes, and color.
Diffrentiate your headings from your body text.
Perhaps use a large sans-serif for distinction. */
h1,h2,h3,h4,h5,h6, p, span {
font-family: Georgia, Arial, sans-serif;
color: #000;
}
h1 { font-size: 250%; }
h2 { font-size: 175%; }
h3 { font-size: 135%; }
h4 { font-size: 100%; font-variant: small-caps; }
h5 { font-size: 100%; }
h6 { font-size: 90%; font-style: italic; }
/* Make hyperlinks more usable.
Ensure links are underlined, and consider appending
the URL to the end of the link for usability. */
a:link, a:visited {
color: #ff9900;
text-decoration: underline; }
#content a:link:after, #content a:visited:after {
content: " (" attr(href) ") ";
}

HTML

<link rel="stylesheet" href="print.css" type="text/css" media="print" />

Posted in CSS | Tagged basic, CSS, default, print, standard print, tempalte | 2 Comments

Helpful codes, snippets, tips and tricks for web designers – Html, CSS, Flash, Actionscript, JavaScript, jQuery, PHP, Business Catalyst/Goodbarry, Xcode and iPhone

How to Show/Hide a div based on day of the week with jQuery

JavaScritpt

Html

How to change the message “No bookings found.” on Business Catalyst using JavaScript.

JavaScript

How to Force Opt-In automatically instead of having to go into each contacts details – Business Catalyst

HTML example

How to add a surcharge to the Amex option for the checkout form in the Online Store – Business Catalyst

JavaScript

HTML

How to Create a Drop Down Select with Links without a form submit.

HTML

Demo

How to Automatically Re-size Images for iPhones/ iPods

CSS

How to Apply CSS styles to iPhones/iPods only

CSS

How to Detect iPhone with JavaScript

JavaScript

Basic Default CSS Print Template

CSS

HTML

Search

Categories

Friends

Links

RSS Links

Archives

Helpful codes, snippets, tips and tricks for web designers – Html, CSS, Flash, Actionscript, JavaScript, jQuery, PHP, Business Catalyst/Goodbarry, Xcode and iPhone

JavaScritpt

Html

JavaScript

HTML example

JavaScript

HTML

HTML

Demo

HTML

CSS

CSS

JavaScript

CSS

HTML

Search

Categories

Friends

Links

RSS Links

Archives

Tags