Adding element with HTML, CSS and js

pranaman
(@pranaman)

9 years, 1 month ago

I found a ‘pen’ on codepen.io that I liked, altered, and embedded it and another on http://admaticonsulting.com/home-animation2/ using the codepen plugin.

Problem is, it shows a top tab with ‘HTML’, ‘CSS’, ‘JS’, … which I don’t want. I just want the result – the grey circle with the cog, and I’d like it centered in that first third of that part of the page.

Can’t seem to figure it out.

I tried a few plugins, including “CSS & Javascript Toolbox”, but I don’t see how to add all 3 elements and getting errors when I pasted the HTML: https://www.screencast.com/t/3SkaMSoj

The pen is: http://codepen.io/chipower/pen/oZMwyp.

I’ve imagined a plugin or some way that allows me to add the HTML, CSS, and JS, just like I see on codepen to a section on my WP page.

Can I do that? If so, how?

Viewing 3 replies - 1 through 3 (of 3 total)

(@linux4me2)

If you’re just pasting the HTML on a page, and not using it as your main menu, you can just:

Paste the HTML into the source of the page using the Text view of the editor.
Paste the CSS in the Custom CSS box for the Customize option for your theme.
Save the javascript for the pen to a file, say, mycustomjs.js, and enqueue it using the functions.php of your child theme.

Note that there are a couple of things you will need to change to get the pen to work on your site. Some of the classes used in the HTML, CSS, and JS may conflict with those of your theme, so they would need to be changed. For example, if your theme already uses the class “menu-button”, you won’t be able to use the same class in the pen without causing conflicts. The javascript uses a “$” for jQuery, which will conflict with the other javascript on WordPress, which uses a non-conflict jQuery structure. You should use a text editor to search-and-replace all those “$” with “jQuery” to fix that.

linux4me2

(@linux4me2)

9 years, 1 month ago

You made me curious, so I tried the pen out on a test site. If you want to make it really simple, you can add the javascript and the HTML to the source of the page in the editor, and then put the CSS in the custom CSS for your theme. I have it working on Twenty Thirteen without any errors, but as I said, it will depend on your theme.

Here’s the HTML and javascript to go in the source of your page:


<div class="menu-button"><img class="icon" src="https://upload.wikimedia.org/wikipedia/commons/9/92/Cog_font_awesome.svg" />
<div id="1" class="mini"><img class="icon" src="https://upload.wikimedia.org/wikipedia/commons/9/92/Cog_font_awesome.svg" /></div>
<div id="2" class="mini"><img class="icon" src="https://upload.wikimedia.org/wikipedia/commons/9/92/Cog_font_awesome.svg" /></div>
<div id="3" class="mini"><img class="icon" src="https://upload.wikimedia.org/wikipedia/commons/9/92/Cog_font_awesome.svg" /></div>
</div>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuerymenuOpen = false;
jQuery('.menu-button').click( function() {
  if( jQuerymenuOpen ) {
    if( jQuery('.menu-button').hasClass('shrink-menu') ) {
      jQuery('.menu-button').removeClass('shrink-menu');
      jQuery('#1').removeClass('left');
      jQuery('#2').removeClass('diag');
      jQuery('#3').removeClass('down');
    }
    jQuery('.menu-button').addClass('grow-menu');
    jQuery('#1').addClass('revLeft');
    jQuery('#2').addClass('revDiag');
    jQuery('#3').addClass('revDown');
    jQuerymenuOpen = false;
  }
  else {
    if( jQuery('.menu-button').hasClass('grow-menu') ) {
      jQuery('.menu-button').removeClass('grow-menu');
      jQuery('#1').removeClass('revLeft');
      jQuery('#2').removeClass('revDiag');
      jQuery('#3').removeClass('revDown');
    }
    jQuery('.menu-button').addClass('shrink-menu');
    jQuery('#1').addClass('left');
    jQuery('#2').addClass('diag');
    jQuery('#3').addClass('down');
    jQuerymenuOpen = true;
  }
});
});
</script>

And here’s the CSS:


.menu-button {
  background: #202020;
  width: 5em;
  height: 5em;
  border-radius: 50%;
  margin: 1em;
  cursor: pointer;
  position: relative;
  margin-right: auto !important;
  margin-left: auto !important;
}

.icon {
  width: 100%;
  height: 100%;
  padding: 25%;
}

.mini {
  position: absolute;
  top: 3em;
  right: 3em;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  background: #202020;
}

.shrink-menu {
  -webkit-animation: shrink-menu .5s 1;
  -moz-animation: shrink-menu .5s 1;
  -o-animation: shrink-menu .5s 1;
  animation: shrink-menu .5s 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode:    forwards;
  -o-animation-fill-mode:      forwards;
  animation-fill-mode:        forwards;
}

@-webkit-keyframes shrink-menu {
  0% {
    width: 5em;
    height: 5em;
    margin: 1em;
  }
  100% {
    width: 4em;
    height: 4em;
    margin: .5em;
  }
}

