how to put button and text in the same line? - javascript

I want to put icon, "Notification" and in the same line, but appears in the new line.
<button (click)="openPage()">
<icon name="notifications"></icon> Notification <h1>New</h1>
</button>
Thanks

by default h1 is block element so it takes whole width of screen. You should use inline element like span. Here is the example for span
<button (click)="openPage()">
<icon name="notifications"></icon> Notification <span>New</span>
</button>
if you still want to use h1, use css to make it inline element
#notification {
display: inline;
}
<button (click)="openPage()">
<icon name="notifications"></icon> Notification <h1 id="notification">New</h1>
</button>

I suggest you create a CSS file and type display: inline as shown below.
CSS:
.inline {
display: inline;
}
HTML:
<button class="inline" (click)="openPage()">
<Icon and Text placed here></>
</button>

Give those elements' style: display: inline-block or display: inline

Related

Button does not work if its on the same line as a h1

So I want my page title and profile button to be on the same line (header of each page). However, the button does not work when it's on the same line and works when on different lines.
return (
<div className='Master-div'>
<Sidebar />
<div className='contacts'>
<div className='header-dashboard'>
<h1>Dashboard</h1>
<ProfileButton></ProfileButton> /*this does not work*/
</div>
<div><ProfileButton></ProfileButton></div> /*this works*/
<div className='line'></div>
<div className='contents'></div>
</div>
</div>
)
}
export default Dashboard
.header-dashboard{
display: flex;
align-items: center;
justify-content: space-between;
}
I have tried making different divs and putting them on the same line using CSS but that doesn't work either. I would really appreciate some help.
Default h1 element style is display:block.
If you give it manually as inline, then they will appear next to each other.
h1 style="display: inline"

Add text to a popup image only

I'm using this free HTML template https://html5up.net/ethereal
In the portfolio section, when you click on an image, the image appears bigger for a better view.
I want to add some info or some text along with the popup image but somehow cannot add it to this code
<img src="https://html5up.net/uploads/demos/ethereal/images/gallery/thumbs/01.jpg" alt="" />
Edit based on your comments: There are many approaches to toggling hidden content, below you will find a basic example. We are hiding the element with the class "hidden" and wiring up an event listener on the default image. Once the default image is clicked on it will fire a function that gets the parent element and applies a new class. In our CSS we are then hiding the default image and showing the previously hidden content. This is a rough example and by expanding on the styling you can do all sorts of things such as fading the hidden content in by setting a transition on the element's opacity or sliding the hidden content into view by transitioning the transform properties as a couple of examples.
var target = document.querySelector(".parent .default");
target.addEventListener("click", function(){
var parent = document.querySelector(".parent");
parent.classList.add("show-hidden");
});
.parent {
padding: 15px;
}
.parent p {
color: black;
font-size: 16px;
}
.hidden {
display: none;
}
.parent.show-hidden .hidden {
display: block
}
.parent.show-hidden .default {
display: none;
}
<div class="parent">
<img class="default" src="https://html5up.net/uploads/demos/ethereal/images/gallery/thumbs/01.jpg" alt="" />
<div class="hidden">
<img src="https://html5up.net/uploads/demos/ethereal/images/gallery/thumbs/01.jpg" alt="" />
<p>I am the text element</p>
</div>
</div>

How to do Javascript Function which will change the style display of element?

function burgerMenu(){
//alert(document.getElementById("hiddenMenuUL").style.display);
if(document.getElementById("hiddenMenuUL").style.display="none"){
document.getElementById("hiddenMenuUL").style.display="block";
}
else if(document.getElementById("hiddenMenuUL").style.display="block"){
document.getElementById("hiddenMenuUL").style.display="none";
}
}
I want to toggle the burger menu icon. So if I press the icon the burgerMenu() function will be toggle and verify if its display: none then change to display:block and vice versa. hiddenMenuUL is the for list of links.
This line below is the button line in HTML:
<button class="btn" onclick="burgerMenu()">☰</button>
My CSS for hiddenMenuUL
#hiddenMenuUL{
display: none;
list-style: none;
width: 100%;
justify-content: center;
}
When you are writing your if, you are not actually checking if the display === "none", you are trying to set it to none.
What you should be doing looks like this:
function burgerMenu(){
let menuStyle = document.getElementById("hiddenMenuUL").style.display;
if(menuStyle === 'none'){
document.getElementById("hiddenMenuUL").style.display="block";
}
else {
document.getElementById("hiddenMenuUL").style.display="none";
}
}
Edit:
It seems display rule is defined in CSS, and isn't inline.
.style can only reach inline styles, for example:
<div id="hiddenMenuUL" style="display: none;"></div>
Adding 'display: none' inline like in the example above should be the fastest and easiest way to 'fix' it in your particular scenario, although it probably wouldn't be considered the best practice.

