We Keep Coding

SVG Filters Turn Off My CSS Filters. Why?

Stepping through my page, this line of code turns off my SVG Filter:
if (document.getElementById("cPreview") != null) document.getElementById("cPreview").style.filter = "brightness(" + parseInt(percentB) + "%)" + " contrast(" + parseInt(percentC) + "%)" + " saturate(" + parseInt(percentS) + "%)";
If I add SVG code to that, my CSS Filters are turned off:
if (document.getElementById("cPreview") != null) document.getElementById("cPreview").style.filter = svgCOLOR + "brightness(" + parseInt(percentB) + "%)" + " contrast(" + parseInt(percentC) + "%)" + " saturate(" + parseInt(percentS) + "%)";
How do I code that so the SVG Filter and the CSS Filters play nicely together?
Thank you
Someone asked for an example. Here is the original image:
Here is the image with the CSS Filters applied:
Here is the image with the SVG Filter applied:
Here is the image with all filters applied. I had to make this in a photo editor because that one line of code isn't working. It all comes down to that one line of code posted above. I can make CSS work, or make SVG work, but I cannot make both work together. Thank you

jquery get inner width returns different values

I am trying to get inner width of a div using jquery. The code I used to do so is as below
$(document).ready(function(){
console.log("width : "+$("div").innerWidth());
}
But the code returns different values every time I refresh the page. Sometimes it returns 971 and sometimes it returns 1336,The actual width I have set to that particular division in CSS style sheet is 800px. Can anybody please tell me What's wrong in my code? and how can I get the right innerwidth?
Note: I need innerwidth to make a division responsive. I am displaying a chart in that division and I want my chart to be responsive.

add ); to your script end.
$(document).ready(function(){
console.log("width : "+$(".div").innerWidth());
});
.div{width:800px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div">dghgdh</div>

$(document).ready(function() {
var select = $('div');
console.log('innerWidth: ' + select.innerWidth(), 'innerHeight: ' + select.innerHeight());
console.log('clientWidth: ' + select[0].clientWidth, 'clientHeight: ' + select[0].clientHeight);
console.log('offsetWidth: ' + select[0].offsetWidth, 'offsetHeight: ' + select[0].offsetHeight);
console.log('width: ' + select.width(), 'height: ' + select.width());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Hello World!</div>

i think your problem is scroll bar.You can try it
window.innerWidth: with scrollbar
$(window).width(): without scrollbar

getting top and left position of colorbox at runtime

Been trying to get the top and left coordinates colorbox loaded content, but I keep getting either 0 or auto.
I'm executing the following in onComplete callback:
var cboxLeft = $('#cboxContent').css('left');//.position().left;
var cboxTop = $('#cboxContent').css('top');//.position().top;
console.log( 'cboxLeft: ' + cboxLeft + ' cboxTop: ' + cboxTop );
Right now console gives me: cboxLeft: 0px cboxTop: 0px
What I'm really after is appending custom close button to BODY. I need it accessible outside the cboxLoaded* area and visible. Hence trying to get position of content once colorbox is done with it.

.css() will not return these properties. You'll have to use .offset() instead.
So the code should look like:
var cboxLeft = $('#cboxContent').offset().left;
var cboxTop = $('#cboxContent').offset().top;
console.log( 'cboxLeft: ' + cboxLeft + ' cboxTop: ' + cboxTop );
Note: This gives the position relative to the document. If you want where it is on the current viewport (current view of the browser window), you might want to subtract window.scrollX and window.scrollY respectively.

scripting in css with some creativity

I found the following creative accepted answer
jQuery('.get-close-to').hover(function() {
var offset = jQuery(this).css('offset');
alert( 'Left: ' + offset.left + '\nTop: ' + offset.top );
});
I wanted to know how .css('offset') is working so I made a jsfiddle but it's alerting "undefined".
Can anyone describes about this, working and is correct way?
Comment:
I know to use .offset() but I don't mean to use this, but my question regards how the accepted answer's code is working ....... with .css('offset')? That's all.

There's no offset property in CSS. with jQuery.css(propertyName) you can only access properties that exist. Everything else will return null.
for example:
jQuery.css('myImaginativePropertyname'); // returns null
jQuery.css('border'); // would return '0px none rgb(0, 0, 0)'
However
You can access the event.target (DOM element) like this:
jQuery('.get-close-to').hover(function(e) {
var elem = e.target;
alert( 'Left: ' + elem.offsetLeft + '\nTop: ' + elem.offsetTop );
}, function(e){});
I added the second function so that the code won't be executed twice. If you have only single function as input on jQuery.hover(), it will execute both in hover and blur. If you add a second function as a parameter, the first one will be executed on hover, while the second will be executed on blur of the element.
Here's the fiddle: http://jsfiddle.net/JLAK4/2/
Some people may argue to use jQuery(this).offset() instead, but why waste cpu cycles for yet another method call while you already have your DOM element populated and at your disposal? jQuery is a nice compatibility layer, I give you that. But abusing and overusing it makes no sense at all.

Do you want to be using .offset() instead?
jQuery('.get-close-to').hover(function() {
var offset = jQuery(this).offset();
alert( 'Left: ' + offset.left + '\nTop: ' + offset.top );
});

Try this:
jQuery('.get-close-to').hover(function() {
var offset = jQuery(this).offset();
alert( 'Left: ' + offset.left + '\nTop: ' + offset.top );
});

I think he wanted to say like this: working fiddle
jQuery('.get-close-to').hover(function() {
var offset = jQuery(this).offset();
alert( 'Left: ' + offset.left + '\nTop: ' + offset.top );
});
But mistakenly he has typed .css('offset') may be.

jQuery(1.6.4) using append() to add anchor does not work in IE

I am really having trouble using the append() function with IE.
What I am trying to do is the following:
Append anchor tag to the body element
Bind a modalwindow plugin to the anchor tag
Fire the click event on the anchor tag to open the modal window
Remove the anchor tag afterwards
if($('a#' + id).length == 0){
$('body').append('<a id=\"' + id + '\" href=\"' + gJsAppBasePath + url + '\" class=\"iframe\" title=\"' + title + '\"><\a>');
$('a#' + id).fancybox({
'hideOnContentClick': false,
width: width,
height: height
});
}
$('a#' + id).click();
$('a#' + id).remove();
As expected it works fine in Chrome, FF and Opera, but it doesn't in IE.
What I have already tried to solve this issue:
Mess around with the apostrophs and quotations
Simplify the anchor tag to minimum <a href="../index.html> </a>
Try the same with another tag <h2>BlaBla</h2>
The anchor tag never is initialized to a proper jQuery object.
The h2 tag is, but it won't be shown on the page.
I have found a workaround to hardcode the anchor tag and modify the attributes, but this is not really what I want.
Any ideas are very much appreciated.
Thank you in advance,
Sebastian

I would expect your code to look more like this:
var anchor = $('#' + id);
if(anchor.length === 0){
anchor = $('<a id=\"' + id + '\" href=\"' + gJsAppBasePath + url + '\" class=\"iframe\" title=\"' + title + '\"><\a>');
$('body').append( anchor );
anchor.fancybox({
'hideOnContentClick': false,
width: width,
height: height
});
}
anchor.click().remove();
Using selectors like element#id are a lot slower than just doing #id. Plus in certain versions of IE, it seems to have issues.
Also $('a#' + id) is expensive and you do it multiple times. There is no need to do it time and time again. You just need to do it once and reuse it wither by variables or chaining.