Showing posts with label javascript. Show all posts
Showing posts with label javascript. Show all posts

Friday, 27 June 2025

Auto select after redirect to the contact page SELECT JAVASCRIPT

 https://domain.my/contact/?startup_package=UltimateImpact


        <select name="startup_package" class="form-select">

          <option value="">Startup Package (if any)</option>

          <option value="BrandKickstart">Brand Kickstart</option>

          <option value="WebsiteSlayer">Website Slayer</option>

          <option value="TrafficAssault">Traffic Assault</option>

          <option value="UltimateImpact">Ultimate Impact</option>

        </select>


      <script>

        document.addEventListener('DOMContentLoaded', function () {

        const params = new URLSearchParams(window.location.search);

        const selected = params.get('startup_package');

        if (selected) {

            const select = document.querySelector('select[name="package"]');

            if (select) {

            select.value = selected;

                }

            }

        });


      </script>

Wednesday, 6 December 2023

JS: TOGGLE HIDE + ARRAY

  <style>

        .ET1, .ET2, .ET3 {

            display: none;

        }

    </style>


 <script>

        // Define an array of ID-class pairs

        var idClassPairs = [

            { id: 'ET1', class: 'ET1' },

            { id: 'ET2', class: 'ET2' },

            { id: 'ET3', class: 'ET3' }

            // Add more pairs as needed

        ];


        // Add click event listeners dynamically based on the array

        idClassPairs.forEach(function(pair) {

            var triggerElement = document.getElementById(pair.id);

            var hiddenElement = document.querySelector('.' + pair.class);


            triggerElement.addEventListener('click', function() {

                hiddenElement.classList.toggle(pair.class);

            });

        });

    </script>

Friday, 27 October 2023

SVG + JAVASCRIPT + CSS : CLICK AREA, OPEN CLOSE TOGGLE CLASS ELEMENT TO SHOW CONTENT

SVG TOGGLE OPEN AREA #SVG 
SVG TOGGLE OPEN AREA #SVG 


<style>


.toggle-path.grayarea {
  fill: purple !important; /* Add !important to override any inline styles */
}

.toggle-path.grayarea:hover {
  fill: green !important; /* Add !important to override any inline styles */
}

</style>

<svg width="969" height="969" viewBox="0 0 969 969" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path class="toggle-path grayarea" data-content="gray-content" d="M496 357L282 147.5L215 309.5L248.5 457L339 728.5L420 762H496L553.5 581L496 357Z" />
  <path class="toggle-path" data-content="blue-content" d="M497.5 358.5L282 147.5L577.5 125L754 358.5L553 586.5L497.5 358.5Z" fill="#0778FC" />
  <path class="toggle-path" data-content="green-content" d="M100 100L200 200L300 100" fill="#00FF00" />
  <!-- Add more paths and specify the associated data-content attribute -->
</svg>

<div class="toggle-container">
  <div class="toggle-content gray-content" style="display: none;">
    <!-- Content for grayarea -->
    <p>Gray Area Content</p>
  </div>
  <div class="toggle-content gray-content" style="display: none;">
    <!-- Content for grayarea -->
    <p>Gray Area Content</p>
  </div>
  <div class="toggle-content gray-content" style="display: none;">
    <!-- Content for grayarea -->
    <p>Gray Area Content</p>
  </div>
  <div class="toggle-content blue-content" style="display: none;">
    <!-- Content for bluearea -->
    <p>Blue Area Content</p>
  </div>
  <div class="toggle-content green-content" style="display: none;">
    <!-- Content for greenarea -->
    <p>Green Area Content 1</p>
  </div>
  <!-- Add more content containers for other areas -->
</div>

