I am displaying an icon this way:
<?php echo anchor('stuff/edit', '<i class="icon-edit icon-white"></i>', array('class'=>'btn btn-info')); ?>
And what I want is that when I hover over the icon with the mouse a message that says "Edit" pops up. Just like with the icons on this board, if you hover over the {} icon a message that says "Code Sample..." shows up. I want that using bootstrap.
Thanks in advance.
By jQuery solution use jQuery UI
HTML in head tag
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
HTML in BODY tag
<i class="icon-edit icon-white">icon</i>
JavaScript
$(function() {
$( "#show-option" ).tooltip({
show: {
effect: "slideDown",
delay: 300
}
});
});
for additional information see http://jqueryui.com/tooltip/
Its simple, If you want it to show the native way, ie with no customizations and styles, use 'title' attribute;
<i class="icon-edit icon-white"></i>
For more beautiful and larger messages, you could use bootstrap's TOOLTIP
See Bootstrap Tooltip . Its too easy as:
<i class="icon-edit icon-white"></i>
If you have bootstrap.js included, it will show 'first tooltip'
I do not know if there is a css method for this, however you can add tooltip="string" to asp tags, on html tags use title="string".
Related
I am using material Icons inside Hyperhtml Components. But even though css is loaded the Icon in not loading in the browser. Instead of the Icon the "3d_rotation" is showing.
This is My Implementation.
const appIframeRender = hyperHTML.bind(document.querySelector('#iframe_element').attachShadow({mode: 'open'}));
const main2 = hyperHTML.wire();
appIframeRender`${[
cbplugin.CharmListComponent.render(main2)
]}`;
cbplugin.WrapperComponent.render = function (render, data){
return render`
<style>
#import "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css";
#import "https://fonts.googleapis.com/icon?family=Material+Icons";
#import "https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700";
</style>
<div>
<a class='dropdown-trigger card-more-actions' href='#' data-target='dropdown2'>
<i class="material-icons">
3d_rotation
</i>
</a>
</div>
}
So My Doubt is Is it possible that material Icon is not supported in Hyper Html. The material Icon css are showing in the inspect element styles.
Thank you
Whenever you use Shadow DOM, you must import fonts in the main document:
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700">
</head>
...
So if I copy and paste the google translate plugin code snippet:
<div id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
It changes all my site css [from headings, animations to even boostrap css].
I did some research and ofcourse I found class="notranslate" and yes I applied for headings and stuff.
I will try by myself, but an answer would be cool.
It was easy.
So for everyone who has this problem you just have to add class="notranslate" to the stylesheet's Link tag, for each one which actually does something on that specific page.
e.g:
<link rel="stylesheet" type="text/css" href="/Templates/CSS/bootstrap.min.css" title="standard" class="notranslate" />
I have solution width config javascript
<script>
$(".class-name").addClass("notranslate");
</script>
I face a problem when i try to use jqm in my website. A message of 'loading' appears on the bottom of my site. I figured out that it happens since I don't add jqm css. When I add the jqm css everything changes (color layout ect.). How is it possible to remove 'loading' message or add css without conflicts with the main css of my site?
<head>
<link href="css/site.css" rel="stylesheet" />
<!--<link href="css/jquery.mobile-1.3.2.min.css" rel="stylesheet" /> -->
<!-- disable loading msg -->
<script>
$(document).bind("mobileinit", function(){
$.mobile.loadingMessage = false;
});
</script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"> </script>
<script src="scripts/jquery.mobile-1.3.2.min.js"></script>
</head>
I add script in my code. Nothing seems to happen! My problem solved only when i uncomment jqm css code, but then i got many conflicts with the site.css which i dont know how to solve.
To disable jQuery Mobile loading message, you need to override global settings once mobileinit triggers. The code should be placed in head after loading jQuery and before loading jQuery Mobile libraries.
<head>
<script src="jquery.js"></script>
<script>
$(document).on("mobileinit", function () {
$.mobile.loadingMessage = false;
});
</script>
<script src="jquery-mobile.js"></script>
</head>
I followed bootstrap main page examples to setup some tooltips in my page but they doesn't works.
i tryed just this:
<script type="text/javascript" src="vendor/js/jquery.js"></script>
<script type="text/javascript" src="vendor/js/bootstrap.js"></script>
<script type="text/javascript">
var options ;
$('.tip').tooltip();
</script>
<a href="#" rel="tooltip" class="tip" title="first tooltip" data-original-title="Logout">
why does it doesn't works and doesn't show me any console error? i'm using latest boostrap version
you should either move the script below the HTML it references or wrap it in:
$(document).ready(function() {
$('.tip').tooltip();
});
To ensure that the DOM has been loaded before you call the tooltip() method.
I want to print a web page using JavaScript. But I do not want to open the page as a popup windows. How can I print directly a web page like 'mypage.aspx' using JavaScript window.print method without opening it as a popup window?
Also the condition is 'I don't want to use any ActiveX for this'
Here is what I want to try:
var printWindow, printData; printWindow = window.open("", "printVersion", "menubar,scrollbars,width=640,height=480,top=0,left=0");
printData=document.getElementById("lblReport").innerHTML; printWindow.document.write(printData);
printWindow.document.close();
printWindow.print();
The simpliest solution is to load the content of that mypage.aspx to an iframe then on iframes onload event call the window.print.
<button onclick="printPage()">print</button>
<div id="printerDiv" style="display:none"></div>
<script>
function printPage()
{
var div = document.getElementById("printerDiv");
div.innerHTML = '<iframe src="mypage.aspx" onload="this.contentWindow.print();"></iframe>';
}
</script>
<html>
<head>
<title>Print</title>
<link rel="stylesheet" type="text/css" media="all" href="all.css" />
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
</head>
<body>
<p>I get printed</p>
<form>
<input type="button" onclick="window.print()" value="Print" />
</form>
</body>
</html>
Make sure all.css is on top and print.css at the bottom, it should work.
Not sure if it works, but you may try to create invisible iframe, load page2.aspx in it and then print it.
Um. Just use window.print(); directly on the page. By itself it does not open a new window (apart from the print properties window to set printing options).
You could just use a CSS print style sheet and avoid using javascript altogether -all the user has to do them is print the page. e.g.
<link rel="stylesheet" type="text/css" media="print" href="print.css" />