We Keep Coding

framework7 not showing tab 1 on load

I am building my first app with framework7. Now I'm stuck because the tab with id="tab-1" is not loading, when the page is loaded or when refreshing page. I first have to tap on 'Home'-Tab to load tab-1. Tab-1 has "tab-active" an the Tab-link has also "tab-link-active".
Anyone seeing the problem? Thanks in advance.
<div class="statusbar-overlay"></div>
<div class="panel-overlay"></div>
<div class="panel panel-left panel-reveal">
<div class="content-block">
<p>Left panel content goes here</p>
</div>
</div>
<div class="views">
<div class="view view-main">
<div class="navbar">
<div class="navbar-inner">
<div class="left">
<i class="f7-icons ios-only">bars</i>
</div>
<div class="center sliding">App Title</div>
</div>
</div>
<!-- Bottom Toolbar-->
<div class="toolbar tabbar-labels tabbar">
<div class="toolbar-inner">
<a href="#tab-1" class="tab-link tab-link-active">
<i class="f7-icons ios-only">home</i>
<span class="tabbar-label">Home</span>
</a>
<a href="#tab-2" class="tab-link">
<i class="f7-icons ios-only">bell</i>
<span class="tabbar-label">Alerts</span>
</a>
<a href="#tab-3" class="tab-link">
<i class="f7-icons ios-only">today</i>
<span class="tabbar-label">Calendar</span>
</a>
<a href="#tab-4" class="tab-link">
<i class="f7-icons ios-only">paper_plane</i>
<span class="tabbar-label">News</span>
</a>
</div>
</div>
<div class="pages navbar-fixed">
<div data-name="home" class="page">
<div class="tabs">
<div class="page-content tab tab-active" id="tab-1">
<div class="block">
<span><b>Home</b></span>
<p>...</p>
</div>
</div>
<div class="page-content tab" id="tab-2">
<div class="block">
<span><b>Alerts</b></span>
<p>...</p>
</div>
</div>
<div class="page-content tab" id="tab-3">
<div class="block">
<span><b>Calendar</b></span>
<p>...</p>
</div>
</div>
<div class="page-content tab" id="tab-4">
<div class="block">
<span><b>News</b></span>
<p>...</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="lib/framework7/js/framework7.min.js"></script>
<script type="text/javascript" src="js/my-app.js"></script>

Everything seems fine. You are using page-content tab. Add a margin-top for each page-content tab and check once.

How to get automatically different images using modal in Semantic UI?

I'm trying to use modals with cards in Semantic UI. The concept is to click on the button on the card and display a modal with an image and description. I have 48 cards and I need different images with an every click on the card --> When I click on the card nr 1 - it shows the image number1, when I click on the card number2- it shows the image number 2, when I click on the card number 48- it shows the image nr 48 etc.
How can I get automatically each image from the card?
I'm a quite beginner with this stuff and I'm wondering if there is possible to use .append() with .each() in that case? Like this:
<script>
$(function(){
$('.ui.modal > .image').append($('.dimage')); //it adds only one image, but maybe there's a way to adds other ones using this script with minor modifications
});
</script>
This is excerpt from my code:
<!--head-->
<script>
$(function(){
$('.center > .ui.inverted.button').click(function(){
$('.ui.modal').modal('show');
});
});
</script>
<!-- my body-->
<div class="ui basic container">
<div class="ui four doubling special cards">
<div class="card">
<div class="blurring dimmable image">
<div class="ui dimmer">
<div class="content">
<div class="center">
<div class="ui inverted button">Show</div>
</div>
</div>
</div><!--ui dimmer-->
<img src="images/snacks/snack9.jpg">
</div>
<div class="content">
<a class="header">Snacks</a>
<div class="meta">
<span class="date">veggie/fruity</span>
</div>
</div>
</div><!--card-->
<div class="card">
<div class="blurring dimmable image">
<div class="ui dimmer">
<div class="content">
<div class="center">
<div class="ui inverted button">Show</div>
</div>
</div>
</div><!--ui dimmer-->
<img src="images/snacks/snack10.jpg">
</div>
<div class="content">
<a class="header">Snacks</a>
<div class="meta">
<span class="date">veggie/fruity</span>
</div>
</div>
</div><!--card-->
<div class="card">
<div class="blurring dimmable image">
<div class="ui dimmer">
<div class="content">
<div class="center">
<div class="ui inverted button">Show</div>
</div>
</div>
</div><!--ui dimmer-->
<img src="images/snacks/snack11.jpg">
</div>
<div class="content">
<a class="header">Snacks</a>
<div class="meta">
<span class="date">veggie/fruity</span>
</div>
</div>
</div><!--card-->
<div class="card">
<div class="blurring dimmable image">
<div class="ui dimmer">
<div class="content">
<div class="center">
<div class="ui inverted button">Show</div>
</div>
</div>
</div><!--ui dimmer-->
<img class="dimage" src="images/snacks/snack12.jpg">
</div>
<div class="content">
<a class="header">Snacks</a>
<div class="meta">
<span class="date">veggie/fruity</span>
</div>
</div>
</div><!--card-->
</div><!--ui four doubling special cards-->
<div class="ui modal">
<i class="close icon"></i>
<div class="header">
Modal Title
</div>
<div class="image content">
<div class="image">
An image can appear on the left
</div>
<div class="description">
A description can appear on the right
</div>
</div>
</div>
</div><!--ui basic container-->