@-moz-keyframes shrink-menu {
  0% {
    width: 5em;
    height: 5em;
    margin: 1em;
  }
  100% {
    width: 4em;
    height: 4em;
    margin: .5em;
  }
}

@-o-keyframes shrink-menu {
  0% {
    width: 5em;
    height: 5em;
    margin: 1em;
  }
  100% {
    width: 4em;
    height: 4em;
    margin: .5em;
  }
}

@keyframes shrink-menu {
  0% {
    width: 5em;
    height: 5em;
    margin: 1em;
  }
  100% {
    width: 4em;
    height: 4em;
    margin: .5em;
  }
}

.grow-menu {
  -webkit-animation: grow-menu .5s 1;
  -moz-animation: grow-menu .5s 1;
  -o-animation: grow-menu .5s 1;
  animation: grow-menu .5s 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode:    forwards;
  -o-animation-fill-mode:      forwards;
  animation-fill-mode:        forwards;
}

@-webkit-keyframes grow-menu {
  0% {
    width: 4em;
    height: 4em;
    margin: .5em;
  }
  100% {
    width: 5em;
    height: 5em;
    margin: 1em;
  }
}

@-moz-keyframes grow-menu {
  0% {
    width: 4em;
    height: 4em;
    margin: .5em;
  }
  100% {
    width: 5em;
    height: 5em;
    margin: 1em;
  }
}

@-o-keyframes grow-menu {
  0% {
    width: 4em;
    height: 4em;
    margin: .5em;
  }
  100% {
    width: 5em;
    height: 5em;
    margin: 1em;
  }
}

@keyframes grow-menu {
  0% {
    width: 4em;
    height: 4em;
    margin: .5em;
  }
  100% {
    width: 5em;
    height: 5em;
    margin: 1em;
  }
}

.left {
  -webkit-animation: left .5s 1;
  -moz-animation: left .5s 1;
  -o-animation: left .5s 1;
  animation: left .5s 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode:    forwards;
  -o-animation-fill-mode:      forwards;
  animation-fill-mode:        forwards;
}

.diag {
  -webkit-animation: diag .5s 1;
  -moz-animation: diag .5s 1;
  -o-animation: diag .5s 1;
  animation: diag .5s 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode:    forwards;
  -o-animation-fill-mode:      forwards;
  animation-fill-mode:        forwards;
}

.down {
  -webkit-animation: down .5s 1;
  -moz-animation: down .5s 1;
  -o-animation: down .5s 1;
  animation: down .5s 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode:    forwards;
  -o-animation-fill-mode:      forwards;
  animation-fill-mode:        forwards;
}

@-webkit-keyframes left {
  0% {
    top: 3em;
    right: 3em;
    width: 1em;
    height: 1em;
  }
  100% {
    top: 1.5em;
    right: 5em;
    width: 2em;
    height: 2em;
  }
}

@-moz-keyframes left {
  0% {
    top: 3em;
    right: 3em;
    width: 1em;
    height: 1em;
  }
  100% {
    top: 1.5em;
    right: 5em;
    width: 2em;
    height: 2em;
  }
}

@-o-keyframes left {
  0% {
    top: 3em;
    right: 3em;
    width: 1em;
    height: 1em;
  }
  100% {
    top: 1.5em;
    right: 5em;
    width: 2em;
    height: 2em;
  }
}

@keyframes left {
  0% {
    top: 3em;
    right: 3em;
    width: 1em;
    height: 1em;
  }
  100% {
    top: 1.5em;
    right: 5em;
    width: 2em;
    height: 2em;
  }
}

@-webkit-keyframes diag {
  0% {
    top: 3em;
    right: 3em;
    width: 1em;
    height: 1em;
  }
  100% {
    top: 4em;
    right: 4em;
    width: 2em;
    height: 2em;
  }
}

@-moz-keyframes diag {
  0% {
    top: 3em;
    right: 3em;
    width: 1em;
    height: 1em;
  }
  100% {
    top: 4em;
    right: 4em;
    width: 2em;
    height: 2em;
  }
}

@-o-keyframes diag {
  0% {
    top: 3em;
    right: 3em;
    width: 1em;
    height: 1em;
  }
  100% {
    top: 4em;
    right: 4em;
    width: 2em;
    height: 2em;
  }
}

@keyframes diag {
  0% {
    top: 3em;
    right: 3em;
    width: 1em;
    height: 1em;
  }
  100% {
    top: 4em;
    right: 4em;
    width: 2em;
    height: 2em;
  }
}

@-webkit-keyframes down {
  0% {
    top: 3em;
    right: 3em;
    width: 1em;
    height: 1em;
  }
  100% {
    top: 5em;
    right: 1.5em;
    width: 2em;
    height: 2em;
  }
}