<script>
  const togglePaths = document.querySelectorAll(".toggle-path");
  const toggleContents = document.querySelectorAll(".toggle-content");

  togglePaths.forEach((path, index) => {
    path.addEventListener("click", function () {
      // Hide all content elements
      toggleContents.forEach((content) => {
        content.style.display = "none";
      });
      
      // Show the content associated with the clicked path
      const contentClass = path.getAttribute("data-content");
      const contentToShow = document.querySelectorAll(.${contentClass});
      if (contentToShow) {
        contentToShow.forEach((content) => {
          content.style.display = "block";
        });
      }
    });
  });
</script>

WHAT WE TRY TO DO?

WE TRY TO MAKE SVG PATH AS A BUTTON TO OPEN ELEMENT WITH CLASSES TOGGLE

Thursday, 18 February 2021

JS: FUNCTION ONLOAD

  <script>
    function newContent() {
      document.open();
      document.write("<h1>Out with the old, in with the new!</h1>");
      document.close();
    }
  </script>

<div onload="newContent();">
  <p>Some original document content.</p>
</div>

Monday, 6 April 2020

Javascript Concepts Functions Related

  • Global Scope
  • Local Scope
var greeting='Welcome to blog';
(function(){
  console.log(greeting); //Output: Welcome to blog
})();
consider above code greeting variable should be global scope, it can access inside the function,
(function(){var greeting = 'Welcome to blog';
  console.log(greeting); //Output: Welcome to blog
})();console.log(greeting); //Output:Reference-Error greeting not defined

Thursday, 24 October 2019

JS : Strings

Strings


When you read lessons in this course, you can highlight a single line and save it to your notes. Simply highlight a single line with your mouse (or your finger on mobile) and then a popup will appear asking you to save it to your notes.
You will be able to find these notes in the challenge page by clicking on the Note icon on the top bar, next to the logo. Try it in the next page!
Popular notes will also be shown in yellow highlights which can be easily added to your notes with a single click. And you can also disable those popular highlights from the top right menu.

