HTML Tips and Tricks https://www.codypaste.com/category/html-2/html/ THE WEB PLAYGROUND Wed, 21 Aug 2024 07:22:04 +0000 en-US hourly 1 https://wordpress.org/?v=6.9 https://www.codypaste.com/wp-content/uploads/2022/12/cropped-codypaste-32x32.png HTML Tips and Tricks https://www.codypaste.com/category/html-2/html/ 32 32 HTML Form Select Menu Styling https://www.codypaste.com/html-form-select-menu-styling/ https://www.codypaste.com/html-form-select-menu-styling/?noamp=mobile#respond Wed, 21 Aug 2024 07:22:04 +0000 https://www.codypaste.com/?p=1158 Here we will see how to style HTML Form  <select> menu. [crayon-6985e63cb5aa6574380282/]  

The post HTML Form Select Menu Styling appeared first on Cody Paste.

]]> Here we will see how to style HTML Form  <select> menu.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Select Dropdown</title>
    <style>
        /* Hide the native select */
        select {
            display: none;
        }

        /* Style the select wrapper */
        .select-wrapper {
            position: relative;
            width: 200px;
            cursor: pointer;
        }

        .selected-option {
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            background-color: #fff;
            color: #333;
            font-size: 16px;
        }

        .select-wrapper::after {
            content: '▼';
            position: absolute;
            top: 50%;
            right: 10px;
            transform: translateY(-50%);
            pointer-events: none;
            color: #333;
        }

        /* Custom dropdown styling */
        .custom-select {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            background-color: #fff;
            border: 1px solid #ccc;
            border-radius: 0 0 5px 5px;
            z-index: 1;
        }

        .custom-select .option {
            padding: 10px;
            cursor: pointer;
        }

        .custom-select .option:hover {
            background-color: red;
            color: #fff;
        }

        /* Highlight the selected option */
        .custom-select .option.selected {
            background-color: red;
            color: #fff;
        }

        /* Show dropdown when wrapper is active */
        .select-wrapper.active .custom-select {
            display: block;
        }
    </style>
</head>
<body>
    <div class="select-wrapper">
        <div class="selected-option">Select an option</div>
        <select>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
            <option value="4">Option 4</option>
        </select>
        <div class="custom-select">
            <div class="option" data-value="1">Option 1</div>
            <div class="option" data-value="2">Option 2</div>
            <div class="option" data-value="3">Option 3</div>
            <div class="option" data-value="4">Option 4</div>
        </div>
    </div>

    <script>
        const selectWrapper = document.querySelector('.select-wrapper');
        const selectElement = document.querySelector('select');
        const selectedOption = document.querySelector('.selected-option');
        const customSelect = document.querySelector('.custom-select');

        // Handle option click
        customSelect.querySelectorAll('.option').forEach(option => {
            option.addEventListener('click', () => {
                const value = option.getAttribute('data-value');
                const text = option.textContent;
                selectedOption.textContent = text;
                selectElement.value = value; // Set the value of the hidden select element

                // Update custom dropdown to highlight the selected option
                customSelect.querySelectorAll('.option').forEach(opt => {
                    opt.classList.remove('selected');
                });
                option.classList.add('selected');

                selectWrapper.classList.remove('active');
            });
        });

        // Toggle dropdown visibility on selected option click
        selectedOption.addEventListener('click', () => {
            selectWrapper.classList.toggle('active');
        });

        // Hide dropdown when clicking outside
        document.addEventListener('click', (e) => {
            if (!selectWrapper.contains(e.target)) {
                selectWrapper.classList.remove('active');
            }
        });
    </script>
</body>
</html>

 

