How would I inline the following blog post example. I want the tag to appear inline to the title, here is the code:
http://jsfiddle.net/Rmhq8/
<div class="blog-title" >Title test #1</div>
<div class="blog-tag" >
<span class="label label-warning ">Event</span></div>
<div class="blog-author">Author: Jareddlc</div>
<div class="blog-date">posted: Wednesday, June 12, 2013 7:11:00 PM</div>
<pre>Testing text that goes inside the body</pre>
<div class="blog-program">tag: ENG</div>
<hr style="border-top: 1px dotted #b0b0b0;border-bottom: 0px">
I am building that dynamicaly with jquery:
var title = "<div class=\"blog-title\" >"+post.title+"</div>";
var tag = "<div class=\"blog-tag\" ><span class=\"label label-warning \">"+post.tag+"</span></div>";
var author = "<div class=\"blog-author\">Author: "+post.author+"</div>";
var date = "<div class=\"blog-date\">posted: "+formatDate(post.date)+"</div>";
var body = "<pre>"+post.body+"</pre>";
var program = "<div class=\"blog-program\">tag: "+post.program+"</div>";
var footer = "<hr style=\"border-top: 1px dotted #b0b0b0;border-bottom: 0px\">";
var entry = title+tag+author+date+body+program+footer;
is there a way to do it with bootstrap? or how would i go about doing this?
UPDATE and centered to the title
No need to get Bootstrap involved here, just change the blog-tag element to a span and put it in the title div. Centering vertically can be hard in HTML, so I set the tag to be position:relative and moved it up 5px (top:-5px;).
HTML
<div>
<span class="blog-title">Jared Test 2</span>
<span class="blog-tag label label-warning ">Event</span>
</div>
CSS
.blog-tag {
font-size: 12px;
line-height: 20px;
position: relative;
top: -5px;
}
Updated Fiddle
To do this in javascript:
var titleAndTag = '<div><span class="blog-title" >'+post.title+'</span><span class="blog-tag label label-warning ">'+post.tag+'</span></div>';
Note that by using single quotes, you won't have to escape the double quotes.
Related
I have some string text that I get from an API. I am displaying it in an outlook-addin which is just html, javascript and css.
I am putting the string of text in a panel window which is small. I have been trying to wrap the text using css or javascript but so far no luck.
Here is the code:
Javascript:
for (let i = 0; i < data.length; i++) {
let text = "Subject: " + JSON.stringify(data[i].subject) + "<br>"+
"CC Emails: " + JSON.stringify(data[i].cc_emails).replace("[]","No Emails are CC'd").replace("[","").replace("]","") + "<br>" +
"Ticket Creation Date: " + JSON.stringify(data[i].created_at) + "<br>" +
"Ticket Status: " + JSON.stringify(data[i].status).replace("2", "Open").replace("3", "Pending").replace("4", "Resolved").replace("5", "Closed").replace("6", "Waiting On Customer") ;
let pre = document.createElement('pre');
pre.innerHTML = text;
pre.style.cssText += 'font-size:24px;font-weight:bold;width:30px'
output.appendChild(pre);
html:
<div class="ms-PanelExample">
<script src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/js/fabric.min.js"></script>
<button style="margin:1px;" id="get-freshdesk" class="ms-Button ms-Button--primary">
<span class="ms-Button-label">Freshdesk Tickets</span>
</button>
<div class="ms-Panel ms-Panel--xxl">
<button class="ms-Panel-closeButton ms-PanelAction-close">
<i class="ms-Panel-closeIcon ms-Icon ms-Icon--Cancel"></i>
</button>
<div class="ms-Panel-contentInner">
<style>
ms-Panel-headerText{
width: 10px;
height: 100px;
margin: 0;
padding: 0;
inline-size: min-content
background-color: white;
}
</style>
<p class="ms-Panel-headerText">Freshdesk Integration</p>
<div class="ms-Panel-content">
<span class="ms-font-mfresh">Latest Ticket information</span>
</div>
</div>
</div>
</div>
Yet the text still keeps getting cut off:
I also tried changing the ms-Panel-headerText to pre in the css style section but no luck.
Any ideas are appreciated.
Thanks
As mentioned in my comment.
When you look at the documentation about the pre element on MDN Web Docs, it states:
"The HTML element represents preformatted text which is to be
presented exactly as written in the HTML file. "
source
So try any other (inline-)block element and it should work.
Pre displays text just as it is in your code file so no word-wrap is applied.
However this seems to work if you really want it to be wrapped in pre tags.
<pre style="word-wrap: break-word; white-space: pre-wrap; ">
The purpose of lorem ipsum is to create a natural looking block of text (sentence, paragraph, page, etc.) that doesn't distract from the layout.
</pre>
Im finishing up the last bit of a todo list app I am creating. Basically users generate todo tasks which show up on the screen along with a checkbox and trash can icon to the right of it. For the most part the app is working as it should. The last thing I need to do is have it that when a user clicks a checkbox, text-decoration:line through effect takes place and crosses out the corresponding list item. I used to have this working but I had to shift around some things so resizing the screen would look better. Now my old way wont work. Ill post some code and if anyone knows how I can get this working I would really appreciate it. Thanks everyone!
The input:checked + li css below is what was originally working before I had to rearrange the order of how list items were generated.
ul {
text-align:right; /*This pushes the checkbox/trash can right while the <li> in the js file floats the todo text left*/
list-style-type:none;
padding-left:0px; /*Makes up for not having the bullet point spacing on smaller screens*/
font-size:24px;
color:white;
font-weight:600;
}
li {
text-align:left;
}
input:checked + li { /*<<<<<------This is what I was using before and it worked*/
text-decoration:line-through;
}
.todo-item::after {
content: "";
clear: both;
display: table;
}
.todo-item {
text-align: right;
}
.todo-item .todo-label {
display: block;
float: left;
max-width: 80%; /* you can increase the size */
text-align: left;
/* you can use this props if you don't want another line
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden; */
}
</style>
</head>
<body>
<div class="header">
<div class="container" style="padding-top:50px;">
<div class="row justify-content-center"> <!--Input Box-->
<div class="col-sm-12 col-lg-8">
<h1>To-Do List</h1>
<div class="form-group">
<input type="text" class="form-control" id="task">
</div>
</div>
</div>
<div class="row"> <!--Add Button-->
<div class="col"></div>
<div class="col-xs-2" style="margin-right:15px; margin-top:30px;">
<button id="add" style="border-radius:50%; font-size:35px; width:65px;" class="btn btn-danger">+</button>
</div>
</div>
</div>
</div>
<div class="container text" style="display:inline-block;"> <!--ToDos-->
<div class="row justify-content-center" style="margin-top:20px;">
<div class="col-sm-12 col-sm-8">
<div id="todos"></div>
</div>
</div>
</div>
<script src="todo.js"></script>
</body>
</html>
Here is the javascript used to develop items for the todo list. Prior to rearranging, the checkbox was generated before the todo list item. Now, it was shifted to after. I thought I could just rearrange my css order or perhaps take out the li section and replace it with a class. I havent had much luck here.
function show() {
var todos = get_todos();
var html = '<ul>';
for(var i=0; i < todos.length; i++) {
html += '<li class="todo-item">' +
'<span class="todo-label">' + todos[i] + '</span>' +
'<input class="checkBox" type="checkbox">' +
'<button class="remove" id="' + i + '">' +
'<i class="fa fa-trash" aria-hidden="true"></i>' +
'</button>' +
'</li>';
};
html += '</ul>';
document.getElementById('todos').innerHTML = html;
var buttons = document.getElementsByClassName('remove');
for (var i=0; i < buttons.length; i++) {
buttons[i].addEventListener('click', remove);
};
}
A fairly simple way of adding the line-through effect when the checkbox is clicked and removing the effect when the checkbox is unclicked is using the toggle method to toggle a premade class with the line-through effect. This class should not be on by default because you don't want the line-through effect right away. When you click the checkbox, it will toggle the class on. When you unclick the checkbox, it will toggle the class off.
HTML should be something like:
<ul>
<li> Todo Item <input .....> </li>
Then create a CSS class for your code to toggle:
.lineThrough {
text-decoration: line-through;
}
The jQuery code would look like this:
$("ul").on("click", "li", function(){
$(this).toggleClass("lineThrough");
});
I posted this a little earlier but deleted it because I was able to figure a little of it out. Im having an issue when resizing a screen with this todo list project im working on. Im using a bit of javascript that creates a list item every entry. The person types in a todo task and then a check box and remove icon is added. My issue is that on smaller screens, the checkbox and remove icon is jumping up a layer when a long named task is given. Im using bootstrap 4 to hold it all in place on my html side. My image should help clarify what I'm talking about. I think the javascript may be the issue.
Here is the list when on a medium screen. Looks correct with the checkbox/trash icon being to the right of the item.
Here is the issue when the screen gets smaller. The checkbox/trash icon goes up a line as the text breaks down. How can I make it stay on the first line as the text? Ive tried setting the "li" element to width="90%;" with the checkbox/remove icon taking up the remaining 10. It looks worse then. I'm really not sure. Ill attach the relevant code.
function show() {
var todos = get_todos();
var html = '<ul>';
for(var i=0; i < todos.length; i++) {
html += '<span><input class="checkBox" type="checkbox"><li style="float:left;">' + todos[i] + '</li>' + '<button class="remove" id="' + i + '"><i class="fa fa-trash" aria-hidden="true"></i></button></span><br/>';
};
html += '</ul>';
document.getElementById('todos').innerHTML = html;
var buttons = document.getElementsByClassName('remove');
for (var i=0; i < buttons.length; i++) {
buttons[i].addEventListener('click', remove);
};
}
body, html { /*makes the background image stretch the whole screen*/
height:100%;
}
body {
background-image:url('campingBackground.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
background-size:cover;
}
.checkBox {
margin-right:10px;
height:18px;
width:18px;
}
.checkBox:hover {
background-color:#C0C0C0;
}
.remove { /*Trash can button*/
color:white;
font-size:24px;
border:0;
padding:0;
background-color:transparent;
}
.remove:hover {
color:#C0C0C0;
}
ul {
text-align:right; /*This pushes the checkbox/trash can right while the <li> in the js file floats the todo text left*/
list-style-type:none;
padding-left:0px; /*Makes up for not having the bullet point spacing on smaller screens*/
font-size:24px;
color:white;
font-weight:600;
}
li {
text-align:left;
}
<div class="header">
<div class="container" style="padding-top:50px;">
<div class="row justify-content-center"> <!--Input Box-->
<div class="col-sm-12 col-lg-8">
<h1>To-Do List</h1>
<div class="form-group">
<input type="text" class="form-control" id="task">
</div>
</div>
</div>
<div class="row"> <!--Add Button-->
<div class="col"></div>
<div class="col-xs-2" style="margin-right:15px; margin-top:30px;">
<button id="add" style="border-radius:50%; font-size:35px; width:65px;" class="btn btn-danger">+</button>
</div>
</div>
</div>
</div>
<div class="container text"> <!--ToDos-->
<div class="row justify-content-center" style="margin-top:20px;">
<div class="col-sm-12 col-sm-8">
<div id="todos"></div>
</div>
</div>
</div>
First, having an ul list with items like span as child nodes is not correct, according to the HTML Specification for a list (ul) element:
The ul element represents a list of items, where the order of the items is not important — that is, where changing the order would not materially change the meaning of the document.
The items of the list are the li element child nodes of the ul element.
The problem is given because according to the name of the todo item, there is no space for the todo to fit.
I recommend this changes to your code as a possible solution:
var todos = [
'Lorem ipsun dolor sit amet',
'Answer a question related to JavaScript on StackOverflow',
'Another todo',
'A really long long todo to show this code working for todo with long long long names'
];
var html = '<ul>';
for(var i=0; i < todos.length; i++) {
html += '<li class="todo-item">' +
'<span class="todo-label">' + todos[i] + '</span>' +
'<input class="checkBox" type="checkbox">' +
'<button class="remove" id="' + i + '">' +
'<i class="fa fa-trash" aria-hidden="true"></i>' +
'</button>' +
'</li>';
};
html += '</ul>';
document.write(html);
/* https://www.w3schools.com/howto/howto_css_clearfix.asp */
.todo-item::after {
content: "";
clear: both;
display: table;
}
.todo-item {
text-align: right;
}
.todo-item .todo-label {
display: block;
float: left;
max-width: 80%; /* you can increase the size */
text-align: left;
/* you can use this props if you don't wan another line */
/* white-space: nowrap; */
/* text-overflow: ellipsis; */
/* overflow: hidden; */
}
This Is the My Html Code
<div class="ui-grid-a" class="checkpoint" style="width: 100%; background #F4F4F4; height: 3em;" id="two">
<div class="ui-block-a" align="left" id="imgch2" style="width:20%">
<img src="../images/checkpoint3.svg" id="check2" style="height: 1em; width: 50%; padding-top:0.7em;">
</div>
<div class="ui-block-b" align="center">
<span style="font-size: 13px; font-family: MyriadPro-Regular; color: #BD2929;">NickName8</span>
<br>
<span style="font-size: 10px; font-family: MyriadPro-Regular; color: C5C6C9;">Telephone-9800045303</span>
</div>
</div>
I have several Divs with custom images. On click of that image it changes to another image ,say Image B. Then I have to write a function to remove that entire Div which contains that Image. I am a beginner In jquery. Please Help me out
$("#viewone").each(function() {
var $this = $('img');
if ($this.attr('src') == '../images/checkpoint4.svg')
$($this).closest('.checkpoint').remove();
});
This is how far i have come with my jquery
You need to loop through all images like this and remove checkpoint:
$('#viewone img').each(function () { // it finds all images in #viewone
$this = $(this);
if ($this.attr('src') == '../images/checkpoint4.svg')
$this.closest('.checkpoint').remove(); // use $this instead of $($this)
});
On facebook for example - when you put your mouseover a news item, a remove button appears. How can I go about making this happen?
Thanks,
Elliot
Modern Browsers
In modern browsers, you can leverage the :hover pseudo class in our selector. As an example, consider the following markup:
<div class="item">
<p>This is a long string of text</p>
<div class="adminControls">
Delete Item
</div>
</div>
By default, we would want the .adminControls to be hidden. They should, however, become visible once the user has hovered the .item element:
.item .adminControls {
display: none;
}
.item:hover .adminControls {
display: block;
}
JavaScript and jQuery
If you're using jQuery, you can accomplish this rather easily using the $.hover() method. If you're using Prototype, you can get the protoHover plugin to achieve the same result, or view this blog post.
$("div.item").hover(
function () { $(this).find(".adminControls").show(); },
function () { $(this).find(".adminControls").hide(); }
);
That would accomplish the show/hide effect for the following:
<div class="item">
<p>This is a long string of text</p>
<div class="adminControls">
Delete Item
</div>
</div>
<div class="item">
<p>This is a long string of text</p>
<div class="adminControls">
Delete Item
</div>
</div>
<div class="item">
<p>This is a long string of text</p>
<div class="adminControls">
Delete Item
</div>
</div>
If you don't need to support IE6, you can use the :hover pseudoclass like so:
CSS:
.link { display: none; }
.item:hover > .link { display: inline; }
HTML:
<div class="item">
Remove
Lorem Ipsum...
</div>
Position the link as you'd like it to appear on hover, then hide it with JavaScript and use the onmouseover event to show it. (i.e., it's display: none; and then turns to display: block; when the onmouseover event is triggered).
Something like this:
window.onload = function(){
document.getElementById('mylink').style.display = 'none';
document.getElementById('mydiv').onmouseover = function(){
document.getElementById('mylink').style.display = 'block';
}
}
You need to write a Javascript function that manipulates the DOM and you need to associate the OnMouseOver attribute of your HTML element with that function. For example, on my home page a picture of my face changes every time the mouse rolls over it. The Javascript function is defined in the HTML page itself.
<script type="text/javascript">
<!--
faceCnt = 7;
var faces = new Array( faceCnt );
var faceDates = new Array( "1982", "1986", "1991", "1999", "2004", "2006", "2009" );
var faceIdx = 7; /* So that first change is to earliest one. */
for( var idx = 0 ; idx < faceCnt ; idx++ )
(faces[idx] = new Image(150, 116)).src = "david/david" + (idx + 1) + ".jpg";
function nextFace( ref )
{
faceIdx = faceIdx >= faceCnt - 1 ? 0 : faceIdx + 1;
ref.src = faces[ faceIdx ].src;
ref.title = "David-" + faceDates[ faceIdx ];
}
//-->
</script>
<img id="myface" src="david/david7.jpg" alt="david" title="David-2009"
width="150" height="116"
style="margin: 0 0 5px 15px; /* -10px -5px 10px 10px; */
padding: 0;
border: solid black;
border-width: 1px;
float: right;"
onMouseOver="nextFace( this )"
onClick="nextFace( this )" >