I have a <div id="section1"> </div> at the bottom of my page.
And I have a button I want this functionality in button
$location.hash('section1');
$anchorScroll();
It is working as I want but it is giving me ugly url all this is in single page than why my url is updating?
my expecting Url is :
/Order/BuildOrder
when page load I get this but when I click button screen took me to my anchor div with id='section1'
but now url change to /Order/BuildOrder#!#section1
How can I remove #!# as this is scrolling on a single page. href location is not changing
Related
This link in the menu brings me to the dashboard. If I am on the dashboard and I click the link. The window scrolls to the section of the page I need it to go to. However, if I am on another page and I click this link it redirects but does not scroll to the specific section of the page. What can I do to get it to scroll when I am coming from another page other than the dashboard?
<li><a href ng-click="scrollToSection()" highlight=".content"><i class="fa fa-bell"></i>Click here</a></li>
$scope.scrollToSection = function(){
redirectServices.goToPage();
$window.scrollTo(0, 800);
}
I declare a nav button in index page and it shown all the page But I want remove from my home page. How can I remove that button in that specific pages
make $rootScope array of pages where you don't want to show the button. Then use ng-if in button tag to show n hide the button
<button ng-if="root.pageIgnore.indexOf($route.current.name) === -1">Shy Button</Button>
An image is being shown. On clicking the image a pdf file should open in a new tab. This is how I am trying to render the React component, doesn't work -
<a href={pdfUrl} target="_blank">
<img className="class-image" src={imageUrl} onError={imgError}/>
</a>
When the image is clicked Chrome gives a warning that a pop-up has been blocked. Safari doesn't even give any warning and just eats the tab which it thinks is a pop-up.
I tried removing the onError attribute with no effect.
If I remove the target="_blank" attribute it works fine, opens the pdf in same window.
I have tried adding onClick handler to the <a> tag, opening a window using window.open with the same result - generates warning that a pop-up has been blocked.
This works fine however -
<a className="class-name" href={pdfUrl} target="_blank">{userName}</a>
The problem occurs if rather than rendering text as the content of anchor tag I render an image. Can't figure it out.
EDIT:
I got it to work like this -
<img className="class-image" src={imageUrl} onError={imgError} onClick={() => {functionThatOpensWindow()} }/>
Add an onClick handler to the img tag
Update the image class to change the pointer to a cursor so that it looks like a link
I got it to work like this -
<img className="class-image" src={imageUrl} onError={imgError} onClick={() => {functionThatOpensWindow()} }/>
Add an onClick handler to the img tag
Update the image class to
change the pointer to a cursor so that it looks like a link
One approach that might work with this is to open the new window, then populate the URL:
const newWindow = window.open();
newWindow.location.href = '/some/url';
I have retrieved an image and its corresponding data dynamically, in which I want to make the image clickable which will redirect to a webpage.
How can I achieve this using angularJs.
I am using only angularJs, no jquery.
Below you can see you can assign the values to an object and then use that object on the image tag. If you want to make any other changes on click as well then you can use ng-click as shown below then use $location.url.
$scope.object = {};
$scope.object.filepath = filepath;
$scope.object.redirectURL = redirectURL
<img ng-src="object.filepath" ui-sref="{{object.redirectURL}}" />
$scope.redirect = function(redirectURL)
{
$location.url(redirectURL);
};
<img ng-src="object.filepath" ng-click="redirect(redirectURL)" />
You can use ng-click on the image element. You can handle the click event in your controller where you can navigate to the webpage.
In your controller you can redirect the page to the webpage url.
$scope.goToWebpage = function(imageParam){
window.location.href = "http://UrlToWebpage.com";
}
Alternatively you can wrap the image inside an anchor tag. On clicking the image the page will be redirected to the specified url mentioned in href.
<a href="http://UrlToWebpage.com" >
<img src="sourceToImage" />
</a>
I'm making a functional button in my ionic app, and I want to know what I need to do to make a button centered on a blank ionic app load another page when clicked.
I have experimented with adding ng-click="loadPage()" to the button in my index.html file. I defined
$scope.loadPage = function() { $state.go(page.html)} in my controller.
switch your button with an anchor
<a class="btn btn-full" ui-sref="your.state">your text</a>