The post HTML Form Select Menu Styling appeared first on Cody Paste.

]]> https://www.codypaste.com/html-form-select-menu-styling/feed/ 0 Move Element / Div on Scroll – Data Scroll Speed https://www.codypaste.com/move-element-div-on-scroll-data-scroll-speed/ https://www.codypaste.com/move-element-div-on-scroll-data-scroll-speed/?noamp=mobile#respond Sun, 20 Jan 2019 00:17:00 +0000 http://www.codypaste.com/?p=699 jQuery different scroll speeds on scroll, set different scroll speed to element. data-scroll-speed https://codepen.io/vipulrai/pen/vvoREM HTML: [crayon-6985e63cb6fce119398672/] CSS: [crayon-6985e63cb6fda881948599/] JS [crayon-6985e63cb6fde567272613/]  

The post Move Element / Div on Scroll – Data Scroll Speed appeared first on Cody Paste.

]]> jQuery different scroll speeds on scroll, set different scroll speed to element.

data-scroll-speed

https://codepen.io/vipulrai/pen/vvoREM

HTML:

<div class="content">
<div class="wrapper">
<div class="box" data-scroll-speed="2">S</div>
<div class="box" data-scroll-speed="3">C</div>
<div class="" data-scroll-speed="6">R</div>
<div class="box" data-scroll-speed="5">O</div>
<div class="box" data-scroll-speed="90">L</div>
<div class="box" data-scroll-speed="4">L</div>
</div>
</div>

CSS:

@import bourbon

body
font-family: arial, sans-serif

.content
height: 5000px

.wrapper
+display(flex)
+justify-content(center)
+align-items(center)
+size(100% 100vh)
+position(fixed, 0px null null 0px)

.box
+flex(none)
+size(100px)
line-height: 100px
text-align: center
font-size: 25px
color: #fff
background: #ff8330
will-change: transform

&:nth-of-type(2)
background: #E01B5D
&:nth-of-type(3)
background: #30FFFF
&:nth-of-type(4)
background: #B3FF30
&:nth-of-type(5)
background: #308AFF
&:nth-of-type(6)
background: #1BE059

JS

$.fn.moveIt = function(){
var $window = $(window);
var instances = [];

$(this).each(function(){
instances.push(new moveItItem($(this)));
});

window.addEventListener('scroll', function(){
var scrollTop = $window.scrollTop();
instances.forEach(function(inst){
inst.update(scrollTop);
});
}, {passive: true});
}

var moveItItem = function(el){
this.el = $(el);
this.speed = parseInt(this.el.attr('data-scroll-speed'));
};

moveItItem.prototype.update = function(scrollTop){
this.el.css('transform', 'translateY(' + -(scrollTop / this.speed) + 'px)');
};

// Initialization
$(function(){
$('[data-scroll-speed]').moveIt();
});

 

The post Move Element / Div on Scroll – Data Scroll Speed appeared first on Cody Paste.

]]> https://www.codypaste.com/move-element-div-on-scroll-data-scroll-speed/feed/ 0 Compress website for fast Loading https://www.codypaste.com/compress-website-for-fast-loading/ https://www.codypaste.com/compress-website-for-fast-loading/?noamp=mobile#respond Wed, 22 Jun 2016 06:57:32 +0000 http://www.codypaste.com/?p=454 For fast loading website you have to do some compression. 🙂 you can check page speed here: https://tools.pingdom.com/ https://developers.google.com/speed/pagespeed/insights/   Compress .jpg to .png: you can use photoshop for image compression: File – > Save for web and device.   Compress Js/Jquery: <script type=”text/javascript” src=”jquery_1.7.2.min.js” async></script> Add ‘async’ in js for compression.   Compress CSS: …

read more "Compress website for fast Loading"

The post Compress website for fast Loading appeared first on Cody Paste.

]]> For fast loading website you have to do some compression. 🙂

you can check page speed here:

  • https://tools.pingdom.com/
  • https://developers.google.com/speed/pagespeed/insights/

 

Compress .jpg to .png:

you can use photoshop for image compression: File – > Save for web and device.

 

Compress Js/Jquery:

<script type=”text/javascript” src=”jquery_1.7.2.min.js” async></script>

Add ‘async’ in js for compression.

 

