Link to specific line within a table HTML / Vuetify.js - html

I am using a v-simple-table in Vuetify to display the contents of a log one line per row. I need to be able to send someone a link that will take them to a specific line within the table. I'm trying to accomplish this by using the id for each element as a hash anchor but the link just reloads the page.
<v-simple-table height="500px" dense>
<template v-slot:default>
<tbody>
<tr v-for="(line, index) in logFile" :key="index">
<td class="accent--text" v-show="showLineNumbers">
<a :id="index" :href="'#/logs/view/204#'+index">{{ index }}</a>
</td>
<td>{{ line }}</td>
</tr>
</tbody>
</template>
</v-simple-table>
This table is within a v-card within a v-container on the page. When I hover over the number for line 100 of the log for example the link previews as "{mydomain}/logs/view/204#100" and inspect element shows it has an id of 100 but going to the link in the browser just loads the page at the top.
Any help much appreciated!


The problem is that the browser can't send the user to a portion of the page that doesn't exist, so it just stays at the top.
Now you might be thinking...
But it's clearly there, I checked it, I see it.
However, the index you reference needs to be there at the time of opening the page, and since the content gets generated after the page is loaded, this functionality will not work.
If you want it to work, you're going to have to implement the scrolling yourself to happen after the table is rendered.
One way to do it is to get the index from the url.
window.location.hash will give you the hashbang, and then you can use a library like vue-scrollto to do the scroll.

Related

Why does my Vuetify slider some times "push away" its v-slot:append template element?

So, I have a Vuetify navigation drawer, and in it I have several list items, among them one containing a slider. Most of the time it works the way I want it, but some times the template element at the back will disappear, including the HTML element in the browser inspection tab. I have not really been able to figure out exactly what triggers this since it's quite rare..
This is how it looks like when it's working..
..and what happens when it breaks!
Here is the HTML code for the list element
<v-list-item>
<v-list-item-content>
<v-list-item-title class="presTitle">Presentation delay</v-list-item-title>
<v-slider
v-model="presentationInterval"
prepend-icon="mdi-clock"
dense
:min="6000"
:max="60000"
step="3000"
>
<template v-slot:append>
<p class="durationText">
{{ (presentationInterval / 1000).toString() + "s"}}
</p>
</template>
</v-slider>
</v-list-item-content>
</v-list-item>
Anyone see any obvious mistakes or why this works 99% of the time but some times break?

Can I choose what part of the HMTL returned of the src of an iFrame to be shown?

Can I select somehow what part of the reposne from the src of iFrame to beshown in it?
My situation: I have an iFrame and the resposne give me a compleate page with 3 invested tables. The ifromation that I want to show is at the innermost one and it is changing real time .
I am making aspx page.
Thank you.

Add an anchor near the table you want to jump to and then add the name to your src in the iframe.
In the page you're loading:
<a name="table3"></a>
<table>
...
</table>
Your main page:
<iframe src="tables.html#table3"></iframe>

Getting a link to go to a specific section on another page

I have a link on one page that needs to go to a different page, but load to a specific section on that other page.
I have done this before with bootstrap but they take all the 'coding' out of it, so I need to know how to do from scratch. Here is the markup I have based on this link (not the best resource, I know): http://www.w3schools.com/html/html_links.asp
**Page One**
<a href="/academics/page.html#timeline> Click here </a>
**Page I am linking to**
<div id="timeline" name="timeline"> ... </div>
Can I do this with just HTML, or do I need some JavaScript? If I need to do it via JS, it needs to be on the target page, right?

I believe the example you've posted is using HTML5, which allows you to jump to any DOM element with the matching ID attribute. To support older browsers, you'll need to change:
<div id="timeline" name="timeline" ...>
To the old format:
<a name="timeline" />
You'll then be able to navigate to /academics/page.html#timeline and jump right to that section.
Also, check out this similar question.

You can simply use
<a href="directry/filename.html#section5" >click me</a>
to link to a section/id of another page by

To navigate to a section of another page use:
<a href="example.html#example-section>name-of-link</a>
The example.html would be the page you want to go to, and the #example-section would be the name of the id on that page that you want to navigate to.

To link from a page to another section of the page, I navigate through the page depending on the page's location to the other, at the URL bar, and add the #id. So what I mean;
This takes you #the_part_that_you_want at the page before

I tried the above answer - using page.html#ID_name it gave me a 404 page doesn't exist error.
Then instead of using .html, I simply put a slash / before the # and that worked fine. So my example on the sending page between the link tags looks like:
El Chorro
Just use / instead of .html.

To link from a page to another section just use
my first div

How do I make a random folder load inside a div on load

Ok, first of all I'm sorry if my question appears unclear as I'm going to find it hard to explain. I don't know if you guys help with the coding at all but if you could set me off in the right direction that would be great.
Overview-
Basically similar to that of YouTube where on the side panel under "recommended >>" There is a single column with different rows. On each row there is a <div> element which contains a picture, title, who uploaded it and views. So these different parts so the title picture etc. are specific and link to that one video. I know the different videos that are recommended are based on numourous factors etc. But, anyway driving to the point here now-
Q- Is there a way of making the page load a random element or shall we say set for a video within a <div> tag?
I'll put up some code to demonstrate the basic layout:
<table>
<tr>
<td>
<div id="thumbnail">
<img src="thumbnail.png"
</div>
</td>
<td>
<div id="author">
<a> somebody </a>
</div>
</td>
... and so forth.
I have read up on how to make a random image come up upon load but is there a way of making a whole section or say a random style sheet come up on load? and each contain the different videos ( Just taking a stab in the dark here) or some sort of script?. Again I'm sorry if I'm sounded very vague or if I'm using the wrong terminology...

How to display comment in page source

I want to display comments in my HTML source, but only in the source and not on the actual rendered content of the page. For example, when a user right clicks their browser window and selects "View Source", I want the comments to be visible for them to read there, but I don't want the comments to be visible on the actual rendered website.
I tried
<span style="visibility: hidden;">
Joe Hancock - 04/16/12 - Some comment
</span>
But doing this takes up actual room on the webpage (white space) and really throws off my styling.
Anyone know of an good way to do this?

<!--This is a comment. Comments are not displayed in the browser-->
HTML Comments

Try this:
<!-- Comment goes inside here -->

1<div style="display:none">This is hidden</div>2