JavaScript (background and sound change to all pages) help needed - javascript

For my final project for a course I want to make some kind of minimalistic, meditation/relaxation website but I'm struggling with coding the JS functions. I'll try to explain the steps for what I want to do:
The page starts out with a white background.
Text fades in. (i.e. "Welcome")
When a key is pressed or the screen is tapped on mobile, the previous text fades out and another text fades in, but still on the same page.
Another text later, with options below for the background. When an option is clicked, the background changes and again, the text fades out.
Same as #4, but with background music.
Then there are 3 routes to go to (so different pages), the codes for those are simple so I don't need a lot of help, but how do I make them so that the background image and the sound that the user has chosen, carries on?
Is this completely doable with only JavaScript?
Should I incorporate Flask in my program (i.e. HTML layout/template?)
I'm really lost :( Does anyone know which functions I could use? Help will be appreciated!

Yes you could achieve this result by using only javascript
You can send the user's selected background and music through query parameters and access them with url in your javascript of other pages.

Related

Have Changes Reflected for Everyone on HTML webpage

not exactly sure how to ask this question as I am new to web development, but I am currently working on a webpage game. I have some javascript that reveals an underlying image behind a card background when the card is clicked on but there are certain occasions when I want everyone to see these changes (the card reveal) and others when I want only the user who clicked the card to see the reveal. Is there any way that I can do this using HTML/CSS/JavaScript?
Currently, changes to the DOM on one person's HTML file are only seen on their own computer, not everyone who is on that HTML file playing the game. Thank you for the help.
Webpages are always local to the computer showing them.
If you want changes made on one computer to also be reflected in another one, you will have to use a server to pass the changes through it.

How can I track a button click from a different UI?

I'm sorry if this question isn't framed the way it should, I have trouble wording out my problem.
Is it possible to see which button the user clicked, if the button was on a different UI?
I have a GSP page that is displaying a Jenkins Blue Ocean to monitor a pipeline. I want to track if the user has pressed any pause or abort buttons, but because the Jenkins Blue Ocean isn't part of my page, I can't send anything to my controller.
Would there be any work arounds or methods to track something like this?
Thank you!

Html toggle image and save the last status

I am in the process of making a page for reporting street light faults, and I want this page to be open for contributions by public users.
I need to superimpose the locations of the lighting poles on a map image (not Google map)
The images will be like a bulb 💡 with two different images (on and off)
I want the user to have the ability to change the status of the light pole on clicking the image.
I need the page to save the last image selected by the user, so that when I get to open the page, i get the last status of the lighting pole on and off.
I am stuck in the last part, which is saving the last image selected by the user.
Any suggestions?
First of all this question kind of implies that you already have a working concept of the user making a selection of a bulb (maybe from a dropdown or something) and then can change the status to either on or off and then save the changed status.
If all that was working then you could come and ask the question of how to get this save process to happen during the click event , and also how to get the proper bulb images to show up as either on or off on initial page load.
Since it seems like you do not have even that much completed I think it may be best that you re-write your question to more specifically what exactly you need and how you are going about it , and what code you have so far.
do you have the appropiate bulbs showing up as on or off on the page load?
do you have the location of the bulb ( meaning which bulb on the map) accessible to you in the javascript on the click event?
do you have an api set up server side that you can send an id of the bulb and a status to perform the save?
after those are all either completed - or asked in another question then we can help with problems like keeping the map up to date when other users make an update. with getting the save to happen on the actual click, etc

adding a watermark only to target images (jquery)

I have a question regarding watermarks for images. For instance: I want to display an image (pure HTML). If a user clicks on the image however, there should be a watermark, showing where that photo comes from.
I was thinking about a layer-solution. Putting an invisible layer over the main image and link to another image instead. That would force me to have every photo two times on my server. Not the best idea.
I found a lib called watermark.js (link here: watermark.js).
However, this would only allow me to put watermarks right in the beginning.
To explain the situation: User on my site sees everything without watermark, opening it directly in the browser should add the watermark.
Another solution I had was to always apply a watermark via script, and remove it if the user is currently on my site.
Maybe you have a solution to apply watermarks only on the linked images. I'd like to realize it via jquery.
Thank you in advance.

Running javascript from the "userside"

I have one maybe stupid question but my googling skill were not up to the task.
I have some html page that I opet at my work that is php generated. On it 80% of the text is not needed for me so I "made" a javascript code that filters/hides all text I am not interested in. It works just fine but for this to work I must SAVE html document on my computer and insert that javascript code into it so it can make text invisible.
Now I am thinking of improving this because every time I reload web page on my company's server I need to save it on computer and insert javascript code.
Please point me into the direction that can help me do this. Is there any way to run that javascript code over already opened page in FireFox or some other browsers?
Html page that I am changing is mostly tables and I am hiding rows that I do not need, but there aro around 500 rows and I only need 15 or 20.
Thank for all your effort!
One way would be to use a 'bookmarklet'. Those are small javascript snippets, which you can insert into your bookmark bar and then execute by clicking on them.
Drag me to bookmarks for alert
For Example, drag the link in this fiddle into your bookmark bar and it will alert 1 on click.
http://jsfiddle.net/5aAPN/2/
Use CSS instead. If you have a white background make the text white. You can also give visibility: hidden a try.

Categories

Resources