Compress CSS:

<link href="style.css" rel="stylesheet" type="text/css" />

to

<script>
        var cb = function() {
        var l = document.createElement('link'); l.rel = 'stylesheet';
        l.href = 'style.css';
        var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h);
        };
        var raf = requestAnimationFrame || mozRequestAnimationFrame ||
        webkitRequestAnimationFrame || msRequestAnimationFrame;
        if (raf) raf(cb);
        else window.addEventListener('load', cb);
</script>

 

 

The post Compress website for fast Loading appeared first on Cody Paste.

]]> https://www.codypaste.com/compress-website-for-fast-loading/feed/ 0 Easy Page Preloader https://www.codypaste.com/easy-page-preloader/ https://www.codypaste.com/easy-page-preloader/?noamp=mobile#respond Tue, 03 May 2016 18:04:19 +0000 http://www.codypaste.com/?p=416 Easy Page Preloader in HTML/HTML5.   Now a days every websites are powered by Preloader. It will add interactivity to a webpage with some sort of animations.  Today I am going to tell how to create a simple jQuery Preloader with 2 lines of jQuery code & few lines of CSS code.       …

read more "Easy Page Preloader"

The post Easy Page Preloader appeared first on Cody Paste.

]]> Easy Page Preloader in HTML/HTML5.

 

Now a days every websites are powered by Preloader. It will add interactivity to a webpage with some sort of animations.  Today I am going to tell how to create a simple jQuery Preloader with 2 lines of jQuery code & few lines of CSS code.

 

 

 

Before </head>:

<script type="text/javascript">
  
  //Function to hide the loading div
  function loadingDivHide()
  {
      document.getElementById("loading_div").style.display = "none";
      document.getElementById("content_area_div").style.display = "";
  }
  
  </script>
<style type="text/css">
     .loaderClass
     {
        position: absolute;
        top: 50%;
        left: 0px;
        z-index: 999999;
        text-align: center;
        width: 100%;
        height: 200px
        
        
     }
</style>

HTML:

<body onload="loadingDivHide()">

<div id="loading_div" class="loaderClass">
<img src="ajax-loader.gif" height="66" width="66"><br>
<h1>Loading...</h1>
</div>

<div id="content_area_div" style="display:none">

<!-- Page content goes here -->

</div>

</body>

 

The post Easy Page Preloader appeared first on Cody Paste.

]]> https://www.codypaste.com/easy-page-preloader/feed/ 0 Touch-enabled jQuery Carousel Slider Plugin with jQuery – Prrple Slider https://www.codypaste.com/touch-enabled-jquery-carousel-slider-plugin-with-jquery-prrple-slider/ https://www.codypaste.com/touch-enabled-jquery-carousel-slider-plugin-with-jquery-prrple-slider/?noamp=mobile#respond Mon, 11 Apr 2016 08:24:55 +0000 http://www.codypaste.com/?p=351 Responsive slider, continue slider, slide on loop. Prrple Slider is a jQuery plugin for creating a simple yet feature-rich carousel slider that features responsive layout, touch events, custom animations and infinite looping. More features: Horizontal or vertical mode slide or fade animations Autoplay. Cross browser. Auto resize slider on browser resize Callback functions Easing effects. …

read more "Touch-enabled jQuery Carousel Slider Plugin with jQuery – Prrple Slider"

The post Touch-enabled jQuery Carousel Slider Plugin with jQuery – Prrple Slider appeared first on Cody Paste.

]]> Responsive slider, continue slider, slide on loop.

Prrple Slider is a jQuery plugin for creating a simple yet feature-rich carousel slider that features responsive layout, touch events, custom animations and infinite looping.

More features:

  • Horizontal or vertical mode
  • slide or fade animations
  • Autoplay.
  • Cross browser.
  • Auto resize slider on browser resize
  • Callback functions
  • Easing effects. (Requires jQuery easing plugin)

