Размещение сценария JQuery / HTML в блоге на Squarespace

Question

Размещение сценария JQuery / HTML в блоге на Squarespace

0

Я пытаюсь позиционировать анимацию JQuery красиво (ниже, в центре) на этой странице:

http://www.edoardocroce.com/

Я использую фрагменты кода, которые я нашел здесь и там. Вы можете найти код, который я использую здесь ниже.

Кто-нибудь может сказать мне, возможно ли это без большой работы?

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="http://s3.amazonaws.com/codecademy-content/courses/hour-of-code/js/alphabet.js"></script>
  </head>
  <body>
    <canvas id="myCanvas"></canvas>
    <script type="text/javascript" src="http://s3.amazonaws.com/codecademy-content/courses/hour-of-code/js/bubbles.js">
    </script>
    <script type="text/javascript">
var myName = "Edo Blog";
var letterColors=[black,black,black];
if(10 < 9) {
    bubbleShape = "circle";
}
else {
    bubbleShape = "square";
}
drawName(myName, letterColors);
bounceBubbles();
    </script>
  </body>
</html>

user3161488 05 янв. 2014, в 00:32

Источник

0

по- <canvas id="myCanvas"></canvas> , если вы хотите, чтобы он был отцентрирован, поместите <canvas id="myCanvas"></canvas> внутри <header id="header"></header>
Dennis Martinez 04 янв. 2014, в 23:58

Теги:

javascript

jquery

html

squarespace

2 ответа

Ещё вопросы

по- <canvas id="myCanvas"></canvas> , если вы хотите, чтобы он был отцентрирован, поместите <canvas id="myCanvas"></canvas> внутри <header id="header"></header>

ariel · Answer 1 · 2014-01-04T21-33-00.000Z

Просто добавьте стиль в #myCanvas или добавьте элемент над ним со стилем, например:

<div id="header"><canvas id="myCanvas"></canvas></div>

и на вашем css:

#header { text-align: center; width: 100% }
#myCanvas { margin-top: 100px }

Это центрирует холст и уменьшает заголовок на 100 пикселей.

Damien Black · Answer 2 · 2014-01-04T21-19-00.000Z

добавьте css в центр и опустите холст... например:

#myCanvas {
   margin: 0 auto; /*to center*/
   margin-top: 80px; /*to lower*/
}

Если вы не знаете, css идет в голову, вот так

<head>
  <style>
    #myCanvas {
       margin: 0 auto; /*to center*/
       margin-top: 80px; /*to lower*/
    }
  </style>
 .....
</head>

Или вы можете ссылаться на внешний лист css, "правильный" способ делать что-то.