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.

Wordpress theme Editor by Array: Documentation and Modification of header, footer, sidebar, fonts, headings color and more.


theme Editor by array demo

Geared toward personal bloggers and photo bloggersEditor includes big typography and images, plus a tab-based sidebar with a spot for a social links menu, featured posts, and a site logo. Here I am sharing you some css style code using which you  can modify the theme and can give it a different look which you want.

You can download the Editor Theme by Array from here.

To modify Footer or Header files of Editor Theme, Download Editor Child theme.

You can ask question regarding any issue you are facing.

Read more of this post

Gateway By Rescue Themes : Modification of Header, footer, space, font, sidebar, content, images using css and documentation



Gateway is a wordpress theme developed by  Rescue Themes. Gateway is the perfect mix of class and elegance, a traditional yet customizable home for your content. Reinforce your brand with a site logo, add a bold header image and call to action, and showcase your best posts or a video with a special Homepage template. In wordpress.com you can use this theme for free. You can check demo of Gateway by Rescue Themes.

Here I am sharing you some css customization using which you can give your Gateway theme a new look.

You can download  Gateway By Rescue Themes (Parent theme)

Also,  to edit or modify  the theme  Download Gateway By Rescue Themes (Child theme)

You can ask question regarding any issue you are facing.

Read more of this post

Pictorico By Automattic : Theme for travel site, photoblogging or artwork and modifications of header,footer, contents, sidebar,fonts using css


Pictorico by Automattic is a single-column, grid-based theme with large featured images and a post slider, perfect for a photoblogging or travel site.

pictorico by automattic grid-based theme with large featured images and a post slider

Here I am sharing css customization to give your Pictorico theme  a new look.
You can ask question regarding any issue you are facing.

Read more of this post

Wordpress theme Nucleare By CrestaProject: Modification of Header, footer, space, font, sidebar, content, images using css and documentation


Nucleare By CrestaProject is a classic blog theme with a crisp, elegant design and plenty of handy features. A built-in search box, links to your favorite social networks, four widget areas, and beautifully styled post formats make this an ideal theme for your personal blog. You can check the demo of Nucleare by CrestaProject.

You can download Nucleare theme for your personal use.

Also  you can download Nucleare Child theme for any sort of modifications.

Nucleare By CrestaProject
Here I am sharing you some css styling using which you can give the Nucleare theme a new look as your own.

If you have any question or changes in mind feel free to ask me in comments section

Read more of this post

Theme Veggie by Anariel Design : Modifications of Header, blog,archive, single post, menus, contents and more using css.


theme Veggie by Anariel Design
If you are will to create a food or recipe related blog/site then Veggie theme by Anariel Design is for you. You can show your unique cooking techniques and recipe to the world using this Veggie theme.

Theme Veggie by Anariel Design comes free with wordpress.com premium or business plan.But if you are using wordpress.com free plan then you have to purchase it with $79.

Here I am sharing you some css styling using which you can give the veggie theme a new look as your own.

If you have any question or changes in mind feel free to ask me in comments section

Read more of this post

Greater then or Less then Conditional fields in Contact Form 7 : Show different fields based on a specific field value


Contact Form 7 Conditional field IF Then Else Logic
Sometimes you may want to show certain fields based on the value of another field.

For example
If age is greater then 18 Years you want to show Profession field
Contact Form 7 Conditional field IF Field value is greater then certain field new field will appear
and
If age is less then 18 years then School field will show

Contact Form 7 Conditional field IF Field value is less then new field appear
But you can use this technique for any other conditions

Here i am sharing you the Contact Form 7 code and corresponding jQuery code

Read more of this post

Photographer by Organic Themes : Modification of Width, single post, page, sidebar, footer, menus, font and more


Photographer by Organic themes is a beautiful minimal design theme which is perfect for photoblogging. If you are a serious Photographer or artist then you can check this theme to show your work to the world. You can check the demo of Photographer theme. If you are using wordpress.com Premium Plan, you can use it for free.

wordpress theme for photographer

Here I have shared some css (style) using which you can give the Photographer theme a new look.
You can ask me question regarding any issue you are facing in the comment section.

Read more of this post

Theme Illustratr by Automattic a minimalist portfolio theme: Modification of Header, footer, space, font, sidebar, content, images using css and documentation


theme illustratr by automattic documentation support and customization

Theme Illustratr by Automattic is a minimalist portfolio theme that helps to create a strong but beautiful online presence. It is primarily created for designers and photographers, it is a simple, powerful, and flexible theme. Here I have shared some css styling using which you can reshape the theme with your own style.

You can see the original demo of Theme Illustratr by Automattic.

Download Theme Illustratr by Automattic to use it in your own hosting.

You can ask question regarding any issue you are facing.

Read more of this post

Theme Sketch By Automattic an Artwork theme with top featured slider: modify header, menus, links,font,color, footer and more


theme sketch by automattick a artwork theme

Sketch is a responsive portfolio theme, perfect for showcasing your creative talent, whether it be illustration, design, or photography. The theme’s clean, light design puts the focus on your projects.

You can Download Sketch Artwork theme by Automattic from here.

Demo of Sketch theme by Automattic.

You can ask question regarding any issue you are facing.

Read more of this post

%d bloggers like this: