Displaying two dynamically added elements in different rows - javascript

I've an HTML page like following:
<html>
<body>
<div id="emaildiv" class="main" style="width:150px;height:80px;"></div>
</body>
</html>
I want to add a DIV with a TEXT and BUTTON in to it dynamically. All these are made by using the following javascript.
function newEmailForContact() {
var parentDiv = document.getElementById('emaildiv');
var newEmailDiv = document.createElement('div');
newEmailDiv.setAttribute('id','newEmailDiv');
newEmailDiv.setAttribute('style', 'display:table;');
var newEmail = document.createElement('INPUT');
newEmail.setAttribute('type','text');
newEmail.setAttribute('name','newEmail');
newEmail.setAttribute('class', 'textfield_addemail');
newEmail.setAttribute('id','newEmail');
var addEmailBtn = document.createElement('INPUT');
addEmailBtn.setAttribute('type','button');
addEmailBtn.setAttribute('name','addEmail');
addEmailBtn.setAttribute('id','addEmail');
addEmailBtn.setAttribute('value', 'Add');
newEmailDiv.appendChild(newEmail);
newEmailDiv.appendChild(addEmailBtn);
parentDiv.appendChild(newEmailDiv);
}
But the TEXT and Button are displayed in two different rows.
EDIT :-
CSS class :-
.textfield_addemail {
border-width: 1px;
border-style: solid;
border-color: #999999;
background-repeat: repeat-x;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333333;
width: 120px;
height: 15px;
}
I want to display both in same row. Any solution?

The problem is your initial <div> isn't wide enough at 150px, just increase the size a bit, like this:
<div id="emaildiv" class="main" style="width:250px;height:80px;"></div>​
You can see a working/updated example with only this change here.

Leave out the
newEmailDiv.setAttribute('style', 'display:table;');
Then your span will be displayed as inline and your button should appear next to it

Related

How to open link in <a href> when click on parent <h3> element?

I have the problem when click in my title some post. Because I need set title have font-size and line-height is big. When user click between two line, they can't click. If hover in text, it's work.
I added a red arrow with 2 heads in the middle of the 2 lines (click on this to see image)
But user not hover exactly all time, so they will try click many time when start read some post in my website.
Code look like that:
.entry-title {
font-family: Arial,Helvetica,sans-serif;
padding-top: 2px;
font-weight: 700;
font-size: 26px;
line-height: 46px !important;
width: 50%;
}
<h3 class="entry-title">
This line very long, have font-size is 26 and line-height is 46px
</h3>
I purposely to width 50% to have 2 line in sample code.
Have any method to fix that? User only hover anything on h3 tag, click on h3 tag and will open link in the a href.
So sorry if my first post is bad. I also research in Stackoverflow before ask this question but can't find the question same my case.
I prefer the simple method to resolve that. Thank you very much!!!
Since you cannot change your HTML structure, you can select all elements with the entry-title class using document.querySelectorAll and add click event handlers to all of them to click the child anchor tag.
document.querySelectorAll('.entry-title').forEach(title => title.addEventListener("click", function(e){
this.querySelector('a').click();
}));
var h3 = document.querySelector(".entry-title");
h3.addEventListener("click", function () {
var a = h3.getElementsByTagName('a')[0];
a.click();
});
.entry-title {
font-family: Arial,Helvetica,sans-serif;
padding-top: 2px;
font-weight: 700;
font-size: 26px;
line-height: 46px !important;
width: 50%;
cursor:pointer;
}
<h3 class="entry-title">
This line very long, have font-size is 26 and line-height is 46px
</h3>
Update:
Use addEventListener on <h3> and simulate click(); on <a> link
Your example could be:
var h3 = document.getElementsByClassName("entry-title");
for (var i = 0; i < h3.length; i++) {
var a = h3[i].getElementsByTagName("a")[0];
h3[i].addEventListener("click", function() {
a.click();
});
}
.entry-title {
font-family: Arial, Helvetica, sans-serif;
padding-top: 2px;
font-weight: 700;
font-size: 26px;
line-height: 46px !important;
width: 50%;
}
<h3 class="entry-title">
This line very long, have font-size is 26 and line-height is 46px
</h3>
Adding padding might help or put everything in a div and add an Eventlistner to the div
div = document.getElementbyid('divid')
div.addEventlistner('click',function(e){
window.location.assign('url')
})
sorry for poor spellings
Try enclosing the heading itself within the a tags.

