I want to have a div that is set to transition in height when the button inside it has been clicked & transition back down when the button is clicked again.
It has a child div that has a delayed transition in height after the button has been clicked. I've tried it with hover but how can I accomplish that with the click event?
Also, after both divs are at their full height, how can I make the child div transition back down before the parent div does?
If you can do it with :hover, and want to do it with a click event, use the selector :active - its the proper CSS selector for click events.
If you want it to change actions based on a button click, you might have to use javascript, as I don't know any way to do this with pure css. I've included code in a fiddle I found and modified for you.
JS Fiddle demo
$(document).ready(function() {
var $dscr = $('.description'),
$switch = $('.toggle-link'),
$initHeight = 40; // Initial height
$dscr.each(function() {
$.data(this, "realHeight", $(this).height()); // Create new property realHeight
}).css({ overflow: "hidden", height: $initHeight + 'px' });
$switch.toggle(function() {
$dscr.animate({ height: $dscr.data("realHeight") }, 600);
$switch.html("<button>-</button>");
}, function() {
$dscr.animate({ height: $initHeight}, 600);
$switch.html("<button>+</button>");
});
});
Related
I wanted to have one element highlight either when it gets hovered, or some other element is also hovered. Yet the code i've written to achieve this seems to override the hover pseudo-class whenever it gets run. I can't seem to see why -- minimal example in this fiddle: https://jsfiddle.net/mLynfz3x/
As soon as the second element gets hovered, the hover pseudo class for the first one is removed, and I'm not sure why. Is it intended that the jQuery .css() function override pseudo-classes? Or is the issue something else that I've missed entirely
Thank you!
The set Color for the Element Testlink doesnt disable the hover-pseudo class, the fixed color for that element is just, lets say "higher priority". So all you gotta do to fix it is add:
#testLink:hover {
color: olive !important;
}
and it should work with your existing JQuery.
This is what I did
$("#aTestItem").hover(() => {
$("#testLink").css("color", "olive");
}, () => {
$("#testLink").css("color", "black");
});
$("#testLink").hover(() => {
$("#testLink").css("color", "olive");
}, () => {
$("#testLink").css("color", "black");
});
When using ng-hide or ng-show directives a .ng-class is added or removed so DOM elements are visible or not.
However they kinda get positional "removed" as for example, hiding or showing two continous div elements one on top of the other.
<div ng-show="condition1">First div</div>
<div ng-show="condition2">Second div</div>
So, if condition1 evaluates to false first div will be hidden BUT second div will take the position which the just hidden div took.
How can I avoid that? I only want DOM elements to be invisible but not to get somehow removed.
First workaround.
I tried to overried .ng-hide class and getting a secondary class, only-hide, for elements on which I wanted this effect:
.ng-hide.only-hide {
visibility: hidden !important;
}
But didn't get results so far.
I achieved it with this second class approach by setting:
.ng-hide.only-hide {
visibility: hidden !important;
display: block !important;
}
As Angular sets .ng-hide with display:none, I make it invisible but present setting display:block.
To preserve and maintain the space occuped by the div you can't use directly ng-hide or ng-show.
You can use the ng-style directive as following:
<div ng-style="conditionHide1">First div</div>
<div ng-style="conditionHide2">Second div</div>
then your conditionHide1 and conditionHide2 should be like
if (condition1)
$scope.conditionHide1= {'visibility': 'hidden'}; // then div1 will hidden.
else
$scope.conditionHide1= {'visibility': 'visible'}; // then div1 will visible.
if (condition2)
$scope.conditionHide2= {'visibility': 'hidden'}; // then div2 will hidden.
else
$scope.conditionHide2= {'visibility': 'visible'}; // then div2 will visible.
You can change the visibility of the button by changing the $scope.conditionHide1 and $scope.conditionHide2 according to your conditions.
Solution2 by using a custom directive:
Create a new directive named condition and relative to an Attribute. Set-up a watch to watch the value of the attribute and, based on the value, set to the element (in this case the div) an appropriate css style. The value is mapped to the variable showDiv which change his value by clicking on the button. Clicking on the button, the value showDiv became the opposite !showDiv and the watch change the visibility from visible to hidden and vice-versa.
angular.module('MyModule', [])
.directive('condition', function() {
return {
restrict: 'A',
link: function(scope, element, attributes) {
scope.$watch(attributes.condition, function(value){
element.css('visibility', value ? 'visible' : 'hidden');
});
}
};
})
.controller('MyController', function($scope) {
$scope.showDiv = true;
});
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='MyModule' ng-controller='MyController'>
<div condition='showDiv'>Div visible/invisible</div>
<button ng-click='showDiv = !showDiv'>Hide div or show it</button>
</div>
I have a main div (parent) with a input (child) and 2 other child div (clickable).
I want to capture focus out event for the main div - not when input or other 2 clickable div are clicked or focused. I have set up an event handler using jQuery to capture focusin focusout events on all the elements.
What I see is when I click on the input:
first input is focused
then the main div.
If I click on any other clickable divs
event fires first focusout for input
then main div and then other div gets focus in and main div get focusin.
I don't want main div to loose focus when clicked on other clickable divs.
How can I achieve this? I want to validate the input on lose focus but not when clicked other divs.
So far this is what I have : Fiddle
HTML :
<div id="main">
<input id="i" type="text" />
<div id="Div2" class="icons" style="background-color:blue; right: 25px;" onclick="log('Clear Clicked');"></div>
<div id="Div1" class="icons" style="background-color:red;" onclick="log('DD Clicked');"></div>
</div>
CSS :
* {
-webkit-box-sizing: border-box;
/* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;
/* Firefox, other Gecko */
box-sizing: border-box;
/* Opera/IE 8+ */
}
#main {
top: 50px;
left: 200px;
position: absolute;
border: 1px solid #00bfff;
width: 250px;
height: 27px;
}
input {
border: none;
width: 248px;
height: 25px;
position: absolute;
z-index: 200;
}
.icons {
text-align:center;
border:1px solid blue;
height: 23px;
width: 23px;
position: absolute;
top: 2px;
right: 2px;
z-index: 99999999999999999999999;
background-position: center;
background-repeat: no-repeat;
}
jQuery :
$("#main").focusin(function () {
log("Main div got focused");
});
$("#i").focusin(function () {
log("input got focused");
});
$("#Div2").focusin(function () {
log("dropdown div got focused");
});
$("#Div1").focusin(function () {
log("clear div got focused");
});
$("#main").focusout(function () {
log("Main div lost focused");
});
$("#i").focusout(function () {
log("input lost focused");
});
$("#Div2").focusout(function () {
log("dropdown div lost focused");
});
$("#Div1").focusout(function () {
log("clear div lost focused");
});
function log(msg) {
//window.console.log(msg);
$("body").append("<p>" + msg + "</p>");
}
Any help or guidance appreciated
Here is a best way to solve, because I had the same problem too ^_^
There is a attr of event: "relatedTarget"
relatedTarget will provide the next element of this event
So, if next element is not your box OR anything inside your box, trigger focus out.
But FIRST you have to let your <div> element focusable, you have to add tabindex='-1' on div like this
<div id="main" tabindex='-1'>
the script is short:
$("#main, #main *").blur(function(e){
if(!$(e.relatedTarget).is("#main, #main *")){
//focus out.
}
});
The focus will lost and get inside #main, but you can do anything when the focus is lost from #main area.
This is a little different to your request, but I guess this may be what you want.
If this is, the code would be very clean.
Based on this accepted answer Is there a way to use event.preventDefault with focusOut? If not, why?
$(document).on('mousedown', function (event) {
target = event.target;
main = document.getElementById("main");
input = document.getElementById("i");
if (target == input) return true;
parent = event.target.parentNode;
if (parent == main) {
event.preventDefault(); //prevent default DOM action
event.stopPropagation(); //stop bubbling
return false; // return
}
});
OK, so it looks like you are constructing some sort of input widget. I see that the #main div is the outer container of the widget, the input is for entering text, and then you have two other divs serving as buttons or something. You want to validate the value of the input when the user tries to exit the widget, and you are trying to capture this event by listening for focusout on #main. This won't work because a div isn't an element that can receive focus. See the answer here for more.
I can prove to you that your div isn't focusable with a little experiment:
If you put e.stopPropagation() in both your focusin and focusout listeners for your input, you'll see that your main div is never actually focused or unfocused itself; it was just receiving the focusin and focusup events as they bubbled up the DOM tree from your input.
So, this means we have to tackle your problem from another angle.
Let's describe what it means for your widget to lose focus with a short user story:
User clicks on the input/#main/#Div1/#Div2 -- widget gains focus
User clicks on input (if he/she hasn't already) and types some text -- widget focus is not lost
User clicks somewhere on #main -- widget focus is not lost
User clicks #Div1 and then #Div2 -- widget focus is not lost
User clicks somewhere else on the page -- widget focus is lost -> validation runs
We now know exactly which events during which states should cause validation to run.
First, let's keep track of the 'focus' state of the widget with a boolean variable:
var isFocused = false;
The widget starts out in the unfocused state and becomes focused when there is a click anywhere in #main or its children OR when the input is somehow focused (could be via tabbed-into with the keyboard):
$("#main").on('click',function(){
isFocused = true;
});
$("#i").on('focus',function(){
isFocused = true;
});
The only time the widget becomes unfocused is when a) it's focused and b) the user clicks somewhere else on the page:
$(document).on('click',function(){
if(isFocused){
isFocused = false;
//kick-off the validation check!
}
});
But since all events bubble-up the DOM tree by default, multiple clicks within #main will bubble up to document.body and trigger a validation check. To prevent this, we call stopPropagation on the click event in the #main's click handler:
$("#main").on('click',function(e){
isFocused = true;
e.stopPropagation();
});
That's it!
I hope I was correct about what you're after.
Here's a working fiddle with above code.
Here is simple way to do it (As far as i understood)
$('#Div1').click(function(){
log('Clear Clicked');
//$('#main').focusin();
$('#i').focus();
});
$('#Div2').click(function(){
log('DD Clicked');
//$('#main').focusin();
$('#i').focus();
});
here is fiddle
The other way to workaround is to add a small setTimeout before running focusout handler.
You can easily whitelist a list of elements to exclude with and clearTimeout when they get focusin.
I'm using <a href> element along with :target css selector to show a <div> which by default is set to display:none. Problem is, that when I click on the link to show that <div>, it is automatically scrolling down my site towards that <div>.
Is there a way to stop the screen movement?
Unfortunately I am not yet proficient in anything besides CSS and HTML.
You can use event.preventDefault() to avoid this. Something like this:
$('a.yourclass').click(function(e)
{
//your code
e.preventDefault();
});
OR:
link
in the link enter:
Link here
You'll need JS anyway:
// (in jQuery)
$el.on('click', function(e) {
// find current scroll position
var pos = document.body.scrollTop || document.documentElement.scrollTop;
// let normal action propagate etc
// in the next available frame (async, hence setTimeout), reset scroll posiion
setTimeout(function() {
window.scrollTo(0, pos);
}, 1);
})
I don't know if this will flicker the screen. It might. It's a horrible hack either way.
In my Chrome, there's no flicker: http://jsfiddle.net/rudiedirkx/LEwNd/1/show/
There are two ways to tell the browser we don't want it to act:
The main way is to use the event object. There's a method
event.preventDefault().
If the handler is assigned using on (not by
addEventListener), then we can just return false from it.
Example:
Click here
or
here
This is a bit of a hack but you could use a basic css work around:
CSS only Example
#div1 {
height: 0;
overflow:hidden;
}
#div1:target {
height: auto;
margin-top: -110px;
padding-top: 110px;
}
#div2 {
background:red;
}
Click to show
<div id="div1">
<div id="div2">Content</div>
</div>
If you need it to be a little more flexible you can add some js...
More Flexible Example with JS
$('a').click(function () {
$('#div1').css({
'margin-top': 0 - $('#div1').position().top + $(window).scrollTop(),
'padding-top': $('#div1').position().top - $(window).scrollTop()
});
});
Basically you're pulling the top of div1 up with the negative margin and then pushing div2 back down with the padding, so that the top of div1 rests at the top of the window... Like I said its a hack but it does the trick.
Those links are anchor-links and by default made for those jumps :) You could use JS to prevent the default behaviour in some way. For example using jQuery:
$('a').click(function(e){e.preventDefault();});
or by default add return false; to the links
Avoid using :target all together and just use onclick event.
function myFunction()
{
document.getElementById('hiddenDiv').style.display = 'block';
return false;
}
I have a page with divs that are draggable and droppable. Each div contains nested divs that are also draggable. I want to be able to drag nested divs from div 1 and drop them on div 2 and also the other way around. The jsfiddle where I try to do that is at this link http://jsfiddle.net/fWhDn/
If I move the msn.com link (draggable div) from div 2 to div 1, it isn't dropped into that div. What do must I fix to get the right behavior, i.e. where that link becomes part of div 1?
To get this to work you have to append the draggable div to the respective droppable div. You can do this through the drop event inside the droppable init. I set it up for each droppable div in order to get access to the $(this). It's also important to reset the css of the item as if not it will carry over the position it had when you were dragging it. The following is what I added:
$( "#editdiv .droppable" ).droppable({
drop: function( event, ui ) {
var $item = ui.draggable;
$item.fadeOut(function() {
$item.css( {"left":"", "top":"", "bottom":"", "right":"" }).fadeIn();
});
$item.appendTo( this );
}
});
$( "#editdiv_ .droppable" ).droppable({
drop: function( event, ui ) {
var $item = ui.draggable;
$item.fadeOut(function() {
$item.css( {"left":"", "top":"", "bottom":"", "right":"" }).fadeIn();
});
$item.appendTo( this );
}
});
And here's the updated fiddle: http://jsfiddle.net/TpbZk/