i know how to set font style italic in HTML but now i'm trying to do that only with java script . Is it possible to do that in java script ? . Can someone help\clarify me pls . Here is my code ,
myJson.name.push(mainSteps.name); // Need to changes this in italic (js code)
A JavaScript string itself doesn't have a concept of a "style". Styling only applies when you output the string somewhere. If you output it to HTML, you can use HTML or CSS to style it.
So if you are asking whether there is an "output-agnostic" way to style a JavaScript string, the answer is no.
Btw, the code you wrote is JavaScript (assuming you pass a proper value for the ID):
document.getElementById(#Html id).style.fontStyle = "italic";
and if you want to style the HTML output, then this would be the way to go.
In Javascript you can not change font style because it does not exist in javascript as such. Font style matters only when the data has to be shown which is when it is written on some where in HTML .This is how you may change the fontstyle for entire body
This is in italics
<script>
function italicsBody() {
document.body.style.fontStyle = "italic";
}
italicsBody()
</script>
Similary if you want the same for specifi data you may do it using getElemenById . Check the following code
<ul id="names">
</ul>
<script>
function italicsBody() {
document.getElementById("names").style.fontStyle = "italic";
}
function populateNames() {
var names = ["name1","name","name3"]
var nameList = document.getElementById("names");
for (var key in names) {
nameList.innerHTML = nameList.innerHTML + ' <li> ' + names[key] + '</li>';
}
}
populateNames()
italicsBody()
</script>
Here is the jsfiddle for the same jsfiddle
document.getElementById("myP").style.fontStyle = "italic";
You can use "somestring".italics() to get "<i>somestring</i>"which might be what you are after. I suggest you use CSS as others said though - italics is not standard anymore.
I Given One Example As Below
function myFunction() {
document.getElementById("myP").style.font = "italic 15px arial,serif";
}
myFunction();
<p id="myP">This is a paragraph.</p>
This Is Second Example When User Click On Button Then Style Applying From Java script .
function myFunction() {
document.getElementById("myP").style.font = "italic 20px arial,serif";
}
<p id="myP">This is a paragraph.</p>
<button type="button" onclick="myFunction()">Set font</button>
myJson.name.push(mainSteps.name).style.fontStyle = "italic";
It is done the same way.
Related
I would like to make a text bold by using a function which gets the text as a parameter, here is my code:
<script>
function font(b)
{
b.style.fontWeight = "bold";
alert(b);
}
</script>
<input onclick="font('aaaa');" type="button" value="Font (1)">
My problem that I'm not getting the desired response, though without b.style.fontWeight = "bold"; it alerts "aaaa".
I don't see what is the problem here, I tried to put the parameter in a variable and then change its property but it doesn't work either.
Any ideas on how to resolve this?
Create an input field where you'll write your text and create a button which will change the font-weight of the text. After that attach an event listener to the button. When you click the button your font will change to bold.
working demo: https://jsfiddle.net/4kzsq2tb/
HTML
<button id="font-button">
change font to bold
</button>
<input id="input-field" type="text"/>
JS
document.getElementById('font-button').addEventListener('click', () => {
const inputField = document.getElementById('input-field');
font(inputField);
})
function font(b) {
b.style.fontWeight = "bold";
}
<div id="c"></div>
<input onclick="font('aaaa');" type="button" value="Font (1)">
<script>
function font(b)
{
document.getElementById('c').style.fontWeight = "bold";
document.getElementById('c').innerHTML=b;
}
</script>
works fine function gets text as parameter and makes it bold, well makes div style bold not text itself as guys said u cant make text or variable bold
Why is the if statement not working here:
<!DOCTYPE html>
<html>
<body>
<style>#myP{cursor:pointer;}</style>
<p id="myP">random text</p>
<button type="button" onclick="myFunction()">alert aaa</button>
<script>
function myFunction(){
if(document.getElementById("myP").style.cursor=="pointer"){
alert("aaa");
}
}
</script>
</body>
</html>
Also, I want to know how to make the if statement work with a linked cursor like:
<style>#myP{cursor: url(../randomFolder/cursor.png) 5 8, auto;}</style>
Use this instead :
if (window.getComputedStyle(document.getElementsByTagName('body')[0]).cursor == 'pointer')
.style only works for inline CSS. window.getComputedStyle() will let you retrieve styles set via non-inline CSS.
For your second question, matching the linked image cursor is a little trickier than just matching a simple string like "pointer", because you're including a path which will be canonicalized to the full URL, as you can see below ("https://stacksnippets.net" is included in the path even though it wasn't specified in the CSS.) It's probably best to test for a substring of the full cursor value, so you don't run into problems where your code works on "yourdomain.com" but not on "www.yourdomain.com":
var myFunction = function() {
var A = document.getElementById('a');
var B = document.getElementById('b');
console.log(window.getComputedStyle(A).cursor);
console.log(window.getComputedStyle(B).cursor);
if (window.getComputedStyle(A).cursor == 'pointer') {
console.log("A matched");
}
var bCursor = window.getComputedStyle(B).cursor;
if (bCursor.indexOf('cursor.png') > -1) { // not hardcoding the full URL here
console.log("B matched");
}
}
#a {
cursor: pointer
}
#b {
cursor: url(randomFolder/cursor.png) 5 8, auto;
}
<p id="a">random text</p>
<p id="b">more random text</p>
<button onclick="myFunction()">alert</button>
You can use jQuery with css function and it will return you the kind of cursor which you need in a short code.
$('#myP').css('cursor')
Currently I output a text from my database with the following code:
if ($data["own_subject"][$x]!="") { <td><p>".$data["own_subject"][0]."</p></td> }
I found a JS function to only show the first 10 characters and once someone does a mouseover the whole text appears. This function is working with the following code and it is working fine:
<script>
var lengthText = 10;
var text = $('p').text();
var shortText = $.trim(text).substring(0, lengthText).split(" ").slice(0, -1).join(" ") + "...";
$('p').text(shortText);
$('p').hover(function () {
$(this).text(text);
}, function () {
$(this).text(shortText);
});
</script>
Now I do not like the style of the outcome and I would like to show the full text in some kind of a tooltip. I am using bootstrap and bootstrap has this function. My problem is now that I do not know how I need to change my JS code to show the full length text in a tooltip. Can someone help me out and show me how I need to change my current code?
I would really appreciate your any help.
Thanks,
Chris
Add your original text in title attribute of p tag which I hope you are already doing.
Add data-toggle="tooltip" data-placement="top" attributes to p tag
Ex
<p data-toggle="tooltip" data-placement="top" title='".$data["own_subject"][0]."'>".$data["own_subject"][0]."</p>
Initiate as $('[data-toggle="tooltip"]').tooltip() Also you can now remove $('p').hover event.
Ex
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
You can do this using tooltip of bootstrap
<button id="test" type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom">
Tooltip on Bottom
$(function() {
var lengthText = 10;
var text = $('#test').text();
var shortText = $.trim(text).substring(0, lengthText).split(" ").slice(0, -1).join(" ") + "...";
$('#test').prop("title", text);
$('#test').text(shortText);
$('[data-toggle="tooltip"]').tooltip();
})
http://plnkr.co/edit/5hHRjULpDlMP3cYhHhU4?p=preview
Try simple html tooltip using title.
if ($data["own_subject"][$x]!="") { <td><p title='".$data["own_subject"][0]."'>".$data["own_subject"][0]."</p></td> }
You can add title attribute with real text to you element and call bootstraps tooltip init over that elements, also you need to remove current hover handler from your script
$('p').text(shortText);
// Add title with real text to your element
$('p').attr('title', text);
// And all in document ready bootstrap tooltip init for your short text tags
$( document ).ready(function() {
$('p').tooltip();
});
check more about boostrap tolltip here: http://www.w3schools.com/bootstrap/bootstrap_ref_js_tooltip.asp
I'm trying to add a class to a div by using the title attribute. Currently the alert is correct. However the class isn't added.
JS Part:
function index(clicked_id){
alert(clicked_id);
$('#sticky').attr("title", +clicked_id).addClass("glow");
}
HTML Part:
<div id="sticky" class="" title='sticky1' onclick='index(this.title)'</div>"
I don't know if I got your question right but I understood that you want to filter|find you div by the title. So maybe this code will help you:
function index(clicked_id){
alert(clicked_id);
$('#sticky [title="' + clicked_id + '"]').addClass("glow");
}
This is how I would do it:
$("[title*='sticky']").click(function(){
$(this).addClass("glow");
});
Here is the JSFiddle demo
Why do you need to do it like that? Can't you just set the class on the element clicked?
JavaScript
function index(el){
$(el).addClass("glow");
}
HTML
<div id="sticky" onclick='index(this)'></div>
Instead just pass this:
onclick='index(this)'
now in the function:
function index(el){
var e = $(el).attr('title');
$('#sticky[title="'+e+'"]').addClass("glow");
}
As the element itself is the target one then just use this:
function index(el){
$(el).addClass("glow");
}
or better to go unobtrusive, remove the inline event handler and use this way:
$('#sticky').on('click', function(e){
$(this).addClass("glow");
});
js at Question returns expected results. Missing closing > at html #sticky <div> tag at
onclick="index(this.title)"
following onclick attribute . Additionally,
+
should be removed at
+clicked_id
at .attr() setting title . javascript + operator attempting to convert clicked_id String to Number when placed before string
function index(clicked_id){
alert(clicked_id);
$('#sticky').attr("title", clicked_id).addClass("glow");
}
.glow {
color: purple;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div id="sticky" class="" title="sticky1" onclick="index(this.title)">click</div>
How can I select a paragraph contents in HTML using javascript such that I can apply a onclick function? Here is my code : When I click on the paragraph it selects all the paragraphs in the document but i only want it to select individual paragraph content
<script>
function social_share() {
var quote = $("p").text();
window.plugins.socialsharing.share("Follow me on twitter.", quote, null,"url",function(result){
alert('result: ' + result);
}, function(result){
alert('error: ' + result); });
}
</script>
Some data
another paragraph
This line:
var quote = $("p").text();
is selecting all the p elements (i.e. all the paragraphs), so text() from all p elements is all the text from all the paragraphs concatenated together. You need to specify the specific paragraph selected. There are a couple ways to do this.
If you want to specify onclick in the HTML code, you could do this:
<p onclick="social_share(this)">paragraph text</p>
but generally this is considered bad style. Assuming you're using jQuery, a more fashionable solution might be to do this:
<p class='clickable'>pagagraph text</p>
. . .
function init() {
var pgraphs = $(".clickable");
pgraphs.click( function() {
social_share($(this).text());
}
}