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();
}
});
});

Google Chrome packaged app window

I'm creating a Chrome packaged app that has two pages [for now]. And by pages a mean actual .html files. One is called login.html and the another is index.html.
Now everything related to the user is stored in chrome.storage.local.
Here is the code for launching the pages in chrome.js.
chrome.app.runtime.onLaunched.addListener(function () {
var dimensions = getDimensions(screen),
positions = getPositions(screen);
chrome.storage.local.get('login', function (result) {
if(result.login.status === "loggedOut") {
chrome.app.window.create('login.html', {
id: 'loginWindow',
'bounds': {
'width': 400,
'height': 600
},
minWidth: 400,
minHeight: 600,
maxWidth: 400,
maxHeight: 600,
frame: 'none'
});
} else {
chrome.app.window.create('index.html', {
id: 'mainWindow',
'bounds': {
'top': positions.top,
'left': positions.left,
'width': dimensions.width,
'height': dimensions.height
},
minWidth: dimensions.width,
minHeight: dimensions.height,
maxWidth: dimensions.width,
maxHeight: dimensions.height,
frame: 'none'
});
}
});
});
Now because chrome.storage.local.get login.status === loggedOut it pops the login page with the login form. So how do I proceed when the user puts the correct credentials. How do I close the login window and then open the main. The code above is just to open the index.html next time and not showing the login again.
I have done the code to check the credentials and that works, but I want to now close the login form window and open a new index.html with the same bounds, max-, minwidths and heights as you can see in the code above.
Here is what I'm looking for: [this is now in login.js which is called inside login.html]
if(login === success) {
// close login window and goto mainWindow
} else {
// Username or password is wrong
}
Thanks in advance!

What you have to do to accomplish this is to add this tho check if changes happen inside the chrome.storage.local.
chrome.storage.onChanged.addListener(function(changes, namespace) {
chrome.storage.local.get('login', function (result) {
if (result.login.status === "loggedIn") {
chrome.app.window.get('loginWindow').close();
chrome.app.window.create('index.html', {
id: 'mainWindow',
'bounds': {
'top': positions.top,
'left': positions.left,
'width': dimensions.width,
'height': dimensions.height
},
minWidth: dimensions.width,
minHeight: dimensions.height,
maxWidth: dimensions.width,
maxHeight: dimensions.height,
frame: 'none'
});
}
});
});
Of course you could use those changes and namespaces but I chose to leave them out.

MiroRauhala has answered your direct question, but maybe you should rethink how your app is structured.
Chrome apps don't have navigation like a normal site does. They have windows, and each window corresponds to a different html page. Instead of closing one window and opening a new one up with the exact same bounds, you could just have different divs within the one document which you hide and show as necessary.
I think changing your structure will lead to a simpler app in the long run.
If you do go with the separate window approach you will need to be careful. For example, if you add an id to a window and specify bounds, the bounds are only applied the first time it is shown. Afterwards it remembers the bounds. You can get around that by creating it hidden, then moving it, then showing it. You might run into other things like this as you're using the chrome apps platform in a way it wasn't designed for.

Loading a Twitter Tweet button dialog in Fancybox

I'm trying to open up a sexy fancybox dialog with the Twitter tweet button stuff iframe style.
(function () {
// Fancybox Options for IFrame
var fancybox_params = {
'padding': 0,
'autoScale': false,
'transitionIn': 'none',
'transitionOut': 'none',
'width': 680,
'height': 400,
'type': 'iframe'
};
// Twitter
var twitter_params = fancybox_params;
twitter_params.title = 'Twitter';
twitter_params.href = 'twitter.com/share?' +
'url=https%3A%2F%2Fdev.twitter.com%2Fpages%2Ftweet-button';
$('#social_twitter').fancybox(twitter_params);
});
And then a little...
<a id="social_twitter" href="javascript:void(0)">Twa-twa-twa-tweet me homes</a>
I just get a loading animation. Working with fancybox 2.0.6.

You should put "http://" at the start of external URL.
But the actual problem is I think,
"twitter doesn't allow itself to be embedded via iframe."
from #andrew_ohlmann answer
So that means you are not able to do it.

Jquery - Dynamic button, can I clean this up?

I created a button that will randomly appear on the screen (per my boss's request) that when clicked will open an email in order to provide feedback.
My goal is to make this script do everything, mainly so I don't have to access the ASP markup or CSS files for each website. Just throw the script in the header and place the image in the folder.
I created the script to:
Create a div that contains the button
set the CSS for the elements of that div (there will be a little image next to some text)
appear to the user at random
The script I came up with works fine, however, I was wondering if there was anyway I can clean this up at all. (I'm kind of new to writing my own Jquery scripts and I'm trying to learn how to be as organized as possible.)
Jquery:
$(function () {
var fbContainer = $('<div id="feedback"><img src="image.gif" /> Feedback</div>')
.css({
'display': 'none',
});
$('#header').append(fbContainer);
$('#feedback a').css({
'font-family': 'arial',
'float': 'left',
'text-decoration': 'none',
'color':'#000000'
});
$('#feedback img').css({
'float': 'left',
'margin': '3px 5px 0 0';
});
var randofactor = .5;
var randomizer = Math.random();
if (randomizer < randofactor) {
fbContainer.css('display', 'block');
}
});
Thanks for any assistance

You could try encapsulating your code inside a javascript object, which I would recommend placing inside a separate file. I would suggest moving the header where the button is placed to be parametrized inside a constructor function, so you can reuse it elsewhere.
Separating the various logical parts such as object creation and styling into their own functions also helps readability of your code.
<script type="text/javascript">
var randomFeedBackButton = {
getfbContainer: function (header,feedBackAddress) {
var fbContainer = $('<div id="feedback"><img src="image.gif" /> <a href=' + feedBackAddress + '>Feedback</a></div>')
.css({
'display': 'none'
});
header.append(fbContainer);
return fbContainer;
},
generateCss: function () {
$('#feedback a').css({
'font-family': 'arial',
'float': 'left',
'text-decoration': 'none',
'color': '#000000'
});
$('#feedback img').css({
'float': 'left',
'margin': '3px 5px 0 0'
});
},
initialize: function (header) {
var container = this.getfbContainer(header, "mailto:feedback#mywebaddress.com");
this.generateCss();
var randofactor = .5;
var randomizer = Math.random();
if (randomizer < randofactor) {
container.css('display', 'block');
}
}
};
$(function () {
randomFeedBackButton.initialize($('#header')); /*call your script*/
});
</script>

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');
});
};