Items inside flexbox not interactable - javascript

I have an interactive map generated using svg paths. Whenever I click a path, a container should appear containing some infos and links regarding that area.
The problem I have encountered is that nothing inside this container can be interacted with (ie. click links).
Items inside the container are generated using JS from a JSON file.
JSON reading works, although not over codepen, i dont know why (doesnt matter). You can see the code live here.
Here's my code: https://codepen.io/yasinibraim/pen/YzVVBMm
Short summary of the code:
SVG map inside svgContainer div
responsive info container inside containerInfo div
items inside containerInfo div generated inside clickUAT JS function. JSON fetched inside loadJSON function.
This is how i generate the content of containerInfo:
for (let i in actual_JSON){
if(actual_JSON[i].uat == caller){
if(firstItem == 1){
//newElement = document.createElement("ul");
}
header = document.createElement("p");
newElement = document.createTextNode (actual_JSON[i].title);
header.appendChild(newElement);
newElement = document.createElement ("a");
newElement.setAttribute('href',actual_JSON[i].link);
newElement.innerHTML = "Citește";
header.appendChild(newElement);
container.appendChild(header);
}
console.log(actual_JSON[i].Title);
}

Do you mean the links inside <div id="containerInfo" class="fadeIn"> when you click on a region?
This is because you have pointer-events: none; on the container, which will affect the children as well.
You either need to add pointer events to <a> element, or add pointer events back to #containerInfo when it becomes visible.

Related

Create html elements inside tooltip for a chrome extension

I want to create an HTML element (a div) using javascript to use that as a tooltip.
I can create the simple element by doing:
const element = document.createElement("div");
element.id = "myID"
and that works fine...however, I want to add a table (and some other HTML) inside the tooltip, so I was trying to do
element.appendChild(childElement); //where the childElement is another document.createElement("") that contains all the HTML I want.
or:
element.insertAdjacentHTML('afterbegin', '<table></table>');
however, nothing happens. there's no error, but it won't append it either. Am I missing something?
If it matters, this is happening inside the contentScripts.js of a chrome extension I'm building.
EDIT
Full code of div creation:
const element = document.createElement("div");
element.id = "tooltip-creation";
element.classList.add("tooltip");
const childElement = document.createElement("div");
childElement.id = "data";
//I've attempted to do .appendChild, innerHTML, and .insertAdjacentHTML (as can be seen here) and neither works but no error is given.
element.appendChild(childElement);
element.insertAdjacentHTML('afterbegin','<table border="1"><tr><td><strong>OMG</strong></td></tr></table>');
element.innerHTML = "<table border="1"><tr><td><strong>OMG</strong></td></tr></table>";
Separately I have 2 functions that do:
document.addEventListener("mouseover", function(e){
if (e.target.classList.contains("tooltip")) {
createTooltip(e);
}
});
document.addEventListener("mouseout", function(e){
if (e.target.classList.contains("tooltip")) {
removeAllTooltips();
}
});
I think your issue is that you're not actually appending the tooltip to anything. You need to append your element to a node that is already in the DOM. Here is a working example (without any CSS) that I got from your code, the only difference being that I appended the element node to an existing element in the DOM called root.
https://jsfiddle.net/irantwomiles/09o7vuj5/12/

Hide div inside (e.g. Twitter) shadow-dom with JavaScript