You can create a string in JavaScript by simply using the double quotes (") or single quotes (').
Here's an example:
"This is a string"; 'this is another string!'
There is no difference between using a double quote or a single quote. They are exactly the same. Both of these strings do not support interpolation (which means interpolating a variable inside of them). String interpolation will be covered in a future lesson.

Basic String properties

  • the .length property is used to return the length of the string.
Here's an example of getting the length of "Nice!":
"Nice!".length; //5
We will learn about variables later in this course, but assuming you have a variable called description, here's how you'd get its length:
description.length;

Basic String methods

Here are some common methods that you can call on strings:

.includes(searchString)

This method returns true when the searchString is included inside the parent string. For example:
"Hello World".includes("World"); // true "Hello World".includes("Potato"); // false

.toUpperCase()

This will return a new string that has all of its characters in upper case:
"hello".toUpperCase(); // "HELLO";

.toLowerCase()

This will return a new string that has all of its characters in lower case:
"NICe".toLowerCase(); // "nice";
Hint: Stuck? Feel free to use CodeToGo to search for common use cases

A note on tests & sample usage

On the left of the screen, you've got tests running your code. And in your editor, you will almost always have some sample usage code.
function sum(a, b) {
    return a + b;
}

//sample usage
sum(1, 3);
The sample usage code is meant to illustrate how your code will be used. However keep in mind that we will take the function that you wrote, and call it against several other possibilities to make sure that you've got the correct answer.
Feel free to use console.log() for the parameters of the function to see what kind of tests we're running.
So even though the sample usage is sum(1, 3), we run more tests in the background with several values. We also often run it with edge case values such as sum(0, 0). All of this simulates a real Test Driven Development environment.

A note on console.log

When solving challenges feel free to add:
console.log(variable_or_expression)
to see its result in the console on the bottom left.



You can also use it to better understand the tests that you're trying to pass.

Saturday, 23 February 2019

js if else : input

<script>
function analyzeColor3(myColor) {
if (myColor == "Blue") {
alert("Just like the sky!");
}
else if (myColor == "Red") {
alert("Just like shiraz!");
}
else {
alert("Suit yourself then...");
}
}
</script>
<h3>Favorite Color</h3>
<label>
<input type="radio" name="fav_color3" value="Blue" onclick="analyzeColor3(this.value);"> Blue
</label>
<label>
<input type="radio" name="fav_color3" value="Red" onclick="analyzeColor3(this.value);"> Red
</label>
<label>
<input type="radio" name="fav_color3" value="Green" onclick="analyzeColor3(this.value);"> Green
</label>
<label>
<input type="radio" name="fav_color3" value="None" onclick="analyzeColor3(this.value);"> None
</label>

Thursday, 25 October 2018

JS : Contenteditable Save data at local

 //editable cookies enable

 $(function(){
    var liveEdit = document.getElementById('live-edit');

    $(liveEdit).blur(function(){
      localStorage.setItem('liveEditData', this.innerHTML);
    });

    //when the page loads

    if ( localStorage.getItem('liveEditData')){
      liveEdit.innerHTML = localStorage.getItem('liveEditData');
    }
  });

    //end function of contenteditable

  $(function(){
    var editUser = document.getElementById('edit-user');

    $(editUser).blur(function(){
      localStorage.setItem('editUserData', this.innerHTML);
    });

    //when the page loads

    if ( localStorage.getItem('editUserData')){
      editUser.innerHTML = localStorage.getItem('editUserData');
    }
  });

      //end function of contenteditable
  

Thursday, 11 October 2018

JAVASCRIPT : BOOTSTRAP DROPDOWN PILL OR ACCORDION USING DROPDOWN

<div class="dropdown">
    <a class="btn btn-danger dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown"
        aria-haspopup="true" aria-expanded="false">
        Senarai Pegawai
    </a>

    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
        <ul class="nav nav-pills flex-column list-unstyled" role="tablist">
            <li class="nav-item list-unstyled">
                <a class="nav-link active umum" data-toggle="pill" href="#semua-unit">SEMUA UNIT</a>
            </li>
            <li class="nav-item list-unstyled">
                <a class="nav-link umum" data-toggle="pill" href="#unit-satu">UNIT SATU</a>
            </li>
            <li class="nav-item list-unstyled">
                <a class="nav-link umum" data-toggle="pill" href="#unit-dua">UNIT DUA</a>
            </li>
            <li class="nav-item list-unstyled">
                <a class="nav-link umum" data-toggle="pill" href="#unit-tiga">UNIT TIGA</a>
            </li>
            <li class="nav-item list-unstyled">
                <a class="nav-link umum" data-toggle="pill" href="#unit-empat"> UNIT EMPAT</a>
            </li>
        </ul>
    </div>
</div>

<div style="margin-top:50px"></div>

<!-- Tab panes -->
<div class="tab-content">
    <div id="welcome" class=" tab-pane fade">

        <h1>SELAMAT DATANG KE DIREKTORI PEGAWAI</h1>

    </div>



    <div id="semua-unit" class=" tab-pane active">

        Semua unit loading...

    </div>




    <div id="unit-satu" class="tab-pane fade">

        Coming soon

    </div>

    <!-- start business data-->

    <div id="unit-dua" class="tab-pane fade">


        Coming soon

    </div>

    <div id="unit-tiga" class=" tab-pane fade">

        Coming soon

    </div>

    <div id="unit-empat" class=" tab-pane fade">

        Coming soon

    </div>
    <!--improvement tab-->
</div>
<!--tab content-->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

Wednesday, 3 October 2018

CHARTJS : CHANGE LABEL SIZE


var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
    // The type of chart we want to create
    type: 'radar',

    // The data for our dataset
    data: {
        labels: ["Entrepreneur Capability", "Business Capacity", "Product Strength", "Technological Potential", "User Performance", ],
        datasets: [{
            label: "BUSINESS HEALTH SCORE",
            backgroundColor: '#c72b34bf',
            borderColor: '#c72b34bf',
            data: [10, 20, 40, 60, 50, ],

        }]
    },

    // Configuration options go here
    options: {
        scale: {
            pointLabels: {
                fontSize: 18,
            }
        }
    }
});

