Hi,
I’m a freeway rookie and I try to use it for my next website. I’m not a professional but I understand the basics. Now my problem: My website pages had a css side menu. To do it, I created 3 markup blocks, 1 with the head code, 1 with the body and 1 with the menu properly. It works. I’m trying to use this: http://tympanus.net/codrops/2012/10/17/pfold-paper-like-unfolding-effect/
I changed all the links, the source code had no errors, but the effect is not working. I see all the pictures and thumbnail and my css menu link is not at the good place, what am I doing wrong ? Thanks for your help
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
You will need to provide a link to an online example page for us to even start to help.
David
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
I fix a part of the problem
The css animation is ok but not the menu. I’ve got this markup bloks:
<head>
<!-- Your stuff -->
<link rel="stylesheet" type="text/css" href="http://www.equitybeatmaker.fr/nsp/PFold/css/demo.css" />
<link rel="stylesheet" type="text/css" href="http://www.equitybeatmaker.fr/nsp/PFold/css/pfold.css" />
<link rel="stylesheet" type="text/css" href="http://www.equitybeatmaker.fr/nsp/PFold/css/custom2.css" />
<script type="text/javascript" src="http://www.equitybeatmaker.fr/nsp/PFold/js/modernizr.custom.79639.js"></script>
<!--[if lte IE 8]><style>.support-note .note-ie{display:block;}</style><![endif]-->
<!-- Include Sidr bundled CSS theme -->
<link rel="stylesheet" href="http://www.equitybeatmaker.fr/nsp/js/sidr/stylesheets/jquery.sidr.dark.css">
</head>
the 2nd
<body>
<!-- Your stuff -->
<!-- Include jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- Include the Sidr JS -->
<script src="http://www.equitybeatmaker.fr/nsp/js/sidr/jquery.sidr.min.js"></script>
<section class="main demo-2">
<div id="grid" class="grid clearfix">
<div class="uc-container">
<div class="uc-initial-content">
<img src="http://www.equitybeatmaker.fr/nsp/PFold/images/thumbs/1.jpg" alt="image01" />
<span class="icon-eye"></span>
</div>
<div class="uc-final-content">
<img src="http://www.equitybeatmaker.fr/nsp/PFold/images/large/1.jpg" alt="image01-large" />
<div class="title"><h4>The Professor</h4> by Dan Matutina <a href="http://drbl.in/dMLS" class="icon-link"></a></div>
<span class="icon-cancel"></span>
</div>
</div><!-- / uc-container -->
<div class="uc-container">
<div class="uc-initial-content">
<img src="http://www.equitybeatmaker.fr/nsp/PFold/images/thumbs/2.jpg" alt="image02" />
<span class="icon-eye"></span>
</div>
<div class="uc-final-content">
<img src="http://www.equitybeatmaker.fr/nsp/PFold/images/large/2.jpg" alt="image02-large" />
<div class="title"><h4>Planet</h4> by Dan Matutina <a href="http://drbl.in/eZoL" class="icon-link"></a></div>
<span class="icon-cancel"></span>
</div>
</div><!-- / uc-container -->
<div class="uc-container">
<div class="uc-initial-content">
<img src="http://www.equitybeatmaker.fr/nsp/PFold/images/thumbs/3.jpg" alt="image03" />
<span class="icon-eye"></span>
</div>
<div class="uc-final-content">
<img src="http://www.equitybeatmaker.fr/nsp/PFold/images/large/3.jpg" alt="image03-large" />
<div class="title"><h4>Angry Nerd Blofeld</h4> by Dan Matutina <a href="http://drbl.in/eLEa" class="icon-link"></a></div>
<span class="icon-cancel"></span>
</div>
</div><!-- / uc-container -->
<div class="uc-container">
<div class="uc-initial-content">
<img src="http://www.equitybeatmaker.fr/nsp/PFold/images/thumbs/4.jpg" alt="image04" />
<span class="icon-eye"></span>
</div>
<div class="uc-final-content">
<img src="http://www.equitybeatmaker.fr/nsp/PFold/images/large/4.jpg" alt="image04-large" />
<div class="title"><h4>Ero Senin</h4> by Dan Matutina <a href="http://drbl.in/dJfK" class="icon-link"></a></div>
<span class="icon-cancel"></span>
</div>
</div><!-- / uc-container -->
</div><!-- / grid -->
<p class="info"><strong>Demo 2:</strong> Two folding steps with different directions of folding according to the grid position</p>
</section>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://www.equitybeatmaker.fr/nsp/PFold/js/jquery.pfold.js"></script>
<script type="text/javascript">
$(function() {
// say we want to have only one item opened at one moment
var opened = false;
$( '#grid > div.uc-container' ).each( function( i ) {
var $item = $( this ), direction;
switch( i ) {
case 0 : direction = ['right','bottom']; break;
case 1 : direction = ['left','bottom']; break;
case 2 : direction = ['right','top']; break;
case 3 : direction = ['left','top']; break;
}
var pfold = $item.pfold( {
folddirection : direction,
speed : 300,
onEndFolding : function() { opened = false; },
} );
$item.find( 'span.icon-eye' ).on( 'click', function() {
if( !opened ) {
opened = true;
pfold.unfold();
}
} ).end().find( 'span.icon-cancel' ).on( 'click', function() {
pfold.fold();
} );
} );
});
</script>
</body>
and the 3rd
<a id="simple-menu" href="#sidr">menu</a>
<div id="sidr">
<!-- Your content -->
<ul>
<li><a href="#">List 1</a></li>
<li class="active"><a href="#">List 2</a></li>
<li><a href="#">List 3</a></li>
</ul>
</div>
<script>
$(document).ready(function() {
$('#simple-menu').sidr();
});
</script>
the adress: http://equitybeatmaker.fr/nsp/site/accueil.html
thanks for your help
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
ok I fix it. I erased this :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
from my picture code and it’s fix. But I don’t know why. Anyone could explain me ?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
I think your problem is mainly because you are mixing javascript libraries.
jQuery and Script/Protaculous will not play together nicely without some tweaking.
Stick to one or the other for an easy life.
D
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options