So I am trying to come to terms with CSS3 and thought I would start on transitions as it would give my layouts a nice effect, I used the code;
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:40px;
height:60px;
opacity:0.4;
background:black;
transition:all 2s;
-moz-transition:all 2s; /* Firefox 4 */
-webkit-transition:all 2s; /* Safari and Chrome */
-o-transition:all 2s; /* Opera */
}
div:hover
{
width:90px;
opacity:0.9;
}
</style>
</head>
<body>
<br>
<u><b><center>TEST</center></b></u>
<div></div>
</body>
</html>
<br>
whenever I use that code the layout completely messes up leaving me with nothing pretty much, just everything a transition and in the wrong positions. Can anyone find anything wrong with the coding?
[EDIT] This is what happens - http://testingforsite.weebly.com/
Giving your div an id will help out. Because if you write it like this, CSS changes all the divs on your website.
HTML:
<div id="div-of-transition"></div>
CSS:
#div-of-transition{
transition:all 2s;
-moz-transition:all 2s; /* Firefox 4 */
-webkit-transition:all 2s; /* Safari and Chrome */
-o-transition:all 2s; /* Opera */
This will only change the div you named div-of-transition
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.
I am currently writing an application using socket.io and ionic. I have to handle a list of 6000 people so I've decide to use collection-repeat and swipe + ion-option-button to verify items (remove then from the list)
The names on the list can be removed and the changes will be broadcasted to the rest of apps using sockets so everyone will have their own list updated in real-time
But if If the list change, each row is assigned new data but the html stays the same, including the state of the swiped button!
Here is a screen recording of the bug: https://youtu.be/15oZj7G1DQ0
You can see the list shrinking because another user is removing items from the list and broadcasting to me through websockets, but the button doesn't move along with the item and just stays in the same place.
The problem doesn't happen with ng-repeat but I can't use ng-repeat for this.
And I can't use $ionicListDelegate.closeOptionButtons() to go around the problem because it can be really annoying for the users.
There is any possible solution for this?
resumed code sample:
1) people controller
$rootScope.verify = function(){
this.person.verified = true;
//broadcast to main controller
$rootScope.$broadcast('verify', this.person)
}
2) Main Controller (aka socket controller)
$rootScope.$on('verify', function(e, person) {
//send to socket server
socket.emit('event:verify', person);
});
//incoming data from the socket server
socket.on('event:incoming',function(personData){
var person = $filter('filter')($scope.people, {id: personData.id}, true)[0];
var key = $scope.people.indexOf(person);
$scope.people[key].verified = personData.verified;
});
so if you look at this example: http://play.ionic.io/app/a8d986cdaf19
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="http://code.ionicframework.com/1.0.0/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script>
</head>
<body ng-app="app">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Awesome App</h1>
</ion-header-bar>
<ion-content class="padding">
<ion-list>
<ion-item>
I love kittens!
<ion-option-button ng-if="item" class="button-positive">Share</ion-option-button>
<ion-option-button class="button-assertive">Edit</ion-option-button>
</ion-item>
</ion-list>
<ion-toggle ng-model="item">
Show Delete?
</ion-toggle>
</ion-content>
</ion-pane>
</body>
</html>
You can use ng-if to show or hide a optoin button, so you can broadcast a event when a item is removed and hide the option button with a variable that you can toggle based on the event.
$scope.$emit('objectRemoved');
and then:
$scope.$on('objectedRemoved', function(){
$scope.variableToControlVerifyButton = false;
})
if you post your code I may be able to help more but I hope you get the general idea.
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!
I have some console.log's in my app, which work fine when viewing the app in a desktop browser. Now, I'm trying to remote-debug the app on a phone, with Intel App Preview. I have launched my app on the phone and clicked "Begin debugging on device" in XDK. This opens up XDK's remote debugging UI, in which I can go to a console. But the console.log's don't get printed on this console. What could be the problem?
BTW I think this used to work for me in the past, just not now.
In order to view the console.log messages under the "Debugging Session" console in the TEST tab, you have to copy the provided script tag from the "On Device Debugging" section for insertion after the BODY element.
For example,
Note: The src attribute for the script may change when XDK is closed or quitted.
<!DOCTYPE html><!--HTML5 doctype-->
<html>
<head>
<title>Your New Application</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
<style type="text/css">
/* Prevent copy paste for all elements except text fields */
* { -webkit-user-select:none; -webkit-tap-highlight-color:rgba(255, 255, 255, 0); }
input, textarea { -webkit-user-select:text; }
body { background-color:white; color:black }
</style>
<script src='intelxdk.js'></script>
<script type="text/javascript">
/* Intel native bridge is available */
var onDeviceReady=function(){
//hide splash screen
intel.xdk.device.hideSplashScreen();
};
document.addEventListener("intel.xdk.device.ready",onDeviceReady,false);
</script>
<script>
function hello(){
console.log("Hello");
}
function windowsize(){
console.log("Window size Width: " + window.innerWidth + " Height: " + window.innerHeight);
}
</script>
</head>
<body>
<h1>Welcome to console log testing</h1>
<p>Hello World</p>
<button onclick="hello()">Hello_console.log</button>
<button onclick="windowsize()">Windowsize_console.log</button>
</body>
<script src="http://debug-software.intel.com/target/target-script-min.js#_oDg9dKa6AG4LMdTRJMSDIPU_8Wtj433kqrvyFjcAT4"></script>
</html>
After you have included the script tag, you will need to Push Files for your project to the Testing servers. When you scan the QR code, your application should load as expected. Open the Debugging Session panel by clicking on the "Begin Debugging on Device" button. You should see a list of targets and clients. Once you select the appropriate target, click to the Console tab in the Debugging Session panel to see console.log messages executed when the console is open.
If this still doesn't work for you, I recommend that you uninstall Intel XDK and re-install.
I want the image to be centered next to the text.The amount of text will be different in each box so I can't set the height.As I research people mainly use two ways of vertical centering.Using line-height which I can't use, because I don't have fixed height.Second one is using absolute positioning which I can't use, because left div with image inside will cover the text.If I set padding to text, when image is not there it won't look good.
The best I could think of is to use jQuery to get and set the container height, and then set the margin according to the height.
<div class="container">
<div class="image_holder">
<img src="http://blog.oxforddictionaries.com/wpcms/wp-content/uploads/cat-160x160.jpg" alt="cat" />
</div>
<p>text</p>
</div>
<style type="text/css">
.container {
width:600px;
overflow:hidden; }
.image_holder {
width:100px;
height:100%;
float:left;
background:#eaf0ff; }
p {
width:500px;
float:left; }
</style>
<script>
$('.container').css('height', $('.container').height() );
$('.image_holder').css('margin-top', ( $('.container').height() - $('.image_holder img').height() ) / 2 );
</script>
Is there a way to do it cleanly with pure CSS ?
The best solution I came up with is to absolutely position the picture inside the box and then use javascript to remove padding if there is no image in the box.