Source: http://www.jqueryscript.net/slider/Touch-enabled-jQuery-Carousel-Slider-Plugin-with-jQuery-Prrple-Slider.html

 

Download 

 

 

 

The post Touch-enabled jQuery Carousel Slider Plugin with jQuery – Prrple Slider appeared first on Cody Paste.

]]> https://www.codypaste.com/touch-enabled-jquery-carousel-slider-plugin-with-jquery-prrple-slider/feed/ 0 Back to top link in HTML https://www.codypaste.com/back-to-top-link-in-html/ https://www.codypaste.com/back-to-top-link-in-html/?noamp=mobile#respond Sun, 10 Apr 2016 16:05:22 +0000 http://www.codypaste.com/?p=346   If you want a link in HTML page for going to top, and appear after scroll. CSS: [crayon-6985e63cb78ea658146747/]   HTML/Javascript: [crayon-6985e63cb78f5842101685/]  

The post Back to top link in HTML appeared first on Cody Paste.

]]>  

If you want a link in HTML page for going to top, and appear after scroll.

CSS:

<style>
.back-to-top {
	position: fixed;
	bottom: 2em;
	right: 0px;
	text-decoration: none;
	color: #000000;
	background-color: rgba(235, 235, 235, 0.80);
	font-size: 12px;
	padding: 1em;
	display: none;
}

.back-to-top:hover {	
	background-color: rgba(135, 135, 135, 0.50);
}	
</style>

 

HTML/Javascript:

<a href="#" class="back-to-top">Back to Top</a>
	   <script>            
			jQuery(document).ready(function() {
				var offset = 220;
				var duration = 500;
				jQuery(window).scroll(function() {
					if (jQuery(this).scrollTop() > offset) {
						jQuery('.back-to-top').fadeIn(duration);
					} else {
						jQuery('.back-to-top').fadeOut(duration);
					}
				});
				
				jQuery('.back-to-top').click(function(event) {
					event.preventDefault();
					jQuery('html, body').animate({scrollTop: 0}, duration);
					return false;
				})
			});
		</script>

 

The post Back to top link in HTML appeared first on Cody Paste.

]]> https://www.codypaste.com/back-to-top-link-in-html/feed/ 0 Confirm before a form submit or link https://www.codypaste.com/confirm-before-a-form-submit/ https://www.codypaste.com/confirm-before-a-form-submit/?noamp=mobile#respond Wed, 06 Apr 2016 11:21:58 +0000 http://www.codypaste.com/?p=338   Ask before process, confirm before process, popup before process in php. ask before delete.   you can always use inline JS code like this: [crayon-6985e63cb7b44848828020/] and [crayon-6985e63cb7b4e756869994/]  

The post Confirm before a form submit or link appeared first on Cody Paste.

]]>  

Ask before process, confirm before process, popup before process in php.

ask before delete.

 

you can always use inline JS code like this:

<form action="adminprocess.php" method="POST" onsubmit="return confirm('Are you sure you want to submit this form?');">
    <input type="submit" name="completeYes" value="Complete Transaction" />
</form>

and

<a href="url_to_delete" onclick="return confirm('Are you sure you want to delete this item?');">Delete</a>

 

The post Confirm before a form submit or link appeared first on Cody Paste.

]]> https://www.codypaste.com/confirm-before-a-form-submit/feed/ 0 Increase & Decrease / Chnage Font Size on Click https://www.codypaste.com/increase-decrease-chnage-font-size-on-click/ https://www.codypaste.com/increase-decrease-chnage-font-size-on-click/?noamp=mobile#respond Wed, 17 Feb 2016 07:12:48 +0000 http://www.codypaste.com/?p=268 [crayon-6985e63cb7d92480529841/]  

The post Increase & Decrease / Chnage Font Size on Click appeared first on Cody Paste.

]]> 

<div align="center">
       
<SCRIPT LANGUAGE="JavaScript">


