creating a Push notification on website with JavaScript

Question

thanks in advance to all. I really don't know where to start my question's and whats the right terms for what I'm looking for, but sure you guys have some answers for a newbie. I'm trying to get better with js and I want to create a simple push notification msg that will show some pre-written text in the html markup. I'v achieved that with some functions manipulating the css but not sure if its a good method of doing so.

// get msg div
var msg = document.getElementById('msg');
// get button
var btn = document.getElementById('btn');
// get test button
var closeBtn = document.getElementById('closeBtn');

// event lisnters - click btn to run msg
btn.addEventListener('click',runMsg);
// event lisnters - click btn to close msg
closeBtn.addEventListener('click',closeMsg);

// functions list
function runMsg(){
  msg.style.display = 'block'
}

function closeMsg(e){
  if(e.target === closeBtn){
    msg.style.display = 'none';

  }
}

1.method one: what is a better way of doing that? creating the html markup and all the css premade and in position just hidden and using js to reveal it?

2.method two: creating all of the html markup using js when a user clicks a certain element using the createElemnt() method ?

**I'm just curious how all the plugins out there create this, my guess is that they have the markup ready and they just linked the two together in some way.

hoping I was clear, cheers to all.

You have tagged jquery here , but i dont see that you are using any jquery methods ? — imanshu15
– imanshu15, Commented Jan 19, 2018 at 12:27
You can either build the html in the js or use pre-built html - there's no real difference. The choice would likely be based on what tech you are using to build the html (eg c# MVC partial views) and, most importantly, how complicated that html will be. Don't use 100s of strings to build html, it's unmaintainable. The easiest method is to pre-build the html and use a simple .show(). — fdomn-m
– fdomn-m, Commented Jan 19, 2018 at 12:32
hey thanks for the help, I'v tried messing with that to create that feature in a running word press site / maybe in future create a simple plugin for practice. so what your saying is that in most cases the element is already in the position but hidden and js only shows it? — osherez
– osherez, Commented Jan 19, 2018 at 12:42

imanshu15 · Accepted Answer · 2018-01-19 12:44:53Z

1

Since you have tagged Jquery and If you are using Jquery you can simply achieve what you are doing by this,

$("#btn").click(function(){ //Capture btn click
    $('#msg').css('display','block') // display msg
}); 

$("#closeBtn").click(function(){ // Capture closeBtn click
    $('#msg').css('display','none') // hide msg
});

edited Jan 19, 2018 at 12:44

answered Jan 19, 2018 at 12:35

imanshu15

7644 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

fdomn-m Over a year ago

Why would use you .css("display", "block") instead of .show() and .hide() ?

imanshu15 Over a year ago

Yes, you could use that, i just showed how to manipulate css through Jquery :)

oninross · Accepted Answer · 2018-01-19 12:34:31Z

1

Sounds like you are looking for a progressive web app. Start your journey here.

answered Jan 19, 2018 at 12:34

oninross

9996 silver badges23 bronze badges

1 Comment

osherez Over a year ago

maybe I am I really not sure, but I'l check what you suggested cheers,Thanks man for the help appreciate :)

Kristiyan D Kovachev · Accepted Answer · 2018-01-19 12:37:58Z

1

The more elements you have pre-generated, and hidden, the slower your page will be. Also, even if you build the entire page with all potential pop-up not all users will be using/triggering them, thus it is a waste. That is why the consensus in web development is that you only build elements when you need them.

In some cases where you are targeting mobile devices you might want to prepare all assets ahead of time but you need to read up on https://developers.google.com/web/progressive-web-apps/ and potentially https://ionicframework.com/

answered Jan 19, 2018 at 12:37

Kristiyan D Kovachev

1323 silver badges12 bronze badges

2 Comments

osherez Over a year ago

hey thanks bro, yeah that was one I asked my self. so basically hidden elements are taking space. so if I'm creating the element only when a user clicks is that better? like mentioned in Question number 2? plus Just for my knowledge how does all the plugins make this happen ?

Kristiyan D Kovachev Over a year ago

if you look in the Angular documentation you will notice that all the code is there but only what you see (and everything attached to it) is generated - a process called injection. Everything else is done on the fly - i.e. the beauty of js client-side rendering: angular.io/guide/architecture

Collectives™ on Stack Overflow

creating a Push notification on website with JavaScript

3 Answers 3

2 Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related