Try the code below: https://jsfiddle.net/y7nd7qxw/. I had to adjust your card HTML a bit because the button wasn't showing up, but with the CSS you probably have it should be fine how you had it. Basically what I'm doing is storing the modal information on the data- attributes of your button. Then I'm getting those values in the click event and assigning them to the elements in the modal.
<!--head-->
<script>
$(function() {
var modal = $('#my-modal'), // hold reference to modal
modalImg = $('#modal-img'), // hold reference to image in modal
modalDesc = $('#modal-desc'); // hold reference to description in modal
//give your button an easier class reference
$('.show-modal').on('click', function() {
var button = $(this);
modalImg.attr('src', button.data('img'));
modalDesc.text(button.data('desc'));
modal.modal('show');
});
});
</script>
<!-- my body-->
<div class="ui basic container">
<div class="ui four doubling special cards">
<div class="card">
<div class="blurring dimmable image">
<div class="ui inverted button show-modal" data-desc="here is some description" data-img="http://placehold.it/200">Show</div>
<!--ui dimmer-->
<img src="images/snacks/snack9.jpg">
</div>
<div class="content">
<a class="header">Snacks</a>
<div class="meta">
<span class="date">veggie/fruity</span>
</div>
</div>
</div>
<!--card-->
<div class="card">
<div class="blurring dimmable image">
<div class="ui inverted button show-modal" data-desc="some other description description" data-img="http://placehold.it/400">Show</div>
<!--ui dimmer-->
<img src="images/snacks/snack9.jpg">
</div>
<div class="content">
<a class="header">Snacks</a>
<div class="meta">
<span class="date">veggie/fruity</span>
</div>
</div>
</div>
<!--card-->
</div>
<!--ui four doubling special cards-->
<div class="ui modal" id="my-modal">
<i class="close icon"></i>
<div class="header">
Modal Title
</div>
<div class="image content">
<div class="image">
<img src="" alt="" id="modal-img">
</div>
<div class="description">
<p id="modal-desc"></p>
</div>
</div>
</div>
</div>
<!--ui basic container-->

Individual transitions on Semantic UI cards fail

