BLOG

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

Mon, 21 May 2012 03:06:00 GMT

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

JavaScript


<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>

How to Create a Countdown Timer that Refreshes the Page Daily with Javascript

Thu, 17 May 2012 02:03:00 GMT

JavaScript


<script type="text/javascript">
    function getSeconds() {
        var now = new Date();
        var time = now.getTime();
        var midnight = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0);
        var ft = midnight.getTime() + 86400000;
        var diff = ft – time;
        diff = parseInt(diff / 1000);
        if (diff > 86400) {
            diff = diff – 86400
        }
        startTimer(diff);
    }
 
    var timeInSecs;
    var ticker;
 
    function startTimer(secs) {
        timeInSecs = parseInt(secs);
        ticker = setInterval("tick()", 1000);
        tick();
    }
 
    function tick() {
        var secs = timeInSecs;
        if (secs > 0) {
            timeInSecs–;
        } else {
            clearInterval(ticker); // stop  at zero
            getSeconds(); // start again
            window.location.reload(); // refresh page.
        }
 
        var hours = Math.floor(secs / 3600);
        secs %= 3600;
        var mins = Math.floor(secs / 60);
        secs %= 60;
        var result = ((hours < 10) ? "0" : "") + hours + " : " + ((mins < 10) ? "0" : "") + mins + " : " + ((secs < 10) ? "0" : "") + secs + "";
        document.getElementById("countdown").innerHTML = result;
    }
</script>

Simple and Smooth Expand and Collapse with jQuery

Wed, 16 May 2012 04:17:00 GMT

HTML example


<h2 class="myClass" id="trigger1">Click here to expand</h2>
<div class="hide-container">
     <p>Here goes whatever you want to expand/collapse</p>
     <p>Here goes whatever you want to expand/collapse</p>
     <p>Here goes whatever you want to expand/collapse</p>
     <p>Here goes whatever you want to expand/collapse</p>
</div>

CSS


