We Keep Coding

Unable to display JavaScript / jQuery div tag without dependency on another tag

I'm using JavaScript with jQuery to display my RSS Medium feed when there is a <div id="medium-feed"... on the page.
When the JSON data is pulled, I display the data using HTML, some CSS, and the bootstrap library with day.js (to format the date). So far it worked as expected (see code snippets at the bottom).
I also want to display a more compact version of the feed to my footer that shows the title and published date. So I copied down my original code and have JavaScript look for a <div id="medium-feed-footer"... to display the other version of the feed so it can look like this:
This only works if I show both of my div elements on the same page, like my blog page:
<div id="medium-feed" username="factmaven" read-more="Read More"></div>
<div id="medium-feed-feed" username="factmaven"></div>
But if I visit any other page that only shows the footer version of my feed, it's empty, as seen on my homepage. When you test out my code snippet, just add the -footer part in the ID on its own and it won't show up. It looks like there is a dependency to show both div tags in order for it to work properly.
How can I have my footer version show up independently? I tried various ways such as breaking this code into two separate files and trying an if/then statement, but the result is always the same.
$(document).ready(function() {
// Get option values
var divID = 'medium-feed';
var mediumUsername = document.getElementById(divID).getAttribute('username');
var readMore = document.getElementById(divID).getAttribute('read-more');
/* Medium Feed */
document.getElementById(divID).innerHTML =
($.getJSON('https://api.rss2json.com/v1/api.json?rss_url=https://medium.com/feed/' + mediumUsername,
function(json) {
$('#' + divID).html('');
// For loop each Medium post in HTML structure
for (var i in json.items) {
// Define custom value with regex and replace
var thumbnail = json.items[i].thumbnail.replace(/max\/(.+?)\//g.exec(json.items[i].thumbnail)[1], $('#' + divID).width());
var subtitle = /<p class="medium-feed-snippet">(.+?)<\/p>/g.exec(json.items[i].description)[1];
var pubDate = dayjs(json.items[i].pubDate).format('MMM D, YYYY');
var categories = json.items[i].categories.join(', #');
// HTML post structure
$('#' + divID).append(
'<div class="blog-post col-lg-4 col-md-6 col-sm-12">' +
'<div class="blog-post-date">' + pubDate + '</div>' +
'' +
'<a href="' + json.items[i].link + '" target="_blank" ' + 'title="' + json.items[i].title + '">' +
'<h3>' + json.items[i].title + '</h3>' +
'</a>' +
'<small>by ' + json.items[i].author + '</small>' +
'<hr>' +
'<p>' + subtitle + '.</p>' +
'<small>#' + categories + '</small>' +
'<p>' + readMore + ' <i class="fas fa-long-arrow-alt-right"></i></p>' +
'</div>'
);
}
}));
/* Footer Medium Feed */
document.getElementById(divID + '-footer').innerHTML =
($.getJSON('https://api.rss2json.com/v1/api.json?rss_url=https://medium.com/feed/' + mediumUsername,
function(json) {
$('#' + divID + '-footer').html('');
// For loop each Medium post in HTML structure
for (var i in json.items.slice(0, 5)) {
var pubDate = dayjs(json.items[i].pubDate).format('MMM D, YYYY');
// HTML post structure
$('#' + divID + '-footer').append(
'<a href="' + json.items[i].link + '" target="_blank" ' + 'title="' + json.items[i].title + '">' +
'<h4>' + pubDate + '</h4>' +
'<h5>' + json.items[i].title + '</h5>' +
'</a>'
);
}
}));
});
.blog-post-image {
width: 100%;
background-repeat: no-repeat;
background-position: 50%;
background-size: cover;
overflow: auto;
display: block;
}
.blog-post-image:after {
content: "";
display: block;
position: relative;
margin-top: 60%;
width: 100%;
z-index: 1;
}
.blog-post-date {
position: absolute;
background-color: #ffffff;
padding: 5px;
color: #000000;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.9.6/dayjs.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-offset-1 col-md-10 col-sm-12">
<div class="section-title">
<h3>Latest Blog Posts</h3>
</div>
<div id="medium-feed" username="factmaven" read-more="Read More"></div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>

On other pages, Javascript doesn't find an element with id = "medium-feed" so it returns an error. First, check if the element exists.
$(document).ready(function() {
// Get option values
var divID = 'medium-feed';
var mediumUsername = document.getElementById(divID).getAttribute('username');
var readMore = document.getElementById(divID).getAttribute('read-more');
/* Medium Feed */
var divContainer = document.getElementById(divID);
if (divContainer) {//check if element exists
divContainer.innerHTML = ($.getJSON('https://api.rss2json.com/v1/api.json?rss_url=https://medium.com/feed/' + mediumUsername,
function(json) {
//rest of your code
}))
}
})

Find max width from all span

Problem statement :
Actually I have table as you can see in image I want apply width to
span dynamically. because as you can see in image Action label and
dimension label are uneven
I want some thing Like this:
My dynamic code for table:
See this above result: http://jsfiddle.net/kevalbhatt18/nL1u3rpj/2/
$('#someID').html('<table class="chiled-width-100">' +
'<tr> <td><span>Application:</span><span title ="' + response.appName + '" class="text-bold">' + response.appName + '</span></td>' +
'<td><span>Status:</span><span class="addErrorClass" title ="' + response.status + '"" class="text-bold">' + response.status + '</span></td>' +
'</tr>' +
'<tr> <td><span>Dimension:</span><span title="' + response.dimensionName + '" class="text-bold">' + response.dimensionName + '</span></td>' +
'<td><span>Error Count:</span><span title="' + response.errorCount + '" class="text-bold">' + response.errorCount + '</span></td>' +
'</tr>' +
'<tr><td><span>Action: </span><span title="' + response.actionName + '" class="text-bold">' + response.actionName + '</span></td>' +
'<td><span>Message:</span><span title="' + message + '" class="text-bold">' + message + '</span></td>' +
'</tr>' +
'</table>');
If it is possible with css or other solution then also it is ok but i think css is good option because if I use jquery or javascript then it requires some loop or logic so i tried to find solution using css

Please add the following css to your code
.chiled-width-100 tr td span{
display:block;
width:45%; /*adjust this accordingly*/
float:left;
}

Use each to loop over span and get maxWidth.
var maxWidth = 0;
$('table span').each(function () {
maxWidth = $(this).width() > maxWidth ? $(this).width() : maxWidth;
});
$('table span').width(maxWidth).css('display', 'inline-block');
Demo: http://jsfiddle.net/tusharj/nL1u3rpj/9/

Align span elements with CSS float and width property, Demo
span {
float: left;
width: 40%;
}

I found css solution.
.chiled-width-100 tr td :first-child{
max-width: 21%;
}
.chiled-width-100 tr td span{
width: 76%;
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
Example :http://jsfiddle.net/kevalbhatt18/nL1u3rpj/17/
Note: In my example window size is big so is use max-width 21% in
fiddle output scree is small so i used 31% max-width.

Add the following code after creating the table
$('&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp').insertBefore("span")

jQuery getting height of div returns 0

i have a jquery html object:
var $header = $('<div id="print-header" class="print-header" style="width: ' + this.previewWidth + 'px; min-height: 190px;"></div>');
When I output it with console.log($header); I can see the object.
Now after that comes a for loop that appends elements, with a float: left on them to the $header object
for(var i = 0; i < $form.length; i++){
var $widget = $form[i];
var wHtml = '<div class="element" style="width: ' + $widget.size_x*10 + '%; height: ' + $widget.size_y*10 + '%; float: left;">';
switch($widget.widget_name){
case "textFieldWidget":
wHtml += '<div style="border-bottom: 2px dotted; width: 100%; height: 30px; margin: 5px;"><span style="position: relative; font-size: 11px; font-style: italic; color: #999; top: 16; left: 10;">' + $widget.name + '</span></div>';
break;
...
case "imageWidget":
wHtml += '<div style="margin: 5px;"><img src="' + $widget.options[0].value + '" style="width: 100%; height: 100%;"></div>';
break;
}
wHtml += '</div>';
if($widget.section == 0){
$header.append(wHtml);
}
...
}
During the loop, when the element has been appended, I append a clearfix to the $header
$header.append('<div class="clear" style="clear: both;"></div>');
At this point I need to calculate the $header height to do some further processing and this is the part where I'm stuck. No matter whether I use .height(), .outerHeight(), .innerHeight() or .prop("scrollHeight"), the height is always returned 0.
console.log($header); // returns the $header object
console.log("Normal: " + $header.height()); // returns 0
console.log("Outer: " + $header.outerHeight()); // returns 0
console.log("Inner: " + $header.innerHeight()); // returns 0
console.log("Scroll: " + $header.prop("scrollHeight")); // returns 0
I have tried using $(window).load(), that didn't work. The div is visible (display: block;). I also tried adding overflow: hidden;, that didn't work aswell

After appending elements to DOM the Browser needs to render. With a short wait you should be able to get the height.
First make sure you append the header to the DOM otherwise it's not rendered and hence never gets a height.
document.body.appendChild($header);
$header.append('<div class="clear" style="clear: both;"></div>');
console.log($header); // returns the $header object
setTimeout(function(){
console.log("Normal: " + $header.height());
console.log("Outer: " + $header.outerHeight());
console.log("Inner: " + $header.innerHeight());
console.log("Scroll: " + $header.prop("scrollHeight"));
}, 100);

Adding dynamic styles with conditions to the dom elements

I am generating divs dynamically but What I want is to add a anchor tag that shows a trash image for deleting that particular message on hover of a particular div. I have written a :hover on class to add background and that is working fine but I want to add an anchor tag also . Here is my code::
Style
<style>
.mail:hover {
background-color: #cde6f7;
/*background-image: url("/Content/images/Trash.png");*/
}
.mail {
float: left;
width: 100%;
border-bottom: solid 1px #ccc;
padding-bottom: 10px;
margin-top: 3px;
cursor: pointer;
}
</style>
Here I am creating the dynamic div's and I want to add background color and an trash image image to everydiv I hover
<script>
success: function (data) {
if (data.MessageData != null) {
var DataDiv = "";
for (var iRow = 0; iRow < data.MessageData.length; iRow++) {
var RowData = data.MessageData[iRow];
var date = new Date(parseInt(RowData.Sent_Date.substr(6)));
var style = '';
if (RowData.IsReceiver_Received == false) {
style = 'color:#0460C7' + '!important ';
}
DataDiv += "<div class='mail' id='" + RowData.pkMessageId + "' onclick=ShowMessage('" + RowData.pkMessageId + "')>";
DataDiv += "<h3 style=" + style + ">" + RowData.Subject + "</h3>";
//<label class='label' style='color:red ! important;'> hi hi hi </label>
DataDiv += "<label style=" + style + "class='clsLbl'> From:" + RowData.Message_From + "</label>";
DataDiv += "<label style=" + style + "class='clsLb2'>" + date.toDateString() + "</label></div>";
}
$("#hdnSearchType").val(1);
$("#hdnUserType").val(1);
}
$("#MessageStore").html('');
$("#MessageStore").html(DataDiv);
},
</script>

$(".mail").live('hover', function(e){
$("#"+this.id).append("<a>addd</a>");
});

If I understand your question properly, you would need to do this:
While dynamically creating the <div>'s HTML, also add this inside the div:
DataDiv += "<a href='its-url' class='trash'></a>";
This will add an anchor inside your dynamic elements.
Since you want to keep this hidden and it will be only visible when you hover over the "mail" div,
.trash { display: none; }
.mail:hover .trash { display: block; }
Will work for you.
You can then use background-image or <img src=""> to show the trash icon inside this anchor element.

How to make a scrollable div with dynamic content

I am trying to add an image into my div inside bottom to top when I click the add button. Now it is working, but my problem was the div does not scroll. What I am doing wrong?
JSFiddle link
HTML
<button id="add_content">Add</button>
<div class="image_panel"></div>
CSS
.image_panel {
width:100%;
height:300px;
border:1px solid red;
overflow-y:scroll;
}
#add_content{
float:left;
}
JavaScript
$(document).ready(function() {
var smallimg_count=0;
var bottom=0;
$("#add_content").click(function() {
smallimg_count++;
bottom=bottom+20;
var insert_html_small = '<div id="imageGrid_' + smallimg_count + '" class="imageGrid_small" >
<img class="resize1" id="resize_' + smallimg_count + '" src="http://webbies.dk/assets/templates/SudoSlider/images/toolbox_designer.png" style="bottom:' + bottom + 'px;" />
</div>';
$(insert_html_small).appendTo(".image_panel");
});
});

One issue that I see is that the image you are adding has an absolute position inline style (from your JSFiddle)
e.g.
style="bottom:' + bottom + 'px; position: absolute;'
Therefore it's in a different stacking context than the div
Removing it seems to make it work: http://jsfiddle.net/4Ftev/12/
e.g.
$(document).ready(function () {
var smallimg_count = 0;
var bottom = 0;
$("#add_content").click(function () {
smallimg_count++;
bottom = bottom + 20;
var insert_html_small = '<div id="imageGrid_' + smallimg_count + '" class="imageGrid_small" ><img class="resize1" id="resize_' + smallimg_count + '" src="http://webbies.dk/assets/templates/SudoSlider/images/toolbox_designer.png" /></div>';
$(insert_html_small).appendTo(".image_panel");
});
});
If you want to add it bottom up, then you can use prependTo, see this JSFiddle
http://jsfiddle.net/4Ftev/15/
$(document).ready(function () {
var smallimg_count = 0;
var bottom = 0;
$("#add_content").click(function () {
smallimg_count++;
bottom = bottom + 20;
var insert_html_small = '<div id="imageGrid_' + smallimg_count + '" class="imageGrid_small" >' + smallimg_count + '<img class="resize1" id="resize_' + smallimg_count + '" src="http://webbies.dk/assets/templates/SudoSlider/images/toolbox_designer.png" /></div>';
$(insert_html_small).prependTo(".image_panel");
});
});

You are using an absolute positioned image, inside a div which is not relative positioned.
First of all, add position:relative; to the .image_panel class style
What you will notice now, is that the image is positioned relative to the div.
If you want to test the scrollbar, i would recommend you to use a margin instead of the absolute positioning on your image.
Like, margin-top:900px;
Css
.image_panel
{
width:100%;
height:300px;
border:1px solid red;
overflow-y:scroll;
position:relative;
}
#add_content{
float:left;
}
Javascript
$(document).ready(function(){
var smallimg_count=0;
var bottom=500;
$("#add_content").click(function(){
smallimg_count++;
bottom=bottom+20;
var insert_html_small = '<div id="imageGrid_' + smallimg_count + '" class="imageGrid_small" ><img class="resize1" id="resize_' + smallimg_count + '" src="http://webbies.dk/assets/templates/SudoSlider/images/toolbox_designer.png" style="margin-top:' + bottom + 'px;" /></div>';
$(insert_html_small).appendTo(".image_panel");
});
});
http://jsfiddle.net/3gzaW/
Best regards.
Jonas

Your images:
<img class="resize1" id="resize_3" src="http://webbies.dk/assets/templates/SudoSlider/images/toolbox_designer.png" style="bottom:60px; position: absolute;;">
Take away the position:absolute; (make it relative, or remove it entirely)