How can I place two statements on same line? - javascript

Home
<p id="dt"></p>
<script>
document.getElementById("dt").innerHTML = "hello";
</script>
I just need both statements on the same line. This must be simple!! (but I cant do it!) Thanks

p is representing a paragraph and therefore is (usually) a block element. For what you are doing, you would be better served with using an inline element like span.
Making the element inline will lead to both being displayed on the same line. If switching the tag is not an option, use css to set display:inline on the paragraph.

The <p> tag will create a new line by default. One way to prevent this is CSS display: inline.
<style>
#dt {display: inline;}
</style>
Home
<p id="dt"></p>
<script>
document.getElementById("dt").innerHTML = "hello";
</script>

<a href="index.shtml" style=' white-space: nowrap;'>Home</a>
<div id="dt" style='display: inline-block;'></div>
<script >
document.getElementById("dt").innerHTML = "hello";
</script>
Reference

Related

What comes in between prepend() and append()?

I'll make to quick. I'm trying to position an element wrt my target. Normally we have prepend (before the target) and append (after the target). But is there smth along those lines that helps us place that element ON what we’re targeting, instead of putting it before (prepend) or after(append)?
If you want new HTML Elements add to target... I don't know if this is what you want.
$('.target-x').html('<div class="target-b">new elements</div>')
.target-x {background:#bbb;padding:10px;}
.target-b {background:#fff;color:#222;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="target-top">Elements</div>
<div class="target-x">New Elements Target</div>
<div class="target-bottom">Elements</div>
</body>
You can use position:absolute on a :before to place it ON the actual content.
HTML
<div class="example">This is an example div</div>
CSS
.example {
background-color: #5BC8F7;
}
.example::before {
position:absolute;
content: "Above!";
background-color: #FFBA10;
}

Don't delete the existing css on an element - Javascript

I have already some css style on my element (my element has 1500px of height). But when i tried to change the colors of it, the height was replaced by the colors putted, so the height of my element is deleted..
Here is the code :
document.getElementById("tabcmp0").style.backgroundColor = "#e9e9e9";
But i want to not replace the background color by the existing css style, i just want to add this background color to the css already existing, how to do this please ?
I don't think so this(document.getElementById("tabcmp0").style.backgroundColor = "#e9e9e9";) will replace your css with previous css, but you can do the following
there is multiple ways to solve your problem
1:Add class in javascript
in css
.class{
background-color:#e9e9e9;
height:1500px !important;
}
in JS
var element = document.getElementById("tabcmp0");
element.classList.add("class");
2: If you are using jquery
$('#tabcmp0').css({'background-color':'#e9e9e9'});
and if you want to use multiple css
$('#tabcmp0').css({'background-color':'#e9e9e9', 'height':'1500px'});
hope this solves your problem
As you edited your question, my answer will be changed and you can only have one css color at a time on a particular element,
what you can do now is add 2 <div> inside your element and add css on both the div separatly
like
<myElement>
<div stlye="your backgroundcolor">
</div>
<div stlye="your backgroundcolor">
</div>
</myElement>
I have tested this and it should not overwrite your existing style.
You can check it in action HERE
Here is the code (maybe you can use it to find what you are missing or what is causing your issue).
<!DOCTYPE html>
<html>
<head>
<style>
#democlass {
color: red;
font-size:100px;
}
</style>
</head>
<body>
<h1 id="democlass">Hello World</h1>
<p>Click the button to add an id background style to the h1 element.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
document.getElementById("democlass").style.backgroundColor = "#e9e9e9";
}
</script>
</body>
</html>
Note that the font-size doesn't change when adding the backgroundColor.
Use Object.assign
Object.assign(yourelement.style,{backgroundColor:"#e9e9e9",height:"1500px"});

Hide specific div without css

