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
Related
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.
The field Description is optional and only appears when the user clicks on the + Description button. However when another div is generated the code loses the focus of the element it should hide and the button doesn't work anymore.
<script>
$(document).ready(function(e){
$(document).on('click', '#hide-desc', function(e) {
$("#description").slideToggle();
});
});
</script>
I have a button to remove and add the following div:
<div class="item-wrapper">
<div class="item-inner-wrapper">
<!-- Among other stuff -->
<div id="description" class="item-child-desc">
{{ form }}
</div>
</div>
<div class="item-action-button">
<!-- Deletes item-wrapper and another button adds it -->
<a id="delete" href="#" class="button alt small special">Remove</a>
<a id="hide-desc" class="button alt small">+ Description</a>
</div>
</div>
I know the function must be able to identify which description I am talking about, but I don't know how to do that. I tried to get the parent div of the button and specify the div with method find() but I could not make it work.
I have the same problem happening with an autocomplete function. I believe I will get both working if I can figure out what I have to do.
Based on your comments, I assume your html sort of looks like this (note that we use .description rather than #description since those are not unique elements):
<div class="item-wrapper">
<div class="item-action-button">
<a id="delete" href="#" class="button alt small special">Remove</a>
<a id="hide-desc" class="button alt small">+ Description</a>
</div>
<div class="description" class="item-child-desc">
blergh
</div>
</div>
We just have to look for the parent .item-wrapper using e.target to reference the source of the event then search the child .description:
$(e.target).parents(".item-wrapper").find(".description").slideToggle();
Based on the sample html you've added, the following should also work without modification:
$(e.target).parents(".item-wrapper").find(".item-child-desc").slideToggle();
It's also possible to just use this:
$(this).parents(".item-wrapper").find(".item-child-desc").slideToggle();
In all cases, the crucial part is parents(".item-wrapper").
I'm not entirely certain of the question, but if my understanding is correct I believe I may have found a solution for you. Using jQuery Event Delegation, it's relatively simple!
Run this code snippet and see if I'm close to a solution:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item-action-button"> Remove
<a class="hide-desc button alt small">+ Description</a>
<div class="item-child-desc">{{ form }}</div>
</div>
<div class="item-action-button"> Remove
<a class="hide-desc button alt small">+ Description</a>
</div>
<div class="item-action-button"> Remove
<a class="hide-desc button alt small">+ Description</a>
<div class="item-child-desc">{{ form }}</div>
</div>
<div class="item-action-button"> Remove
<a class="hide-desc button alt small">+ Description</a>
</div>
<script>
$(document).ready(function (e) {
$(".item-action-button").on('click', '.hide-desc', function (e) {
$(e.delegateTarget).find(".item-child-desc").slideToggle();
});
});
</script>
<style>
.item-child-desc {
display: none;
}
</style>
The problem with using ids for event handling is that they are only ever registered with the last element with that matching id. If you want one event handler for all elements of a certain type, register an event handler with elements of a certain class or tag. You'd be doing yourself a disservice otherwise.
Hope this helps!
I've searched all over and I'm unable to get this to work. I've got a button which I want to use as the main control to load up a lightbox image.
Here is my HTML
<li class="span1">
<a href="https://farm4.static.flickr.com/3760/18492500814_4597807b9e_b.jpg" title="FLAG4_km003" class=" thumbnail" target="_blank" data-lightbox="lightbox">
<img alt="FLAG4_km003" src="https://farm4.static.flickr.com/3760/18492500814_4597807b9e_z.jpg">
</a>
<div class="hover-box">
<p>Title</p>
<button class="view box-button">Zoom</button>
<button class="request box-button">Request</button>
</div>
</li>
As you can see the required lightbox link is in place but I want to trigger the click of it when a user clicks on the 'Zoom' button.
Here is my jQuery which currently isn't working:
$(document).on('click', '.view', function(){
$(this).closest("li.span1 a").click();
});
closest doesn't work like that. It selects the first/closest matching parent of the element. You should at first select the closest li element and then select the child/descendant a element.
$(this).closest("li.span1").children('a').click();
You could also use the parent and siblings methods for selecting the target element:
$(this).parent("div.hover-box").siblings('a.thumbnail').click();
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
I am having the following HTML content to be displayed,
<html>
....
....
<body>
<div class="list-group search-results-container">
<a class="list-group-item" href="/raghav">
<div class="clearfix">
<a class="thumb avatar pull-left m-r">
<img src="/bff63a5c/916c/4d18/841c/58c88c56b65c_cropped.jpg">
</a>
<div class="clear">
<div class="m-t-xs"> Raghav G </div>
</div>
</div>
</a>
</div>
</body>
</html>
I have validated the HTML, doesn't seem to have any errors. But strangely, Chrome is rendering the HTML by closing the tag early as follows,
<div class="list-group search-results-container">
<a class="list-group-item" href="/raghav"></a>
<div class="clearfix">
<a class="thumb avatar pull-left m-r"></a>
<img src="/bff63a5c/916c/4d18/841c/58c88c56b65c_cropped.jpg">
<div class="clear">
<div class="m-t-xs"> Raghav G </div>
</div>
</div>
</div>
I have also troubleshooted for any misplacement of closing tags, but everything is properly closed. Chrome renders as this only inside that particular <div>
The HTML5 specification provides information on this:
"...there must be no interactive content descendant." source
"Interactive content" is described as follows:
"a, audio (if the controls attribute is present), button, details, embed, iframe, img (if the usemap attribute is present), input (if the type attribute is not in the hidden state), keygen, label, menu (if the type attribute is in the toolbar state), object (if the usemap attribute is present), select, textarea, video (if the controls attribute is present)" source
It is actually valid, then, for an a element to contain a div, so long as it contains none of the interactive elements described above. This is affirmed by the first link, where the following can be found:
The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links).