The problem:
When I resize the window the images will only sometimes change. It's almost like they get stuck / the resize event is not being captured properly by foundation. If I start resizing the window like a rabid monkey it will occasionally swap the image. If I resize the window according to the media queries and then refresh the page the correct image renders. This appears to be a resize only issue.
Other details:
I have just a regular .html file (new site hosted from IIS on a separate machine) with a simple demo of Interchange image swapping.
If I manually call: $(document).foundation("interchange", "resize"); the image will swap correctly.
Foundation version 5.3.1
Testing in Chrome 36 and Firefox 31.
So far the only built in media query that works is (default). (medium), (large) etc. do nothing, I have to write out the actually query to get it to work (or manually create them using named_queries. This may be an unrelated problem but does seem strange to me.
<html>
<head>
<title>Interchange</title>
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
<script type='text/javascript' src='/foundation.js'></script>
<script type='text/javascript' src='/foundation.interchange.js'></script>
<link rel='stylesheet' href='/foundation.css' />
<link rel='stylesheet' href='/normalize.css' />
<script type='text/javascript'>
$(function () {
$(document).foundation();
$(document).on('replace', function (e, newVal) {
console.log(newVal);
});
// Adding this horrible hack will make it work 100% of the time.
// BUT THIS SHOULD NOT BE NECESSARY!
//$(window).resize(function(){
// $(document).foundation("interchange", "resize");
//})
});
</script>
</head>
<body>
<img data-interchange="[/images/space-small.jpg, (default)], [/images/space-medium.jpg, (only screen and (min-width: 641px))], [/images/space-large.jpg, (only screen and (min-width: 1000px))]">
</body>
</html>
I found the answer to my own question and it was indeed that odd media queries issue I described in the OP that lead me to the problem.
Foundation's javascript is dependent on the Foundation CSS existing before it initializes.
All I had to do was make sure the CSS link was above the script include and everything started working as expected.
Not sure this will help anyone, but I was getting the same issue but ONLY on Chrome. I added the foundation.min.css to my page like b1j suggested and voila! unfortunately though as I used the SASS version I couldn't just leave this included into the page as I would have double the amount of css included into my page. So I pasted the foundation.css contents into a style tag in the head of my document and deleted its contents bit by bit until I found the piece of css that fixed it. Here it is:
meta.foundation-mq-small {
font-family: "/only screen/";
width: 0em; }
meta.foundation-mq-medium {
font-family: "/only screen and (min-width:40.063em)/";
width: 40.063em; }
meta.foundation-mq-large {
font-family: "/only screen and (min-width:64.063em)/";
width: 64.063em; }
meta.foundation-mq-xlarge {
font-family: "/only screen and (min-width:90.063em)/";
width: 90.063em; }
meta.foundation-mq-xxlarge {
font-family: "/only screen and (min-width:120.063em)/";
width: 120.063em; }
Not sure why this wasn't compiled into my CSS but I will look, but incase anyone needs a quick fix, this should do it!
Related
I've downloaded the new Zurb Foundation 6 complete package (Foundation for Sites). The archived file contains the following files and folders:
[css] > app.css, foundation.css, foundation.min.css
[img] > [empty folder]
[js] >
app.js
foundation.js
foundation.min.js
vendor > jquery.min.js, what-input.min.js
I included the JS file in the footer and the CSS at the header:
<!-- foundation library and initialization -->
<script src="/Foundation/js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
Error in Chrome
I try to use REVEAL component (it worked in Foundation 5), but this time it throws me an error:
Uncaught ReferenceError: We're sorry, 'reveal' is not an available method for i.
I've looked inside the Foundation.min.js and it has REVEAL in it. I download the complete package, so it should work, but it doesn't.
The JS code that should trigger the modal:
$('#submit-modal').foundation('reveal', 'open');
UPDATE 1: Tried on a fresh page:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="/Foundation/css/foundation.min.css" rel="stylesheet" />
</head>
<body>
<div class="row">this is the body of the page</div>
<div id="popup-modal" class="reveal-modal full" data-reveal aria-labelledby="pop-up-modal-title" aria-hidden="true" role="dialog">
test
</div>
<script src="/Foundation/js/vendor/jquery.min.js"></script>
<!-- foundation library and initalization -->
<script src="/Foundation/js/vendor/what-input.min.js"></script>
<script src="/Foundation/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
The text of the popup appeared on the page, it's even not hidden by default, and I get an error: Uncaught ReferenceError: We're sorry, 'Reveal' is not an available method for Reveal when trying to run the command:
$('#popup-modal').foundation('reveal', 'open');
From the console.
Foundation 6 is a fresh release, and I;ve might missed something. I upgraded to Foundation 6 from Foundation 5. Foundation 5 Reveal worked ok, but after changing to the new Foundation 6 some components start not working out.
I checked the Documentation and the initialization and classes are the same.
Try with
var popup = new Foundation.Reveal($('#popup-modal'));
and then:
popup.open();
$('#popup-modal').foundation('reveal', 'open'); doesn't work in Foundation 6 anymore.
Chris from ZURB here. There's a couple of ways you can invoke methods on plugins, see:
http://foundation.zurb.com/sites/docs/javascript.html#programmatic-use
The easy "new" way now is
$('#exampleModal').foundation('open')
Both options provided by Juliancwirko & EddieDean are working. But there's a difference.
If you are using "new Foundation" approach and you also have data-options set like: data-options="closeOnEsc: false; closeOnClick: false;" they won't have any effect.
But if you are using foundation('open') they will work.
Any ideas on how to create an Ember / Handlebars project with suport for multiple themes / skins that can be changed through a dropbox in the UI?
Current version of Ember is 1.0.0-rc.2
Thanks
Nothing too unique to Ember here. Use CSS for themes/skins, and change the current theme stylesheet when the dropbox changes.
FYI, there is a switch stylesheet ember-cli that you can use:
https://www.npmjs.com/package/ember-theme-changer
Install Theme Changer
ember install ember-theme-changer
Modify the code below in ember-cli-build.js:
// ember-cli-build.js
outputPaths: {
app: {
css: {
'light': '/assets/light.css', // FOR LIGHT THEME => app.scss
'dark': '/assets/dark.css' // FOR DAR THEME => dark.scss
}
}
},
Create your own SCSS with difference configuration.
Go to app/styles folder
Create dark.css and app.scss
dark.scss
body{
background-color: black;
}
app.scss
body{
background-color: light;
}
All you need just to make two button to switch the css file that you apply to
Think of it this easy way:
In Html template application.hbs
<link href="light.css" rel="stylesheet" type="text/css" >
<button class='light'>LIGHT MODE</button>
<button class='dark'>DARK MODE</button>
In Javascript File
$('.light').click(function (){
$('link[href="light.css"]').attr('href','black.css');
});
$('.black').click(function (){
$('link[href="black.css"]').attr('href','light.css');
});
comments: You can use other addon (more complicated) which it can be found on:
https://www.emberaddons.com/
https://www.npmjs.com/package/ember-themed-syntax
I am trying to make the background transparent for some charts I have made with google charts. They work perfectly in everything except IE7 and 8, I get a white backgound.
I have tried every combination I can find for the color attribute to change it but nothing works.
The only thing left to try was a suggesting that someone made on here a few months ago for someone else with the same issue. Their suggestion was...
For a transparent background, use chf=bg,s,FFFFFF00
But I have no idea how to implement this?
chf=bg,s,FFFFFF00
is a code for the old Google Image Charts.
Those codes will only work with the non-SVG versions of charts. Google Image Charts have been deprecated (as you can see from their help pages), so unless you want to implement the old-style charts, you won't be able to implement the above code on your new, fancy, interactive SVG charts.
For the new fancy SVG charts, I have luck with
backgroundColor: "transparent"
Copy-paste this in to Google Playground to test:
<!--
You are free to copy and use this sample in accordance with the terms of the
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
Google Visualization API Sample
</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['Year', 'Austria', 'Bulgaria', 'Denmark', 'Greece'],
['2003', 1336060, 400361, 1001582, 997974],
['2004', 1538156, 366849, 1119450, 941795],
['2005', 1576579, 440514, 993360, 930593],
['2006', 1600652, 434552, 1004163, 897127],
['2007', 1968113, 393032, 979198, 1080887],
['2008', 1901067, 517206, 916965, 1056036]
]);
// Create and draw the visualization.
new google.visualization.BarChart(document.getElementById('visualization')).
draw(data,
{title:"Yearly Coffee Consumption by Country",
width:600, height:400,
vAxis: {title: "Year"},
hAxis: {title: "Cups"},
backgroundColor: "transparent"}
);
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;" bgcolor="#E6E6FA">
<div id="visualization" style="width: 600px; height: 400px;"></div>
</body>
</html>
This is just the standard bar chart example with two things added:
bgcolor="#E6E6FA" to the body element (make it blue so we can tell if transparent)
backgroundColor="transparent" to the options (make it transparent)
This works in FireFox. I don't know if it works in IE7 (no testing environment). Let us know if it works.
change as appropriate in the config file that the pie chart is located on.
I had this chart under a donate.php as example:
FROM
$chartURL = 'http://chart.apis.google.com/chart?chf=bg,s,f9faf7&cht=p&chd=t:'.$percent.',-'.(100-$percent).'&chs=200x200&chco=639600&chp=1.57';
TO
$chartURL = 'http://chart.apis.google.com/chart?chf=bg,s,FFFFFF00&cht=p&chd=t:'.$percent.',-'.(100-$percent).'&chs=200x200&chco=639600&chp=1.57';
that code let me have transparency when it was a white background! thank you.
We're having trouble getting some form of visual indication that a 'page' is loading in our Ember App.
Tried both a gif method and also Spin JS. Both fail as they are very laggy and only fully load when all the Ember objects have loaded. A similar problem to this question.
What methods are other people using in their public facing builds?
Edit: This is when the app is loading for the first time. The initial load is long enough to require some form of visual indication.
You could add an overlay to your document with an loading indicator. When you add it via CSS it is loaded before Ember is initialized. After ember is initialized you could remove the overlay.
Below an example how I might implement it:
HTML:
<html>
<head> ... load dependencies ... </head>
<body class="loading"> ... handlebars templates ... </body>
</html>
CSS:
body.loading:after {
content: '';
background: rgba(255,255,255,.3) url(images/loader.gif) 50% no-repeat;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
}
Ember code:
App.ApplicationView = Ember.View.extend({
removeLoader: function() {
$('body').removeClass('loading');
}.on('didInsertElement')
});
This way before Ember is initialized an loading indicator is showed, but when Ember is done initializing the loader is removed.
You can use jQuery ajax callbacks for this:
$(document).ajaxStart(function(){ console.log("ajax started")})
$(document).ajaxStop(function(){ console.log("ajax stopped")})
This will work for all ajax requests.
I'm having difficulty rendering my EXTJS grid that rides on top of a django app. The grid is only displayed some of the time. When the grid is supposed to be displayed it works. When the grid is not supposed to be displayed I get a "ct is not defined" error from extjs-core. I researched this error and it seems it occurs when my <div id="my-grid"> is not defined. The div is defined inside a grid.html that is only loaded some of the time.
These are my files.
view_main.js - I define all of my objects here inside Ext.onReady.
Ext.onReady(function(){
var grid = new Ext.grid.GridPanel({
border: false,
//...
}
grid.render('my-grid') // comment this out and "ct is not defined" goes away
// but the grid never renders in grid.html
base.html - my base django file that my templates extend. This file also loads my view_main.js file.
<!-- Load Script -->
<script type="text/javascript" src="/site_media/js/view_main.js" ></script>
grid.html - the grid html file that gets rendered inside an EXTJS TabPanel.
<div id="my-grid" style="border: height: 800px; width: 800px;"></div>
I don't want to even attempt to render my grid unless grid.html is being displayed. But the grid doesn't work unless I put grid.render inside of view_main.js
If I try to put the render script inside grid.html the I get "grid is not defined error"
<script type="text/javascript" >
Ext.onReady(function(){
grid.render('my-grid');
}
</script>
How can I only render the grid when grid.html is loaded?
If you're just trying to avoid that error, try checking for the existence of 'my-grid',
Ext.onReady(function() {
if( (Ext.get('my-grid')) !== null)
{
grid.render('my-grid');
}
});