JQuery show delete button on appended div

I have so far able to remove each appened elements using .remove() function of JQuery. my problem is the delete button is always showing on the first element.
I want to hide the delete button on first element and show the delete button when I append a new element.
I have set the delete button on the first element to
.delete-button:first-child{
display:none;
}
in my css but all succeeding appends do not show the delete button..
how can I do this with JQuery can it be done using CSS only?
li:first-child .delete-button { display:none }
<ul>
<li>
First <button class="delete-button">Delete</button>
</li>
<li>
Second <button class="delete-button">Delete</button>
</li>
</ul>
Making assumptions on your markup since none was provided. You can accomplish it using css.
My interpretation of your requirement: If there is only one item, do not show a delete button; if there are multiple items, show a delete button for every item.
Your attempt didn't work because .delete-button:first-child selects all elements with the delete-button class that are also the first-child of their parent element. Presumably this would be all of your buttons.
You can instead use the :only-of-type selector on the elements that contain the delete buttons, e.g., assuming they have the item class:
.item:only-of-type .delete-button { display: none; }
Or if they are li elements:
li:only-of-type .delete-button { display: none; }
That way if the item/li/whatever is the only item then its delete button will be hidden automatically, but as soon as you add additional items the delete button will be shown automatically for all items.
Here's a simple demo with a bit of JS to mock up the add and delete functionality:
$("#parent").on("click", ".delete-button", function() {
$(this).parent().remove();
});
$(".add-button").on("click", function() {
$("#parent").children().first().clone().appendTo("#parent");
});
.item:only-of-type .delete-button { display: none; }
.item { margin: 3px; padding: 2px; width: 100px; border: thin black solid; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class="add-button">Add Item</button>
<div id="parent">
<div class="item">
<button class="delete-button">Delete</button>
<div>An item</div>
</div>
</div>
You can try,
div ul:not(:first-child) {
.delete-button{
display:none;
}
}
You might wanna consider browser compatibility before using CSS - Browser support for CSS :first-child and :last-child
Having said that, With jQuery you can write an event handler to change css of all the child elements except the last.
Consider this example from jQuery: How to listen for DOM changes?
$("element-root").bind("DOMSubtreeModified", "CustomHandler");
Yes, Its possible by css only. I hope this snippet helps.
$(document).on('click','#AppendList', function(){
$("ul").append('<li>List <button class="delete-button">Delete</button></li>');
})
li .delete-button { display:none }
li:last-child .delete-button { display: inline-block;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
First <button class="delete-button">Delete</button>
</li>
<li>
Second <button class="delete-button">Delete</button>
</li>
</ul>
<hr>
<button type="button" id="AppendList">Add List</button>

My CSS style sheet is having no impact on my React component

I am attempting to style my React component using a CSS style sheet. I want to change the margins to separate my elements better, but my div class seems to be broken, or I am not understanding this concept correctly. This is the output of my current code:
I would like to add space between the account name input box, and the text.
Here is my React:
renderGetAccountName: function renderGetAccountName() {
return (
<Dialog onClose={this.onGetAccountNameClose} height={300}>
<h1 style={dialogHeaderStyle}>
NAME YOUR ACCOUNT
</h1>
<span style={errorMessage}>
It is time to name your new account! Please enter your choice below, and click "OK" when you are finished.
</span>
<div classname="nameInput">
<form id="frm1" action="form_action.asp">
ACCOUNT NAME: <input type="text" name="new-account-name"></input>
</form>
</div>
<Button type='button submit' style={submitStyle}>
OK
</Button>
<span>
<button type="button">Cancel</button>
</span>
</Dialog>
);
}
Here is my CSS:
.gone
display: none
.contact
.controls
.dropdown-menu
li
border-top: 1px solid #B3B3B3
cursor: pointer
padding-top: 8 px
text-transform: capitalize
text-align: center
height: 44 px
&:hover
background-color: #EEE
.nameInput
margin-top: 50px
margin-left: 50px
Instead of using classname you must use className
Use className={"nameInput"}. The attribute is camel case.

Categories