I made an if function to check if the width is < 100px. For some reason it hides everything. Anyone know why?
$(document).ready(function() {
var pic = $(".pic");
// need to remove these in of case img-element has set width and height
$(".pic").each(function() {
var $this = $(this);
$this.removeAttr("width");
$this.removeAttr("height");
var pic_real_width = $this.width();
var pic_real_height = $this.height();
if(pic_real_width<100){
$(this).css("display","none");
}
});
});
You're using pic when you should be using $(this):
$(".pic").each(function() {
var $this = $(this);
$this.removeAttr("width");
$this.removeAttr("height");
var pic_real_width = $this.width();
var pic_real_height = $this.height();
alert(pic_real_width);
});
You should also watch for images that are resized with CSS.
Instead of
$this.removeAttr("width");
$this.removeAttr("height");
try
$this.css({width: 'auto', height: 'auto'});
Try this:
$(document).ready(function() {
$(".pic").each(function() {
var pic = $( this );
pic.removeAttr("width");
pic.removeAttr("height");
var pic_real_width = pic.width();
var pic_real_height = pic.height();
alert(pic_real_width);
});
});
I tried every solutions here but none worked for me so I created my own script and it works in all browsers including IE. Heres my script:
$(function(){
var sbar = $(".sidebar").outerHeight(true);
var pcont = $(".post_content").outerHeight(true);
if(sbar < pcont){
$(".sidebar").css("min-height",pcont+"px");
}
});
/*** CSS ***/
.sidebar{
float:left;
min-height: 500px;
width:180px;
}
.post_content{
float:left;
min-height: 500px;
width:593px;
}
I hope this will work with you too!!
$this.css({width: 'auto', height: 'auto'});
try it
Related
Basically what I am trying to do is have images fill a div whilst maintaining their aspect ratio. So I am using jquery to identify whether they are portrait or landscape, and set either width or height from there.
My problem is the code gives all the images landscape class. I am at my wits end to know why...
Thank you!
HTML
<div class="prop">
<div class="propimage"><img src="{#image}" alt="{#prop_name}"></div>
<div class="propname">{#prop_name}</div>
<div class="propdescription">{#description}</div>
<div class="propprice">{#price}</div>
</div>
CSS
.portrait img {
width: 100%;
}
.landscape img {
height: 100%;
}
.propimage img {
display: block;
}
img {
max-width: none;
}
.propimage {
width: 100%;
height: 300px;
overflow: hidden;
float: left;
}
SCRIPT
<script>
$(".propimage").each(function(){
// Uncomment the following if you need to make this dynamic
//var refH = $(this).height();
//var refW = $(this).width();
//var refRatio = refW/refH;
// Hard coded value...
var refRatio = 240/300;
var imgH = $(this).children("img").height();
var imgW = $(this).children("img").width();
if ((imgW/imgH) < refRatio){
$(".propimage").addClass("portrait");
} else {
$(this).addClass("landscape");
}
})
</script>
Please upload You code on js fiddle or paste the link so we can see working example of your code. Meanwhile just try this code
<script>
$(".propimage").each(function(){
// Uncomment the following if you need to make this dynamic
//var refH = $(this).height();
//var refW = $(this).width();
//var refRatio = refW/refH;
// Hard coded value...
var refRatio = 240/300;
var imgH = $(this).children("img").height();
var imgW = $(this).children("img").width();
if (imgW=<200 || imgH<=300)){
$(this).children("img").css("width","100%");
$(this).css("width","100%");
} else {
$(this).children("img").css("height","100%");
$(this).css("height","100%");
}
})
</script>
I have a page wherein the background image for a particular div keeps changing dynamically. I wanna be able to give some transition effects on the images. The page runs on pure javascript. Here's my code:
var bgArray = ["images/1.jpg", "images/2.jpg", "images/3.jpg"];
var i = 0;
function myFunction() {
setInterval(function() {
if (i == 3) {
i = 0;
}
var urlString = bgArray[i];
var x = document.getElementById("myDiv");
x.style.background = "url(" + bgArray[i] + ") no-repeat";
x.style.backgroundSize = "1366px";
i = i + 1;
}, 6000);
}
myFunction();
Thank you.
#myDiv {
transition: background 1s;
}
HTML code
<div id = "myDiv"></div>
CSS code
#myDiv{
width: <yourDivWidth>;
height: <yourDivHeight>;
background-size: cover;
}
Javascript code
var box = document.getElementById("myDiv");
var imagesList = ["url('images/1.jpg')", "url('images/2.jpg')", "url('images/3.jpg')"];
i = 0;
box.style.backgroundImage = imagesList[i];
function nextImg(){
box.style.backgroundImage = imagesList[i+1];
//box.style.width = "1366px";
//box.style.height = "1366px";
//declare your width and height of div in css and give background-size: cover;.
i = i+1;
if(i == imagesList.length){
i = 0;
box.style.backgroundImage = imagesList[i];
}
}
window.onload = setInterval(nextImg, 6000);
Wait for 6 sec and see the background images changing.
If you want to set background image for the first 6sec also, then you can set that in your CSS.
Comment if u have any doubts.
I modified an MIT licensed Zoom Plugins to fit my needs and it works perfectly well. However, it came from a time before smartphones and tablets and I really want to support them.
I have built a jsFiddle to illustrate my case:
https://jsfiddle.net/xLr86bs8/
Neccessary code:
JavaScript:
(function($){
var defaults = {
cursorColor:'237,241,244',
cursorOpacity: 1,
//cursorBorder: '1px solid black',
//cursorBorderThickness: 1,
cursor:'pointer',
zoomviewsize: [0,0],
magnification: 5,
};
var minitraversalzoomCursor,minitraversalzoomView,minitraversalsettings,minitraversalImageWidth,minitraversalImageHeight,minitraversalOffset,minitraversalzoomimage;
var minitraversalMethods = {
init : function(options){
$this = $(this),
minitraversalzoomCursor = $('.minitraversalzoom-cursor'),
minitraversalzoomView = $('.minitraversalzoom-view'),
minitraversalzoomimage = $('#MiniTraversalZoomImage'),
// This makes the complete addon independent from the size of the zoomwindow
//defaults.zoomviewsize = [$('#RadialBox').width(),$('#RadialBox').height()];
$(document).on('mouseenter touchstart',$this.selector,function(e){
var data = $(this).data();
minitraversalsettings = $.extend({},defaults,options,data);
minitraversalOffset = $(this).offset();
minitraversalImageWidth = $(this).width();
minitraversalImageHeight = $(this).height();
minitraversalsettings.zoomviewsize = [$(this).parent().width(),$(this).parent().height()];
cursorSize = [(minitraversalsettings.zoomviewsize[0]/minitraversalsettings.magnification),(minitraversalsettings.zoomviewsize[1]/minitraversalsettings.magnification)];
$original = $(this);
minitraversalZoomSource = $(this).attr('data-minitraversalzoom');
minitraversalSource = $(this).attr('src');
var posX = e.pageX,posY = e.pageY,zoomViewPositionX;
$('body').prepend('<div class="minitraversalzoom-cursor"> </div>');
$('#MiniZoomBox').addClass('minitraversalzoom-view').prepend('<img id="MiniTraversalZoomImage" src="' + minitraversalZoomSource + '">');
$(minitraversalzoomView.selector).css({
'position':'relative',
'z-index': 7,
'overflow':'hidden',
});
$(minitraversalzoomView.selector).children('img[id="MiniTraversalZoomImage"]').css({
'position':'relative',
'width': minitraversalImageWidth*minitraversalsettings.magnification,
'height': minitraversalImageHeight*minitraversalsettings.magnification,
});
$(minitraversalzoomCursor.selector).css({
'position':'absolute',
'width':cursorSize[0],
'height':cursorSize[1],
'background-color':'rgb('+ minitraversalsettings.cursorColor +')',
'z-index': 7,
'opacity':minitraversalsettings.cursorOpacity,
'cursor':minitraversalsettings.cursor,
'border':minitraversalsettings.cursorBorder,
});
$(minitraversalzoomCursor.selector).css({'top':posY-(cursorSize[1]/2),'left':posX});
$(document).on('mousemove move',document.body,minitraversalMethods.cursorPos);
});
},
cursorPos:function(e){
var posX = e.pageX,posY = e.pageY;
if(posY < minitraversalOffset.top || posX < minitraversalOffset.left || posY > (minitraversalOffset.top+minitraversalImageHeight) || posX > (minitraversalOffset.left+minitraversalImageWidth)){
$(minitraversalzoomCursor.selector).remove();
$(minitraversalzoomimage.selector).remove();
//$(minitraversalzoomView.selector).empty();
//$('#ZoomImage').remove();
//$(this).siblings('img').remove();
//$('#RadialBox > img').remove();
//$('#MiniZoomBox > img[id!="TraversalZoomImage10x"]').remove();
$('#MiniZoomBox').removeClass('minitraversalzoom-view');//.append('<img data-minitraversalzoom="' + minitraversalZoomSource + '" src="' + minitraversalSource + '" class="minitraversalzoom">');
//$('#MiniZoomBox').empty().removeClass('minitraversalzoom-view').append('<img data-minitraversalzoom="' + minitraversalZoomSource + '" src="' + minitraversalSource + '" class="minitraversalzoom">');
//$('#RadialBox').removeClass('minitraversalzoom-view').prepend($original.prop('outerHTML'));
return;
}
if(posX-(cursorSize[0]/2) < minitraversalOffset.left){
posX = minitraversalOffset.left+(cursorSize[0]/2);
}else if(posX+(cursorSize[0]/2) > minitraversalOffset.left+minitraversalImageWidth){
posX = (minitraversalOffset.left+minitraversalImageWidth)-(cursorSize[0]/2);
}
if(posY-(cursorSize[1]/2) < minitraversalOffset.top){
posY = minitraversalOffset.top+(cursorSize[1]/2);
}else if(posY+(cursorSize[1]/2) > minitraversalOffset.top+minitraversalImageHeight){
posY = (minitraversalOffset.top+minitraversalImageHeight)-(cursorSize[1]/2);
}
$(minitraversalzoomCursor.selector).css({'top':posY-(cursorSize[1]/2),'left':posX-(cursorSize[0]/2)});
$(minitraversalzoomView.selector).children('img').css({'top':((minitraversalOffset.top-posY)+(cursorSize[1]/2))*minitraversalsettings.magnification,'left':((minitraversalOffset.left-posX)+(cursorSize[0]/2))*minitraversalsettings.magnification});
/*
$(minitraversalzoomCursor.selector).mouseleave(function(){
$(this).remove();
});*/
}
};
$.fn.minitraversalZoom = function(method){
if(minitraversalMethods[method]){
return minitraversalMethods[method].apply( this, Array.prototype.slice.call(arguments,1));
}else if( typeof method === 'object' || ! method ) {
return minitraversalMethods.init.apply(this,arguments);
}else{
$.error(method);
}
}
$(document).ready(function(){
$('[data-minitraversalzoom]').minitraversalZoom();
});
})(jQuery);
HTML:
<div class="ZoomWindow" id="MiniZoomBox"><img class="minitraversalzoom" data-minitraversalzoom="http://placekitten.com/234/351" src="http://placekitten.com/234/351"/></div>
<div class=""></div>
CSS:
.ZoomWindowContainer{
display: inline-block;
position: relative;
vertical-align: top;
}
.ZoomWindow{
/* display: inline-block;
*/ height: 351px;
width: 234px;
margin-top: 4px;
border: 1px solid #a3b7c7;
}
#MiniZoomBox > img.miniradialzoom, #MiniZoomBox > img.minitraversalzoom, #MiniZoomBox > img.minitangentialzoom{
height: 100%;
}
#MiniZoomBox{
background-color: #0072bd;
/*background: url("/css/styling/magnifier_background-gradient-right.png") repeat-y scroll 0% 0% transparent;*/
/* background: url('/css/styling/10x.png') #0072bd;
*/ background-size: 100%;
overflow: hidden;
}
Could somebody help me to tweek it, in order to make it work?
Update:
I implemented the jQuery.event.move plugin to get new options like movestart, move, etc… and with it, I could get my plugin to work correctly on touchscreens, however, scrolling does not work at all on the site now. So i solved one problem and got another one. Does anyone know, to fix either one of them?
Update Jan. 1st 2016:
I continued programming and this is still the last problem I am facing. Any help is welcomed here ;)
I was wondering if there's a jQuery function that do the same effect as this code without using jQuery UI?
$(selector).show('slide', { direction: 'right' }, 300);
No, but you can animate the element as you wish.
Here's a great tutorial
Here's a quick plugin that I came up with. It basically animates the width and opacity properties:
$.fn.slideRight = function(duration, callback) {
duration = duration || 300;
return this.each(function() {
var $this = $(this),
css = getInitialStyle($this);
$this
.css({width: 0, display: 'block'})
.animate(css, duration, callback);
});
function getInitialStyle($el){
var css = $el.data('initialStyle');
if(!css || !css.width || !css.opacity) {
var isHidden = $el.is(':hidden');
if(isHidden) $el.show();
css = {
width: $el.width(),
opacity: $el.css('opacity')
}
if(isHidden) $el.hide();
$el.data('initialStyle', css);
}
return css;
}
}
And here's the live demo.
How can I create an explosion of background in Timeline GreenSock GSAP Javascript http://www.greensock.com/? I searched but I cannot find a way. I am completely new to GSAP, & I have an urgent project, and it is hard for to me to create this effect.
Here is a sample of the effect that I need to implement:
Thanks in advance.
I solved the problem. It is not a perfect solution, but it works for my needs.
JavaScript:
function rand2Number(){
return Math.round(Math.random(1));
}
var rows = 10,
columns = 10,
cntPiecesBg = $('#cntPiecesBg'),
wWidth = $('.wrapper').outerWidth(),
wHeight = sectionHeight,
objWidth = wWidth/rows,
objHeight = wHeight/columns;
for(var i=0; i<rows*columns; i++){
var topIndex = Math.floor(i/rows),
leftIndex = i%rows;
var obj = $('<span></span>')
.css({
width:objWidth ,
height:objHeight,
top : objHeight*topIndex,
left: objWidth*leftIndex
});
cntPiecesBg.append(obj);
}
var pieces = cntPiecesBg.find('span'),
backgroundTl = new TimelineLite(),
nt = { signs:['-=','+='] };
pieces.each( function (){
var $this = $(this);
backgroundTl.insertMultiple([
TweenMax.staggerTo($this, 2, {css:{ top : nt.signs[rand2Number()] + (Math.random()*1500)+500 ,opacity:0} , ease:Power1.easeOut}),
TweenMax.staggerTo($this,2, {css:{ left : nt.signs[rand2Number()] + (Math.random()*1500)+500 ,opacity:0}, ease:Power1.easeOut} )
]);
}
)
CSS:
#cntPiecesBg span{
position:absolute;
display: block;
font-size: 0;
background-color: #313435;
}
`