So I have the below work-flow:
I've got a list of items each having an ng-click event which opens an iframe below the item clicked. Now,
On clicking an item of the list, a div tag below that item displays (initially hidden) which contains an iframe.
Now on clicking another item from the same list, another div tag displays below the recent item clicked, which in turn displays the iframe for the recently clicked item.
The issue that I'm facing is this -
On clicking an item of the list, if any div tag containing the iframe is currently open, it gets closed and the div tag along with the iframe of the recently clicked item displays.
Currently, if any iframe is open, on clicking an other item from the list, a new iframe of the recently clicked item opens along with the initial iframe still remaining open. The initial one getting closed only after I've clicked on it.
What shall I do?
PS: I hope the scenario is clear, let me know if further clarification is required.
Edit-
Posting a jsfiddle link is kinda tough as this question is a part of a huge folder I'm working on. But, I'll post the code here and hope that it will suffice.
HTML:
<div ng-repeat="data in JsonData">
<div class="row" ng-click="getGraph(data.id, $index)">
<div class="col-lg-6 text-left">
<span id="title">Title: {{data.name}}</span><br><br>
<span style="color: #000 !important">
<strong>Id:</strong> {{data.id}}
</span><br/><br>
</div>
<div class="col-lg-4 text-left" style="color: #000 !important;">
<span style="text-align: left; font-size: 13px;">
<strong>Details:</strong> {{data.details}}
</span><br/>
</div>
<div class="iframe col-lg-10 col-lg-offset-2">
<div class="ibox float-e-margins ibox_shadow">
<iframe style="width: 80%; height: 50%; id="targetframe" name="targetframe" allowTransparency="true" scrolling="no" frameborder="0" ng-src="{{graphUrl | trustAsResourceUrl}}">
</iframe>
</div>
</div>
</div>
</div>
And the controller.js code:
$scope.getGraph = function(d,i) {
$scope.graphUrl = 'http://server-url.com:8888/path/to/theGraph?id='+d;
var elem = document.getElementsByClassName(d);
$(elem).toggleClass('class_to_toggle_hide_show');
}
If you post the code it will clear it more. But in the ng-click event you can first say ng-click="youfunction($event)"
and
$scope.yourfunction = function(event){
$(even.target).find("iframe").remove();
//and then your other stuff here
}
Related
I have a function of code that loads a card with an iframe when a button is clicked. Here's a small snippet of it:
document.getElementById("apps").innerHTML += `
<div id="${appname}" class="app" style="display:block;">
<div id="${appname}header" class="card ${object[appname].color}" style="width: ${object[appname].cardw}; height: ${object[appname].cardh};">
<div class="card-content white-text">
<span class="card-title center black-text">${object[appname].name}</span>
<iframe id="${object[appname].repo}frame" src="custom/${object[appname].repo}/index.html" scrolling="no" style="width: ${object[appname].framew}; height: ${object[appname].frameh}; transform: scale(${object[appname].scale});
transform-origin: 0 0;"></iframe>
</div>
</div>
</div>
`;
The problem is, apps contains multiple iframes, and when i add a new one all the other ones reload. This is a very big deal, as i am using a text editor and i dont want it to reload. I'd prefer a simple solution, but i can be hacky too. How would I stop the iframe from reloaded when another iframe is added to the parent?
I've created some kind of notification div which contains notifications, it shows when user clicks on notification icon and I wanted to do something like if the user clicks somewhere where isn't part of this notification container the container will hide, with dropdown menu it works but with this div it isn't and I have no idea why... Someone could help? Someone have any idea what am I doing wrong?
This is container HTML:
<div class="notifications-container">
<div class="notifications-container-top-bar">
<span>Notyfications</span>
<div class="btns">
<div class="seenAll">
<img src="static/img/icons/checkedIcon.svg" alt="Seen all btn">
</div>
<div class="closeNotifications">
<img src="static/img/icons/menu/close.svg" alt="Close">
</div>
</div>
</div>
<div class="noNotif">
<p>No new notifications</p>
</div>
<div class="notifications-container-list">
// notification items here
</div>
<div class="notifications-container-bottom-bar">
<p id="loadMoreNotif">See more</p>
</div>
</div>
Default css for this container is display: none; and after user click on notifications icon its gets active class which contains display: block;
I need to remove the active class when user clicks somewhere where is not a part of notifications container, this is how my js looks like
const notifContainer = document.getElementsByClassName("notifications-container")[0];
openNotif.addEventListener("click", ()=>{ //it works
notifContainer.classList.add("active");
});
window.addEventListener('click', function(e) {
if (!notifContainer.contains(e.target)) {
notifContainer.classList.remove('active');
}
});
It doesn't work, after I added the window event listener the container won't open anymore.
Any ideas?
Your window click event is fired when you click openNotif, so what is going on is that the active class is being added and then removed. In the function removing the attribute you should check that event.target is not the element or selector firing the "show" action.
I'm working on portfolio items, where every item looks like this
<div class="item">
<div class="item-title"></div>
<div class="item-subtitle"></div>
<div class="item-image"></div>
<div class="item-site"></div>
</div>
Previous div is hidden and items are shown by this code
<a class="project" :href="`http://www.${item.site}`" >
So, if I put like "mysite.com" in item-site div and hover over item output is www.mysite.com and that is ok if item-site is not empty. But if that div is empty output is www. and I dont want that.Is there a way to prevent that?
How to dissable click if item-site class is empty, so if I click on it nothing happens, but if is not empty and has link then if I click it's opens that link in new window.
You can use the pointer-events: none CSS statement to disable the hover and click events on an element.
In your case, it might look something like this:
HTML:
<div class="item">
<div class="item-title"></div>
<div class="item-subtitle"></div>
<div class="item-image"></div>
<div class="item-site not-clickable"></div>
</div>
CSS:
.not-clickable{
pointer-events: none;
}
If the DOM element (in this case <div class="item-site"></div>) is empty, then add the class not-clickable. If the element has content, then remove the class not-clickable.
Please also note that <div> tags are not clickable by default. It sounds like you want these to be links which are <a> tags. Also, an <a> tag without the href attribute has no pointer events - so an alternative would be to provide the href when you want the element to be clickable, and remove it when you want the element to not be clickable.
<div class="item">
<div class="item-title"></div>
<div class="item-subtitle"></div>
<div class="item-image"></div>
<a class="item-site">I should not be clickable</a>
<a class="item-site" href="https://www.example.com" target="_blank">
I should be clickable, and I will also open in a new tab
</a>
</div>
Here is a pen that might explain further:
https://codepen.io/mikeabeln_nwea/pen/yZQLaj?editors=1111
On my React site, I have a profile/account dropdown (similar to Github's, where you click on your profile picture and a dropdown appears). On most browsers, it works correctly. When the div is clicked, it applies the dropdown--active class to itself. This dropdown--active class contains a rule for the child element, dropdown__content, to change its display from none to block, thereby toggling the display of the dropdown content on click.
Before click:
<div class="dropdown account-dropdown">
<a href="/#" class="dropdown__trigger ">
<span class="account-dropdown--name">admin</span>
</a>
<div class="dropdown__content">
<div class="account-dropdown--identity account-dropdown--segment">
Signed in as admin
</div>
</div>
</div>
After click:
<div class="dropdown dropdown--active account-dropdown">
<a href="/#" class="dropdown__trigger ">
<span class="account-dropdown--name">admin</span>
</a>
<div class="dropdown__content">
<div class="account-dropdown--identity account-dropdown--segment">
Signed in as admin
</div>
</div>
</div>
However, the only way I can get it to display in Microsoft Edge is to click some where else on the screen after I've already clicked the parent element. With Inspect Element open, I can tell that the class is in fact being applied immediately after click, but the child element is not redrawn/reevaluated until some where else on the screen is clicked. Alternatively, tabbing to the element and clicking "enter" does not cause this problem.
Works in Chrome, IE 11, Firefox fine though.
Did anyone knew how a tags in the browser are indexed?
I have in my html page 12 items wich are created with a tags, the problem is that when I want to focus the first tag with
document.getElementsByTagName("a")[0].focus(); the browser don't focus the first item! and if I just want to focus the third item by document.getElementsByTagName("a")[2].focus(); it focuses the item number 5.
I am wandering why I have this problem since in my page I have only the wanted items to be focused by a tags and the other html items are div and img tags!
Thanks a lot in advance for your help and reply :)
here is an exmaple of 2 items created in my html page:
<div id="carousel_items">
<div id="indicators" class="carousel-indicators" style="visibility: visible;">
<div id="nextBtn" class="right_indicator">
<img id="indicators_right" src="images/nextbtn.gif" style="width:45px;height:25px;">
</div>
</div>
<div id="div_slides" class="thumbnailList_slides">
<div class="div_vid">
<a id="btn0" class="btn_vid" href="#" onclick="javascript:activate('0');"> </a>
</div>
<div class="div_vid">
<a id="btn1" class="btn_vid" href="#" onclick="javascript:activate('1');"> </a>
</div>
</div>
Elements are returned in the order in which they appear in the DOM.
Various things can make that order different to the order you see them when viewing from left-right and top-bottom including:
text direction
float: right
CSS positioning
Flex order