Hey SplitV,
You mean a wordpress plugin?
Here is my code..
jQuery(window).load(function(){
jQuery('.border').each(addBorders);
function addBorders()
{
var img = jQuery(this);
var color = img.attr('data-color') || 'black', // This is the default color
thickness = img.attr('data-thickness') || 10, // This is the default thickness
opacity = img.attr('data-opacity') || 0.3; // This is the default opacity
// Here is a webkit hack to get correct dimensions
jQuery('img', this).removeAttr("width").removeAttr("height");
var width = jQuery('img', this).width();
var height = jQuery('img', this).height();
img.css('width', width);
img.css('height', height);
// And here we are inserting our borders and changing the dimensions as we go
img.append('<div class="image-border-top" style="background-color: '+ color +'; width: ' + (width - (thickness * 2)) + 'px; left: ' + thickness + 'px; height: ' + thickness+ 'px;"></div>');
img.append('<div class="image-border-bottom" style="background-color: '+ color +'; width: ' + (width - (thickness * 2)) + 'px; left: ' + thickness + 'px; height: ' + thickness+ 'px;"></div>');
img.append('<div class="image-border-left" style="background-color: '+ color +'; height: ' + height + 'px; width: ' + thickness + 'px;"></div>');
img.append('<div class="image-border-right" style="background-color: '+ color +'; height: ' + height + 'px; width: ' + thickness + 'px;"></div>');
jQuery('.image-border-top', this).css('opacity', opacity); jQuery('.image-border-bottom', this).css('opacity', opacity);
jQuery('.image-border-left', this).css('opacity', opacity); jQuery('.image-border-right', this).css('opacity', opacity);
// And finally when image is fully loaded we show it with the border
jQuery('img', this).show();
}
});
With mine you can set default thickness, color, and opacity and change them on an image by image basis by using HTML5 data attributes like so..
<div data-color="#000" data-thickness="20"></div>
Pretty useful eh? Send me your code, I’m kind of curious how you did it.
Well since you posted yours I will just post mine…lol.. I created mine as a jQuery plugin that you have to pass the options to and then absolutely position the divs over the elements.
(function($){
$.fn.sv_innerBorder = function(opts){
var defaults = {thickness: 6,color: '#555',opacity: '0.3'};
var settings = $.extend({}, defaults, opts);
this.each(function() {
var $this = $(this).offset();var h = $(this).height(); var w = $(this).width();
var divs = $('<div><div><div><div>').appendTo('body').css({
position:'absolute',padding:'0',margin:'0',
backgroundColor:settings.color,
opacity:settings.opacity
});
$(divs[0]).css({
width:settings.thickness+"px",
top: $this.top,
left: $this.left,
height:h
});
$(divs[1]).css({
width:settings.thickness+"px",
top: $this.top,
left: $this.left+w-settings.thickness,
height:h
});
$(divs[2]).css({
width:w-(settings.thickness*2),
top: $this.top,
left: ($this.left+settings.thickness)+"px",
height:settings.thickness+"px"
});
$(divs[3]).css({
width:w-(settings.thickness*2),
top: ($this.top+h-settings.thickness)+"px",
left: ($this.left+settings.thickness)+"px",
height:settings.thickness+"px"
});
});
return this;}
})(jQuery);
</div></div></div></div>
You would use it like this:
var options ={
thickness : 10,
color : '#ffffff',
opacity : '0.3'
}
$(Your selector). sv_innerBorder(options);
edit: the site is messing up the code a bit, I have uploaded it here… http://split-visionz.net/jquery.sv_innerBorder.js
And then if you wanted to overwrite the defaults for a class you would do.. $(’.class’).sv_innerBorder(‘10, ’#000’, ‘0.5’); etc etc?
I kind of like your approach better. 
The review queue for JavaScript has experienced some technical issues. Specifically, certain files aren’t appearing with the update. For example, Yeowza, your update has no files listed as updated (and yours isn’t alone). I can’t review an item without files to review. So the update queue is on hold at this time because the cause of this issue needs to be fixed.
Has this been fixed yet?
Has this been fixed yet?
A ticket was submitted, but that’s all I know at this time. I checked your update, and files are visible, so yours will get reviewed today.
would it be possible to get an email as the specific reason an item is held just to have a better idea if it’s something on my part. My latest item is held again just like my last two so far and usually i wait like 2 to 4 days and it gets approved without any changes i need to make.
So I’m kind of puzzled as to if it’s just me or this is more common.
would it be possible to get an email as the specific reason an item is held just to have a better idea if it’s something on my part. My latest item is held again just like my last two so far and usually i wait like 2 to 4 days and it gets approved without any changes i need to make. So I’m kind of puzzled as to if it’s just me or this is more common.
I sent you a message.
would it be possible to get an email as the specific reason an item is held just to have a better idea if it’s something on my part. My latest item is held again just like my last two so far and usually i wait like 2 to 4 days and it gets approved without any changes i need to make. So I’m kind of puzzled as to if it’s just me or this is more common.I’ll send you a message.
@jwmcpeak thanks for your hard work guys
…
would it be possible to get an email as the specific reason an item is held just to have a better idea if it’s something on my part. My latest item is held again just like my last two so far and usually i wait like 2 to 4 days and it gets approved without any changes i need to make. So I’m kind of puzzled as to if it’s just me or this is more common.I sent you a message.
thanks for getting back to me. really appreciate it.
So I’m kind of puzzled as to if it’s just me or this is more common.
thanks for getting back to me. really appreciate it.
No problemo. For the record, I don’t even look at names when reviewing unless I want to address the author personally. Everyone gets treated the same.
@jwmcpeak thanks for your hard work guys![]()
![]()
…
Thanks =) And you’re welcome.
