We Keep Coding

Change the URL after creating a new page via JS

I have a main page and in it there is an "add" button that adds an image on the screen with each click (like cards).
Each image has an id and a name and they are arranged in an array in order.
Every time the "add" button is pressed I execute the command
var newDoc = createHTMLDocument("image name")
I want to change the default url (about:blank) to something else, for example the name of the image (of course without spaces) so that I can put this URL in the onclick of the image and by clicking on the image, its page will open. I want to change the URL because I had many pages (1 for each image I create).
You have to remember that my main page will have a lot of clickable pictures (cards) and each one has to open its own page.
My main problem right now is that I can't change the URL.
I'm not sure accessing the URL and changing it is the right way to do it, but that's what I thought was needed. (I would love to hear more suggestions if any).
Right now it just generates HTML documents with a default URL that I don't even know how to get to.
In addition, I work on a computer locally that is not connected to any network at all and there is no server. Everything locally!
Many thanks to the helpers

How to scroll back to an element wherever it is when route changes?

I have a very long table. The first column of each one of the rows is an <a> tag. A click on an <a> tag does:
Update route and page reloads
Get data(list of objects) from server.
Display the data below the <a> tag
Hide data related to an another <a>tag.
The length of the data differs from each other. At a time, I only show data related to one of the <a> tags. For instance, a click on the first <a> displays data related to it just after of it. A click on the second <a> shows data related to it and hides data related to the first <a>.
How to scroll back to the <a> tag you clicked on when route changes and page reloads?
If you answer, please no jQuery.
Thanks in advance.

So what's inside your tables? Is it images?
And the "data from the server", is it data, like data from an api request? Or is it a new webpage?
If we're talking a dynamic web page here. I remember dealing with the same problem with an infinite scroll view where a user clicks an element, and then goes back and expects to return on the same position.
The problem with dynamic content is that it takes a while for the browser to render it. Depending on what it is it might take a few milliseconds to many seconds (poor 3G and a view with 1000 images for instance). And while this rendering is going on, you never really know where the scroll should end up. It is possible to solve by adding timeouts and adjusting the scroll until we're almost sure that the page is in the correct place. But it's usually a mess.
You say that the page reloads? Normally a page needs to "reload" if a user is changing route and similar. If the data you are loading is a new page, the I get why you have to reload. But if it's an api request for some other data; is it an option to not reload the page? If that's possible, then you could remove and add elements instead of reloading the entire page.

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.

Reload iframe content when session variable changes

I'm making a webshop for a school project, and i've got an issue with the shopping cart. because the shoppingcart & webshop are in different iframes on the main page(got quite a few images on main page, don't want to reload that, thats why it's in iframes).
Basically, my issue is that when something is selected in the webshop, the shopping cart doesn't update untill the entire webpage is reloaded. I'm storing shopping cart info in an array in a SESSION variable. basically, what i want is to reload the iframe of the cart when the session variable changes.
If the answer involves anything besides PHP/javascript, please give a clear explaination/example code, i've never used anything outside of PHP/js/html/css before. Thanks in advance :) been stuck on this for a few days now :S

Create a javascript function to fire the following code when a user adds something to their cart:
document.getElementById('some_frame_id').contentWindow.location.reload();

I don't have the code in front of me, but I've done something similar where in the parent you create an event listener on "message" then in the iframe you can call parent.postMessage, works as long as they are on the same domain

Although APAD1's answer directly addresses what you asked, it sounds like your program has some deeper design problems. Using iframes for content from the same site (ie within one domain rather than content from a separate site) is bad practice.
Consider instead displaying content in <div>s with unique ids, and using javascript to update the contents of those divs. If you're using PHP on the back end, you can create a "page" that only generates the cart contents part of your page. Not only can you include it in each page without changes, but you can load it directly with javascript and insert the result into the current page to update it in place.
Whenever your user adds an item to their cart, you can call the javascript method that refreshes the <div> with the cart's contents.

How can I make an expandable notification in HTML or 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 :)