display: none still inheriting - javascript

A dynamically created form is rendering strangely even with the style sheet disabled.
the form shows and hides a wide range of details based on which options are selected.
so, for example, a number of the following will have been rendered with C#.net ...
formOutput += "<div class=\"field textBox\" id=\"" + field.Id + "\"><div class=\"labelTB\"><label for=\"" + field.Id + "\" class=\"" + reqClass + "\">" + field.Name + requirement + "</label></div>" +
"<input type=\"text\" class=\"numInput\" id=\"" + field.Id + "_tb\" name=\"" + field.Name + "\" onkeyup=\"Service.refresh(this); numCheck(this)\" onclick=\"numCheck(this)\" />" +
// numButtons:
"<div class=\"minus plusMinus\" id=\"minus_" + field.Id + "\" onmousedown=\"numBox(this)\" /></div>" +
"<div class=\"plus plusMinus\" id=\"plus_" + field.Id + "\" onmousedown=\"numBox(this)\" /></div></div><br />";
...and then the parent node is hidden onload by JS:
var setVisibility = function (id, bool) {
try {
get(id).style.display = (bool) ? "block" : "none";
} catch (e) {
return false;
}
return bool;
}
However, when there are a large number of hidden fields, I am getting a considerable space in the middle of my form.
I have tried all sorts of solutions with little success. simply moving everything up is not easily viable (the form is much much more complicated than I can show here)...
i have even tried the following:
var setVisibility = function (id, bool) {
try {
get(id).style.display = (bool) ? "block" : "none";
get(id).style.position = (bool) ? "relative" : "absolute";
get(id).style.height = (bool) ? "auto" : "0px";
var children = get("containerType").childNodes
for (var i in children) {
if (children[i].style) {
children[i].style.display = (bool) ? "block" : "none";
children[i].style.position = (bool) ? "relative" : "absolute";
children[i].style.height = (bool) ? "auto" : "0px";
}
}
} catch (e) {
return false;
}
return bool;
}
what is causing this problem? is there a solution?
(see image below)

You have a br-tag at the end of you code (after the div with id=plus_??) which will always display, regardless of whether you hide the divs or not. You could but the br-tag inside one of the divs to achieve what you want
formOutput += "<div class=\"field textBox\" id=\"" + field.Id + "\"><div class=\"labelTB\"><label for=\"" + field.Id + "\" class=\"" + reqClass + "\">" + field.Name + requirement + "</label></div>" +
"<input type=\"text\" class=\"numInput\" id=\"" + field.Id + "_tb\" name=\"" + field.Name + "\" onkeyup=\"Service.refresh(this); numCheck(this)\" onclick=\"numCheck(this)\" />" +
// numButtons:
"<div class=\"minus plusMinus\" id=\"minus_" + field.Id + "\" onmousedown=\"numBox(this)\" /></div>" +
"<div class=\"plus plusMinus\" id=\"plus_" + field.Id + "\" onmousedown=\"numBox(this)\" /></div><br /></div>";
...or you could just provide the br-tag with a class or id and use that to show and hide along with the divs

Related

How to hide text from Mapbox GL JS tooltips when it is null?

I've created a map in mapbox GL JS, but cannot hide the tooltip content when the value is null.
Example.
Here is the full code: https://github.com/Ninlin/irystory/blob/main/index.html
I tried the following, but the if-statement does not work and removes the tooltip completely. What should I modify?
popup
.setLngLat(e.lngLat)
.setHTML("<h3>" + name + "</h3>" +
"<h4 id ='fn'>" + full_name + '</h4>')
.addTo(map);
if (full_name != null) {
document.getElementById('fn').style.display = 'block';
} else {
document.getElementById('fn').style.display = 'none';
};
Funny thing, full_name is actually a string, so this seems to be working:
if (full_name != "null") {
popup
.setLngLat(e.lngLat)
.setHTML("<h3>" + name + "</h3>" +
'<hr>' +
"<h4>" + full_name + '</h4>' +
'<h4>' + birth + '-' + death + '</h4>' +
'<p>'+occupation+'</p>')
.addTo(map);
}

Im getting objectHTMLimageElement instead of the image in my list item

