Category: Web Development

Web Development

Identify If you are not at the top of a webpage while it loads or refresh and add class to a Div or HTML Elements using jQuery

allaboutbasic

Suppose you are visiting a page and you scrolled to a portion of that page, now if you refresh or reload the page, you need to check you are not at the top of the website
and add a class to a HTML Elements. So This jQuery code will help you achieve this.

	<script>
	jQuery(document).ready(function(){
		 
 
    var windowpos = jQuery(window).scrollTop();
	console.log(windowpos);
      
      if(windowpos>100){
        jQuery('CLASS OR ID OF HTML ELEMENTS').addClass('CLASS YOU WANT TO ADD');
      }
 }); 	
 </script>
Web Development

How to add own custom font without the help of plugins in wordpress or any sites.

allaboutbasic

Here I am sharing the small procedure about how to use own custom font without the help of plugins in wordpress site. This procedure can be used for any type of sites or platform.

Here are the steps:

  1. At first upload your choiceable font ( which you want to use in the site ) in the root directory using ftp or through cpanel. I have attached screenshot for better understanding
Continue reading “How to add own custom font without the help of plugins in wordpress or any sites.” →
Web Development

Custom Homepage HTML code section for Shopify

allaboutbasic

Sometimes you may need to put some html code in the Homepage of your shopify site. Here I am sharing you the steps and code to create custom html section.

Create home-custom-html.liquid file under section ( screenshot attached )

Paste this code in the newly created home-custom-html.liquid 

<div id="section-cta">
  <div class="container">
    {{ section.settings.text }}  
    
  </div>
</div>
{% schema %}
{
  "name": "HomePage Custom HTML",
  "settings": [
    {
      "id": "text",
        "type": "html",
        "label": "Add custom html below",
        "default": "<p>Add your text here</p>"
    } 
  ],
  "presets": [
    {
      "name": "HomePage Custom HTML",
      "category": "Custom HTML"
    }
  ]
}
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}
Web Development

Exclude or Remove specific product to appear in search result : Shopify

allaboutbasic

Sometimes you may need to exclude specific product to appear in search result. Here I am sharing you a tricks which i got in shopify community.

So the tricks is, put a tag , for example “Special” tag in the product and that tagged product will be removed from search result. Here i am sharing the code

{% for item in search.results %}

    {% assign hidden_tag = false %}
    
    {% for tag in item.tags %}
        {% if tag == 'special' %}
            {% assign hidden_tag = true %}
        {% endif %}
    {% endfor %}

    {% if hidden_tag == true %}
        {% comment %}
            If it contains the tag, do this
        {% endcomment %}
                 
    {% else %}
        {% comment %}
            If it doesn't contain the tag, do this
        {% endcomment %}
        
{% endfor %}
Web Development

Shopify: Crate a Simple Add To Cart Button and Redirect it Directly to the Checkout Page

allaboutbasic

My knowledge of Shopify is little, but did some little works in Shopify which were little and JQuery and CSS based Job. I am sharing you a piece of code which can help anyone using shopify to create a simple Add To Cart button and put it anywhere and make it redirect to checkout page. Here is the code:

<form  class="product-form" action="/cart/add" data-productid="PRODUCT ID"  method="post"> 
  <input type="hidden" name="id" data-productid="PRODUCT ID" class="product-select" value="VARIANT ID" data-variant-title="VARIANT TITLE" />
  <input type="submit" value="Add To Cart" class="btn btn btn-default" />
<input type="hidden" name="return_to" value="/checkout/" />
</form>
Web Development

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

allaboutbasic

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.

allaboutbasic

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

allaboutbasic

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

allaboutbasic

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