We Keep Coding

JS image resize compatible with fullPage.js

I am trying to integrate this code : http://codepen.io/babybackart/pen/GZPjJd on a section of a website using fullpage.js.
This code is based on a previous question brilliantly answered by #Seika85 : Make a .div act like an image.
The aim was to "contain" and resize the image on its container ".plancheBox" without cuting it.
In this example, the cat picture's dimensions are driven by the container using this first javascript code:
var calculateImageDimension = function() {
$('.plancheBox img').each(function() {
var $img = $(this),
$plancheBox = $img.closest('.plancheBox');
$img.css({
'max-height': $plancheBox.height() + 2,
/* (+2px) prevent thin margins due to rendering */
'max-width': $plancheBox.width()
});
$img.closest('.container').css({
'position': 'relative'
});
});
}
calculateImageDimension();
In order to set these dimensions instantaneously (without a page refresh), I am using this second javascript code:
var resizeEnd;
$(window).on('resize', function() {
clearTimeout(resizeEnd);
resizeEnd = setTimeout(function() {
$(window).trigger('resize-end');
}, 200);
});
$(window).on('resize-end', function() {
$('.plancheBox img').css({
'max-height': 'none',
'max-width': 'none'
})
$('.plancheBox .container').css({
'position': ''
});
calculateImageDimension();
});
As you can see in the first example, it works without fullpage.js.
I managed to insert the first JS code in a fullpage.js website : http://codepen.io/babybackart/pen/ONrbEN but I don't really manage to insert the second one.
I'm not actually a JS coder so I wanted to know what I needed to do to insert this code, if it was possible to do this with fullpage.js and if there were any conflict between both codes.
Thank you for your answer !

The second JS code must be inserted in a fullPage event like this:
$(document).ready(function() {
$('#fullpage').fullpage({
//events
afterResize: function(){
$('.plancheBox img').css({
'max-height' : 'none',
'max-width' : 'none'
})
$('.plancheBox .conteneur').css({'position' : ''});
calculateImageDimension();
}
});
});

disabled a div and sub elements and have tooltip on that

Is it possible to make a div and sub elements (what ever is like buttons span,...) disabled and have a tooltip on that for example (this section is disabled).
I just tried:
$(".divclass").css('pointer-events', 'none').css('opacity', '.4').css('filter', 'alpha(opacity=50)');
The div and sub elements are disabled but I can't have a tooltip on that even title doesn't work.

How about covering the disabled elements with an overlay?
The following code creates a plugin that covers all the elements with an overlay. The "title" parameter is used to supply the "title" attribute for the overlay element.
$.fn.coverWithOverlay = function(title) {
return this.each(function() {
var $element = $(this),
pos = $element.offset();
var $overlay = $('<div></div>').attr({
title: title
}).css({
position: 'absolute',
backgroundColor: 'white',
opacity: 0.5,
top: pos.top + 'px',
left: pos.left + 'px',
width: $element.outerWidth() + 'px',
height: $element.outerHeight() + 'px'
});
$(document.body).append($overlay);
});
}
You call the plugin like this:
$('.disabled').coverWithOverlay('this is disabled');
Demo on JsFiddle
If this is a technique you want to utilize but want more functionality, you could use a library — like the jQuery BlockUI Plugin.

(CSS/jQuery) How resolve the conflict between top and bottom property with jQuery

Someone know how convert a bottom position to top with CSS transition and jQuery?
I need to change the anchor of my image. And i have this problem. There is a conflict between bottom and top.
EDIT : In my scenario, the image has 100% of the width of the screen. And when the window is resized, i have a code in JS whoes get the new position of the image. If my anchor is always "top" for example, in some situations I have this hole who show-up for severals milliseconds and if I set at this moment bottom instead of top it will fix my issue. But I have this "jump" in the animation.
I made this fiddle to understand my issue.
Sorry for my English! Someone have an idea about this? Thank you !

You can get around the jumps by using a class, and removing the inline style as you go, like so:
if ( image.hasClass("bottom") ) {
image.css("bottom", "").animate( { top: "0" } , 1000, function(){
image.removeClass("bottom");
});
} else {
image.css("top", "").animate( { bottom: "0" } , 1000, function(){
image.addClass("bottom");
});
}
and add a css class
.bottom {
bottom: 0;
}
as per http://jsfiddle.net/rZPq3/
edit for cross-browser:
var top = image.position().top + 'px';
var bottom = image.parent().height() - image.height() + 'px';
if (image.hasClass("bottom")) {
image.finish().css({ "bottom": "", "top": top }).animate({ top: "0px" }
, 500, function () { image.removeClass("bottom"); });
} else {
image.finish().css({ "top": "","bottom": bottom }).animate({bottom:"0px"}
, 500, function () { image.addClass("bottom"); });
}
http://jsfiddle.net/wCuuX/