function story(){
if(document.getElementById("area").value == "salwa"){
var oImg = document.createElement("img");
oImg.setAttribute('src', './images/logo.png');
oImg.setAttribute('alt', 'na');
oImg.setAttribute('height', '1px');
oImg.setAttribute('width', '1px');
document.body.appendChild(oImg);
document.getElementById("story-result").innerHTML += "<li>" + oImg + " </li>";
}else{
document.getElementById("li-result").innerHTML += "<h1>" + "no results" + " </h1>";
}
}
Is this working?
function story(){
if (document.getElementById("area").value == "salwa"){
document.getElementById("story-result").innerHTML = "<img src=" + "'./images/logo.png'" + "alt=" + "'na'" + "height=" + "'1px'" + "width=" + "'1px'" + ">" + "</img>";
} else {
document.getElementById("li-result").innerHTML += "<h1>" + "no results" + " </h1>";
}
}
You have to get the image source attribute and make it equal to the innerHTML of the element with id story-result.
You are currently using the image itself, not its src attribute.
Try this:
document.getElementById("story-result").innerHTML += "<li>" + oImg.getAttribute('src') + " </li>";

When looping through an array how do I add/remove classes from elements that fit a specific criteria?

Below I have code that loops through a list of items and I want to remove a class "hazardous" from div class item-left if element.hazardous == no. The way I have it set up right now is not working and I'm wondering if it might be because I need to find a way to target the specific non hazardous array element.
What "hazardous" does in my CSS is it adds a solid red border if the hazardous class is active. Otherwise hide the red border.
function showProducts(items) {
var itemsHTML = [];
items.forEach(function(element) {
var url = element.url ? element.url : 'http://placehold.it/100x100'
itemsHTML.push('<li><div class="item-left hazardous" data-product-id="' + element.id + '"><p><span class = "prod-name">' +
'Product: ' + element.product + '</p></span><span class="prod-loc">' +
'Location: ' + element.location + '</span><span class="qty">' +
'Quantity: ' + element.quantity + '</span></div>' +
'<div class="item-right"><img src="' + url + '"></div></li>')
if (element.hazardous == 'no') {
$('.item-left').removeClass('hazardous')
}
});
$('.results').html(itemsHTML)
}
Instead of hardcoding the hazardous class in the first place, apply it conditionally before the markup is rendered to DOM:
function showProducts(items) {
var itemsHTML = [];
items.forEach(function(element) {
var classes = ['item-left', element.hazardous === 'no' ? '' : 'hazardous'].join(' ').trim()
var url = element.url ? element.url : 'http://placehold.it/100x100'
itemsHTML.push('<li><div class="' + classes + '" data-product-id="' + element.id + '"><p><span class = "prod-name">' +
'Product: ' + element.product + '</p></span><span class="prod-loc">' +
'Location: ' + element.location + '</span><span class="qty">' +
'Quantity: ' + element.quantity + '</span></div>' +
'<div class="item-right"><img src="' + url +
'"></div></li>')
});
$('.results').html(itemsHTML)
One of the problems you were facing was that you were trying to remove a class from a DOM element that didn't yet exist - at that point it was still a string.

Caret not shown in empty iframe

I am trying to implement my own rich text editor using iframe. However, whenver I click inside the empty rich text editor, the caret or mouse cursor doesn't show up. After checking on google, I found that we need to add some html to the iframe beforehand such as 'break tag. But my code below will only add the break tag to the first rich text editor and not to the second. Not sure what I am doing wrong here.......
$.fn.createRichTextEditor = function(width,height="auto") {
var iframeDocument;
var iframeDocumentId = this.attr("id") + "-rte-editor";
var newHtml = "<div id='rte-" + iframeDocumentId + "' class='rte'>" +
"<ul class='rte-toolbar'>" +
"<li id='bold'><button id='rte-boldBtn-" + iframeDocumentId + "' class='rte-button' value='bold' title='Bold'></button></li>" +
"<li id='italic'><button id='rte-italicBtn-" + iframeDocumentId + "' class='rte-button' value='italic' title='Italic'></button></li>" +
"<li id='underline'><button id='rte-underlineBtn-" + iframeDocumentId + "' class='rte-button' value='underline' title='Underline'></button></li>" +
"<li id='createLink'><button id='rte-createLinkBtn-" + iframeDocumentId + "' class='rte-button-link' value='createLink' title='Link'></button></li>" +
"<li id='unlink'><button id='rte-unlinkBtn-" + iframeDocumentId + "' class='rte-button-link' value='unlink' title='Unlink'></button></li>" +
"</ul>" +
"<iframe class='rte-iframe' id='" + iframeDocumentId + "' frameBorder='0'></iframe>" +
"</div>";
this.after(newHtml);
this.css('display', 'none');
var iframe = document.getElementById(iframeDocumentId);
var rte = iframe.parentElement;
$(rte).css('width', width);
$(rte).css('border', '1px solid #ccc');
$(iframe).on('load', function() {
$(iframe).width("100%");
$(iframe).height(height);
iframeDocument = iframe.contentDocument;
iframeDocument.designMode = 'On';
$(iframeDocument).find('body').html('<br><br/>');
});
};
You need to loop through each matching element in your plugin:
$.fn.createRichTextEditor = function (width, height) {
this.each(function () {
// Your code for each element here
});
});

