in HTML I have this wall of pictures with different foods.
<ul>
<li><p>Sallad</p><img src="img/sallad.jpg"></li>
<li><p>Pizza</p><img src="img/pizza.jpg"></li>
<li><p>Sushi</p><img src="img/Sushi.jpg"></li>
<li><p>Pasta</p><img src="img/pasta.jpeg"></li>
<li><p>Indian</p><img src="img/indian.jpeg"></li>
<li><p>Fish</p><img src="img/fish.jpeg"></li>
<li><p>Burger</p><img src="img/burger.jpeg"></li>
<li><p>Steak</p><img src="img/steak.jpeg"></li>
<li><p>Vegetarian</p><img src="img/vegetarian.jpeg"></li>
</ul>
My problem is basically that I have a search function, when I click on one of these pictures I want it to redirect me to another page, I know I can basically use <a href for this, but the thing is I want each of these picture to have one value so that my search function can read it and then display the search result from the database. I.E If I click the pasta picture, it will take me to the result page showing all the pasta dishes in the database.
If any of you have any other suggestions or solutions I would really appraciate it. Thanks a lot for reading!
Simply use a link that contains a query string.
<img src="...">
Do it likewise for the other elements. In your server-side code you can then access the GET variable named "search".
<img src="The URL of the image">
Example
<li><p>Sallad</p><img src="img/sallad.jpg"></li>
OR
<li><p>Sallad</p><img src="img/sallad.jpg"></li>
UPDATE
Try This
<li><p>Sallad</p><img src="img/sallad.jpg"></li>
Related
I have a link of a hotel which shows us three types of rooms, I need to change that link somehow so it will become direct link to "modern" type room like if I clicked on that rooms, the thing is that that link doesn`t change after I choose "modern" rooms. Can someone please show me and explain how to do that? Here is the link
Post some code so we can see what you're dealing with...
Maybe try using an anchor to wrap the content:
<div id ="#anchor_here"> code here </div>
To link straight to that section:
go to section
if i correctly understand u, you wanna change your static link based on the end users choice, for this purpose you have several choice and the best one is using JavaScript and Jquery same as below:
in html:
<a id="linkId" href="your_linl"> select me </a>
in js:
$('#linkId').attr('href' , 'new link')
is it the answere you looking for ? if not, plz explain more .
https://jsfiddle.net/054j0fj7/
As you can see when you click on show catlinks you get the wikipedia page, How ever I would like to show the catlinks at the end of page.This area is defined in HTML as following:
<div id="catlinks" class="catlinks" data-mw="interface">
and this is the fancybox
<div> Show Catlink </div>
Just change target URL to correct one with anchor #catlinks.
<div>
Show Catlink
</div>
If you want to display only part of the external page, then it is not possible to implement directly. You would need to create, for example, php file that reads content of that page, parses and outputs only the part you need. Then you would simply display that page in fancybox.
I'd like to make a table of content for this web page I am making (the project is still offline for the time being).
Now I already know most of what I have to do (text boxes, lists, the CSS, etc) however I don't want the links going to new pages but rather it send the user to certain parts of the page like in a wiki.
Any idea on how one would code something like that?
Like this:
Jump to a section
Then in the location to jump to:
<a name="jump"></a>
You can use anchor link (or bookmarks)
The code will be:
<a href="#my-div>Link to 'my div'</a>
<div id="my-div"></div>
That link will scroll the page until the element with the corresponding ID
Let me assume that I have the following architecture
_components (folders)
x1.html
x2.html
x3.html
I have a first page where I got the information from the YAM section for every component.
At this point I would like to add a link for every component to another page where I will display the component in a bigger manner.
So, let me assume I have, in the first page :
<div class="col-md-1">
<span id= "logos" class="material-icons"></span>
</div>
and In the componentbig.html I would like to open the right component on the basis of the link.
Do you have any suggestions for me ?
If I understand You correctly, then collections might be the feature You are looking for. For example, I'm usually using collections to generate a list of products and then have a specific page for each product also. Also make sure You check the easy tutorial by Ben Balter.
I am trying to allow the user to link their facebook, twitter etc and have an image for the corresponding link appear which will take them to the link stored in the database.
The problem is, instead of giving me something like "www.facebook.com" it is giving me "http://localhost:60619/User/www.facebook.com"
right now I am using to get this.
<a href="#Url.Action(#Model.Facebook)">
<img src="#Url.Content("~/Content/images/Facebook.gif")" alt="Facebook" /></a>
The Url.Action has managed to remove /User/Profile/www.facebook.com and replace is with /user/www.facebook.com but I can't get it to be just "www.facebook.com".
Edit: I have this figured out but thank you for the help! I just needed to add validation so that the user either enters http:// at the beginning or I will have it added on manually before it is stored.
#{
var url = #Model.Facebook.Split('/');
...
}