Call Javascript function when a div turns from visibility : hidden - javascript

I want to call a Javascript function when a div is turned from "visibilty : hidden" to "visibility : none;"
Also note that I don't have control over the script which turns this style property of the div. I just want to hook into this. Any possibilities? Or like onFocus() etc?
UPDATE : I do not want to use JQuery or other frameworks. Is it possible?

In mootools you can create custom events. However, I would do something like this:
document.getElementById('foo').triggerMyEvent = function() {
if (this.style.visibility == 'hidden') {
// do something
} else {
// do something else
}
}
And add a call to the object's 'triggerMyEvent' method in whatever code switches the object's visibility.

There's the propertychange event in IE that responds to changes in an element's properties, including properties of its style object. However, this only works on properties set directly on the element's style object and doesn't work for CSS changes (e.g. changing the class of the element's parent element) that indirectly affect the element's style. Using the DOMAttrModified in other browsers will work similarly and has the same shortcomings, so this may not be workable for you.

Related

Set Chart-click property of Angular chart

I would like to know that how I can set the chart-click property through java script for a given canvas element. I tried doing
angular.element(document.getElementById(id))[0].attributes[attributeName].value =value;
but of no help I guess.
I think I am missing something related to binding.
You can use the native addEventListener Property to programmatically add a click property to the DOM element. It can be done like so :
document.getElementById(id).addEventListener('click', function(){
//The function to be called on click
})
For more Info see here

Find list of all CSS class rules (from multiple stylesheets) and their active properties for the selected element

I need to get all the matched CSS Selectors for a selected element as well as get the properties of each class that are active for that element.
So far I have looked into getMatchedCSSRules and http://www.brothercake.com/site/resources/scripts/cssutilities/
I don't want to use the cssutilities library because it doesn't get updated if anything changes on the page inside the stylesheets through Javascript (it creates its own rules array which needs to be updated again and again after every change that occurs using Javascript in any of the style tags)
Basically, what I need is what getMatchedCSSRules returns in chrome but for each property in each rule, I need an extra property like "active" which tell whether the current property is active or is overridden by some other class.
It needs to work in Webkit and Firefox (I am using a polyfill for Gecko for getMatchedCSSRules)
Return should be like -
CSSRulesAffectingElement = {
rule : {
text:"<css rule's text>,
properties : {
property1:{value:<value>,status:<active,cancelled>}
}
}
}
Example - //when active fontsize is coming from some other rule
colorclass:
{
csstext:'background-color:red;font-size:12px',
properties:
{
Background-color:
{
value:'red',
status:'active'
},
Font-size:
{
value:'12px',
status:'cancelled'
}
}
}
I think it's impossible unless parsing actual CSS files. I was into that and found out that it was what less.js is doing.
You can check their code on git hub, maybe it helps:
https://github.com/less/less.js
After a lot of research and looking into LESS source as well as firebug, I realized that the quickest method was to use the library http://www.brothercake.com/site/resources/scripts/cssutilities/ and tweak its working to suit my needs..
The getCSSRules() method provides with all the css classes (including the inherited ones) and their properties that are affecting the element. It is an expensive method for sure but I was able to place it selectively in my application to fit the bill..

jQuery add class based on CSS characteristics

I am looking for a method with jQuery (or plain JS) in which to build a conditional on whether a div has a specific CSS characteristic.
For example, I want jQuery to add position:fixed to an element's CSS when another element is set to display:none, though change back to position:relative on the first element when the second element changes to display:block.
Any ideas?
If your change is event driven you just add the code to your event handlers
so if element one is made hidden by a click - make element 2 position fixed
$("#element_one").click(function(){
$("#element_one").hide();
$("#element_two").css({"position":"fixed"});
})
if you just want to watch elements you will need timers (although I cannot really imagine a scenario where you do not trigger the change by either an event of programaticaly)
watchInterval = setInterval("watchMe()",10)
function watchMe(){
if ($("element_one").is(":hidden") ) {
$("#element_two").css({"position":"fixed"});
}
}
$('#elOne').css('display') == 'none' ? $('#elAnother').css({'position':'fixed'}) : $('#elAnother').css({'position':'relative'});
Would that do the trick?
or perhaps :
$('#elOne').is(':hidden') ? $('#elAnother').css({'position':'fixed'}) : $('#elAnother').css({'position':'relative'});
There's not any nice way of doing this as you cannot "spy" on CSS changes, though jQuery does have a watch plugn which can monitor changes on certain properties. Your best bet is to use getComputedStyle which will get the real CSS values used for any object and act accordingly.

How to make style of an element dependent on another element's style

I need to set some special style for an element if some other element is visible (which is indicated by a special css class and can change dynamically). I need to do this because the page rendering and it's behavior is fully controlled by some framework's code and I don't want to change it. I can put any content anywhere in the body of the page. Is there a non-hacking way to do it?
My only idea was to use some plug-in like "watch" for jquery, but it's very ugly.
try using the properychange/attributemodified event
$("object-in-question").bind("DOMAttrModified propertychange", function(e) {
if($(this).is(":visible")).... etc
});
http://jsbin.com/abece4

jQuery Hide using ID

I'm trying to change the border color of an image using its id with jquery
( photo['id'] is passed in from a previous function )
the ids of the photos are of the form 'photo239839'
$('#photo'+photo['id']+'').click(function(){
$('#photo'+photo['id']+'').css('border-color','#777');
});
When I try to use this same code using its class it works,
but I can't use this method since there are multiple images on the same
page with the same class
$('img.flickr_photo').click(function() {
$("this.flickr_photo").css('border-color','#777');
});
This is what you need to do:
$('img.flickr_photo').click(function(){
$(this).css('border-color','#777');
});
I would always always add a css class rather than an inline style.
Much more maintainable and extensible.
Example:
$('img.flickr_photo').click(function(){
$(this).addClass('greyishBorder');
});
Either photo['id'] is wrong, or is changing after you set up the click handler.
To test for the first case, you can alert (or console.log with FireBug, or whatever) the length of the jQuery selection:
alert($('#photo'+photo['id']).length);
The solution in the second case is to use 'this'. In the click handler, 'this' is set to the element that caused the click event.
$('#photo'+photo['id']).click(function(){
$(this).css('border-color','#777');
});
Edit: #Dreas Grech is right, as long as you want to apply the behavior to all the elements with the flickr_photo class. If you can generalize the selector to select all the elements with a single query, it's better to do that.

Categories