I have been collecting product prices for a market investigation project in my University. So far I have been looking at very basic pages or forms where I could extract every product´s name and price with a simple js, but I have encountered many pages like this one, where upon scrolling there is an event listener that updates the html to only have the code of the products the user can see.
My knowledge in javascript is not this advanced, and I can´t figure out how to make the html show all divs at the same time, so I can then extract them with one script.
Try to use Position: Sticky in your css file
Related
I've got a basic webpage that I built with HTML/CSS here.
However there's a few things I want to change in order to make it easier to update.
The first thing I want to do is to find a way to automate certain elements so that if I change them I don't have to go back and change it on every single page. For instance, if I add twitter to the nav on the left-column, I just want to change it once and have it universally applied across the site.
This also goes for the footer, and the share button JavaScript element that I have in the head section. (For the share buttons that appear on the left side.)
Would this be done with JavaScript? If so how?
I know how to link JavaScript files like a CSS file, but that's as far as my knowledge goes. (Besides knowing HTML, CSS and Java of course.)
I have a web form.
I have a group of about 20 images displayed on the page. I want the user to be able to drag five images into a holding area, and to be able to arrange their order.
On submit, I'd like the names of those images, and their order, to become part of the $_POST data.
I'd appreciate it if someone could point me to a working example of this functionality that I can reverse engineer, point me to an open source project that offers this functionality, or can provide the code to do this.
I am using PHP, with jquery and js
Thank you.
If already using JQuery, go for JQuery UI.
They have actions called DRAGGABLE and DROPPABLE which you apply to divs. It's a very elegant, easy to use setup.
Examples:
Look to the right for more examples
http://jqueryui.com/droppable/
As for posting, at submit time you can iterate through the DOM, find the images in the "holder div" and post that OR you can hook into the event that fires every time an item is 'dropped' and write that to a hidden or other form element what is in each box.
I'm not sure if javascript is the best solution but here's what i want to achieve.
The web page is divided in 3 columns...
The left column should have links in picture format like Arts, History, Science etc
Clicking on any of these link should generate a series of links in the rightmost column say clicking on history should generate links for Civilization, World war etc Science should generate links like Physics chemistry represented by pictures etc and so on
Finally Clicking on these links say World war should display the content in the central column giving a brief history on World war....
Also each time a user clicks on an image link say Science it should get highlighted so the user can navigate easily from one topic to another.
I'm a novice to programming, not sure if javascript is the best approach. Also I'm very confused as to how to go about this problem where to begin and how. Any help in terms of code chunks or references or algorithms or advice on how to approach this problem would be most appreciated. If solving this problem means learning a new programming language i'm open to try.....
In case if i'm not clear in explaining the problem let me know
JavaScript would be appropriate for this. The appropriate approach will depend on how much content you have.
If it's reasonably short, you can achieve all of this by simply changing the display property on your elements (use JavaScript to set the CSS of certain page elements to show (display:block) or to hide (display:none).
If you have pages of text, you may want to look into Ajax. It is a bit more advanced that simply showing and hiding elements that are already there.
I'm trying to make a page that allows users to select one shirt, one pair of pants, and a pair of shoes from an existing selection (horizontal scrollers for each group). The user then submits their selection and I receive an email of the users selection. Ideally the user should be able to see their complete selection either as an isolated element on the page or each scroller should focus on the chosen element.
I've been unsuccessful getting the selected element to display separately somewhere on the page.
As far as having three separate scrolling windows I was going to create three forms and put them in iframes, but it seems as though getting multiple forms to post with one submit button, and processing them is quite difficult.
I could scroll over all three groups simultaneously and this way keep it one form (shirts, pants, shoes) but this would be pretty ugly.
Here is a link to my scrolling form made from only one group. http://www.evan-livingston.com/test/list.php
I'm new to all of this, and I'll sacrifice some polish in order to get a working system.
What approach would be best to accomplish this system?
thanks in advance.
more elegant looking suggestion (using only client side programming)
use forms and create a table with each element as part of TD or inline list
on click--> highlight the image
on double click--> push/append it to a new div with info(link, name etc) about image and do the needful in the form of anchors and list tags
this new div can be displayed now or on a click of a submit button as a list of selected items. add an anchor to remove an item on click.
well there can be many ways to go about it. this is just one way and avoid the pain of using php.
since u asked about approaches: i prefer client side programming to php but thats purely based on my experience. use jquery to help u move around with js.
I want to have multiple video icons at the top my website's front page. I will have about 20 or so which won't fit on one line (I want to keep the videos on one like) so I thought of having two button on the right of the group and on the left of the group where you click to scroll and view more videos. Do you know an easy way to do this? I can pass in the video links from the server in different Divs or anyway that will make it easy. I thought of using AJAX and pass it different set every time from the server with every click (I'm using Rails and it's fairly easy to do it) but that will be an extra load on the server which I'm trying to avoid. I'd rather send all the icons at once and let the JavaScript handle the scrolling.
I thought of using iFrame but I don't like the idea of scrollbar and wanted to be more like button
Any ideas?
Thanks,
Tam
Use a JavaScript library like jQuery. There is myriad of plugins that do exactly what you want. Here is one