Using TamperMonkey to streamline page view on my side, and wish to hide part of the externally-sourced Twitter card(s) from printing. The image in the EmbeddedTweet does not print anyway, and leaves a large empty rectangle that wastes valuable space.
The DOM looks like the image below - how would I target the DIV with class SummaryCard-image (green arrow)? It doesn't matter to me if the DIV is removed from the DOM, or just hidden with CSS.
I have tried the below methods, which do not work:
(1) Injecting CSS with .SummaryCard-image{display:none !important;}
(2) jQuery: $('.SummaryCard-image').remove();
$('.SummaryCard-image').length returns 0
(Note the #shadow-root (open), 2nd element from the top)
You need to select the shadow root first inorder to traverse to that element. You need something like this
var twitterWidget= document.querySelector('twitterwidget').shadowRoot;
twitterWidget.querySelector('.SummaryCard-image').style.display = "none";
For multiple twitter widgets
var twitterWidgets = document.querySelectorAll('twitterwidget');
twitterWidgets.forEach(function(item){
var root = item.shadowRoot; root.querySelector('.SummaryCard-image').style.display = 'none';
})
Example
https://rawgit.com/ebidel/2d2bb0cdec3f2a16cf519dbaa791ce1b/raw/fancy-tabs-demo.html
var tabs= document.querySelector('fancy-tabs').shadowRoot
tabs.querySelector('#tabs').style.display = none

jQuery: inserting text into container div on hover

I'm using a simple jQuery image slider (Owl Carousel) to show a list of speakers at a convention with photos, and I'm trying to find a way to overlay text associated with each speaker onto a div placed above the slider. I have a mockup page here. As you can see on the mockup, I have two primary divs-- i.e. div#sit and div#carousel-sit; within the former I have an container with the class .sit-quote-container into which I'd like the quote text/markup injected. I would like this overlay text to pull from the paragraph elements with the .sit-quote class that exist for each speaker.
In addition to the problem of displaying the appropriate text within the container div, I'm seeing that placing the .sit-quote paragraph within each slide is causing a gap to appear under the speaker name (the grey box underneath) and I have no idea why this is happening given that I've set .sit-quote to display:none. I'm wondering if perhaps I need to move the elements containing the quotations out of the slider markup altogether (?)
As for the actual hover function, this is what I have so far, with the help of another SO user; but it doesn't seem to be working:
$(".slide-sit").hover(function() {
var clone = $(this).find(".sit-quote").clone();
clone.appendTo(".sit-quote-container");
}, function(){
$(".sit-quote-container").html(""); // this clears the content on mouseout
});
Ultimately, I'd like the quotes to fade in/out positioned within the main div. Thanks for any assistance, and please let me know if I need to provide further clarification as to the aim here.
you should first visible that quote
try this:
$(".slide-sit").hover(function() {
var clone = $(this).find(".sit-quote").clone();
clone.appendTo(".sit-quote-container").show(); // Here you should show the quote
}, function(){
$(".sit-quote-container").html("");
});
if you want to fade in:
$(".slide-sit").hover(function() {
var clone = $(this).find(".sit-quote").clone();
clone.appendTo(".sit-quote-container").fadeIn(); //Here if you want to fade the quote
}, function(){
$(".sit-quote-container").html("");
});
Use the below script to pull the text from .sit-quote p tag of the hovered item and display it in the .sit-quote-container
UPDATE
If needed wrap the quote in a para tag and to avoid complexity use a different class name, in this case .sit-quote_inner.
CSS : .sit-quote_inner{ display:none; }
JS
$('.sit-carousel-container .owl-item').hover(function(){
var quote = $(this).find('.sit-quote').text(); //Only text not the p tag
quote = '<p class="sit-quote_inner">' + quote + '</p>';
$('.sit-header .sit-quote-container').html(quote);
$('.sit-quote_inner').fadeIn(); //Add this
},function(){
$('.sit-header .sit-quote-container').html('');
});
The carousel seems to be dynamically injecting clones of the slides. In this case, you might want to delegate your event handler so that it works with the dynamically generated slides.
Also, if you want to fadeOut the text, you should remove it in the complete callback of fafeOut instead of simply emptying the html Try
$(document).on("mouseenter",".slide-sit",function() {
var clone = $(this).find(".sit-quote").clone();
clone.appendTo(".sit-quote-container").fadeIn("slow");
});
$(document).on("mouseleave",".slide-sit", function(){
$(".sit-quote-container")
.find(".sit-quote")
.fadeOut("slow",function(){ // Fadeout and then remove the text
$(this).remove();
})
});
The gap (grey background) is the background of .slide-sit, which is visible due to the margin-bottom: 15px; applied on the paragraph containing name (style rule .item p main.css line 67 it seems), removing this will fix the issue.
Update
It'd be better if you keep a .slide-sit inside the .sit-quote-container so that you can fade it in/out properly using the below script.
$(document).on("mouseenter",".sit-carousel-container .slide-sit",function() {
var content = $(this).find(".sit-quote").html();
(".sit-quote-container .sit-quote").html(content).fadeIn("slow");
});
$(document).on("mouseleave",".sit-carousel-container .slide-sit", function(){
$(".sit-quote-container").find(".sit-quote").fadeOut("slow")
});

How can I change css for every DOM object in the page in SAPUI5

I have a things inspector and this things inspector has two titles. I wan to be able to change the css on this titles and make their font size a bit smaller( default fontSize is 16px and I want to drop it to 12px). I tried to get these titles class and use this method to change their size:
var element = document
.getElementsByClassName("sapUiUx3TVTitleSecond")[1];
element.style.fontSize = '12px';
var element = document
.getElementsByClassName("sapUiUx3TVTitleFirst")[1];
element.style.fontSize = '12px';
it does work and I can see the change but as soon as the page finishes loading ( page loading takes couple of second because it needs to read a json object) title sizes go back to its default.
I dont even know this is a right way to access DOM elements and change their CSS.
Please point me to the right direction of how to change DOM object css in SAPUI5 in general
You could create a new CSS file which you include in your index.html.
Just add the needed selectors with the modified attributes in this custom CSS:
.sapUiUx3TVTitleSecond, .sapUiUx3TVTitleFirst {
font-size : 12px;
}
Edit: if you need to change it programmatically, you could use the addStyleClass("yourStyle") method which is available to every UI element
Execute the script after dom gets completely loaded. Try like this
$("document").ready(function()
{
var element = document
.getElementsByClassName("sapUiUx3TVTitleSecond")[1];
element.style.fontSize = '12px';
var element = document
.getElementsByClassName("sapUiUx3TVTitleFirst")[1];
element.style.fontSize = '12px';
})
$("document").ready(function()
{
$(".sapUiUx3TVTitleSecond").css("font-size","12px");
})

Javascript: Dynamic Generation of a Div

I have several vertically stacks divs and I want to have a div appear when I click a button within each of these divs. The div that I want to appear will be the exact same for each appearance with the exception of an id associating it with the outer div. How do I do this in Javascript?
I assume I should use the createElement() within Javascript, but how do I append it to the end of a specific element. Also, when creating an element, I have to hardcode the html in the Javascript file. Is there anyway to leave the element within the html design file. I want to seperate design from code as much as possible.
Clone Node
var clone = myDiv.cloneNode();
Example (live demo):
HTML
<div>
<input type="button" onclick="functionClone(this);" value="Dolly"/>
<input type="button" onclick="functionClone(this);" value="Dolly_1"/>
</div>
Javascript:
functionClone = function(subject){
var clonenode = subject.cloneNode(true);
subject.value = subject.value + '\'s been cloned!';
subject.disabled = true;
insertElementAfter(subject, clonenode);
}
insertElementAfter = function(subject, newElement){
subject.parentNode.insertBefore(newElement,subject.nextSibling);
}
To append an element below your div use this:
subject.parentNode.appendChild(clonenode)

Categories

Resources