I actually know how to fluid an image with responsive design. But, my problem is not simple. I using scale width function of parent div to append width of image like that :
function OnImageLoad(evt){somthing....}
<div class="parent">
<img style="left: 0px; top: -20px;" onload="OnImageLoad(event);" src="http://4.bp.blogspot.com/-pHWQ1Wp63GQ/Uk3TJLa9FbI/AAAAAAAAACg/_JUXOxweYY8/s1600/edu2.jpg" width="270" height="175">
</div>
Now, I want run event on image onload="OnImageLoad(envent);" again if window resizing
$(window).resize(function(){ ??? });
Help me to fix it. Thanks for your help.
I would give the images a special class (if not all need to be triggered).
(Use a timer in the resize function to support browsers from triggering it multiple times.)
$(window).resize(function(){
//get the function out of the onload attribute
var onloadFunction = $("img.[specialclass]").attr("onload");
//Execute it
eval(onloadFunction);
});
But on the other hand if you only want to scale the images.
The ratio keeps the same in this example by the padding-bottom.
img{
width:100%;
height:0;
padding-bottom:66%;
}
Related
I have used a plugin to have two images with a slider ontop to show the new and old... Please see link:- http://www.project-progress.co.uk/test/Compare-Two-Images-With-Smooth-Slider/index.html
I am however struggling to fit the play button completely central to the white bar that moves, this is the code I am using for it:-
.js-slider-last-container:after {
background-color: #fff;
content: url(../play.png);
height: 100%;
position: absolute;
width: 5px;
z-index: 1;
}
Has anyone got any ideas?
Thanks!
Scott
Currently your css may not solve your issue. But I have an idea. You need to create image element on ".js-slider-container" div element as like before/after button. Now you need to dynamically move that image as ".js-slider-last-container" width value is change.
I will show algorithm
HTML
<div class="wrap">
<div class="js-slider-container">
<img src="http://www.project-progress.co.uk/test/Compare-Two-Images-With-Smooth-Slider/play.png" id="arrow" />
<div class="before">Before</div>
<img src="http://www.project-progress.co.uk/test/Compare-Two-Images-With-Smooth-Slider/before.jpg" class="js-slider-first">
<div class="js-slider-last-container">
<img src="http://www.project-progress.co.uk/test/Compare-Two-Images-With-Smooth-Slider/after.jpg" class="js-slider-last">
</div>
<div class="after">After</div>
</div>
</div>
In html I have added only image
JS
container.mousemove( function(e) {
let widthVal=container.width() - (e.pageX - container.offset().left)
$( lastImgContainer ).css({
"width" :widthVal // container's width - mouse's position from left in the container
});
$('#arrow').css({"right":widthVal});
});
In JS I have changes tiny stuff. Currenlty i have adjust arrow image but you may need to remove that arrow image from css stuff with ::after css code + you may need to make buch animation on that arrow image too.
When a user wants to change their avatar in BuddyPress, they are given the opportunity to crop their new image after uploading it.
During the 'crop step', the uploaded image is displayed on screen. This 'preview image' seems to be a fixed size (it does not resize when the browser window is enlarged or made smaller). I'd like the preview image to resize when the browser window is resized (i.e. be fluid).
Any idea how can I do this?
Notes: jCrop (which is provided in the WordPress core) is being used to crop the avatar.
I tried adding this to my stylesheet but that didn't work:
img {
max-width : 100%;
height : auto;
}
try this css code
img{max-width:100%;height:auto;}
Maybe you can try to destroy jCrop when user resize the window and create it again when user stop resizing. jCrop create his own image when jCrop is created and maybe this is the problem.
Try this:
In your JS:
var jcrop;
$(window).rezise(function(){
jcrop.destroy();
jcrop = $('#yourIMG').Jcrop({
boxWidth: $('#yourIMG').width(),
boxHeight: $('#yourIMG').height(),
// ...
});
});
$(document).ready(function(){
jcrop = $('#yourIMG').Jcrop({
boxWidth: $('#yourIMG').width(),
boxHeight: $('#yourIMG').height(),
// ...
});
});
Like I said I have no idea what the code looks like so... You may have to overwrite some stuff.
This is how you should do it.
HTML:
<div id="inner">
<img src="http://c.dryicons.com/images/icon_sets/shine_icon_set/png/256x256/business_user.png" />
</div>
CSS:
#inner {
width: 40%;
height: 40%;
border: 1px solid;
}
img {
width: 100%;
height: auto;
}
Wrap the preview image in a div and give it a class/id. Set there height and width to percentages (whatever you want). Now as long as it parent etc can resize this will as well now. Get the image inside and set the CSS to width: 100%; and height auto; This will get it to take up the wrap we just made. Now you only have to worry about putting the wrap in the right place. Mess around with it until you get what you want.
Note: If there are styles already on it you may need to use !important; but I would not recommend it.
DEMO HERE
If this still is not an option, you could use jQuery to get the width of the screen and using that update the image to resize. Not the best way but you could do that.
I have a picture exactly on top of a Vine video. I want the picture to go away upon mouseover and reappear on mouseout. In other words, the Vine is only visible when the mouse is over the picture.
With the current code I have the image flickers in and out. I think the problem might be with the Vine behind the picture. I've tried playing with z-indexes, but no cigar.
Here's my code (I'm using span to wrap #picture)
<div class = "vine-two media">
<span><img id = "picture" class = "on-top" src = "img/kanye.jpg"></span>
<iframe id = "video" class="vine-embed adj-size"src="https://vine.co/v/bYDuAmjeH9r/embed/simple"frameborder="0"></iframe><script async src="//platform.vine.co/static/scripts/embed.js" charset="utf-8"></script>
<script>
$(document).ready(function() {
$('span').mouseover(function () {
$('#picture').hide();
}).mouseout(function () {
$('#picture').show();
});
});
</script>
</div>
CSS:
.on-top {
position: absolute;
z-index: 1000;
width: 240px;
height: 240px;
}
.adj-size{
width: 240px;
height: 240px;
}
You need to use mouseenter and mouseleave. http://api.jquery.com/mouseenter/ follow that link and you can see the difference in the example. Mouseover fires multible event, which is likely the source of the flicker.
Update:
seeing the code, I would set the iframe to hidden until it is ready to play. Flash causes overlay problems. The youtube solution is http://www.youtube.com/embed/vRH3Kq5qDw4?wmode=opaque which puts the flash into wmode=opaque. vine may have something as well.
Is the span-tag around the image?
If yes, I could imagine that you are hovering over the span, then the image disappears and the span becomes smaller (0x0 pixels) and the mouse cannot hover anymore over the span.
Perhaps try something like this:
<div class="completely_hovering_over_the_video" style="width:video_width;height:video_height" >
<img id="picture" src="bla.jpg">
</div>
With this code I am trying to show you a DIV that completly covers the video and has a fixed width and a fixed height. This DIV will not change it's dimensions even if the IMG becomes smaller or invisible. If you hover the DIV hide the IMG and vise versa.
When it disappears the image will register the mouseout event which will make the image show up again.
One possible solution is to try $('#picture').css('visibility','hidden'); instead of using hide(), and $('#picture').css('visibility','visible'); to show it. I think this will prevent mouseOut from triggering when the image is hidden as the image is still there, just invisible.
span can be any span on your page therefore it's a BAD way to do things,
you need to be more specific with your selectors:
$(function() { // DOM ready shorthand
$('.picture').hover(function () {
$(this).fadeToggle(); // make video underneath visible
});
// other DOM ready stuff here
});
Or follow this implementation example: DEMO
<div class="video">
<!-- video here -->
<img src="image.jpg">
</div>
.video{
position:relative;
width:400px;
height:280px;
}
.video img{
position:absolute;
top:0;
left:0;
}
$('.video').hover(function(){
$(this).find('img').fadeToggle();
});
To explain the basic trick is to point the hover event to a common video and img parent, in this case the DIV . video.
Also this will work:
$('.video').hover(function(){
$("img", this).fadeToggle();
});
Additionally if you want to prevent hysteric users to see animation buildups you can add .stop() method like:
$('.video').hover(function(){
$("img", this).stop().fadeToggle();
});
Also with the HTML I provided it can be all done using just CSS: http://jsbin.com/amiBOKu/4/edit
.video:hover > img{
display:none;
}
I'd suggest a little restructuring, as well as using hover instead of mouseover and mouseout. The reason you're seeing the flicker is because mouseout fires once the image fades, whereas hover will only fire once on mouse in and once on mouse out.
Example:
HTML:
<div class = "vine-two media">
<img class = "on-top picture" src = "http://data2.whicdn.com/images/27599232/kanye-west-announces-new-design-company-called-donda-1_large.jpg">
<iframe id = "video" class="vine-embed adj-size"src="https://vine.co/v/bYDuAmjeH9r/embed/simple"frameborder="0"></iframe><script async src="//platform.vine.co/static/scripts/embed.js" charset="utf-8"></script>
</div>
JS:
$('.media').hover(function() {
// mouse enter
$('.picture', this).hide();
}, function() {
// mouse leave
$('.picture', this).show();
});
Fiddle
I have a simple HTML page wherein I'm attempting to apply the slide animation on a DIV. The DIV has nothing fancy and is described below:
<body>
<div id="content" style="position:absolute; top: 5%; left: 5%; width:80%;
height:70%; color:#333; background:#eaeaea;
border:1px solid #333;">
<input type="button" name="buttonId" value="click!"/>
</div>
</body>
Clicking on the button invokes a jQuery animation function to slide this DIV to the right:
$('#content').hide('slide', { direction: 'right' }, 1000);
$('#content').show('slide', { direction: 'right' }, 500);
Now the issue that I'm facing is, when the DIV begins its sliding animation, then there's a clear 'squeezing' of its height. Once the animation completes, the DIV regains its actual height. But through the animation, the DIV's height remains shortened.
I have also observed that when I set the height attribute of the DIV using a fixed unit like px or em, then there's no such squeezing. The distortion only occurs when the height is set in %.
Can someone tell me what causes this?
Thanks.
You already have the solution to your problem,
Get the outer width of your element and set it to pixels before calling the sliding animation.
Add a callback to the function and set it back to a percentage once the effect has finished animating.
I have no idea why its squeezing.
I've got the same problem and I've solved it by changing width and height by min-width and min-height solved my problem. The difference is that I have the style in css file.
I am using jQuery plugin for resizing the elements. Elements height & width is set in percentage (%) not in pixel. Whenever i re-size any element it's height & width changes to pixels which is fixed but i wanted this change in percentage.
I am sure there must be some technical issue for this but there would be solution too.
#parentDiv { height:100%; width:100%;}
.image { height: 25%; width: 25%; }
<body>
<div id = "parentDiv">
<div class="image" id="image1" onmouseover="resizeMe(this);"> </div>
<div class="image" id="image2" onmouseover="resizeMe(this);"> </div>
</div>
<script>
function resizeMe(obj) {
$(#obj.id).resizable(); }
</body>
But once i re-size id=image1, below is HTML code. it contains the height & width size in pixels. Does anybody light on it, How can i manage to re-size in percentage only.
<div class="image" style="width: 345px; height: 52px;">
jQuery gets its values from the browsers DOM engine, which always return normalized values in pixels no matter how they were intially set.
So the only way you will be able to do this is by recalculating the percentages based on elements width/height and parents width/height once the resizing has stopped.
$(".image").resizable({
autoHide: true,
stop: function(e, ui) {
var parent = ui.element.parent();
ui.element.css({
width: ui.element.width()/parent.width()*100+"%",
height: ui.element.height()/parent.height()*100+"%"
});
}
});
See the above in action on jsFiddle
Notice how I'm setting the width/height with .css instead of using .width and .height. This is because the latter will be normalized by the DOM engine and turned into pixels.
Now to some feedback on your code. It's quite a mess to be honest. It's a really bad practice to use inline styling and scripts. Set the width/height of #parentDiv with css just as you did with .image. And don't use onmouseover attribute. Instead bind the event with jQuery using .bind.
Also you shouldn't make the elements resizable on mouse over. It should be done once, when the document is ready. Use the autoHide option to hide the handlers while the mouse isn't over the element. An alternative is to bind enable and disable methods to mouse hover, but that will not have the same result.