Web scraping overlay boxes - html

I want to scrape a grocery store ad like the "weekly ad" found here.
Some of the information I want is available when inspecting the html of the elements, but the full details of what I want aren't visible until an individual item is clicked at which point an overlay box pops up, and the full details are visible in the html of the overlay box element.
Is there a way to fetch the text of the overlay box for each item in the ad without having to actually mimic clicking on each item? I have written such scripts with WebDriver and Sikuli years ago, but I'm thinking there must be a better way!
Is it possible to simulate clicking on every item simultaneously, then copying the html all at once?
I am open to any language or tool you might suggest. Thanks in advance.

Related

How to link to specific tab panel in html

I cannot work out how to link a button using the rectangular hot spot tool in Dreamweaver to a specific tab panel or pane on the same page. I have an index page of stories where, for example, I would like to link each number on the index to separate panels on the same page. How can this be done using HTML?
You can see the website here:
https://illustratedfairytales.com/
I have googled the subject, but I haven't been able to find anything which helps.

HTML - Image over another image which triggers a popup window

I had a quick search for this problem and couldn't find anything that satisfied both parts so I hope this is ok to ask:
I am creating an interactive map which has an aerial image of a location as a background, with small icons overlayed over the top. These icons, when clicked should open a popup window with images or videos that have been taken in those locations, much like a google map.
I have found code to allow me to layer images over each other here:
Html Image over image
And I have found code for a popup here:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_popup
And I can get both of these elements to work separately on my webpage, however I'm stuck as to how to combine them so that the image I have overlayed can be clicked on to trigger a popup.
It's been a while since I have coded in HTML and I can usually handle these kind of challenges but I'm finding myself a bit out of my element here.
Thanks!

how to fetch specific part of an html page into webBrowser control?

I am working on getting only a part of the navigated webpage.
for example, "the face book . com" homepage.
I only want the division of groups on the left to appear in my web Browser control.
is that possible?
I am having ideas on fetching but i don't know how to do it. any other way is fine.
also, please let me know where to put the code, because i am new on vb.net
web.Document.All("mConnect").InvokeMember("click")
this is for clicking something inside the html
web.Document.getElementId("<div>").InnerHtml("")
is this code correct? what is it for?
let's say we cut the google homepage 4 ways. and i only want Quadrant 2 to appear in my webBrowser control. is that possible? I think this is a clearer explanation..
I saw one post in this forum that technically solved my problem by manually forcing the webbrowser control to scroll to what place I want.
Web.Navigate("javascript:window.scroll(320,10,document.body.scrollHeight);")
320 is the width, 10 is the height. edit to where you want it to be.
adjust the size of your webBrowser then you can particularly choose the part that you want to see, disable scrollbars if you want.

UI similar to Google Image Search

In a webapp I have a list of items, each with a little information. I want to show more information when clicking on each item. I can pop a window using Bootstrap Modal, but I'd rather do something similar to what Google Image Search looks like.
When clicking on the item, I want to add some space below the item and fill it with the details.
Is there a control that already implements it? I couldn't find one. I'm using Bootstrap and jQuery.
If this doesn't solve your issue, it'll probably help.

Dynamic Elements in JSP?

I am wondering how to create dynamic elements in a JSP webpage? For example, what I want to do is that I have a Selection Box, in which a user selects an image. Upon clicking a button (or possibly after selecting an item), the image will 'slide down' (like how PPT slides slide down when changing slides) and rest on the center of the screen.
Or at least another simpler case would be, when clicking a button, a text box will appear each time you click the button. So far, the only idea I have of this is by using visibility but that will limit me.
Can you help me on how to do these things or if it is possible to do these with only JSP? Additionally, is it possible for elements to 'pop up' (like in facebook photo viewer) without refreshing the page?
Thank you!
You want things to happen on the client, so you need to be focusing on the HTML, CSS and JavaScript. The fact you generate the HTML using JSP is irrelevant.
Build on things that work
Write JS logic for adding new content based on the form options
Write JS logic for manipulating the CSS to do the animation
Consider using a library such as YUI or jQuery to help with the JS, and using CSS 3 Transitions for the animation.