If I have a page that inserts an unwanted div on every load, is there any way to hide it without using CSS? I don't have access to that div and it doesn't have an ID or a CLASS.
For example I don't want the browser to display the following div:
<div style="text-align: center; font-size: 14px; text-decoration: none;">Please click <a style="text-decoration: none !important;" target="_blank" href="http://www.website.com"><b>here</b></a></div>
I found a question and an answer for hiding a specific string of text, but it doesn't work with this.
You can try to select content inside the div by using attribute value. Href attribute inside your div is perfect to do this, and then just use jQuery .parent() method to select whole div.
$("a[href='http://www.website.com']").parent().css("display","none")
Here is the working example:
http://jsfiddle.net/waxtue0o/
There are some ways of identifying an element without it having an id or class. If you have jquery you can use more advanced selectors like mgibala said (although I would prefer to do it without scripting).
See http://www.w3schools.com/cssref/css_selectors.asp for information on selectors. Two examples below.
Fiddle: http://jsfiddle.net/o8oyd3e2/
HTML:
<body>
<div style="background-color='red';">
Spam spam spam
</div>
<div>
Some content
</div>
<div class="myContent">
Some content
</div>
<div style="background-color='red';">
Spam spam spam
</div>
</body>
CSS:
body div:first-child {
display:none;
}
body div.myContent + div {
display:none;
}
Or you can host your site somewhere else...
You can do
document.getElementsByTagName("div")[0].style.display = 'none';

How can I selectively change text using a CSS class?

I need to add a CSS/HTML 'fragment' to a page to change the text in the following:
<div>
<h3 class="category-heading">Keep this text:</h3>
</div>
<div>
<h3 class="category-heading">**Change this text**:</h3>
</div>
I have tried the following:
<style>
h3.category-heading {
text-indent: -9999px;
}
h3.category-heading::after {
content: “New and Featured Products”;
text-indent: 0;
display: block;
line –height: 120%;
}
</style>
But this changed both instances of the text.
Is it possible to specify the second instance of the css class to be changed? or is it possible to select and change the wording in the second css class by adding a html fragment?
Supposing you can use Javascript by including it an HTML fragment :
Depending on the inclusion mecanism (we need to know more about the tools you use), something containing :
<script>
window.onload = function(){
document.getElementsByClassName("category-heading")[1].innerHTML = "New and Featured Products";
}
</script>
If the first solution breaks some features of your website (because It could override defined behaviour), you should use :
<script>
document.getElementsByClassName("category-heading")[1].innerHTML = "New and Featured Products";
</script>
Why not to use an id attribute?
<h3 class="category-heading" id="itemThatShouldBeChanged">**Change this text**:</h3>
and than just
#itemThatShouldBeChanged {content:"other text"}
You should take a look at nth-child
Be aware that this is CSS3
this will give you the following css selector :
div:nth-child(2) h3.category-heading::after

Line break adjustment of div tag and input tags

I have some problem working with DIV Tag and Form input fields. I get the value of input field using javascript. Javascript working fine. It gets the input field value and displays in a DIV tag. The problem is, when i give a long input or long sentence, it displays in the div tag as it is. I want it to be displayed not in a long single line but in the form of paragraph. Here is my code.
<script>
function myFunc(){
var str = document.myform.aaa.value;
document.getElementById('mydiv').innerHTML=str;
}
</script>
<form>
<input type="text" name="aaa" />
<input type="button" value="Post" onclick="myFunc();" >
</form>
<div id="mydiv" width="500px" height="300px">Old text</div>
If i give it an input for example:
hello there, how are you hello there, how are youhello there, how are youhello there.
it displays it in a single line instead of paragraph format. I want it to display the above sentence in this form:
hello there, how are you hello there,
how are youhello there, how are youhello
there.
I have somewhat sort it out myself. I mean to say, if i write a sentence with spaces, it works fine but if there is a long line of letters without any space, then it does not work. What i want is, either i can type with space and without space, it should work both ways.
This doesn't have anything to do with javascript. By default a DIV tag will expand to 100% of its parent element.
If you set the width of the div to a specific percentage or pixel width, then the contents of that div will wrap accordingly.
You can use CSS to define the width, but you'll have to know how wide you would like to set it.
#mydiv {
width:50%; //I just guessed at this number
}
or
#mydiv {
width:100px;
}
alternately, you could use javascript to set it. (though it's probably best to set it using CSS)
document.getElementById('mydiv').style = "width:50%';
Try using css to set the width and height of the <div> rather than attributes.
jsFiddle
<div id="mydiv" style="width: 200px; height: 200px;">Old text</div>
Better yet create a style:
.comments {
width: 200px;
height: 200px;
}
<div id="mydiv" class="comments">Old text</div>
Use the word-wrap to fix the issue where there is no spaces.
word-wrap:break-word

Categories

Resources