Button Click and Show Image or Card: You can use it for Tarot card readings or for your slider


tarot card reading program

Few days ago one of my client asked me to create a simple program for Tarot Card Reading. Where visitors will click on a button and random card will be visible. For this issue I have created a little code where 8 (eight) card will be visible randomly by clicking on the button.

Here is the logic

Suppose there is 8 (eight) cards and visitors will have to click on the button to see which number comes to him.

I have taken a random number between 1 (one) to 8 (eight) and managed to show that number of card.

For example : Visitor click on the button and Randomly 8 is selected by the program. Then card number 8(eight) will be visible.

Here is the code:

****** CSS Part ******


.card.container {

}
div#frame {
width: 900px;
height: 600px;
background: darkred;
display: block;
margin: auto !important;
position: relative;
}
.button {
display: block;
width: 191px;
height: 34px !important;
background: yellow;
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin-left: auto !important;
text-align: center !important;
margin-right: auto;
padding-top: 18px;
font-weight: bold;
cursor: pointer !important;
}

 

****** Code JQuery ******

 
<script>

jQuery(document).ready(function() {


jQuery('.button').on('click',function(){
var min =1;
var max = 8;
// and the formula is:
var random = Math.floor(Math.random() * (max - min + 1)) + min;
var src="img/"+random+".jpg"
jQuery("#frame img").attr("src",src);
//alert(src);

});

});

</script>
 

****** Code HTML ******

 
<div class="card container">

<div id="frame">
<img src="img/1.jpg"/>
<div class="button"> Click & See Your Card</div>
</div>

</div>
 

 

Here is the Full Tarot card changing program.

Time Zone issue: Local time to US or Canada (Pacific and Eastern ), Australia and New Zealand time converter using html and jquery


local time to US Pacific Eastern Australia or New zealand time converter

If you are working to convert the local time to US or Canada (Pacific and Eastern ), Australia or New Zealand time then you can use this code. Though using the same code and logic you can convert your local time to any Time Zone specific time.
This code is for advanced users and has 3(three) part. 1) Jquery part 2) HTML part 3) CSS part.

Read more of this post

Wordpress Web Development Tricks.How to add Drop down – Combo Box type Category List Box Just Below the Header Image/Header Navigation Menus in your blog or websites.


 

Before I have discussed Theme Bueno by Woo Themes CSS Style sheet Modification. Today I am going to show you how to add drop down Category Box just beneath the Header Image or Header Navigation Menus or Whereever you want. Though I have implemented this technique in Theme Bueno by Woo Theme.But you can easily implement this procedure in any of the theme you want to use.

The whole process I have described pictorially. Just Copy the code below and paste it according to the direction in the given image.
 
 

Read more of this post

%d bloggers like this: