Web Development

Button Click and Website Color Change : Applicable for wordpress /HTML/PHP and other sites


If you want to create a website and want your visitor to view your site in dark mode or in different color, then this example is for you. I am sharing you the zip version of the example. Just download the zip and check the index.html file.

I have created the example with 2 style sheet. One for Light (white) version and another for Darker version. So, when you will visit the site for first time, it will be Light version and then if you click on the button, it will be darker version. Click Here To Download.

Button Click and Website Color Change

Web Development

Click on Audio player button and Audio mp3 will start playing, Using html, jquery, css :Applicable for wordpress also.


Click on Audio Player button and audio mp3 will start playing using html css and jquery Applicable for wordpress too

Recently one of my client asked me to  solve an issue. Just before starting a paragraph he wanted to show a audio player button. While clicking that audio player button mp3 audio file will be playing.

You can download the package (HTML, CSS, Javascript and font files).

You can use this package for:

  1. For PHP sites
  2.  Wordpress Sites
  3. HTML Sites.

Message me in comments section if you need help implemeting it in wordpress or any other platforms.

Web Development

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.

Web Development

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.

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

Web Development

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.
 
 

Continue reading “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.”