Have Changes Reflected for Everyone on HTML webpage - javascript

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.

Related

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

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.

How do I automate my workflow with Javascript to save bunch of images

I am trying to copy paste some stuff from some website which I want to automate. Here is my manual workflow:
There is a master webpage which contains set of links.
When I click on one of those links it opens another (say topic page) page with set of tabs.
I click on one specific of those tabs which loads a page containing several buttons with same html-css applied to them.
On click events of those botton calls a javascript function passing four integer parameters.
The function results in generating a separate popup window with some small content which I then print as pdf.
The issue is that the website blocks right click and text selection. And the popup window contains a image which I print as pdf by right clicking on titlebar and selecting print as pdf. When I checked the source of popup, I found that it uses
"data:image/png;base64,<source for image>"
as value for src of <image>.
Now the big question can I write some script which can run when either master page or topic page to automatically click on buttons on them and get those images saved either directly as png or pdfs? I am good at programming languages java, groovy, python, C#... Also explored javascript a lot. But that's many years ago and really lost in touch with JS. Can I do this with say greasemonkey or any other way. Any pointers (possibly detailed) will be helpful...Or even some small pseudocode which I can paste in console of topic page which will do all clicking of buttons and saving image from the popup, so that I don't have to do button-clicking-&-saving-image manually. This will also serve a lot since there are more buttons per topic page instead of number of topic pages themselves.
Update
Well I know this question is not at all specific, so here is my initial hurdles, since I have started to try it out:
given that I am programmatically call all those function on onclick events, how can I get hold of popups in source? That is, how can I reference the popup that is opened by function call in js?

show contents of link

I've been searching the internet to get some information about how i can be able to detect and show what a url is about.
Facebook has a good example of what i actually want to achieve:
If you create a update on facebook and paste in a URL, facebook will detect some information about it and show a box with some text and often the right picture.
for instance, take: http://www.ebay.com/itm/Mens-Monk-Strap-Loafers-Suede-Lined-Metal-Buckle-Slip-Casual-Dress-Shoes-New-/311170422772 . then it shows the image of the shoe and headline.
Ive found other services which does this with image services and youtube, but what i need is about getting information of products most of the time, so often urls from shops. So the user pastes in a url, and i can detect what that link is about.
any ideer how this can be done ?
Is it backend code, like c# or javascript ?
Hopefully some of you can point me in the right direction. Thanks in advance!
Facebook scrapes pages for specific metadata in the back-end and uses it to generate the snippets you see, which can either be served along with the initial page load or brought in via JavaScript (front-end). From there it's a matter of using CSS and JS to style the popup to your liking.
Depending on how inter-related your site is with the content you want to display, this can be an easy task or a difficult one.

WebBrowser source outdated

I am trying to write an automation tool for a browser game that takes some data from the web page, in this case the data appears to be added using JS after the page has loaded, I assume this is where my issue is.
I'm trying to grab the text that the JS adds and save it to a variable, but when I try and find it using the WebBrowser component's DOM controls, it cannot find the text I need. The text IS there, you can see it on the browser window and the source should easily be found as I can see it when using Chrome's dev console/inspect element tool, when I target it using the DOM controls, VS makes it clear that it can't find it. I am 100% certain I was targeting it right and that I'm not pointing it in the wrong direction.
Is there a way for the WebBrowser to refresh/re-read the source without refreshing the page?
Otherwise, how would you go about working around this?
Cheers,
Tom.
One work around that springs to mind when puling text from something is to use MS Office document imaging. If the text always appears in a specific location on a page it should just be a question of taking a print screen of where the text appears and then running it thought to OCR. The advantage of this is it's pretty future proof, the game makes could change the method by which they display the text but as long as it's displayed you should be able to print screen it. :)

Use jQuery to append star to menu item if the linked page's content has changed since last visit

I would like to create a similar effect to Apple's Safari 4 Beta Top Sites page -
when when you view it and a page's content has changed since you last visited, it displays a blue star in the top right hand corner to notify you.
I would like to do the very same, but only within my website and instead of an image I would like to append a '*' or some other character to the menu item's link.
I'm sure you would use the jQuery Cookie Plugin, but my scripting is not that advanced and I do not know how to dynamically change the cookie's content. Have I explained properly? How would I do it?
Many thanks in advance
Server side:
Read the website f.ex every minute and save the timestamp if changed content.
Save the users' visit timestamp to the page
Ajax:
Check if the websites update timestamp is newer than your visitors' timestamp, if yes make the star class visible, when the user clicks on the link, make the star disappear and update the users timestamp.
--
Showing a star or an image or whatever with Jquery is not the big deal here, it's a oneliner, the complex problem is to detect website changes, because minor changes can occur, but the main content could not change. The easiest way to do this would be if the website provides rss, then there's probable that the important new content will be published via rss.
You're asking a very vague question. Have you even attempted this? Please try it first then ask for help along the way.
Also, this is not something you necessarily need jQuery for. You could do it completely on the backend. But it's hard to say which solution is best for you without know anymore details.
I guess I would recommend using php and storing the cached page into a db (in other words the user would have a "fav pages" account) then when the user visits the "fav pages" webpage, you would fetch all the users favorite pages and compare it to what has been stored in the db. But for certain pages (for example if they have a date/time string), it would be very difficult to tell if the change was something the user wants to know about. Probably you would need to create a complex algorithm to decide what change is good change and what change is just certain website features.

Categories

Resources