11521 sujets

JavaScript, DOM et API Web HTML5

Probleme menu jquery sous Safari

Bonjour,

Étudiant, je suis en pleine programmation de mon futur portfolio. Pour celui ci j'ai décidé d'utiliser 2 principaux "plugin" jQuery. 1 qui va me permettre d'avoir mon site en fullscreen animé (http://alvarotrigo.com/fullPage/) et un autre pour avoir un menu déroulant en cercle sur ma premiere page.
Seulement problème ! Sous safari mon animation de rotation ne fonctionne pas si le plugin de fullpage.js fonctionne !

Second problème.. Le script qui suis mon menu ne fonctionne pas si je le met à un autre endroit dans mon html...

Je demande donc votre aide et vous joins mon html et css.
<!doctype html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="bootstrap.css" />
<link rel="stylesheet" type="text/css" href="jquery.fullPage.css" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="jquery.fullPage.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			$("#fullpage").fullpage({
				sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke'],
				anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage'],
			});

		});
	</script>

</head>

<body>

<div id="fullpage">
    <div id="home" class="section">
			<div class='selector'>
  <ul>
    <li>
      <input id='c1' type='checkbox'>
      <label for='c1'>Menu 1</label>
    </li>
    <li>
      <input id='c2' type='checkbox'>
      <label for='c2'>Menu 2</label>
    </li>
    <li>
      <input id='c3' type='checkbox'>
      <label for='c3'>Menu 3</label>
    </li>
    <li>
      <input id='c4' type='checkbox'>
      <label for='c4'>Menu 4</label>
    </li>

  </ul>
  <button>Click to toggle the menus</button>
</div>
<script>var nbOptions = 8;
var angleStart = -360;

// jquery rotate animation
function rotate(li,d) {
    $({d:angleStart}).animate({d:d}, {
        step: function(now) {
            $(li)
               .css({ transform: 'rotate('+now+'deg)' })
               .find('label')
                  .css({ transform: 'rotate('+(-now)+'deg)' });
        }, duration: 0
    });
}

// show / hide the options
function toggleOptions(s) {
    $(s).toggleClass('open');
    var li = $(s).find('li');
    var deg = $(s).hasClass('half') ? 180/(li.length-1) : 360/li.length;
    for(var i=0; i<li.length; i++) {
        var d = $(s).hasClass('half') ? (i*deg)-90 : i*deg;
        $(s).hasClass('open') ? rotate(li[i],d) : rotate(li[i],angleStart);
    }
}

$('.selector button').click(function(e) {
    toggleOptions($(this).parent());
});

setTimeout(function() { toggleOptions('.selector'); }, 1);//@ sourceURL=pen.js


</script>

   </div> 

    <div id="yo" class="section">Some section</div>
    <div class="section">Some section</div>
    <div class="section">Some section</div>
</div>


</body>


</html>




/*menu*/

.selector {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 140px;
  height: 140px;
  margin-top: -70px;
  margin-left: -70px;
}

.selector,
.selector button {
  font-family: 'Oswald', sans-serif;
  font-weight: 300;
}

.selector button {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 10px;
  background: #428bca;
  border-radius: 50%;
  border: 0;
  color: white;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
  transition: all .1s;
}

.selector button:hover { background: #3071a9; }

.selector button:focus { outline: none; }

.selector ul {
  position: absolute;
  list-style: none;
  padding: 0;
  margin: 0;
  top: -20px;
  right: -20px;
  bottom: -20px;
  left: -20px;
}

.selector li {
  position: absolute;
  width: 0;
  height: 100%;
  margin: 0 50%;
  -webkit-transform: rotate(-360deg);
  transition: all 0.8s ease-in-out;
}

.selector li input { display: none; }

.selector li input + label {
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 0;
  height: 0;
  line-height: 1px;
  margin-left: 0;
  background: #fff;
  border-radius: 50%;
  text-align: center;
  font-size: 1px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: none;
  transition: all 0.8s ease-in-out, color 0.1s, background 0.1s;
}

.selector li input + label:hover { background: #f0f0f0; }

.selector li input:checked + label {
  background: #5cb85c;
  color: white;
}

.selector li input:checked + label:hover { background: #449d44; }

.selector.open li input + label {
  width: 80px;
  height: 80px;
  line-height: 80px;
  margin-left: -40px;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
  font-size: 14px;
}
[/i][/i]
Pour le premier problème difficile de te répondre je pense que le plus simple est de débugger directement via les outils développeur Safari.

Le second problème est assez simple, si tu regarde bien le code dans le script sous le menu, tu verra qu'il est exécuté immédiatement (pas de fonction qui le lance une fois le DOM chargé).

Bref : met tes scripts dans des fichiers JS que tu inclus dans la balise <head> – déjà tu y verra plus clair – et initialise tes évènements une fois le document chargé (sinon tes éléments n'existent pas encore). 

$(function(){ 
    // document ready !

    toggleOptions('.selector');
    // je pense que le reste du code ne sert à rien
});

Modifié par Freez (05 Dec 2014 - 19:44)
Sujet clos
Aller à