codingdir logo sitemap sitemap |
Home
PHP
C#
C++
ANDROID
JAVA
JAVASCRIPT
PYTHON

Zurb foundation 4 sections & jQuery Effects


By : , Category : javascript

You can achieve your goal of fading in content without bringing in another library. Using the css below you can fade in the section content. An interesting note that I found while investigating this, since Foundation uses display:none / display:block to toggle the content you cannot use css transitions, animations on the other-hand do still work.

.section-container.tabs .content {
  display:block:important!
  opacity: 0; 
}
.section-container.tabs .active .content{
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
  opacity: 1;
}

@-webkit-keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}

@keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}

Here is a working example. http://jsbin.com/eyazuf/2/edit

ReLated :

Assuming you're using Foundation's HTML classes:

.top-bar-section {
  -webkit-transition: 0.2s all ease-in;
  -moz-transition: 0.2s all ease-in;
  -o-transition: 0.2s all ease-in;
  transition: 0.2s all ease-in; 
}

Looks like this question has been answered before here: http://foundation.zurb.com/forum/posts/21395-zurb-foundation-for-apps-for-websites

Short answers is yes. You'll need to include jQuery and the sites components will work in the new grid. You'll need to watch out for naming issues so you might have to namespace some stuff.

My company has used http://jqueryui.com/themeroller/ to create the themes for our clients.

We had a client request a theme that matched the foundation default styling so we created it and uploaded it to out github. Below you can download the style sheets.

https://github.com/cwdgservices/jQuery-UI-Style-for-Zurb-Foundation

font-family should not be attributed to html as it leads to that bug.

Use body instead:

body{
    font-family:"Open Sans";
} 
Comments


Message :
Login to Add Your Comments .
How to disable registered OpenCL platforms on Windows?
Is Observable broken in Angular 2 Beta 3?
Cross-thread operation not valid when using Invoke
How to pass an IEnumerable or queryable list of properties from Controller to View
Finding numbers after a certain keyword using Python
Pocketsphinx recognizes random phrases in a silence
Passing non-thread-safe objects through thread-safe containers
React scroll nav
BizTalk WCF-BasicHttp Adapter does not allow Empty string for Service Certificate Props
Why property ''cause" of Exception is repeating forever?
Privacy Policy 2017 © codingdir.com All Rights Reserved .