How to change link - html

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 .

Related

link to a certain place in a locally hosted website 127.0.0.1:5500

This is an update to link to a place in a locally-hosted website
I tried the solution:
<a href="http://127.0.0.1:5500/#projects"><button
onmouseover="onbutton(this)" onmouseout="offbutton(this)"
type="button">Projects</button></a>
while it does change the link in my browser from 127.0.0.1:5500 to 127.0.0.1:5500/#projects, it does not take me directly to the div tagged with id #project- it just leaves me at my current place on the website. How can I fix this?
First, as observation, this is not a CSS question. Here we go.
When you use an anchor with the ID attribute, you dont need to use the entire URL. just the #id

How to deliver data to other page in Framework7?

How to deliver the data to the detail page ?
You see the below demo I write, I am studying Framework7, but I am puzzle about to deliver data to the detail page.
Such as I click the first item, I want to deliver the index = 0 to the detail page, if I click the second item, I want to deliver index = 1 to the detail page.
My code is below:
<ul>
<li class="item-content">
<div class="item-media"><img src="http://up.qqjia.com/z/25/tu32695_9.jpg" width="44"></div>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">Daniel</div>
</div>
<div class="item-subtitle">CEO</div>
</div>
</li>
...
</ul>
You see,I goto the about page is use <a> label, so, How can I deliver the index number, and so I can dynamic set the about page's data.
If there get a demo, maybe that explain more detail.
I opted for an easier way.
Set the data attribute on the 'a' tag:
<a href="#nextpage" data-myfieldname="myfieldvalue">
Then retrieve the data from the Javascript's click event handler:
mydata = $(this).data('myfieldname');
My friend, please use Template7, Framework7 already support what you are asking for, check "Pass Custom Context" section in Template7 documentation page:
http://framework7.io/docs/template7-pages.html#pass-custom-context
It is very simple and the documentation covers all the scenarios, more info and demos here:
http://idangero.us/template7/
EDIT
As some links are dead, referring to new links:
http://framework7.io/docs/template7.html
you can use localstorage concept. When the user click the particular list item like below
save localstorage :
localStorage.setItem("listitem", "1");
get localstorage :
alert(localStorage.listeitem)

How to make an index

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

Generate different pages on the basis of different contents

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.

How to make a wall of pictures clickable that sends away a value

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>