I've got a task I need to complete for an interview and I'm having issues with one annoying part. I have to create a portfolio site that displays 8 images at a time on the front page. These images need to be hyperlinks.
All the data I need (image location, url, title etc) is stored in an XML file. I've got all this data out and have successfully created a pagination Javascript animation that displays 8 images on a page with their relevant title.
What I'm struggling to do is make the images into hyperlinks, I'm sure the answer is staring me in the face but every time I try and add the hyperlinks it either stops displaying images or displays images but breaks the pagination and animation.
I've included the HTML, JS and CSS below, obviously given I haven't attached the XML you won't be able to see anything. I'm hoping some will know how to do this though!
Let me know if the XML is required..
http://jsfiddle.net/gFg56/1/ - Code
What its meant to look like with the images on the front page:
This should work
$('#portfolio-item').append('<li><img src="' + image + '" alt="' + title + '"></li>');
If it doesn't, can you post the error you get?
Bye
Do the images need to be hyperlinks really or just behave like them? Isn't the issue here based on the fact that you have to prevent the default behaviour of the hyperlink so you can handle the rendering in JavaScript and perhaps navigate to the linked URL using JavaScript?
Related
I have an exercise in which I need to make a page for my school, in this exercise I am tasked with making a page in which the user will be able to see faces from everyone in the class. I wanted to think "a little outside the box" and use https://thispersondoesnotexist.com to generated different faces.
I found https://fakeface.rest that allows me to give directions to thispersondoesnotexist.com allowing me to set an age range and a size for the image https://fakeface.rest/thumb/view?minimum_age=16&maximum_age=25
Here is my issue however: The page is loading every links at the same time and displaying the same image multiple times like this:
That's why I wanted to know if there was a way for me to load the two images at a different time so that they show a different "person" each time.
It would be preferable to avoid using js (html and CSS) but if this is the only solution then so be it: I'll use it
Ps: I tried using eager/lazy loading but that didn't work
Here I added an additional garbage parameter to each url, to make the urls different:
<img src="https://fakeface.rest/thumb/view?minimum_age=16&maximum_age=25&blart1">
<img src="https://fakeface.rest/thumb/view?minimum_age=16&maximum_age=25&blart2">
<img src="https://fakeface.rest/thumb/view?minimum_age=16&maximum_age=25&blart3">
<img src="https://fakeface.rest/thumb/view?minimum_age=16&maximum_age=25&blart4">
They actually tell you how to do that with the API:
If you want to insert multiple different faces and prevent the browser caching then you can append any number or random string to the end of the endpoint as follows:
https://fakeface.rest/face/view/1?gender=male
https://fakeface.rest/face/view/anythingcangohere_theapidoesntdoanythingwithit?gender=male
Source: inserting into html (scroll past the image)
Hey so I'm making some software that will have 4 different steps.
load
edit item 1
edit item 2
submit to an online storage
Since item 1 and item 2 are large items to be edited I wanted a separate page.
I also wanted a separate page to submit both items so they know it's being submitted and user receives further instructions.
I used to just let it just redirect the user to the next page, but I found it took 2-5 seconds to load each page, and I rather have it a fluid process.
Since Im using electron.js I am using require to load the JS part of the webpages.
But cant find a way to load the HTML and load the JS parts that effect the HTML (JS needs the webpage's DOM).
I've attempted using Jquery but all I accomplished was getting the html in a string format.
Been trying to find a way to use ajax, but so far everywhere I've looked its for including the html into a different html page.
I am new to both Jquery and ajax and just looked at them today. So maybe I am missing something about them. But cannot find any tutorials/documentary for loading another page.
I have a problem with my work. I have to write Javascript file which will display me a website like this one http://tinypic.com/r/2iu47b6/8 . I have already given html and css file which am I not allowed to change. List of pictures in JS must be given as array.
I have to write function onInit() which starts after loading the site and creates XHTML code with list of pictures and paste it in cell with ID = "seznam". Other function must work that way when you click on picture it shows up in full size, like you can see on picture in LINK i posted.
Here appears my problem. I created JS file and my pictures doesn't show up when I open html website. If I try to open picture in new tab I get error "Failed to load resource: net::ERR_FILE_NOT_FOUND".
I have html, css and js files saved together in one map, and pictures in subfolder "slike", but my website anyway doesn't work.
Can someone please check my code, and help me? http://plnkr.co/edit/zD0Chi8WUqLPf1JaKwr2?p=preview
Thanks!
EDIT: Pictures imported to website are Sample pictures from Windows 7 if that helps.
Probably this line is the problem:
print =print+"<img src=\""+print[i]+"\" onClick=\"ShowPics(this);\" />"
It should probably be:
print =print+"<img src=\""+pictures[i]+"\" onClick=\"ShowPics(this);\" />"
If i look at Amazon Button to add items to lists on their site - you can see it here:
http://www.amazon.co.uk/wishlist/get-button
How does it work? I'm pretty sure it scrapes the page somehow but it seems to get every image whether its a flash image, jpg or anything, even when the site in question uses relative img src as opposed to absolute full site urls
Example page below, all images shown are jpg which is cool but all img src are relative meaning no "http://blah.com" before them
http://gadgets.guardianoffers.co.uk/p-788-Casio-Solar-Powered-Edifice-Watch.html
Is there a better way to get images other than parsing the html source?
Or are they just doing a million ifs if they don't get a hit straight away?
It looks like it parses the HTML of the page and looks for what is semantically identified as the primary image, name and price. For example, if you look at a page that doesn't have any ecommerce products, for example: http://www.theglobeandmail.com/ it takes the page h1 element as the product name and the primary image (front page story image) as the product image.
So behind the scenes they are doing a lot of guessing. Using HTML 5 semantic markup, you could establish a standard for this kind of thing, but unless everyone is using it, you are just making educated guesses.
I have a huge(around 20mB) html page which is nothing but pure text. It is a log file for some code running on a server. Now, I am trying to write a chrome plugin which automatically parses this page when someone opens it and adds appropriate links according to my need at certain places.
The page looks like this
<html><head></head><body><pre> 20mB of pure text </pre></body></html>
So, two questions, second dependent on first, which would help me.
(I am using pure javascript till now. No libraries yet.)
1) How do I parse the page?
2) There is some information in the first 3-4 lines. How do I easily get those first few lines and get the data out of it ( if parsing the whole page is not going to be easy)?
What are you trying to parse the page for, are you creating a summary?
for Starters, you can get the first 4 lines by adding an id to the pre tag and doing this:
var first4Lines = document.getElementById("theIdTagOfThePre").innerHTML.split("\n",4);
if that didnt work right you have to switch the '\n' to a '\r\n'.