For smart Primates & ROBOTS (oh and ALIENS ).

Blogroll

Sunday, March 10, 2024

Multiple attribute passing in querySelectorAll

Multiple attribute passing in querySelectorAll

 

 
Here I am demonstrating code to how to pass multiple attributes in querySelectorAll.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Multiple attribute passing in querySelectorAll</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<div id="mydiv1" width="200" height="200";> MyDiv1 </div>
<div id="mydiv2" width="200" height="200";> MyDiv2 </div>
<div id="mydiv3" width="200" height="200";> MyDiv3 </div>
<div id="mydiv4" width="200" height="200";> MyDiv4 </div>

<div id="mydiv6" class="class1" width="200" height="200";>My Divclass1</div>
<div id="mydiv6" class="class2" width="200" height="200";>My Divclass2</div>
<div id="mydiv6" class="class3" width="200" height="200";>My Divclass3</div>

<div id="myid1">myid1</div>
<div id="myid2">myid2</div>
<div id="myid3">myid3</div>

<div id="myid4" class="myclass1 myclass2 myclass3">
myid4 myclass1 myclass2 myclass3
</div>

<script>
const Test1=()=>{
 document.querySelectorAll("div[id=mydiv1],div[id=mydiv2],div[id=mydiv4]").forEach((elem)=>{
   console.log(elem.innerHTML);
 });
}
Test1();

function Test2(){
 document.querySelectorAll("div[class=class1],div[class=class3]").forEach(function(elem){
   console.log(elem.innerHTML);
 });
}
Test2();


const Test3=()=>{
 document.querySelectorAll("#myid1,#myid2,#myid3").forEach((elem)=>{
   console.log(elem.innerHTML);
 });
}
Test3();

const Test4=()=>{
 document.querySelectorAll(".myclass1.myclass2.myclass3[id=myid4]").forEach((elem)=>{
   console.log(elem.innerHTML);
 });
}
Test4();
</script>

</body>
</html>



 

 

Share:

How to make load image fast

How to make load image fast

Images are main parts of any website, Because It says lots of things than text. So it is important to load it fast as much as fast.

To load image fast use below attributes

<link rel="preload" as="image" href="https://site.com/imgs/image.jpg">


<img fetchpriority="high" decoding="async"
src="https://site.com/imgs/image.jpg"
class="myclass" alt="myimage"
width="765"
height="599">

Share:

Enable or Disable files folder structure in website domain

 Enable or Disable files folder structure in website domain

Sometime when you type the url or website domain then files and folder structure show. This is normally for the test servers with no security.
Sometime it is useful for testing of different pages and folder etc, because all files and folder show and user can test any files etc. But if you want to apply the security that no any files and folders show then use below code in .htaccess file. if you have no .htaccess files create it. Code is for show files and directory is :
Options +Indexes
This is for show files and folders.
For do not show files and folders use below code:
Options -Indexes




Share:

Apply CSS via JavaScript

 

Here is the example where apply css via JavaScript

<script>

const mstyle = document.head.appendChild(document.createElement(‘style’));
style.textContent = /*this is the css*/`

.myclass {
aspect-ratio: 16 / 9; background-color: #000;
position: relative; display: block; contain: content;
background-position: center center;
background-size: cover;

}

#mydivid {
color:green; opacity: 0;
}
`;

</script>

Share:

Thursday, January 25, 2024

Define own custom HTML element

 Define own custom HTML element


Here I am demonstrating how to define your own custom HTML element or control and how to use it.

Define is as <my-test-element-one> </my-test-element-one>
and then use my JavaScript. The complete code it below:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Hello!</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  </head>
  <body>
<my-test-element-one>
</my-test-element-one>
<script>
class my_test_element_one extends HTMLElement{
  connectedCallback(){
    this.innerHTML=`  <div class="myclass" style=" width:600px;height:500px; background-color:green">
            <img src="https://images.pexels.com/photos/267415/pexels-photo-267415.jpeg?auto=compress&cs=tinysrgb&w=300" />
    </div>`
  }
}
customElements.define('my-test-element-one', my_test_element_one);
</script>
</body>
</html>

 

 

Share:

Sunday, January 07, 2024

Show array data without for loop in javascript

 Show array data without for loop in javascript

 

Use below code  

<script>

const strs1 = ["one ", "two", "three"];
const newst1 = strs.map(st => { console.log(st)});

const mynum = [1, 2, 3];
const newnum = mynum.map(num =>  { console.log(num)});
</script>

Share:

Thursday, August 10, 2023

Generate random string in javascript

Generate random string in JavaScript

 

If you are coding in JavaScript and there are some need to Generate random string then how to Generate random string in JavaScript ?

Here is the few lines of code that is generate random String in JavaScript.

const myRndStr = () => Math.random().toString(36).slice(2)
const sstr1= myRndStr();
console.log(sstr1);

const sstr2= myRndStr();
console.log(sstr2);

const sstr3= myRndStr();
console.log(sstr3);

OUTPUT

Generate random string in javascript

Explanation:

In Math.random().toString() you can pass number 36. It is max limit number and you can not pass greater than 36 number. So it will generate a string like "0.1vjydtyngt58" Now you can get all string after that "0.1" using function ".slice(2)" as Math.random().toString(36).slice(2). Then you will get something like this "vjydtyngt58"

If you will pass greater than 36 number then you will see error message "Uncaught RangeError: radix must be an integer at least 2 and no greater than 36"

I have used arrow operator ()=> to generate random string. We can also create it in Vanilla JavaScript as below:

function genRndStr(){
return Math.random().toString(36).slice(2);
}
const str4=genRndStr()
console.log(str4);

Share:

Friday, January 20, 2023

How to add inline javascript using createElement

How to add inline javascript using createElement

Here  are the 2 examples of codes.

Code 1:

<script>
var scriptNode          = document.createElement ("script");
scriptNode.textContent  = "alert('aaa');";
document.head.appendChild (scriptNode);
</script>


Code 2:

<script>
var scriptNode=document.createElement("script");
scriptNode.textContent= "!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,document,'script','https://connect.facebook.net/en_US/fbevents.js');fbq('init',  'mynumber' );fbq('track', 'PageView', {customer_groups: 'Visitatore',default_customer_group: ''});";
document.head.appendChild (scriptNode);
</script>
 

 

 

 

Share:

Thursday, January 19, 2023

pass and get data in createElement statement in javascript

How to pass and get data in createElement statement in javascript?

Here is the listed below code:

In "a1.html"
<script>
var myscript= document.createElement('script');
myscript.setAttribute('data-id1','fordata1');
myscript.setAttribute('data-id2','fordata2');
myscript.setAttribute('data-id3','fordata3');
myscript.setAttribute('data-id4','fordata4');
myscript.setAttribute('data-id5','fordata5');
myscript.setAttribute('src','get-id-in-js.js');
document.head.appendChild(myscript);
</script>

 

 In "get-id-in-js.js" file

var scripts=document.getElementsByTagName("script");
console.log(scripts[0].getAttribute("data-id1"));
console.log(scripts[0].getAttribute("data-id2"));
console.log(scripts[0].getAttribute("data-id3"));
console.log(scripts[0].getAttribute("data-id4"));
console.log(scripts[0].getAttribute("data-id5"));


 

 

 

Share:

pass and get data in script tag in javascript

How to pass and get data in script tag in javascript Here is the code: 

In "a1.html"

<script async="" data-id1="fordata1" data-id2="fordata2" data-id3="fordata3" data-id4="fordata4" data-id5="fordata5" src="get-id-in-js.js"></script>
 

 In "get-id-in-js.js" file: 

var scripts=document.getElementsByTagName("script");console.log(scripts[0].getAttribute("data-id1")); console.log(scripts[0].getAttribute("data-id2")); console.log(scripts[0].getAttribute("data-id3")); console.log(scripts[0].getAttribute("data-id4")); console.log(scripts[0].getAttribute("data-id5")); 

 

 

 

Share:

Multiple attribute passing in querySelectorAll

Multiple attribute passing in querySelectorAll     Here I am demonstrating code to how to pass multiple attributes in querySelectorAll. <...

Ads Inside Post

Powered by Blogger.

Arsip