I have a scenario where I have to give action link to both icon and text. How can I do this with #html.Actionlink. I tried to add icon html code inside actionlink as text but it didnt work. How can we handle these cases with out using normal anchor tag?
<div>
<span class="glyphicon glyphicon-hdd"></span>
</div>
<div>
#Html.ActionLink("Request", "Request", "MyRequest")
</div>
As #Stephen in the comments mentioned, you can't use ActionLink() and include an icon. You're going to have to use an anchor. Your code in this format would look as follows:
<a href="#Url.Action("Request", "MyRequest")">
<span class="glyphicon glyphicon-hdd"></span>
<span>Request</span>
</a>
You can use the javascript code, like :
#Html.ActionLink("Request", "Request", "MyRequest", new { #class = "btn-primary", id = "btn-actionlink-export" })
<script type="text/javascript">
$(document).ready(function () {
$('#btn-actionlink-export').append('<span class="icon-file-excel position-right"></span>');
});
</script>
Related
I have an issue with utext in thymeleaf. I want to show a table as a hover.
This is my code
<td class="CellWithHtmlContent" th:title="${event.note}">
<span class="CellContent" ></span>
<span th:if="${event.note != null}"
th:utext="${!#strings.startsWith(event.note,'<') ? #strings.abbreviate(event.note, 60) : 'More'}"></span>
</td>
I have used th:title to show the table when hovering. But it just show the html code. Using th:utext, can show the table properly. but It isn't act as a hover. Is there any way to use th:utext inside the th:title?
Like this --> th:title = utext(${event.note})
Thymeleaf does not support this. It is not possible to have a browser render HTML in a title attribute. See Is it possible to add html inside a title attribute?
You will need to use something like https://atomiks.github.io/tippyjs/
Add this JavaScript snippet to your page:
<script>
document.addEventListener('DOMContentLoaded', function (event) {
tippy('.tooltip', {
content(reference) {
const id = reference.getAttribute('data-tooltipid');
const template = document.getElementById(id);
return template.innerHTML;
},
allowHTML: true
});
});
</script>
Now, add something like this:
<td class="CellWithHtmlContent" th:title="${event.note}">
<span class="CellContent" ></span>
<span th:if="${event.note != null}"
th:attr="data-tooltipid=${'cell-tooltip-'+event.id}"></span>
</td>
(I assumed event has an id. You will need something to make the tooltip reference unique for each tooltip on the current page).
Now, also have some hidden HTML on the page that will be loaded into the tooltip by the Tippy library:
<div th:id="${'cell-tooltip-'+event.id}" class="hidden">
<span th:if="${event.note != null}"
th:utext="${!#strings.startsWith(event.note,'<') ? #strings.abbreviate(event.note, 60) : 'More'}"></span>
</div>
It is important that the id of the hidden HTML matches with the data-tooltipid for the tooltip to work.
I'm working on a one single page navigation system; Is there is a way to change the <title> of a page when a div is :target (#divname in url)?
EDIT: Yeah, sorry, a Jquery/javascript solution works as well.
If the url contains #somePage, use #somePage as a selector and retrieve it's data-title value.
Then set <title></title> as that value. location.hash produces #somePage
$('a').click(function(event){
event.preventDefault();
if(location.hash) {
var newPageTitle = $(location.hash).data('title');
$('title').text(newPageTitle);
}
});
Add a data attribute to your div and set it's value to what the page title should be when that link is clicked.
Some Page
<div id="somePage" data-title="This Is The Page Title"></div>
It can be done in following way:
Assume that you have this html element:
<a onclick="onClick1()" href="#test">
link
</a>
and you have this scripts:
<script>
function onClick1(){
setTimeout(onClick,100);
}
function onClick(){
alert(1);
if(document.URL.indexOf("#test")>=0){
document.title = "Your title";
}
}
</script>
then you'll get on click what you need.
Here is example.
So, I'm having trouble trying to figure out how to make the 2 left divs (volunteer sign-up and Request a volunteer) on my home page be clickable links. I currently have them change color when you hover over them but how do I make them link to there appropriate page. Any help w
http://partners.sbceo.org
Wrap the div in an anchor tag.
<a href="your-link-here">
<div></div>
</a>
<div class="mydiv" data-href="http://stackoverflow.com"></div>
<script>
$('.mydiv').on('click', function(){
window.location = $(this).data('href');
})
</script>
this way you could use more than one clickable div
Give the div a class or other identifier. Then using jQuery do something like:
$('identifier').click(function(){
window.location = "your url";
});
None jQuery:
<div id="hello"></div>
function linkTo(url){
window.location = url;
}
el = document.getElementById('hello');
el.onclick = linkTo('some website');
i can't see the link but you can do this using Javascript:
<div style="cursor: pointer;" onclick="window.location='http://google.com/'">
</div>
I have a multiple sets of two divs and a button for each per page. The two divs contains alternating content that the button should handle switching visibility. I can't seem to think of an Angular solution that can be extensible to multiple separate instances in the page (my mind keeps wanting to get it done in JQuery).
I have created a JSFiddle example here.
You will see two divs p_table class with <span class="trigger">A</span>. The trigger should alternate the two p_table inside their parent div p_container.
The key for how you are doing it is with ng-class, you can also do it with ng-show/ng-hide. Both implementations require no javascript, just a controller scope.
NG-CLASS: Choose a class based on a variable, which toggles on trigger click.
<div class="p_container">
<p class="p_table" ng-class="{hidden:!show,chaldean:show}">This is actual content</p>
<p class="p_table" ng-class="{hidden:show,chaldean:!show}">This is transliterated content</p>
<span class="trigger" ng-click="show=!show">A</span>
</div>
NG-SHOW/NG-HIDE: Show or hide on variable. This is the typical way of doing it.
<div class="p_container">
<p class="p_table" ng-show="show">This is actual content</p>
<p class="p_table" ng-hide="!show">This is transliterated content</p>
<span class="trigger" ng-click="show=!show">A</span>
</div>
Here is how I did it, using ngHide and a tiny toggle function. Working demo Here. I hope this helps
My HTML Markup
<div ng-app="myApp" ng-controller="myCtrl">
<div id="filter-row">
<span
id="toggle-filter"
ng-click="toggleFilter()">
<i class="glyphicon glyphicon-heart"></i>
</span>
<div class="hiddenDiv" ng-hide="toggle">
<p>I am the hidden Div!</p>
</div>
</div>
</div>
My AngularJS Controller
var myApp = angular.module("myApp", []);
myApp.controller ("myCtrl", ['$scope', function($scope){
$scope.toggle = true;
$scope.toggleFilter = function() {
$scope.toggle = $scope.toggle === false ? true : false;
}
}]);
I read that Angularjs directives require a different approach than jquery. I am new to angularjs, so it will be great if somebody can explain how to use directives for this simple example. If you click on bottom div, then it moves (re-parent) the top image to the bottom div. I could add this jquery code on ng-click... but is there a better way?
JQUERY INTENT:
$("#bottom").click(function(){
$("#myimage").appendTo("#bottom");
});
ANGULARJS:
<div ng-app="myapp">
<div data-ng-controller="mycontroller">
<div id="top" style="background-color:red;width:200px;height:200px">
<img id="myimage" src="//placehold.it/150x150">
</div>
<div id="bottom" style="background-color:green;width:200px;height:200px">
</div>
</div>
</div>
Instead of listening for a click in jQuery, you can use Angular's ng-click directive to specify a function to call when the element is clicked and you can use the ng-if directive to add/remove the image, for example...
<div ng-click="appendImage()" id="bottom" style="background-color:green;width:200px;height:200px">
<img ng-if="showImage" id="myimage" src="//placehold.it/150x150">
</div>
Then in your controller...
angular.controller('myController', function ($scope) {
$scope.showImage = false;
$scope.appendImage = function (event) {
$scope.showImage = true;
};
});
A key difference between plain jQuery and Angular is that in jQuery you have to write code to manipulate the DOM yourself (like appending the image). If you use directives properly in Angular, you simply make changes to the $scope and directives will update the DOM for you automatically