I'm trying to apply transitions as explained in here, but some cards fail to do a second transition/animation. Is it CSS, Semantic UI or me? You can try adding more cards to the test.
Edit:
As #niba requested, I made a jsfiddle to show what is
happening. Look that I named cards from "Card 0" to "Card 7". Run
several times and you may see some are missing.
Here is the code:
$(document)
.ready(function() {
$('.card')
.transition('fade')
.transition('fade', function() {
console.log('finished');
});
<div class="ui cards">
<div class="green card">
<div class="image">
<img src="img/1.jpg">
</div>
<div class="content">
<a class="header">Header</a>
<div class="meta">
<div class="ui small star rating"></div>
</div>
<div class="description">Description</div>
</div>
</div>
<div class="green card">
<div class="image">
<img src="img/2.jpg">
</div>
<div class="content">
<a class="header">Header</a>
<div class="meta">
<div class="ui small star rating"></div>
</div>
<div class="description">Description</div>
</div>
</div>
<div class="green card">
<div class="image">
<img src="img/3.jpg">
</div>
<div class="content">
<a class="header">Header</a>
<div class="meta">
<div class="ui small star rating"></div>
</div>
<div class="description">Description</div>
</div>
</div>
</div>

Bootstrap 3 Collapse on hover

I'm working on this site here. http://opennetsummit.wpengine.com/
The three images in the second section down trigger the bootstrap collapse function on click. I'd like them to show on hover, and hide when not hovering.
What do I need to change?
<script>
$(".paneltab1").hover(
function() {
$('#collapsePanel1').collapse('show');
}, function() {
$('#collapsePanel1').collapse('hide');
}
);
</script>
<div class="row panel-heading">
<div class="container">
<div class="col-xs-3">
<a class="paneltab1" data-toggle="collapse" href="#collapsePanel1" aria-expanded="false" aria-controls="collapsePanel1">
<div class="panel-tabs">
<img src="http://opennetsummit.wpengine.com/wp-content/uploads/2015/01/ons-rocket-icon.png">
<h3>Workshops</h3>
</div>
</a>
</div>
<div class="col-xs-3 ">
<a class="" data-toggle="collapse" href="#collapsePanel2" aria-expanded="false" aria-controls="collapsePanel2">
<div class="panel-tabs">
<img src="http://opennetsummit.wpengine.com/wp-content/uploads/2015/01/ons-circles-icon.png">
<h3>Open Networking Summit</h3>
</div>
</a>
</div>
<div class="col-xs-3 ">
<a class="" data-toggle="collapse" href="#collapsePanel3" aria-expanded="false" aria-controls="collapsePanel3">
<div class="panel-tabs">
<div>
<img src="http://opennetsummit.wpengine.com/wp-content/uploads/2015/01/ons-inspire-icon.png">
<h3>Webinars</h3>
</div>
</div>
</a>
</div>
<div class="col-xs-3 ">
<div class="panel-tabs">
<div class="mid-form">
<h3>Get Updates</h3>
</div>
</div>
</div>
</div>
</div>
<div class="collapse" id="collapsePanel1">
<div class="row">
<div class="container">
<div class="col-xs-12 hompage-panel">
<div class="col-sm-4 center">
<img src="http://opennetsummit.wpengine.com/wp-content/uploads/2015/01/ons-inspire-icon.png">
</div>
<div class="col-sm-8">
<h2>Defy Protocol </h2>
<h1>EMBRACE {OPEN} SOFTWARE</h1>
<h3>Open Networking Summit</h3>
<hr>
<p>June 15 - 18, 2015</p>
<p>Santa Clara Convention Center</p>
More Information
</div>
</div>
</div>
</div>
</div>
<div class="collapse" id="collapsePanel2">
<div class="row">
<div class="container">
<div class="col-xs-12 hompage-panel">
<div class="col-sm-4 center">
<img src="http://opennetsummit.wpengine.com/wp-content/uploads/2015/01/ons-inspire-icon.png">
</div>
<div class="col-sm-8">
<h2>Panel 2 </h2>
<h1>EMBRACE {OPEN} SOFTWARE</h1>
<h3>Open Networking Summit</h3>
<hr>
<p>June 15 - 18, 2015</p>
<p>Santa Clara Convention Center</p>
More Information
</div>
</div>
</div>
</div>
</div>
<div class="collapse" id="collapsePanel3">
<div class="row">
<div class="container">
<div class="col-xs-12 hompage-panel">
<div class="col-sm-4 center">
<img src="http://opennetsummit.wpengine.com/wp-content/uploads/2015/01/ons-inspire-icon.png">
</div>
<div class="col-sm-8">
<h2>Panel 3 </h2>
<h1>EMBRACE {OPEN} SOFTWARE</h1>
<h3>Open Networking Summit</h3>
<hr>
<p>June 15 - 18, 2015</p>
<p>Santa Clara Convention Center</p>
More Information
</div>
</div>
</div>
</div>

You can use jquery's hover along with bootstrap's collapse javascript, something like this:
$(".panel-tabs").hover(
function() {
$('#collapsePanel3').collapse('show');
}, function() {
$('#collapsePanel3').collapse('hide');
}
);
The first function(){} is for when the mouse enters, the second for when it leaves.
More info here:
http://api.jquery.com/hover/
http://getbootstrap.com/javascript/#collapse-methods

I changed the class from "collapse" to "collapse in" on mouseover and from "collapse in" to "collapse" on mouseout using GetElementbyID and it worked fine.
document.getElementById("panelid").className = "collapse in";

scrolling up set of pictures up and down on hover function

I have been working on a portfolio for a small firm that I have. I was planning to have the same function as this one from e-onetime http://eone-time.com/#team do you think this is possible with a gif image. The function that I would like to have is that on hover gif animated 1 time, or should I set multiple images like what they did on their portfolio and let it scroll up and down onclick.
This is a section from my TEAM section in which the static gif and animated gif is located:
<!-- Team Section -->
<section id="team" class="content-section text-center">
<div class="team-section">
<div class="container">
<div class="col-lg-8 col-lg-offset-2">
<h1>TEAM</h1>
<HR>
</div>
</div>
<!-- Team Grid --><section class="main">
<div id="items">
<div class="item">
<a id="1" class="work page-scroll">
<img class="media" src="img/tryimages/greggy.png"/>
<div class="content">
<img class="media" src="img/tryimages/greggy.gif"/>
<!--<h2 class="title">Click</h2>!-->
</div>
</a>
</div>
<div class="item">
<a id="2" class="work page-scroll">
<img class="media" src="img/tryimages/dennise.png"/>
<div class="content">
<img class="media" src="img/tryimages/dennise.gif"/>
</div>
</a>
</div>
<div class="item">
<a id="3" class="work page-scroll">
<img class="media" src="img/tryimages/jm.png"/>
<div class="content">
<img class="media" src="img/tryimages/jm.gif"/>
</div>
</a>
</div>
<div class="item">
<a id="4" class="work page-scroll">
<img class="media" src="img/tryimages/hannah.png"/>
<div class="content">
<img class="media" src="img/tryimages/hannah.gif"/>
</div>
</a>
</div>
</div>
</section><!-- End of Works Grid -->
This is the javascript function I have for my team profiler:
</script>
<!--Team JS Function!-->
<script>
$("#items a").click(function() {
var id = $(this).attr("id");
$("#pages div, #pages2 div").siblings().hide("slow");
$("#pages div#" + id + "").toggle("slow");
});
$("#items2 a").click(function() {
var id = $(this).attr("id");
$("#pages2 div, #pages div").siblings().hide("slow");
$("#pages2 div#" + id + "").toggle("slow");
});
</script>

just animate background-image using css keyframes for a .animated class, and then add this to your javascript:
$('#items a').mouseover(function(){
$(this).toggleClass('animated');
});