.myClass {font-size:20px; color: #FF0000;}
div#hide-container {width: 500px; height: 300px; background-color: #ccc;}

jQuery


<script>
$(document).ready(function(){
 
        //Hide (Collapse) the toggle containers on load
        $(".hide-container").hide();
       
        //Switch the "Open" and "Close" state per click
        $("#trigger1").toggle(function(){
                $(this).addClass("active");
                }, function () {
                $(this).removeClass("active");
        });
 
       //Slide up and down on click
        $("#trigger1").click(function(){
                $(this).next(".hide-container").slideToggle("slow");
        });
</script>

How to display fields using select drop down and jQuery

Wed, 02 Nov 2011 02:10:00 GMT


<script type="text/javascript">
    $(document).ready(function(){
        $("#Select").change(function(){
            if ($(this).val() == "Other" ) {
                $("#OtherField").show();
            } else {
                $("#OtherField").hide();
            }
        });
    });      
</script>

How to Change the Default Text Selection Color with CSS

Thu, 27 Oct 2011 02:20:00 GMT

If you want to change your website's default text highlight color with any color of your choice, you can use the CSS3 declaration " ::selection" , which will replace your browser-level default text highlight color with a color that better suits your design.

See the example below with a RED for the background and WHITE for the text.

/* Firefox */
::-moz-selection {
       background-color: #FF0000;
       color: #fff;
}

/* Safari */
::selection {
       background-color: #FF0000;
       color: #ff;
}

Free slider with side navigation PSD for web designers

Wed, 26 Oct 2011 22:35:00 GMT

A high quality Photoshop PSD file of a slider with side navigation, easy to edit and customize.

Perfect for jQuery 'Coda'-like slider interface.

Download the PSD here!

How to change the message "Shopping cart is empty" across the entire website on Business Catalyst using jQuery

Mon, 10 Oct 2011 00:02:00 GMT

To customize the "Shopping cart is empty" message on the { module_shoppingcartsummary} you will need to add the following script to all your templates.


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">

    $.noConflict();

    jQuery(document).ready(function($) {

        var msg = $('td.cartSummaryItem').html();

        if(msg == "Shopping cart is empty." ) {

            jQuery('td.cartSummaryItem').replaceWith('Shopping Bag: 0 Items');    //replace with your own message

        }                            

    });

</script>

How to Customize Open Graph Tags to Maximize the Value of Your Facebook Like Buttons

Wed, 05 Oct 2011 22:56:00 GMT

Open Graph tags are tags that you add to the of your website to describe the entity your page represents, whether it is a band, restaurant, blog, or something else.

This allows Facebook to present a specific image, category, and other information that you can choose about your site when Likes of your content appear in user profiles and news feed.

To customize this information just add meta tags to the head of your site:


<meta property="og:tag name" content="tag value" />

See the examples:

    <title>The Rock (1996)</title>
    <meta content="The Rock" property="og:title" />
    <meta content="movie" property="og:type" />
    <meta content="http://www.imdb.com/title/tt0117500/" property="og:url" />
    <meta content="http://ia.media-imdb.com/rock.jpg" property="og:image" />
    <meta content="IMDb" property="og:site_name" />
    <meta content="USER_ID" property="fb:admins" />
    <meta content="A group of U.S. Marines, under command of
                   a renegade general, take over Alcatraz and
                   threaten San Francisco Bay with biological
                   weapons." property="og:description" />
    ...
  </head>

If you use Open Graph tags, the following six are required:

og:title - The title of the entity.
og:type - The type of entity. You must select a type from the list of Open Graph types.
og:image - The URL to an image that represents the entity. Images must be at least 50 pixels by 50 pixels. Square images work best, but you are allowed to use images up to three times as wide as they are tall.
og:url - The canonical, permanent URL of the page representing the entity. When you use Open Graph tags, the Like button posts a link to the og:url instead of the URL in the Like button code.
og:site_name - A human-readable name for your site, e.g., "IMDb".
fb:admins or fb:app_id - A comma-separated list of either the Facebook IDs of page administrators or a Facebook Platform application ID. At a minimum, include only your own Facebook ID.

Using pen Graph Tags on Business Catalyst

just add the meta tags that more suits your needs on your template, see example below:


        <meta property="og:type" content="food & Restaurant" />
        <meta property="og:url" content="{ module_siteurl}" />
        <meta property="og:image" content="http://yourdomain.com/images/blog/mythumbnail.jpg" />

Please note the use of BC tag to publish the correct URL of your blog post or webapp content:


{ module_siteurl}

In this case the the like button will always present the iamge you have selected and included in the meta tag, this prevents Facebook to insert a random image of your page, which sometimes is the CAPTCHA image or any other irrelevant imagery that could exists in your page for a different reason.

How to change the height of Invoice’s cell to fit longer product names - Business Catalyst

Wed, 21 Sep 2011 00:16:00 GMT

To change the size of product cell on Invoice’s table so they can fit 2 lines of text, just add the below code inside the INVOICE TEMPLATE on "Customize System Emails"


<style type="text/css">
.productitemcell{
height:60px;
}
</style>

How to disable the Autoresponder for Web Forms – Adobe Business Catalyst

Wed, 21 Sep 2011 00:11:00 GMT

Just add &SAR=False to the form code:


<form name="catwebformform47565" method="post" onsubmit="return 
checkWholeForm47565(this)" enctype="multipart/form-data" 
action="/FormProcessv2.aspx?WebFormID=12374&amp;OID={module_oid}&amp;OTYPE={module_otype}&amp;EID={module_eid}&amp;CID={module_cid}&amp;SAR=False">

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

Wed, 21 Sep 2011 00:06:00 GMT

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


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

How to add Google Plus button to multiple posts in your blog on Business Catalyst.

Tue, 23 Aug 2011 01:41:00 GMT

To add the google plus to every single post on your list layout you have to use the 'href' attribute to indicate the URL to be +1'd.

To do this, just log into admin area of your site, go to [Blog], [Advanced Layout Customization], [Blog Post List Layout] and paste the following code:

Place this tag where you want the +1 button to render


<g:plusone href="{ tag_itemurl_withhost}">

You need to use the tag { tag_itemurl_withhost} to set the right URL of the post. Easy.

And in your blog template please add this little code:


 
<script type="text/javascript">
 (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

*Please note you need to remove the first blank space of the { tag_itemurl_withhost}

Responsive Design Templates and Frameworks for Beginners and Experienced Web Designers

Mon, 22 Aug 2011 04:23:00 GMT

Designing for the web today means that you have to remember that people can view your website not only from their computer but also from different devices, such as a smart phone or a tablet, with many different screen resolutions. Designing a website for desktop and another version for mobiles was the solution until Ethan Marcotte created a very clever way to adjust the website look and feel and structure "automatically" to different screen resolutions (smaller and larger), using the media queries, introduced as part of the CSS3 specification. Responsive design is now the hottest topic in every web design community. It's a perfect solution for anyone who wants to have their website looking good in a very wide range of devices and screen resolutions.

Although coding and creating a responsive design its not that hard, it's always easier to start from a very good and well tested template or framework. Below it's a list of the best responsive design templates and frameworks I could find on the web.

1140 CSS Grid

inuit.css

Mobile Boilerplate

Skeleton

320 and Up

Less Framework 4

Hardboiled CSS3 Media Queries

How to Submit Form on Selection of Dropdown Item

Tue, 23 Aug 2011 05:56:00 GMT


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

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

Tue, 23 Aug 2011 05:59:00 GMT

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.