This is my first time posting here.
My website has a portfolio page written in HTML5. On the page, I have multiple HTML links to different galleries.
<a href="#II">
which presumably calls
<article class="col2 pad_left1 tab-content" id="II">
<ul class="gallery">
How do I directly call each gallery from an HTML link from another page?
Thanks,
Grayson
By prepending the other page's url to the href value:
Foo
You put a href in your link as you did. The url than looks like: www.example.com#hrefYouPut. On document ready you do an if clause:
var hash = window.location.hash;
if (hash == "#hrefYouPut") {
//my gallery pops up in here
}
Related
I trying to navigate from a.class1 to div.class2. But the URL is changing when the link is called. So when trying to back page, it goes back to the current page on another section.
<a RouterLink="." [fragment]="'idDiv'" class="class1"></a>
...
<div class="class2" id="idDiv"></div>
Simple add 'skipLocationChange' to your anchor tag
<a routerLink="." [fragment]="'idDiv'" class="class1" skipLocationChange></a>
You can also refer to this one: Angular 2, handle anchor links with href='#'
I am done with redirection to target page but what I want is to redirect to particular <div> of the page. How can this be achieved?
You can do it in two ways.
1) [via Javascript (+jQuery)]
home
$('#home').click(function(){
$(document).scrollTop(100) // any value you need
});
2) [via pure HTML]
home
<section id="home_section"></section>
<div id="go1">
<!-- content -->
</div>
<div id="go2">
<!-- content -->
</div>
<div id="go3">
<!-- content -->
</div>
...
Just append url id as below ,you are done !
news.html#go1
news.html#go2
news.html#go3
This is the easiest way for me
<li>Prices</li> (This could be a paragraph or a button)</li>
<div id="prices">
// Prices section
</div>
You need to add id attribute to that section of page you want to show and pass id name at the end of url using hash (#) symbol. For example you want to redirect user to div with id='test'
<div id="test">your section content</div>
Then you should use this url structure:
http://example.com/your_page.php?some_param=1#test
Basically you use anchor tags in HTML to get your job done.
You'l probably be familiar with them as:
As HTML convention, while defining a section, you can give each section an ID for identifiers :
<section id= "blahblah" ></section>
And you can redirect to the section by just mentioning them in the anchor tags :
You can link the html code with css.
In c#
Response.Redirect("http://www.example.com/index.aspx#id_in_css");
Here are two conditions,
1) If you want to redirect to div from different page:
Page
if(window.location.href.includes("div-panel"))
{
$(document).scrollTop(450);
}
2) If you want to redirect to div in same page:
<button id="button-click">Panel</button>
$('#button-click').click(function(){
$(document).scrollTop(450);
});
Give that section an id (lets say: section1) and then the redirect url will be http://www.sample.com/page#section1 .
Note: the # and the keyword, that's the id of the section you want your browser to scroll to.
Read more about Fragment Identifier here
If you really want that smooth sliding to the designed section, here's a quick step-by-step:
In the section you want, create an id property, i.e:
<section id="products">
next, using an anchor tag, insert # + the id for the section on the href property:
<a href="#products">
Now, once clicked, the page will center the section pointed on the anchor tag. But this will happen brutely. In order to smooth the scrolling process, in your CSS file, use this snippet:
html {
scroll-behavior: smooth;
}
And that's the simplest way!
There is also ways for doing it with native JavaScript and JQuery. For more, i recommend the article on CSS Tricks -> https://css-tricks.com/snippets/jquery/smooth-scrolling/
first you need add id where you want to redirect
<section class="com-padd com-padd-redu-top" id="deals-home">
than add
< a href="{% url 'home' %}#deals-home">Go to Home that page</a>
I'd like that a specific link goes to a certain header on another page. I know how to do it on the current page.
Take a look at anchor tags. You can create an anchor with
<div id="anchor-name">Heading Text</div>
and refer to it later with
Link text
You simply combine the ideas of a link to another page, as with href=foo.html, and a link to an element on the same page, as with href=#bar, so that the fragment like #bar is written immediately after the URL that refers to another page:
Some nice link text
The target is specified the same was as when linking inside one page, e.g.
<div id="bar">
<h2>Some heading</h2>
Some content
</div>
or (if you really want to link specifically to a heading only)
<h2 id="bar">Some heading</h2>
You can add hash info in next page url to move browser at specific position(any html element), after page is loaded.
This is can done in this way:
add hash in the url of next_page : example.com#hashkey
$( document ).ready(function() {
##get hash code at next page
var hashcode = window.location.hash;
## move page to any specific position of next page(let that is div with id "hashcode")
$('html,body').animate({scrollTop: $('div#'+hascode).offset().top},'slow');
});
Create an anchor:
<a name="anchor" id="anchor"></a>
then link to it:
Link text
<a href="./container.html">
<div>anything
<h1>hello stcakoverflow<h1>
<div>
</a>
now doing thos this all div are clickcable
I've got a Razor list-to-view function setup and i render a website url that a user inputs. My problem is that at the moment clicking the url causes the anchor to try and find that page within the website, when it's an external link.
How do i do this?
My code with the rendered URL:
<div id="PageDetails">
<h2> #artist.ArtistName </h2>
<p><strong>Website:</strong> #artist.ArtistWebsite</p>
<p><strong>Bio:</strong> #Html.C1().Body(artist.ArtistBio)</p>
#if (!string.IsNullOrEmpty(artist.Image))
{
<img src="#Html.C1().MediaUrl(artist.Image)" /><br />
}
</div>
The URL in the data type field should start with http://:
Use 'http://www.xyz.com' rather than 'www.xyz.com'
I want to link to a section of a dynamic page using the # anchor. Something like this:
<a href=page.php?id=3#section-name>LINK</a>
It didn't work. What is the right way to do it?
I'm not using a direct link, but a redirect like header("Location:page.php?id=3#section-name") from another script.
I have a section named section-name in file page.php. I guess page.php has a problem figuring out the value of the id to process (3 or 3#section-name). I am redirected to page.php which has its content repeated vertically.
You've only presented half of your code so I can only give a sample of the proper way to do it:
<body>
<a name="top"> </a>
<a href="#top">
Go To Top Of Page
</a>
</body>
When using anchor tags, you can target an element by its ID. Browsers will look for the ID before it looks for the name attribute when the link refers to such.
<a href="#section-name>LINK</a> will go directly to <div id="section-name"> if it exists.
Here's an example
Read: HTML Anchors with 'name' or 'id'?
A typical anchor tag works as follows:
A href link tag is written like so:
Jump to a001
See the #a001 above? That is referencing an id in the HTML page, and it will jump to it if you click this link.
To provide an example of how this id that we would jump to might look on a page, look below.
<li id="a001">text here</li>
Reference