I'm trying to develop a collapsible list based on Google Inbox in Polymer.
I've created a list of polymer-elements, where each element is a paper-material with an iron-collapse inside.
The iron-collapse contains data and a couple of paper-buttons.
I need to show/hide the <iron-collapse> element, when clicking the parent paper-material.
This works really well, but unfortunately that event also fires after clicking a paper-button e.g. Send-Button inside the iron-collapse.
I tried adding event.stopPropagation() to the child's button handler, but the iron-collapse still collapses, when clicking the button.
Any ideas?
Code for parent container:
<paper-material id="papercontainer" elevation="1" class="container padded" animated style="border-radius:4px;">
<div class="container">
<div class="container flex-start-justified">
<div class="flexchild">
<h4 class="smaller-margin">Bill Gates</h4>
<p class="smaller-margin">bill#gates.com</p>
<p class="paper-font-caption smaller-margin">Date received: 01/01/2015</p>
</div>
<p>
<paper-button raised on-click="send">Send</paper-button>
</p>
</div>
<!--Code for iron-collapse (child): -->
<div class="container flex-horizontal">
<iron-collapse id="collapse" class="flexchild">
<div class="flexchild collapse-content" style="margin-top:10px;">
<paper-button>Edit Mail</paper-button>
</div>
</iron-collapse>
</div>
</div>
</paper-material>
Javascript:
Polymer({
is: 'zapytania-result-element2',
toggle: function() {
this.$.collapse.toggle();
},
listeners: {
'tap': 'regularTap'
},
regularTap: function(e) {
console.log('toggle iron-collapse');
if(this.$.collapse.opened) {
this.$.collapse.hide();
this.$.papercontainer.elevation = 1;
} else {
this.$.collapse.show();
this.$.papercontainer.elevation = 5;
}
},
send: function() {
sendMail();
}
}
I have followed the Events Tutorial from
https://www.polymer-project.org/1.0/docs/devguide/events.html
Per my understanding 'tap' makes the whole element listen for the tap event.
After removing that handler and assigning my own on-click event handler to the parent paper-material container and calling e.stopPropagation() at the end of my child's button event it works.
Related
<div class="first">First</div>
<div class="second">Second</div>
<div class="third">Third</div>
I am navigating the html with arrow keys(up, down) focus was going to each div element. I want to skip the focus of one div element in the html page
I tried with the below code
$('.second').onKeyDown= {e => {
if(e.key == "ArrowUp" || e.key == "ArrowDown") {
e.stopPropagation();
e.PreventDefault();
return false:
}
e.stopPropagation();
}}
not sure if that is what you want, but you can make elements unfocusable.
See here for refference: https://developer.mozilla.org/nl/docs/Web/HTML/Global_attributes/tabindex
<div class="first">First</div>
<div class="second" tabIndex="-1">Secoond</div>
<div class="third">Third</div>
Note that an element with a negative tabindex is still focusable, it just cannot be reached using sequential focus navigation (i.e. tabbing)
from: How to disable all div content
$("#mydiv").addClass("disabledbutton");
css
.disabledbutton {
pointer-events: none;
opacity: 0.4;
}
I want to add an overlay that slides into view on my page. To do it, I am setting the style.width of the div during overlay open and close. The problem is the div is controlled by a *ngIf, and is undefined when my .ts code sets the *ngIf true and tries to set the div's width.
How can I get this working?
Component HTML:
<div *ngIf="showOverlay === true">
<div id="myOverlay" class="overlay" style="margin-top: 25px;">
×
<div class="overlay-content">
Overlay is working!
</div>
</div>
</div>
<div *ngIf="showOverlay === false" id="content" style="padding: 30px;">
...
</div>
Component TS:
public showOverlayFcn() {
this.showOverlay = true;
this.openOverlay();
}
public openOverlay() {
document.getElementById("myOverlay").style.width = "100%";
}
public closeOverlay() {
document.getElementById("myOverlay").style.width = "0%";
}
Thanks! Bob
You could try using a conditional ngStyle attribute on the div with ID of myOverlay:
[ngStyle]="{'width': showOverlay ? '100%' : '0%'}"
Looks like you're not following the angular way. To get any element angular recommends to use #ViewChild. SO the proper way would be something like below:
<div *ngIf="showOverlay === true">
<div #myOverlay class="overlay" style="margin-top: 25px;">
×
<div class="overlay-content">
Overlay is working!
</div>
</div>
</div>
<div *ngIf="showOverlay === false" id="content" style="padding: 30px;">
...
</div>
And on your class file access it like this:
#ViewChild('myOverlay', { static: false }) myOverlay: ElementRef;
Even after this if you're not able to get the element then trigger a change detection like: this.changeDetectorRef.detectChanges();. Please remember to inject the ChangeDetectorRef in your constructor.
Try to use setTimeout function as there maybe delay to enable element by ngIf.
public openOverlay() {
setTimeout(function() {
document.getElementById("myOverlay").style.width = "100%";
}, 100);
}
I have the next html:
<a href="somelink" class="list-group-item">
Text
<div onclick="func()">Content</div>
</a>
But when I am clicking on my div a is getting an even too. How to prevent subsequent events? I wanna if the user has clicked my div then only this div would was clicked.
UPDATED
Maybe it's not an elegant solution but I have solved my problem so:
<button class="list-group-item" type="button" onlick="link('somelink')">
Text
<div onclick="func()">Content</div>
</button>
Although now it shows a focus highlighter and outline: none; didn't help to hide it.
With pure javascript (with event.preventDefault() to prevent the default action of the link):
<a href = "somelink">
Text
<div id="div">Content</div>
</a>
<br/>
<span id="result"></span>
<script>
document.getElementById("div").addEventListener("click", function(event){
event.preventDefault();
//you may also want to use event.stopPropagation() to stop the event bubbling down the DOM tree
myFunc();
});
function myFunc(){
document.getElementById("result").innerHTML = "Function myFunc called.";
}
</script>
just use the pointer-events property & preventDefault() function to ignore anchor tag:
$('.somelink').on('click', function(e){
e.preventDefault();
console.log(e.target);
})
.somelink{
pointer-events: none
}
.somelink > div {
pointer-events: all
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<a href"somelink">
Text
<div onclick="func()">Content</div>
</a>
Not sure if this is possible but I'm trying to display a div if another div which doesn't share the same parent is hovered.
The html looks something like this:
<div class="test">
<div class="hover-me"><p>Hover</p></div>
</div>
// some other content here
<div class="hover-content">
<p>hovered content</p>
</div>
I've tried using
.test:hover + .hover-content {
display: block;
}
But I think this only works if there's no other content in-between? Any suggestions?
Use javascript to listen to the onmouseover event, or jquery to handle the hover event on one and change the display attribute of the other. Using jquery
<script>
$(document).ready(function () {
$(".hover-me").hover(function () {
$(".hover-content").show();
}, function() {
$(".hover-content").hide();
});
});
</script>
If you don't want to use jquery, change your html like so
<div class="test">
<div class="hover-me"
onmouseover="document.getElementById('hover-content').style.display = 'block';"
onmouseout="document.getElementById('hover-content').style.display = 'none';">
<p>Hover</p></div>
</div>
// some other content here
<div class="hover-content" id="hover-content">
<p>hovered content</p>
</div>
notice that I added an id attribute to the hover-content div.
Try this, i think it will help you :
<script>
$(document).ready(function () {
$( ".hover-me" ).mouseenter( function () {
$( ".hover-content" ).show();
}).mouseout(function () {
/*anything you want when mouse leaves the div*/
} );
});
</script>
So you want to display the .hover-content when you hover the test. You can try the following solution. If it does not work, you gotta use javascript to check for the mouseover event. Hope it helps!
.test:hover ~ .hover-content {
display: block;
}
I have two divs div1 and div2. I want div2 to be automatically hidden but when i click on preview div then div2 to be made visible and div1 to hide. This is the code i tried but no luck :(
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("div2").hide();
$("#preview").click(function() {
$("#div1").hide();
$("#div2").show();
});
});
</script>
<div id="div1">
This is preview Div1. This is preview Div1.
</div>
<div id="div2">
This is preview Div2 to show after div 1 hides.
</div>
<div id="preview" style="color:#999999; font-size:14px">
PREVIEW
</div>
Make sure to watch your selectors. You appear to have forgotten the # for div2. Additionally, you can toggle the visibility of many elements at once with .toggle():
// Short-form of `document.ready`
$(function(){
$("#div2").hide();
$("#preview").on("click", function(){
$("#div1, #div2").toggle();
});
});
Demo: http://jsfiddle.net/dJg8N/
This is an easier way to do it. Hope this helps...
<script type="text/javascript">
$(document).ready(function () {
$("#preview").toggle(function() {
$("#div1").hide();
$("#div2").show();
}, function() {
$("#div1").show();
$("#div2").hide();
});
});
<div id="div1">
This is preview Div1. This is preview Div1.
</div>
<div id="div2" style="display:none;">
This is preview Div2 to show after div 1 hides.
</div>
<div id="preview" style="color:#999999; font-size:14px">
PREVIEW
</div>
If you want the div to be hidden on load, make the style display:none
Use toggle rather than click function.
Links:
JQuery Tutorials
http://docs.jquery.com/Main_Page
http://www.w3schools.com/jquery/default.asp (W3Schools)
http://thenewboston.org/list.php?cat=32 (Video Tutorials)
http://andreehansson.se/the-basics-of-jquery/ (Basic Tutorial)
JQuery References
http://api.jquery.com/
http://oscarotero.com/jquery/
You are missing # hash character before id selectors, this should work:
$(document).ready(function() {
$("#div2").hide();
$("#preview").click(function() {
$("#div1").hide();
$("#div2").show();
});
});
Learn More about jQuery ID Selectors
The second time you're referring to div2, you're not using the # id selector.
There's no element named div2.
$(document).ready(function() {
$('#div2').hide(0);
$('#preview').on('click', function() {
$('#div1').hide(300, function() { // first hide div1
// then show div2
$('#div2').show(300);
});
});
});
You missed # before div2
Working Sample
At first if you want to hide div element with id = "abc" on load and then toggle between hide and show using a button with id = "btn" then,
$(document).ready(function() {
$("#abc").hide();
$("#btn").click(function() {
$("#abc").toggle();
});
});