Saturday, 1 September 2018

Javascript : .innerHtml & .textContent


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
 <span id="mangsa">Dokument syarikat</span>
            
  
    <script>
        var kuliPencuri = document.getElementById("mangsa");

        var bosPencuri = function() {

            kuliPencuri.innerHTML = `<b>Dokument syarikat</b>`;
            
        };

        kuliPencuri.addEventListener("click", bosPencuri);

        
        </script>
..

This will show result as HTML render.




 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
 <span id="mangsa">Dokument syarikat</span>
            
  
    <script>
        var kuliPencuri = document.getElementById("mangsa");

        var bosPencuri = function() {

            kuliPencuri.textContent = "Dokument Palsu";
            
        };

        kuliPencuri.addEventListener("click", bosPencuri);

        
        </script>
..

This will show raw HTML not rendered

http://xahlee.info/js/js_textContent_innerHTML_innerText_nodeValue.html

Sunday, 26 August 2018

Javascript : Click Event Example

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div style="background-color:#D94A38;width:170px;height:80px;margin:20px;padding-top:20px;color:#ffffff;font-weight:bold;font-size:18px;float:left;text-align:center;" onclick="clickMeEvent(this)">Click Me</div>

<script type="application/javascript">
function clickMeEvent(obj) {
  if (obj.innerHTML == "Click Me") {
    obj.innerHTML = "Click Me<br>Click Me Again";
    return;
  }
  if (obj.innerHTML == "Click Me<br>Click Me Again") {
    obj.innerHTML = "Thank You";  
    return; 
  }
  if (obj.innerHTML == "Thank You") {
  obj.innerHTML = "Goodbye";  
    return; 
  }
  if (obj.innerHTML == "Goodbye") {
    obj.style.display = "none";
    return;
  }
}
</script>

Thursday, 2 August 2018

Javascript : Create function

Function ibarat menulis resepi atau rukun. Contoh, senaraikan rukun iman?

rukunIman
  percaya kepada Allah,
  percaya kepada Rasul,
  percaya kepada Malaikat,
  percaya kepada Al-kitab,
  percaya kepada hari akhirat,
  percaya kepada qada dan qadar,

Bila ditulis dalam kaedah javascript ia akan menjadi seperti ini


function rukunIman(){
  percaya kepada Allah;
  percaya kepada Rasul;
  percaya kepada Malaikat;
  percaya kepada Al-kitab;
  percaya kepada hari akhirat;
  percaya kepada qada dan qadar;
}
..

Atau function lebih kepada buat seketul sandwich


function makeSandwich(){
 Get one slice of bread;
 Add turkey;
 Put a slice of bread on top;
}
..

Macam mana kalau nak buat option add turkey kepada benda atau isi lain?

..
function makeSandwich(filling){
 Get one slice of bread;
 Add filling;
 Put a slice of bread on top;
}

makeSandwich('burger')
..
ibaratnya, pelanggan datang dan mintak sandwich isi burger, jadi kita beri option kepada pelanggan untuk pilih isi apa.. refer filling

Function memberi peranan atau jawatan kepada sesuatu



function sayHiTo(peserta){
  console.log('hai', peserta);
}

sayHiTo ('muhaza')
..
Secara automatik muhaza akan diberi jawatan peserta atau peserta itu bernama muhaza

Revision : Javascript element

1. VARIABLE

Untuk simpan data dalam istilah javascript, kita guna variable atau var. Var perlu diberi nama..


var todos = ['item 1', 'item 2', 'item 3']
..
dalam kes ini variable diberi nama todos


2. VIEW DATA / VARIABLE

selepas data disimpan dengan sebarang nama, (declare by a name) ia boleh diseru keluar atau dipapar kembali ke browser dengan menggunakan prompt..


alert(todos) @ console.log(todos)
..

3. ADD NEW VALUE INTO VARIABLE