You should stick with one of the properties to avoid conflicts. I changed your fiddle to use top only and using a class to toggle the value instead.
var toggle = $("button#toggle");
var image = $("div img");
toggle.click(function () {
image.toggleClass("toggled");
});
See updated test case on jsFiddle.

How can i slide a div content in a particular angle using jquery

i am trying to slide a div content to top right side. i am trying but i can't get it, here is my html code
<html><body>
<button id="animatenow">animate now!</button>
<div id="container">
<div>hi</div>
<div>there</div>
</body>
</html>
here is script
$(document).ready(function(){
$('#animatenow').click(function(){ $('#container').animate({width: "-=300px",marginTop: "-=1250px", height: "+=50px"},1500);}); });`
my css is
#container{width:600px;color:#fff;background:#f00;height:400px}
my jsfiddle code

Well, a somewhat overly-complex means to do this:
$('#animatenow').click(function(){
var that = $('#container');
var h = that.height();
var w = that.width();
$('#container')
.wrap('<div id="placeholder"></div>')
.parent()
.css({
'width' : w,
'height' : h
})
.find('#container')
.css({
'position' : 'absolute',
'top' : 0,
'left' : 0,
'right' : 0,
'bottom' : 0
})
.animate(
{
'top' : '-' + h,
'left' : w,
'right' : '-' + w,
'bottom' : h
},2000,
function(){
$(this).parent().remove();
});
});
JS Fiddle.
The above assumes you want to avoid the sliding element's text wrapping and re-flowing as it slides out of view. If you're okay with re-flowing text, then it's a lot easier and avoids adding a new wrapping element and the (hideous) call to animate().
References:
animate().
click().
css().
find().
height().
parent().
remove().
width().
wrap().

you forgot position:absolute on the #container css

$(document).ready(function(){
$('#animatenow').click(function(){
$('#container').animate({
marginLeft: "700px",
marginTop: "-=1250px",
}
,1500);
});
});
Are you trying to get an effect like this? I am unsure of what you mean, hope this helps a little.

I have updated your code here .Basicall you need to animate the left ,top and width properties after seting the position:absolute property to #container
$(document).ready(function() {
$('#animatenow').click(function() {
$('#container').animate({
right: '0',
top: '0',
width: '120',
height: '120'
}, 'slow');
});
});
If you want to move the div out of visible area or hide it make the width and height 0px

Todays Special: How is this done? Is there a jquery plugin or product to do it?

I saw this technique at the bottom of a web page where the TAB stays in place at the bottom of the page and can be opened and closed to display more info. I assume it can be rotated to display a different special for different days. Can you point me to anything like it or explain the technique ? thanks. Here is a sample: http://www.tmdhosting.com/ look at the bottom of the page .

position: fixed is how you manage to keep something at the bottom or top of the page, regardless of scrolling.
This is easily discoverable using firebug's (http://getfirebug.com/) inspect element feature

You can check out my version of this at uxspoke.com
I wrote a jQuery plugin to do it, and calling it is straightforward:
$('#about').pulloutPanel({open:true}).
click(function() { $(this).trigger('toggle'); }) });
I basically instrument the panel to support "open", "close" events, and the implement the appropriate animations around them. The only "hard" part is getting the height right. It also supports "toggle" so you can add a generic click handler to it to open or close it. Finally, it uses opened/closed classes to keep track of its current state. That's it!
The code's pretty coupled to the technologies on the page (Csster) and the design it is in, so I'm not sure it will work for you. You can either use Csster, or just put the CSS rules into your stylesheet and remove them from the code. The important Css attributes are the positioning and bottom.
Here it is:
$.fn.pulloutPanel = function(options) {
var settings = $.extend({}, {
attachTo: 'bottom',
css: {
left: 0,
minHeight: 390,
border: '1px 1px 1px 0 solid #666',
has: [roundedCorners('tr', 10),boxShadow([0,0], 10, phaseToColor('requirements').saturate(-30).darken(50))],
cursor: 'pointer'
}, options);
return $(this).each(function() {
var $this = $(this);
$this.addClass('pullout_panel');
$this.bind('open', function(event) {
$this.animate({bottom: 0}, 'slow', 'easeOutBounce', function() {
$this.removeClass('closed').addClass('opened');
$this.trigger('opened');
});
});
$this.bind('close', function(event) {
var height = $this.innerHeight();
$this.animate({bottom: -height + 50}, 'slow', 'easeOutBounce', function() {
$this.addClass('closed').removeClass('opened');
$this.trigger('closed');
});
});
$this.bind('toggle', function(event) {
$this.trigger($this.hasClass('opened') ? 'close' : 'open');
});
once(function() {
Csster.style({
'.pullout_panel': {
position: 'fixed',
bottom: 0,
has: [settings.css]
}
});
});
$this.trigger(settings.open ? 'open' : 'close');
});
};