Difference between executing in JS console and as script

I have a website with links, which should open a Lightbox (3rd party plugin Magnific Popup / jquery). After manipulating content on the site, i have to re-execute some Javascript of the Lightbox plugin, so that it recognizes the new links as links to lightboxes.
function loadLightbox() {
console.log("Lightbox start"); // for debugging
$('a.img').magnificPopup({
type: 'image',
closeOnContentClick: true,
closeBtnInside: false,
image: {
titleSrc: 'title_off',
markup:
'<div class="mfp-figure">' +
'<div class="mfp-close"></div>' +
'<div class="mfp-title"></div>' +
'<div class="mfp-img"></div>' +
'<div class="mfp-bottom-bar">' +
'<div class="mfp-counter"></div>' +
'</div>' +
'</div>' // Popup HTML markup. `.mfp-img` div will be replaced with img tag, `.mfp-close` by close button
}
});
console.log("Lightbox end"); // for debugging
}
I have a function, which manipulates the content on the page changeSuggestion(). Because I want to have the content changed every 6 secondes, I use the setInterval function.
setInterval(function () { changeSuggestion(); loadLightbox(); }, 6000);
My problem is, that it changes every 6s the content on the page, but the lightbox thing doesn't work (although the lightbox function produces output). But when I copy the loadLightbox() function into the firefox console and execute it, the lightbox in does work until it changes the content again. So my question is, what is the difference between executing via setInterval and executing in the Firefox javascript console?
Edit:
changeSuggestion: opens a JSON file, and produces html-formatted output, the page is manipulated by $("#blogSuggestion").html(result)
<!-- language: lang-js -->
function changeSuggestion() {
$.getJSON("blog/blog.json", function (data) {
var n = 0,
showId,
entry,
result;
$.each(data.blogentries, function (key, entry) {
if (entry.id > n) {
n = entry.id;
}
});
showId = randomIntFromInterval(0, n - 1);
if (data.blogentries[showId]) {
entry = data.blogentries[showId];
if (entry.type === "text") {
result = "<a class=\"" + entry.type + "\" title=\"" + entry.title + "\" href= \"#blogID" + entry.id + "\"><b>" + entry.title + "</b>";
} else {
result = "<a class=\"" + entry.type + "\" title=\"" + entry.title + "\" href= \"" + entry.source + "\"><b>" + entry.title + "</b>";
}
if (entry.content) {
result = result + "<br /><p>" + getExcerpt(entry.content, 20, '') + "</p><div id= \"blogID" + entry.id + "\" class=\"blogLightbox mfp-hide\"><img alt=\"" + entry.title + "\" src=\"" + entry.thumb + "\" ><div class=\"blogText\"><h3>" + entry.title + "</h3><p>" + entry.content + "</p></a></div></div>";
} else {
result = result + '<img alt=\"' + entry.title + '\" src=\"' + entry.thumb + '\"></a>';
}
$("#blogSuggestion").html(result);
} else {
console.log("Nothing with ID: " + showId);
}
});
Edit:
As its written in the comments, the content is changed asynchronously. If I put the asynchronously function into the body of changeSuggestion it works!

Categories