Manipulating website content with Javascript - javascript

I have 2 questions:
How would I make a small overlay open if a mouse hovers over any image on a webpage?
How would I find selected pieces of text on a webpage and make them into a link?
(similar to what Kontera or Vibrant does)
EDIT - Let me explain.
If a mouse hovers over any image on the website with a particular tag, I want a magnified version of the image opened next to it
If I have a word - "skills" inside my database and the webpage on which my Javascript is added has the word "skills" on it, I want it to be highlighted and linked to another page

1:
I know that in CSS you can use some hover keyword to effect the page (but I know little about CSS).
In javascript/HTML there is onMouseOver and onMouseOut, so.
<img onMouseOver="javascript:" onMouseOut="javascript:">
2:
You could use regex to find the text snd replace it.
document.body.innerHTML = document.body.innerHTML.replace(new Regex("skills|other|words", g), "<a>$&</a>"); //Note that this searches inside of the html tags so it is better if you know of specific locations to search for the text instead of anywhere in the html.

JQuery is a good javascript framework. You can do (1) fairly easily with a host of plugins. Jquery Plugins
As for (2), you would probably have to do that server side. Not sure what server technology you use, but when the view is rendered, you would have to have some sort of filter go through all the words on the page and create the links.

Related

Scrape web data from mouseover popup

I'm trying to use JavaScript to scrape data from the following page, specifically the "free shipping free returns" text that appears when you hover your mouse over the cart icon:
Whenever I hover over the cart icon, new HTML is added to the DOM.
And when I move my mouse away, the the previously added HTML goes away. I want to be able to parse data from the HTML that gets added without having the popup visible. How would I be able to scrape this text data even if someone does not hover over the cart icon? Is there a way to access all the HTML data at once?
You can try to catch the JavaScript function being executed when you hover your mouse over the cart icon. You can do this via the developer tools. Add break points to code execution if the DOM changes (on the parent element in which the new element is added).
Once you get the function, just execute it directly on that page and you'll probably be able to see the popup and extract it's contents.
You could also try to simulate a hover as explained in these answers: How do I simulate a mouseover in pure JavaScript that activates the CSS ":hover"?
Scraping a page for data is not usually recommended since they can change over time (especially ones not written directly in HTML, but are rather generated (usually they have CSS classes like 8h2H1)).
If this is not supposed to be a long-term solution, the above answer by #nvkrjn is a good answer. Or, you can just check for an element with the id name free-shipping-label.
But, if this is supposed to be a long-term solution, then I would suggest using an API (this site doesn't seem to have one) or querying the database like how to Javascript does. Also, if you're using a non-browser environment (eg BeautifulSoup), it may not run the JS required to get the data.

What would be the best way to create a link to a specific part of a page (widget) in Google App Maker?

I need to create a link (icon) in app maker that will jump to a specific part of the same page. The widget I am trying to link to is a simple horizontal panel with a label in it. Basically just creating a shortcut for a user to jump to a section lower down the page. I can figure out how to jump to a specific page in my app but not a specific position or widget on the same page?
Can't believe I'm referring to HTML as a "lower level" of code, but, this is where we are. The HTML is simple - how you make this work using App Maker is up to you. I know that App Maker will allow arbitrary HTML, so getting this to work shouldn't be too hard.
At the position on your page that you want the user to be able to jump to, you need to create an 'anchor tag' - which looks the same as any other anchor tag, except that it includes a 'name' instead of a url:
<a name="jumpto"></a>
Now, to create a link which will jump to 'jumpto' you create another anchor tag around your icon that will work like any other link, except that it will jump to the named location in your page instead of jumping to another site on the www:
...
Replace the ellipses with your icon image / text / whatever and you'll be ready to go!

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?

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.

altering displayed web page

I am attempting to write a firefox addon that will analyze the displayed page and change the text display to be hyper links (according to some algorithm).
I am trying to fogure out how can i parse the html document tree to retrieve the text in order to make it a link.
So i need not only the text but its position in the document.
Like if i had some kind of parser that will give me only text nodes or something, and then i can replace its content.
Is there such a thing at all?
You can insert javascript into every page so you have everything that javascript can do. A good place to start learning about Firefox addon development is the MDN https://developer.mozilla.org/en/Building_an_Extension

Categories

Resources