How to open pages inside the same DIV - html

I´ve got a main page with a menu (with links to my sub-sites) and a div (where my sub-sites will appear). This is my home.asp
Then I have a folder 'sub-site1' with 2 pages (A.asp and B.asp) that have links between them.
When I click 'sub-site1' at the menu, the A.asp page appears in my div. But if I click in the B link (inside A.asp) the B.asp will open in a blank page.
link to A.asp (in home.asp):
sub-site1
link to B.asp (in A.asp):
B
also try with
B
Could anyone please help me in this.

It is very normal because your B link is in A.asp and the A.asp doesn't contain a frame whose name is div_id. You can try to put the B link in home.asp or use the jQuery .load function as Pete said.

<a id="clickThis" href="javascript:void(0);" target="div_id">B</a>
use jquery.load now
$(document).ready(function(){
$("#clickThis").click(function(){
$("#div_id").load("B.jsp");//this will load B.jsp inside div_id
//**in case you want to pass parameters to B.jsp**
$("#div_id").load("B.jsp",function(){
param1:value,
param2:value2
});
});
});

Related

How to share anchor links with angular components on angular 14?

I have a component menu which contains a few anchor tags. Each tag brings the user to that respective page section. I am trying to share the same anchor tag among the other components.
For example, I have two more HTML components called homepage.component.html and details.component.html. For each I call the menu.component.html by its selector. Both homepage and details html components have an id for the section I wanna scroll to. Here's how it looks like:
menu.component.html
Go to content
for both homepage.component.html and details.component.html
<div class="home-content" id="content"> Here comes more code </div>
It should work just like in a non-dynamic html project, however, when the anchor tag is clicked, the url redirects to '' (which is the first/default page) and then it shows the content for the first page, instead of the current componenet I am on.
I have tried creating a function where I get the current url and using the router.navigate, I pass the parameters indicating the fragment:
menu.component.ts
currentRoute: string
scrollToItem(){
this.currentRoute = this.router.url
this.router.navigate([this.currentRoute], {fragment: 'content'})
}
menu.component.html
<a (click)="scrollToItem()">Go to content</a>
However, this function adds the id #content to the url each time the anchor tag is clicked, redirecting the user to my 404 page.
I wanted to know if there is a way to use an anchor tag on the menu.componenet.html, while all the items that have "content" as their ids in different components are going to be displayed. Hopefully I made my question clear. If there is still questions about how the error occurs I can create and shate a stackblitz project. Thanks in advance :)

How to give a link for bootstrap-tabs from another page

I want to give a link for nav-tabs from another page. I mean to say that, I want to access nav-tabs from another page. I will give you the detailed information about it.
On my website there are two pages one is index.html page and another is a business-listing.html. In business-listing page I used nav-tabs. And I want to access these tabs from index.html page.
Give some idea how to give a link.
The code is too long, so I can't put it here.
I'm trying this code to give a link Link to Tab1, but it can't work.
You'd need to write some JavaScript code to make this work. The tab switching occurs when you click on a navbar link. Something like:
$(function () {
var tabId = window.location.hash;
$("#yourTabUl").find('a[href=' + tabId + ']').tab('show');
});
Replace yourTabUl with the ìd of your ul-element of the TabLinks. (Create an id if needed)
Also see the documentation here: https://getbootstrap.com/javascript/#tabs

Nav Tag, The best way to redirect to another page

I am a little bit newbie in the web development.
I’m creating a simple web page with a Nav Tag navigation, but I’m not pretty sure which is the best way to redirect to another pages.
For example I have the menu: Home, Services, Contact and when you click in one of them you will go to a page with the properly information.
I have seen this structure:
<nav>
HTML |
CSS |
JavaScript |
jQuery
</nav>
But where do you go ? To another page or a section on the same page?
I would like see the same original page and when you click in one item of the menu only changes the bottom of the web page.
So what way do you recommend to do this ?
I hope you could help me, thank you so much.
Just add
"Any Text you want, in you case: "go to bottom""</l>
After this create class at the botton of the page with same id
<div class="bottom" id="ex1">
If you want to go to bottom by clicking to the link add javascript at the end of the .html file just before "/body" closes
<script type="text/javascript">
$(document).ready(function() {
$("a.go").click(function () {
var elementClick = $(this).attr("href");
var destination = $(elementClick).offset().top;
$('html,body').animate( { scrollTop: destination }, 700 );
return false;
});
});
</script>
If you want to redirect and go to another page, create html file in the same directory(same folder). Then add a link
"Any text you want, in your case: go to another page"

Click between the lines

I have multiple defined as:
item A
and also I have a jquery script:
$(".item").click(function(){ itemclick(this); });
When a user positions the mouse between the items where the link is not active the itemclick() is executed without the link redirect.
How I can prevent this from happening?
Thanks
You don't show everything. It seems those links are inside other tags with class "item". So of course, if someone clicks outside a link but inside of that parent there won't be a "href" available to the function. There are several options, one would be to just not do anything if the clicked object is not a link <a ...>.
Give your links a class like:
<a class="link" href="col_c.php?id=1&field='A'" target="Frame3">item A</a>
and then use
$(".link").click(function(){ itemclick(this); });
I assume your .item is a div layer or a table row so it is also triggered around your link.
Simply execute the function only on the links themselves, not the whole parent (I expect your links are the children of something called .item).
$(".item a").click(function(){ itemclick(this); });

HTML: link that goes to same page where the link is, how to keep the view of the page?

when you click on a link that goes to same page where the link is, how to keep the view of the page?
By default it goes to the top of the same page.
Regards
Javier
One way to do it is to add # at the end of the href attribute on the links pointing to the current page, either manually or via javascript. I don't think it's a nice way to do it, though...
If you really need this, you could also "disable" the navigation for links pointing to the current page, so that clicking on a link to the current page would have no action...
Something like that should work in jQuery :
$('a.current').click(function(event){
//cancel default click action
event.preventDefault();
}
assuming that the links pointing to the current page have the CSS class current
Can you be more specific? What do you mean with "view of the page"?
Here is a general description of anchors:
If you have a link Link then you need an element on the same page with id="someTarget". When you then click on the link, that element will be scrolled to the top of the element.
EDIT:
Ahm, you are talking about a JavaScript link. In that case you need to have the Javascript retur false so that the default action (namely following the link) is ignored:
<a href="#" ... onClick="myJqueryFunction(); return false;">