How can I make an expandable notification in HTML or JavaScript? - javascript

What I am looking to do is have a notification numbers show in the top right corner of my site, that when a user clicks it, it opens up a notification menu or even a pop up box that says the notification. How can I code that? Thanks!

If you can use jquery, there are many:
http://medleyweb.com/web-dev/10-great-jquery-notification-plugins
For all the tastes!
Cheers.

Some ways you can do that:
1.) If the data or notification details are in the database, then you can just COUNT the ROWS that are untapped or not seen (you can do this by having a "status" column which identified if the row/notification had already been seen or not) by that specific user, its better that every notification must be saved in the database.
2.) Put the COUNTED ROWS you fetch from the database inside a div tag and declare an Id in it.
3.) When you already fetching the right data, then put the correct CSS/styles where you want to put the notification number including the property z-index:100;.
4.) Same goes with the pop up box, when the user click the div tag, first hide the div tag for notification numbers, then you must fetch all the data from the database putting in inside another div tag with CSS for notification details.
5.) This can be done greatly with javascript and jquery.
Jquery is also great in communicating to server, use it for real time purposes :)
Hope this helps :)

Related

How to create a page location in browser using javascript/jQuery?

I have a setup where I display a list of buttons and clicking on the buttons triggers a function that contacts a firebase database and gets the contents of a 'slide' that is to be shown to the user. The function then clears the content of the page and then creates elements from the data acquired from the database.
Now obviously, when I press back browser button once I've replaced the content, it won't take me back to the previous content. But I believe that my user's experience will be much better if it actually took them back to the list of buttons. I have two faint ideas on how to go about solving this problem but I'm lacking in specific details of how I can go about it.
Possible Solution 1:
Some way to dynamically create a new page using javascript and then serve it to the user.
Possible Solution 2:
Some way to simulate that the page has changed location. Maybe using anchoring links.
Let me know if you have any other solutions in mind or if you know how I should go about implementing these. Your help will be much appreciated. :D

How to store array from on-click and use it in dropdown

I have an HTML page that has an option for drag-n-drop and a "Preview" button. I want to call a function on the click event of that button, which will fetch all the files that are dragged onto the page. When I press this button, it opens a <px-modal> (a popup which displays some data), and it has a dropdown (<paper-dropdown> and <paper-item>), which should display the filename fetched earlier.
So I have the data, but I don't know how to store it or display it as dropdown content.
I have tried the <template> tag, but it fires on page-load when I need it to fire after the files are dropped onto the page. Otherwise, the data is null.
How do I solve this?
Without some code to look at, it's hard to help you but in general, my advice will be to use a service to store your data and all your directive/controller that needs to have access to the data should havce a dependency on this service.
Have a look at option 1 on this answer
If that's not what you're looking for, post more details, create a jsFiddle to show us where you are so we can help you better.

How to make an interactive website and allow the user to edit website content?

To begin with, I'm fairly knowledgeable with both html5 and css3. Right now I'm trying to create a website that allows visitors to edit website content so that all visitors are able to see the edits. I know about contenteditable but this attribute does not last when the page is refreshed and no other visitors to see the edits. For example:
<p> Edit me please </p>
A visitor would be able to edit the element above by visiting the website and simply selecting and typing. Also I have heard that javascript, jquery, sql, and php can all allow visitors to edit website content but I don't know which is the best.
To sum up, if anyone knows how to allow visitors of a website to edit its' content it would be much appreciated to share their knowledge.
Create a database table (lets call it "strings") , and just define 2 columns - "string_identifier" and "string_value"
When you render the page, simply query the database to fetch the strings and their identifiers. Each editable element should have an attribute containing its identifier.
You can use jquery to capture the click event on all editable elements, and replace it with an input with that text.
Then assign an event handler to that input, so when the enter key is pressed, it sends a request to a php script (with the identifier and new string as data) on the server to update the database with the new string.
If you would like live updates to all other clients (no need to refresh), use jquery to continuously request a file on the server (endless loop), which will return a JSON object containing all the strings. Then go through and replace the text of all editable elements on the data with the new strings you have received from the server.

Store and load JavaScript variables via Json

I need to store some dynamic variables in a Json file (i was told this would work) to be able to load them in multiple pages. Per example a customer should be able to select one thing in one page (a highlighted div) and then go to another page, select some items there and be able to go pack to the other page and that div is still selected. (Variables remembered) Now i tried to google and search here but found nothing matching my description. Please help me!
Try using localstorage, store selected values by user in localstorage and check this at page ready or load if it exists in loacalstorage show that value or div with highlight as per your functionality and if localstorage doesn't had a value then consider it as first time user come to this page.
but be careful using localstorage as you have to clear it when you done with it, it may cause memory leakage problem.

Adding view count to external links on site

I want to create a gallery where the images link directly out to the website in a new window when clicked.
However I would also like a view (or click to be more descriptive) count to show overlayed on the image on hover.
How do I do about creating the link/view count? Since no page is actually loaded - only a link clicked?
On top of that I would also like to use a custom short URL service. Does anyone know one that is good and/or would have a solution to my problem?
Cheers!
I've made a TODO list for you :)
[JS/AJAX] catch the click event and send a message to the server what was clicked
[PHP/ROR/Python/etc] store information in the DB (increment the clicked element counter)
[PHP/ROR/Python/etc] when page is loaded, retrieve counter values from DB and put them into the HTML
[JS] use counter values to display them over images
As for short URL services I like goo.gl .

Categories