@-moz-keyframes down {
  0% {
    top: 3em;
    right: 3em;
    width: 1em;
    height: 1em;
  }
  100% {
    top: 5em;
    right: 1.5em;
    width: 2em;
    height: 2em;
  }
}

@-o-keyframes down {
  0% {
    top: 3em;
    right: 3em;
    width: 1em;
    height: 1em;
  }
  100% {
    top: 5em;
    right: 1.5em;
    width: 2em;
    height: 2em;
  }
}

@keyframes down {
  0% {
    top: 3em;
    right: 3em;
    width: 1em;
    height: 1em;
  }
  100% {
    top: 5em;
    right: 1.5em;
    width: 2em;
    height: 2em;
  }
}

.revLeft {
  -webkit-animation: revLeft .5s 1;
  -moz-animation: revLeft .5s 1;
  -o-animation: revLeft .5s 1;
  animation: revLeft .5s 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode:    forwards;
  -o-animation-fill-mode:      forwards;
  animation-fill-mode:        forwards;
}

.revDiag {
  -webkit-animation: revDiag .5s 1;
  -moz-animation: revDiag .5s 1;
  -o-animation: revDiag .5s 1;
  animation: revDiag .5s 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode:    forwards;
  -o-animation-fill-mode:      forwards;
  animation-fill-mode:        forwards;
}

.revDown {
  -webkit-animation: revDown .5s 1;
  -moz-animation: revDown .5s 1;
  -o-animation: revDown .5s 1;
  animation: revDown .5s 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode:    forwards;
  -o-animation-fill-mode:      forwards;
  animation-fill-mode:        forwards;
}

@-webkit-keyframes revLeft {
  0% {
    top: 1.5em;
    right: 5em;
    width: 2em;
    height: 2em;
  }
  100% {
    top: 3em;
    right: 3em;
    width: 1em;
    height: 1em;
  }
}

@-moz-keyframes revLeft {
  0% {
    top: 1.5em;
    right: 5em;
    width: 2em;
    height: 2em;
  }
  100% {
    top: 3em;
    right: 3em;
    width: 1em;
    height: 1em;
  }
}

@-o-keyframes revLeft {
  0% {
    top: 1.5em;
    right: 5em;
    width: 2em;
    height: 2em;
  }
  100% {
    top: 3em;
    right: 3em;
    width: 1em;
    height: 1em;
  }
}

@keyframes revLeft {
  0% {
    top: 1.5em;
    right: 5em;
    width: 2em;
    height: 2em;
  }
  100% {
    top: 3em;
    right: 3em;
    width: 1em;
    height: 1em;
  }
}

@-webkit-keyframes revDiag {
  0% {
    top: 4em;
    right: 4em;
    width: 2em;
    height: 2em;
  }
  100% {
    top: 3em;
    right: 3em;
    width: 1em;
    height: 1em;
  }
}

@-moz-keyframes revDiag {
  0% {
    top: 4em;
    right: 4em;
    width: 2em;
    height: 2em;
  }
  100% {
    top: 3em;
    right: 3em;
    width: 1em;
    height: 1em;
  }
}

@-o-keyframes revDiag {
  0% {
    top: 4em;
    right: 4em;
    width: 2em;
    height: 2em;
  }
  100% {
    top: 3em;
    right: 3em;
    width: 1em;
    height: 1em;
  }
}

@keyframes revDiag {
  0% {
    top: 4em;
    right: 4em;
    width: 2em;
    height: 2em;
  }
  100% {
    top: 3em;
    right: 3em;
    width: 1em;
    height: 1em;
  }
}

@-webkit-keyframes revDown {
  0% {
    top: 5em;
    right: 1.5em;
    width: 2em;
    height: 2em;
  }
  100% {
    top: 3em;
    right: 3em;
    width: 1em;
    height: 1em;
  }
}

@-moz-keyframes revDown {
  0% {
    top: 5em;
    right: 1.5em;
    width: 2em;
    height: 2em;
  }
  100% {
    top: 3em;
    right: 3em;
    width: 1em;
    height: 1em;
  }
}

@-o-keyframes revDown {
  0% {
    top: 5em;
    right: 1.5em;
    width: 2em;
    height: 2em;
  }
  100% {
    top: 3em;
    right: 3em;
    width: 1em;
    height: 1em;
  }
}

@keyframes revDown {
  0% {
    top: 5em;
    right: 1.5em;
    width: 2em;
    height: 2em;
  }
  100% {
    top: 3em;
    right: 3em;
    width: 1em;
    height: 1em;
  }
}

If you end up using this, you should download and host the images on your own site.

Thread Starter

pranaman

(@pranaman)

9 years ago

thank you, I may recreate it and try it that way

I had a friend help, and we used a js-enabling plugin. it took him about an hour, and he got it going here: http://admaticonsulting.com/home-animation2/.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Adding element with HTML, CSS and js’ is closed to new replies.

Adding element with HTML, CSS and js

Topics

Topics with no replies

Non-support topics

Resolved topics

Unresolved topics

All topics