I am using angularjs for part of my page say single component, which is used in many pages.Now my problem is hash url does not work now.
Example: I have a div#hello in my page and URL is given as Url#hello.but it does not go to that particular div just the top of the page is diaplayed.
So could you guys help me here please?
NOTE:The url#hello is changing to url/#hello.The page cannot be changed to angular and only that single component use angular.
EDIT: Thank you Stephen:) yes, of course, we need to use routing.The thing is, after page load, if we change the url back to URL#hello it works.So is it possible to do it in other way apart from Routing and $angularscroll ?(i.e) just from the JS or jQuery perspective ?
Ok, thanks. I've misunderstood you. I think I have a better understanding now. Please correct me if I am wrong:
So, you're essentially trying to make a hello link that points to a section within the same page. When you change the url to pageUrl#hello the page should jump down to the section with the id called hello.
But the problem is that since your section has an AngularJS component that uses the ngRoute module, this routing functionality is making your page redirect to pageUrl/#hello instead of jumping to the HTML section with the id='hello'.
Is this correct?
Solution
If I understand your problem correctly, the solution is to check if your ng-app='appName' attribute is on the body tag. If it is, then move it down to your component's parent element.
If a hash link is a child of the ng-app element, then when you click it AngularJS thinks you want to redirect to another view. This is what causes the Home link to redirect to pageUrl#/home.
<body ng-app="demoApp">
Hello <!-- redirects to #/hello -->
<div id="hello"></div>
<!-- ... -->
So if you put the hash link outside of the ng-app element then it will behave as expected when you click it.
<body>
Hello <!-- jumps to the 'hello' div -->
<div id="hello" ng-app="demoApp"></div>
<!-- ... -->
On Page Load
If you want the page to jump to the hello div on page load, then set window.location = '#hello' inside your controller. Then, when you visit pageUrl#hello, the hello div should appear instead of the top of the page.
If you don't have a controller, or don't want to use one, then after your document loads, check the hash url and change it programmatically.
$(document).ready(function(){
if(window.location.hash == '#hello'){
window.location = '#hello';
}
})
Related
I have made a web application which uses multiple pages. To go from one page to another, I was using window.location.href. As I didn't like this approach, I wanted to use Custom Element. I'm searching I way to change the current custom element displayed when we, for example, press next button. Does someone know a similar topic please?
index.html :
<body>
<div id="root"></div>
</body>
index.js :
window.customElements.define('connection-view', Connection);
//other custom element defined here like profile, ...
var root = document.querySelector('#root');
root.innerHTML = '<connection-view></connection-view>'
//when the button login is pressed, have to change this to profile component
Put a root div and then change his innerHTML with the custom element tag
I am fighting with a small issue for a few hours.
I am working on Angular-9, in the HTML page, I have a very long table(500 rows data). when I going to the bottom of the table and then refresh the page, it will be on the bottom of the page. not scrolling to the top of the page.
but whenever I refresh the page, the page should go to the top of the HTML page(top of the table).
Actually, I have searched a lot of google solutions, but no one is work.
Can u please suggest how to resolve this?
Add this in js file.
$(this).scrollTop(0);
If you have a header component you can directly try this, or just make a empty div at the top of the page with id header and paste this in your main function.
Make sure of the ID or it will not work.
const header= document.getElementById('#header');
header.scrollIntoView();
On your template, add a template variable to your scrollable container like this:
<div #myScrollableContainer>
<!-- Here is your content that scrolls -->
</div>
And on your component get that one with #ViewChild and set the scrollTop on that.
#Component({ /*...*/ })
export class MyComponent {
// pass the name of the template variable you picked with # on your template
#ViewChild('myScrollableContainer') private myContainer:ElementRef<HTMLDivElement>;
// Call this when you want to scroll to top
public scrollToTopOfScrollable():void {
this.myContainer.nativeElement.scrollTop = 0;
}
}
I am trying to change the content of the yellow area when the user clicks on 'Dashboard', 'customers' etc: Here is the template I used
First I tried to change index.js I gave an id to div area:
$('.icon-dashboard').on('click', function() {
$("#area").load("secondpage.html #area > *");
});
This didn't work for me. Any suggestions to change the content between main tags?
Your selector for the load command is wrong. Your HTML shows a <main> tag with <div class="helper"> so you would want to use $("main .helper").load(...) to load content into "helper". Or, if you want to replace the "helper" div with whatever comes back from .load, just do $("main").load(...).
Also, passing "secondpage.html" to .load() is only going to work in the local browser. I'm assuming you're only doing that because you're testing? Ultimately, you'll need some backend script at an URL to return your content.
I've been searching for an answer to this and can't seem to find out how to do it...or if it is possible.
I have a JavaScript Program that displays an .HTML page. I have an API from another company that sends us information as well. I would like to be able to change the contents of the .HTML page before the user sees it. Is this possible?
For example, suppose page.html is:
<HTML>
<HEADER>
<TITLE>
The Company Name
</TITLE>
</HEADER>
<BODY>
Some stuff
</BODY>
</<HTML>
page.html is housed on our server and using JavaScript/HTML I would like to change the value of "The Company Name" with the value from the API before the page is rendered to the user. Is this possible?
window.onload would not do the trick if you want to be sure that your users don't see the page before edition, as onload waits for everything to be loaded, including images.
What I recommend is :
to change the title in a block in the head : <script>document.title="test"</script>
to hide initially the page, by enclosing it in a <div id=wholepage style="display:none;">
to change the page content in a standard <script> block included at the end of your body
to render your big div visible at end, using document.getElementById('wholepage').style.display='block';
A simple Javascript function will do the trick:
window.onload = function() { document.getElementByTagNames("title")[0].value = "Yourvalue"; }
You could load the HTML from the page into a string variable. Then you'd use regex on the string and search for the starting expression and ending expression , and do a replace on that content. Javascript has a replace method.
var str="<HTML><HEADER><TITLE>The Company Name</TITLE></HEADER><BODY>Some stuff</BODY></<HTML>";
str=str.replace("<TITLE>","<DUMMY>");
str=str.replace("</TITLE>","</DUMMY><TITLE>your real title</TITLE>");
Essentially you would rename the title tag into a non existent tag like dummy, then append the real title tag to the end of it.
Then you can display the HTML content in the string/variable in a page at runtime.
I've got a website and I'd like to make a part of it static. What happens is that the header, the menu bar and the footer are consistent in every page. I'd like to have them always loaded and when I click the menu button, it will only reload what is the body of the site.
Is there a simple chunck of code that can early achieve this? Something in js or ajax? I'm sorry but I don't have enough experience in these languages to accomplish something on my own. I've already tried to check jQuery library but it's still pretty confusing to me.
Thank you.
I think you don't even need Ajax or css!! Just use iFrames!! They are awesome, what happens is that u only design one page as the holder of your static content (Header-Menu ...) and put one iFrame in there as a place holder for any page you want to load in it, u should use proper css code to place the iFrame where you want, now, for every link in your menu, just set the "target" attribute equal to your iFrame's name and all the links will be loaded in that iFrame and your page won't be reloaded with every link click... I'll be back with some code...
Just add in every page a div container with ID for header, menubar and footer and just load it with this:
$(document).ready(function(){
$('#header').load('header.html');
$('#menubar').load('menubar.html');
$('#footer').load('footer.html');
});
Just make sure that the html files don't have html, head or body tags within, only the HTML-Code you would write inside the div. It's just like the include function in PHP.
EDIT:
For easy and simple implementation store the code above inside a .js file (e.g. include.js) and add this inside every head just below the include of all other scripts of your html files:
<script type="text/javascript" src="include.js"></script>
EDIT2:
Another solution ist to load the content of the page instead of the header, menubar, footer.
Here you take the same specifications (no html, body, etc. tags inside your content html files)
Name your content div e.g. <div id="content"></div>
Your navbar for example:
<div id="navbar">
Content1
Content2
</div>
JavaScript Code:
$(document).ready(function() {
//Click on a link that's child of the navbar
$('#navbar > a').click(function() {
//Get the html file (e.g. content1.html)
var file = $(this).attr('href');
//Load this file into the #content
$('#content').load(file);
return false;
});
});
You should consider the use of Server Side Included : http://httpd.apache.org/docs/current/howto/ssi.html
It's not quite easy to understand (as it refer to apache configuration), but this is a really great solution.
In a nutshell, you include parts of html code in you main page :
<!--#include virtual="/footer.html" -->
You won't have to use or understand all JQuery Framewol, user agent won't have to parse (if they are able to !) Javascript.
This is a pretty good replacement of PHP / ASP / Java for this kind of purpose.
You could use ajax to request the body of each page. But this is only one possibility - there are many. An other approach could be to create you page content using a script language (php, perl) serverside and employ a function there which adds footer, header and anything else to each page.
If you have an idea of Jquery then use click event on menu links to load the page in a div like the following syntax may help you.
$(document).ready(function(){
$("a.menu").click(function(){
$("#bodyContent").load("http://abc.com/your-linked-page.html");
});
});
To load the url dynamically use the following code:
In your menu bar the link looks like:
Home
In your Jquery code:
$(document).ready(function(){
$("a.menu").click(function(){
url = $(this).attr("title"); // here url is just a variable
$("#bodyContent").load(url);
});
});
Step 1: Add Jquery file into your html page.
Step 2: Use the above jquery code and change your menu link to the new what i said here.
Step 3: If you done it correctly, It will work for you.
How about a traditional iframe?
In your menu:
<a target="body" href="URL_to_your_Menu1_page">Menu1</a>
and then further in the document:
<iframe name="body" src="URL_to_homepage"></iframe>
You may use frameset and frames and organize you pages accordingly. So, frames containing menus can always be at display and while displaying contents on click of menu u may set target to frame in which you would like to load the contents.