Dah set value dalam variable, boleh tambah value dengan kaedah .push


todos.push('new todo')
..

4. CHANGE VALUE INSIDE VARIABLE

Value sedia ada masih boleh diubah dengan pilih dan ganti


todos[0] = 'changed!'
..

5. DELETE VARIABLE VALUE

Value sedia ada boleh dipilih dan dipadam dengan kaedah splice



todos.splice(0,1)

Sunday, 29 July 2018

Javascript : Properties & method

Properties and Methods
The Array object has many properties and methods which help developers to handle arrays easily and efficiently. You can get the value of a property by specifying arrayname.property and the output of a method by specifying arrayname.method().
  1. length property --> If you want to know the number of elements in an array, you can use the length property.
  2. prototype property --> If you want to add new properties and methods, you can use the prototype property.
  3. reverse method --> You can reverse the order of items in an array using reverse method.
  4. sort method --> You can sort the items in an array using sort method.
  5. pop method --> You can remove the last item of an array using pop method.
  6. shift method --> You can remove the first item of an array using shift method.
  7. push method --> You can add a value as the last item of array.

<html>
<head>
 <title>Arrays!!!</title>
 <script type="text/javascript">
  var students = new Array("John", "Ann", "Aaron", "Edwin", "Elizabeth");
  Array.prototype.displayItems=function(){
   for (i=0;i<this.length;i++){
    document.write(this[i] + "<br />");
   }
  } 
  document.write("students array<br />");
  students.displayItems();
  document.write("<br />The number of items in students array is " + students.length + "<br />");
  document.write("<br />The SORTED students array<br />");
  students.sort();
  students.displayItems();
  document.write("<br />The REVERSED students array<br />");
  students.reverse();
  students.displayItems();
  document.write("<br />THE students array after REMOVING the LAST item<br />");
  students.pop();
  students.displayItems();
        document.write("<br />THE students array after PUSH<br />");
        students.push("New Stuff");
  students.displayItems();
 </script>
</head>
<body>
</body>
</html>
https://www.guru99.com/learn-arrays-in-javascript.html

Thursday, 19 July 2018

Javascript: getElementByClassName change all class from js

<h2 class="title">This text will change</h2>
<script>
var x = document.getElementsByClassName("title");
var i;
for (i = 0; i < x.length; i++) {
    x[i].innerHTML= "This text has changed";
}
</script>

JQUERY : editable HTML 5 save at local storage

//editable cookies enable
    $(function(){
      var edit = document.getElementById('your-id');
      $(edit).blur(function(){
        localStorage.setItem('todoData', this.innerHTML);
      });
      //when the page loads
      if ( localStorage.getItem('todoData')){
        edit.innerHTML = localStorage.getItem('todoData');
      }
    })

<p id="your-id" contenteditable="true"> Ubah ayat ni dan ia save kat browser </p>

CONS 
satu id boleh simpan 1 satu data.. maksudnya, kalau id ada ditempat lain.. data pada id yang pertama sahaja akan boleh diubah

https://code.tutsplus.com/tutorials/28-html5-features-tips-and-techniques-you-must-know--net-13520

Javascript : manipulate id DOM using javascript (cool!)


<script>
document.getElementById("id-goes-here").innerHTML = `<p> here </p>`;
</script>

add this code on .js document or add it at the bottom of <body>

Thursday, 12 July 2018

Navbar hide or fade when scroll




<style>

#navbar-scroll {
  transition: top 0.5s; /* Transition effect when sliding down (and up) */
}

</style>


<body>
<script>
    var prevScrollpos = window.pageYOffset;
    window.onscroll = function() {
    var currentScrollPos = window.pageYOffset;
      if (prevScrollpos > currentScrollPos) {
        document.getElementById("navbar-scroll").style.top = "0";
      } else {
        document.getElementById("navbar-scroll").style.top = "-50px";
      }
      prevScrollpos = currentScrollPos;
    }

</script>
</body>

Submit RSSa

 rssing.com