function changeFontSize(element,step)
{
	step = parseInt(step,10);
	var el = document.getElementById(element);
	var curFont = parseInt(el.style.fontSize,10);
	el.style.fontSize = (curFont+step) + 'px';
}


</script>

<a href="javascript:void(0);" onClick="changeFontSize('vipcontent','2');">Increase font</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="javascript:void(0);" onClick="changeFontSize('vipcontent',-2);">Decrease font</a>
        <br />
        <br />
<p id="vipcontent" style="font-size:12px;">
This is the test text to increase or decrease.
</p>
       
</div>

 

The post Increase & Decrease / Chnage Font Size on Click appeared first on Cody Paste.

]]> https://www.codypaste.com/increase-decrease-chnage-font-size-on-click/feed/ 0 Select Menu in Text Field https://www.codypaste.com/select-menu-in-text-field/ https://www.codypaste.com/select-menu-in-text-field/?noamp=mobile#respond Sat, 23 May 2015 17:25:12 +0000 http://www.codypaste.com/?p=109 [crayon-6985e63cb7fbe749549039/]  

The post Select Menu in Text Field appeared first on Cody Paste.

]]> 

<input name="course" type="text" id="course" list="courseName"/>
<datalist id="courseName">
    <option value="Pen">Pen</option>
    <option value="Pencil">Pencil</option>
    <option value="Paper">Paper</option>
</datalist>

 

The post Select Menu in Text Field appeared first on Cody Paste.

]]> https://www.codypaste.com/select-menu-in-text-field/feed/ 0 Mouse Cursor in HTML/CSS https://www.codypaste.com/mouse-cursor-in-htmlcss/ https://www.codypaste.com/mouse-cursor-in-htmlcss/?noamp=mobile#respond Thu, 30 Apr 2015 12:16:28 +0000 http://www.codypaste.com/?p=101 [crayon-6985e63cb8209631786295/] Example: Mouse over the words to change the cursor. auto crosshair default e-resize grab help move n-resize ne-resize nw-resize pointer progress s-resize se-resize sw-resize text w-resize wait not-allowed no-drop   http://www.w3schools.com/cssref/tryit.asp?filename=trycss_cursor

The post Mouse Cursor in HTML/CSS appeared first on Cody Paste.

]]> 

<!DOCTYPE html>
<html>
<body>
<p>Mouse over the words to change the cursor.</p>
<span style="cursor:auto">auto</span><br>
<span style="cursor:crosshair">crosshair</span><br>
<span style="cursor:default">default</span><br>
<span style="cursor:e-resize">e-resize</span><br>
<span style="cursor:grab">grab</span><br>
<span style="cursor:help">help</span><br>
<span style="cursor:move">move</span><br>
<span style="cursor:n-resize">n-resize</span><br>
<span style="cursor:ne-resize">ne-resize</span><br>
<span style="cursor:nw-resize">nw-resize</span><br>
<span style="cursor:pointer">pointer</span><br>
<span style="cursor:progress">progress</span><br>
<span style="cursor:s-resize">s-resize</span><br>
<span style="cursor:se-resize">se-resize</span><br>
<span style="cursor:sw-resize">sw-resize</span><br>
<span style="cursor:text">text</span><br>
<span style="cursor:w-resize">w-resize</span><br>
<span style="cursor:wait">wait</span><br>
<span style="cursor:not-allowed">not-allowed</span><br>
<span style="cursor:no-drop">no-drop</span><br>
</body>
</html>

Example:

Mouse over the words to change the cursor.

auto

crosshair

default

e-resize

grab

help

move

n-resize

ne-resize

nw-resize

pointer

progress

s-resize

se-resize

sw-resize

text

w-resize

wait

not-allowed

no-drop

 

http://www.w3schools.com/cssref/tryit.asp?filename=trycss_cursor

The post Mouse Cursor in HTML/CSS appeared first on Cody Paste.

]]> https://www.codypaste.com/mouse-cursor-in-htmlcss/feed/ 0