HTML element to display tooltip on hover

I have several HTML elements that I need to display a tooltip on hover. These are not conventional HTML elements and come from a generated script on the backend, which I do not have permissions to alter. What I want to know, from a front end perspective, is how I can display a tooltip without declaring this in the HTML.
I tried using Bootstrap tooltips, but you need to declare this in the HTML tag as a title, so it's not useful. So, as the example shows below, I need some text saying 'Action' to appear in a tooltip when you hover over the 'Action' element that contains 'should'. Same will be applied when you hover over the text 'approximate number of' contained in the 'Quantifier' element - the word 'Quantifier' should be displayed. Hope this makes sense.
<body>
One string that <Action>should</Action> work is
<Quantifier>approximate number of</Quantifier> other things.
<script>
$(document).ready(function(){
$("Action").hover(function(){
});
$("Quantifier").hover(function(){
});
});
</script>
<body>
So far non-conclusive, as I can only change CSS values and not tooltip text.
You can try updating the title property on those elements. One thing to note is that HTML tags will appear in lowercase when compiled.
$(document).ready(function() {
var style = document.createElement('style');
style.type = 'text/css';
$('head')[0].appendChild(style);
style.innerHTML =
`action, quantifier {
position: relative;
display: inline-block;
margin-top: 20px;
}
action[title]:hover:after, quantifier[title]:hover:after {
content: attr(title);
position: absolute;
top: -100%;
left: 0;
}
action[title]:hover:after {
color: red;
border: solid 1px black;
}
quantifier[title]:hover:after {
color: blue;
border: solid 1px black;
}`;
$('action')[0].title = 'Action';
$('quantifier')[0].title = 'Quantifier';
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
One string that <Action>should</Action> work is
<Quantifier>approximate number of</Quantifier> other things.
</body>
add a tooltip for an tag with JS/jQuery without change the html structure. You can modify the css based on requirement.
jQuery(function($){
//If you are able to add class then use $('.add_tooltip').hover
// use $('Quantifier, Action').hover
$('Quantifier, Action').hover(
function () {
//let text = $(this).html(); //this is for html content of hover element
let text = $(this).prop("tagName");
//Add the tag name of hover element to tooltip div
$(this).append('<div class = "tooltip">'+text+'</div>');
//display the tooltip with animation.
$(this).find('.tooltip').hide().fadeIn('slow');
},
//On hover out remove the tooltip.
function () {
$(this).find('.tooltip').remove();
}
);
});
Quantifier, Action{
cursor: pointer;
position:relative;
}
.tooltip{
display: inherit;
background: black;
margin: auto;
padding: 10px;
position: absolute;
z-index: 1000;
width: 200px;
height: 40px;
color: #fff;
top: 18px;
left:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
One string that <Action>should</Action> work is
<Quantifier>approximate number of</Quantifier> other things.

Javascript: document.createElement('div') seems to add margin

so I was just messing around with some Javascript for learning purposes and noticed a weird behavior.
I created buttons that, on click, create a duplicate of themselves. The first newly created button has a left margin that I cannot find an explanation for. Does anyone know the reason for that and how to remove that unwanted spacing?
var makeNewBtn = function() {
var newBtn = document.createElement('button');
newBtn.className = 'btn';
newBtn.textContent = 'Click Me';
newBtn.onclick = makeNewBtn;
document.getElementById('buttons').appendChild(newBtn);
};
document.getElementsByClassName('btn')[0].onclick = makeNewBtn;
body {
padding: 25px;
}
.btn {
height: 100px;
width: 100px;
background: beige;
font: 18px Arial;
border: 0;
border-radius: 10px;
outline: none;
}
<div id="buttons">
<button class="btn">Click Me</button>
</div>
result here
There are two issues here:
You have a space after the first button in the HTML
Remove the spaces between the <div> and the <button>.
<div id="buttons"><button class="btn">Click Me</button></div>
Here's a great article about the many ways to "fight" against this space: https://css-tricks.com/fighting-the-space-between-inline-block-elements/
You didn't set margin/padding for the button styles
If not explicitly set, the browser may use a margin/padding, or inherit these from another style.
.btn {
padding: 0;
}
Here is a working fiddle: https://jsfiddle.net/1cg6uvdh/ I changed the background color to red so that the gaps are more visible.

HTML/CSS/Javascript delete button

I have a list of items inside a div that is determined by the contents of two arrays.
product_codes=[code1, code2, code3];
quantities=[1, 34, 67,];
Every time a new code and quantity is added to its respective array, I have a javascript function that does this:
document.getElementById('cart_body').innerHTML='';
cart_text='';
elf='<br class="none"/>';
for(i=0; i<product_codes.length; i++){
cart_text+=(product_codes[i]+" (x"+quantities[i]+")"+elf);
}
document.getElementById('cart_body').innerHTML=cart_text;
and acts upon This HTML:
<div id='cart_body'></div>
with this CSS:
.none{margin-top: 0px;}
(the CSS simply overrides another styling I gave to ALL tags)
What I want to do, is at the end of each line added to cart_text (before the inserted line break), is to add a small circular button with an x in the center (I imagine that there's something like that in Bootstrap, but I am unable to use it or any other libraries) that when clicked, deletes the text next to it ON THAT LINE ONLY (the product code and quantity) from the div, AND deletes the two items(product code and quantity) from their respective arrays. Ideally, the aforementioned delete button would look something like the button that lets you delete a your comment that you've posted(here on Stack Overflow).
Please only Vanilla CSS and Javascript answers only. No libraries, please.
If it's not too much to ask, a working JsFiddle would be great too.
Thanks!
Edit
Attempt at the button: #1
#close_button{
border: 1px solid black;
padding-top: 0;
max-width: 15px;
max-height: 15px;
background-color: lightBlue;
border-radius: 90px;
font-size: 14px;
text-align: center;
}
<div id='close_button'>x</div>
This does not work because I cannot get a proper size with the x in the exact center of the circle. I tried padding, all that good stuff, but to no avail.
You can use the following code at https://jsfiddle.net/osha90/krrhvdmj/
<div id='cart_body'>
<p>
code1 x1 <span style="display:inline-block;width:30;height:30;background-color:#d2d2d2; border-radius: 50%;font-size:12px;line-height:18px;">X</span>
</p>
var product_codes=["code1", "code2", "code3"];
var quantities=[1, 34, 67,];
document.getElementById('cart_body').innerHTML='';
for(i=0; i<product_codes.length; i++){
var p = document.createElement("p");
p.appendChild(document.createTextNode(product_codes[i] +" X "+quantities[i]));
var span = document.createElement("span");
span.appendChild(document.createTextNode("X"));
span.classList.add("delete");
var a = document.createAttribute("data-productCode");
a.value = product_codes[i];
span.setAttributeNode(a);
p.appendChild(span);
span.addEventListener("click",removeElm);
document.getElementById('cart_body').appendChild(p);
}
function removeElm(){
var div = this.parentNode.parentNode;
for(i=0; i<product_codes.length; i++){
if(product_codes[i] == this.getAttribute("data-productCode"))
{product_codes.splice(i,1);
quantities.splice(i,1);
console.log(product_codes);
console.log(quantities);
break;
}
}
div.removeChild(this.parentNode);
}
css Code
.delete{
display: inline-block;
width: 19px;
height: 18px;
text-align: center;
background-color: #D2D2D2;
border-radius: 50%;
font-size: 12px;
line-height: 18px;
cursor: pointer;
}

I need these buttons to control which div is showing or "on top"

I have these buttons on the side of my page, and a main content area taking up the better part of the page.
What I am trying to do is get the button I click to change the main content to a div containing the corresponding information. This is very hard to find, perhaps because I am searching by the wrong terms, and I have covered a good portion of stackoverflow without much luck.
I have though about absolutely positioning the divs and using a script to change the z-index of the the divs to the highest amount using a "=+1" type situation, but I could see that getting messy.
I have considered adapting a script I have that replaces part of an image file name in order to change a main picture on a page to a larger version of the image corresponding to a thumb name, though this script targets file names so it isn't going well.
I have also tried something along the lines of:
"id of button" onclick function = "main content class" change id to "corresponding div"
only in javascript talk, and this isn't working at all so I can only assume that I am either looking at it wrong or I have some messed up in the code.
$('#tabhead1').click(function() {
document.getElementByClassName("maintab").id = "tabs1";
});
This is driving me crazy and I would really appreciate some ideas. I tried to leave it free formed so that noone gets hung up on anyone solution.
**** Just to clarify, I have 5 divs id'd at #tabhead1, #tabhead2, #tabhead3, etc. and 5 content divs classed as .maintab, and id'd as tabs1, tabs2, tabs3, etc. I need the first content div to show automatically, and for that div to change based on the button clicked. at the moment all content divs are set to display: none; except the first one.
For each button, add a data attribute related to the corresponding <div>
for example
<button id="tabhead1" data-content="tabs1" >first Tab</button>
apply a common class for the tabs, for example .tab
Then you can do the following
$('button').click(function(){
var contentId = $(this).data('content'); // get the id of corresponding tab
$('.tab').hide(); // hide all tabs
$('#'+contentId).show(); //show the corresponding tab
});
You are using getElementbyClassName which does not exists. Use:
document.getElementsByClassName("maintab")[0].id = "tabs1";
// Get all elements to match classname + get first element from array
And for the rest, I don't know why you want to add id with JS? Why not just add them to your HTML?
Try this
$('#tabhead1').click(function() {
// get element with class 'maintab' and replace its content with that of another tab
$(".maintab").html($(".tabs1").html());
});
To expand a little on the demo I posted in the comments earlier:
This uses a method very similar to #tilwin-joy, so I guess we were of like mindedness. There are a couple of small differences that I would point out:
jQuery:
$('button').on('click', function () {
var button = $(this);
var target = button.data('target');
button.prop('disabled', true).siblings().prop('disabled', false);
$(target).show('slow').siblings().hide();
});
This uses siblings to hide the other content (one less pass at the DOM).
I suggest just setting your data value with the id hash in the markup, I think it's a bit clearer to read and follow (IMHO) in both the script and markup.
This script also sets the current button to be disabled when clicked. The benefit of this is that you can use the disabled property to style up your buttons, and even if you don't style them it gives a visual cue to the user as to which tab content is currently displayed. Check out the demo to see how this can be used for styling purposes.
HTML: (I stripped some of the unneeded ids from what you described as your markup).
<div class="tabhead">
<button data-target="#tabs1" disabled="true">Content 1</button>
<button data-target="#tabs2">Content 2</button>
<button data-target="#tabs3">Content 3</button>
<button data-target="#tabs4">Content 4</button>
<button data-target="#tabs5">Content 5</button>
</div>
<div class="maintab">
<div id="tabs1">
<img src="http://placehold.it/350/e8117f/fff&text=Image+1" alt="Image 1" />
<p>This is the content of tabs1.</p>
</div>
<div id="tabs2">
<img src="http://placehold.it/350/9acd32/fff&text=Image+2" alt="Image 2" />
<p>This is the content of tabs2.</p>
</div>
<div id="tabs3">
<img src="http://placehold.it/350/9400d3/fff&text=Image+3" alt="Image 3" />
<p>This is the content of tabs3.</p>
</div>
<div id="tabs4">
<img src="http://placehold.it/350/ffd700/fff&text=Image+4" alt="Image 4" />
<p>This is the content of tabs4.</p>
</div>
<div id="tabs5">
<img src="http://placehold.it/350/1e90ff/fff&text=Image+5" alt="Image 5" />
<p>This is the content of tabs5.</p>
</div>
</div>
CSS: Not needed - just to give you an idea of how you can style the elements to look like tabs.
/*This sets all but the first tab to hidden when the page is loaded*/
.maintab>div:not(:first-child) {
display: none;
}
/*The rest is just to style the elements to look like tabs*/
body {
background-color: #eaeaea;
}
.maintab, .tabhead {
text-align: center;
margin:0 20px;
font-family: sans-serif;
}
.maintab {
border: 1px solid #1e90ff;
border-top: none;
padding-top: 20px;
background-color: #fff;
}
.tabhead {
border-bottom: 1px solid #1e90ff;
position: relative;
margin-top: 20px;
}
button {
background-color: #ccc;
padding: 10px;
border: 1px solid #999;
border-bottom: none;
-webkit-border-top-left-radius: 4px;
-webkit-border-top-right-radius: 4px;
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 4px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
color: #999;
font-size: 14px;
cursor: pointer;
position: relative;
top: 2px;
}
button:disabled {
background-color: #fff;
border-color: #1e90ff;
color: #1e90ff;
top: 3px;
padding-top: 11px;
cursor: not-allowed;
z-index: 10;
}

Categories