HTML5 button and CSS3 carousel

  • Unknown's avatar
    kerin2014 · Member ·

    does WP support the standard HTML <button> tag?

    WP does not display a button, per the W3C standard and browser supported HTML specification, when I try this:

    </button><button>

    do something

    </button>

    so the question is, why does WP find it necessary to STRIP OUT the button image that comes with standard HTML5, and what is the workaround?

    Quite frankly, it is starting to get a little discouraging, all these little barriers that I am coming across that are preventing me from being to be able to freely customize a theme without the full range of HTML and attempt to introduce some custom interactivity on my site.

    for example, I have implemented a carousel of images, but now have to figure out have the user be able to spin the carousel without being able to use a button .

    I thought if I at least had a first-class button object, I could fake spinning the carousel (somehow – have not written the code yet) with HTML and CSS3) without the use of JS. I suppose I could fake a button with CSS, but why should I have to go to all this trouble?

    So what gives? Is an HTML a persona non grata in the WP world? And if so, what is the technical rationale for this?

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    kerin2014 · Member ·

    the spell checker changed my example code
    it should read

    <button>
   do something
</button>
  • Unknown's avatar
    kerin2014 · Member ·

    I tried to use the checkbox hack to bypass the WP restriction on input controls by using the well-known checkbox hack

    the following code works with no problem whatsoever on jsfiddle.net and make no use of javascript

    css

    .to-be-changed {
    color: black;
}

input[type=checkbox]:checked ~ .to-be-changed {
    color: red;
}

html

<input type="checkbox">
<p class="to-be-changed">I'm going to be red! It's gonna be legend... Wait for it...</p>

    however the WP code preprocessor strips out the declaration

    <input type=”checkbox”>

    so now this simple solution to the lack of button control functionality on WP is hosed.

    this is absolutely maddening. it seems that WP goes out of its way to prevent users from doing anything that is remotely sophisticated with CSS3 and HTML5.

    I certainly would appreciate hearing a technical explanation by a WP staff member why the above code is disallowed.

    does anyone have any ideas as to how to simulate input controls on WP?

  • Unknown's avatar
    kerin2014 · Member ·

    I checked the WP documentation and came across this

    Add Code to Your Site

    so they mention here that the HTML INPUT tag is not allowed for “security reasons.”

    okay. what might these be… exactly?

    I am sure there are valid concerns — I would simply like them spelled out for what seems to be an inoccuous what to allow a reader to respond to some app defined control.

    Unless the reason is philosophical, that is to say, the WP wishes readers to be little more than passive consummers of textual and image driven blog generated content with no interactive capability other than commentary.

  • Unknown's avatar
    kerin2014 · Member ·

    typo

    an innocuous “way” not what! ;-)

  • Unknown's avatar
    hallluke · Member ·

    The first paragraph on the page you linked to sums it up quite well:

    WordPress.com is a type of shared environment, where all users are running off of the same software. This is great because it allows us at Automattic to update millions of blogs at the same time with a single click. It means we can fix bugs or offer new features very quickly, which is a win for you as users. Having all users running on the same software can also be dangerous. If we aren’t careful, one user has the potential to take down the entire site. So this is why we need to limit some of the things you post on your blog.

    If you want to get your hands dirty with HTML and CSS then you could look at WordPress.org instead. Here’s a little overview of the differences: COM vs ORG.

    We might not be able to help, but it seems worth asking anyway – what did you want to do with button/textbox you’re trying to add?

  • Unknown's avatar
    kerin2014 · Member ·

    hi thx for the response!

    i am of course increasingly familiar with the diff between .org and .com for wp.

    i am thinking that for some of my micro apps, that what might work is a cheap hosting service with full programming js/html5/full css3 functionality, then link to these via text widgets on the sidebar, in some way that makes the apps seems integrated to my main blogs on wp.com. there are probably technically sophisticated way of performing this link that i have to learn, but i absolutely love learning new programming techniques that are in fact real world useful!

    as for the carousel micro app, all that is needed is for there to be 2 buttons (Forward, Back) that can allow the user to step through what amounts to an HTML approximation of a ring buffer or queue containing images.

    Without a button , there is not way to initiate the cycle of having the images go around the 3D carousel — unless there is some way to use, say, the mouse hover event. but this would complicated what is already a complex micro app.

    The main purpose of this app is to display in some cool way a group of 9 images and allow the user to click see all the images that are in the ring buffer (I have the code already up under Private in WP). If the user likes a particular image, then they can click on it, initiating the normal WP thumbnail –> full size attachment in the media lib process.

    My main goal is to to find creative ways to present images to users by taking advantage of some of the interesting and extremely useful capabilities of CSS3, as opposed to sticking with the stodgy galleries approach that is a tad tired at this point. (I have been blogging on WP for 2 years, on my other site: needlepointland.com)

    Any help in simulating this two button effect in order to be able to initiate some move() type event would be appreciated. This is the only thing the buttons would do, and I don’t quite see how this poses a security risk, but I am not an expert in such things.
    +

  • Unknown's avatar
    hallluke · Member ·

    You can upload images to your media library and display these as part of the built in functionality of WordPress, check out the pages on slideshows and galleries to see if that helps.

  • Unknown's avatar
    kerin2014 · Member ·

    yes, thanks. i have actually been doing just that for the past 2 years on my other blog. what i attempting here is to implement a 3D image carousel using CSS3 transforms via the custom CSS editor which I have subscribed to.

  • Unknown's avatar
    kerin2014 · Member ·

    yes, thanks. i have actually been doing just that for the past 2 years on my other blog. what i attempting here is to implement a 3D image carousel using CSS3 transforms via the custom CSS editor which I have subscribed to.

  • Unknown's avatar
    hallluke · Member ·

    Do you have an existing image gallery set up as a slideshow on your current blog? If you do then send me a link to it and I will see if any CSS animations can be added easily (I’m not sure how much CSS3 the upgrade supports, I’ll have to check).

  • Unknown's avatar
    kerin2014 · Member ·

    Thanks for your kind offer to look into this. I have created a post that contains a standard WP gallery. Here is the short code:
    http://wp.me/p4NqY3-hL

    what I want to do is create a 3D rotating gallery that displays the same 9 images as above. The code for this looks like this:

    <!DOCTYPE html>
<html>

<head>

<title>Carousel</title>

.carousel_container {
	position: relative;
	perspective: 1000px;
	margin-left: auto;
	margin-right: auto;
}

#carousel {
	width: 100%;
	height: 100%;
	margin-left: auto;
	margin-right: auto;
	position: absolute;
	transform-style: preserve-3d;
}

#carousel figure {
	display: block;
	position: absolute;
	width: 186px;
	height: 116px;
	left: 10px;
	top: 10px;
	border: transparent;
}

#carousel figure:nth-child(1) {
	transform: rotateY(0deg);
}

#carousel figure:nth-child(2) {
	transform: rotateY(40deg);
}

#carousel figure:nth-child(3) {
	transform: rotateY(80deg);
}

#carousel figure:nth-child(4) {
	transform: rotateY(120deg);
}

#carousel figure:nth-child(5) {
	transform: rotateY(160deg);
}

#carousel figure:nth-child(6) {
	transform: rotateY(200deg);
}

#carousel figure:nth-child(7) {
	transform: rotateY(240deg);
}

#carousel figure:nth-child(8) {
	transform: rotateY(280deg);
}

#carousel figure:nth-child(9) {
	transform: rotateY(320deg);
}

#carousel figure:nth-child(1) {
	transform: rotateY(0deg) translateZ(288px);
}

#carousel figure:nth-child(2) {
	transform: rotateY(40deg) translateZ(288px);
}

#carousel figure:nth-child(3) {
	transform: rotateY(80deg) translateZ(288px);
}

#carousel figure:nth-child(4) {
	transform: rotateY(120deg) translateZ(288px);
}

#carousel figure:nth-child(5) {
	transform: rotateY(160deg) translateZ(288px);
}

#carousel figure:nth-child(6) {
	transform: rotateY(200deg) translateZ(288px);
}

#carousel figure:nth-child(7) {
	transform: rotateY(240deg) translateZ(288px);
}

#carousel figure:nth-child(8) {
	transform: rotateY(280deg) translateZ(288px);
}

#carousel figure:nth-child(9) {
	transform: rotateY(320deg) translateZ(288px);
}

</head>

<body>

<div id="carousel"><figure>

[caption id="attachment_1061" align="aligncenter" width="150"]<a href="http://needlepointlandstore.wordpress.com/whimsy-and-grace-needlecases/wg12678n/" target="_blank" rel="attachment wp-att-1061"><img class="wp-image-1061 size-thumbnail" src="http://needlepointlandstore.files.wordpress.com/2014/08/wg12678n.jpg?w=150" alt="Karen's Damask" width="150" height="109" /></a> Karen's Damask[/caption]

</figure><figure>

[caption id="attachment_1060" align="aligncenter" width="150"]<a href="http://needlepointlandstore.wordpress.com/whimsy-and-grace-needlecases/wg12489n/" target="_blank"><img class="wp-image-1060 size-thumbnail" src="http://needlepointlandstore.files.wordpress.com/2014/08/wg12489n.jpg?w=150" alt="Williams Compton" width="150" height="108" /></a> Williams Compton[/caption]

</figure><figure>

[caption id="attachment_1059" align="aligncenter" width="150"]<a href="http://needlepointlandstore.wordpress.com/whimsy-and-grace-needlecases/wg12485n/" target="_blank" rel="attachment wp-att-1059"><img class="wp-image-1059 size-thumbnail" src="http://needlepointlandstore.files.wordpress.com/2014/08/wg12485n.jpg?w=150" alt="Williams Wild Tulips" width="150" height="111" /></a> Williams Wild Tulips[/caption]

</figure><figure>

[caption id="attachment_1058" align="aligncenter" width="150"]<a href="http://needlepointlandstore.wordpress.com/whimsy-and-grace-needlecases/wg12346n/" target="_blank" rel="attachment wp-att-1058"><img class="wp-image-1058 size-thumbnail" src="http://needlepointlandstore.files.wordpress.com/2014/08/wg12346n.jpg?w=150" alt="Wlliams Sweet Briar" width="150" height="121" /></a> Wlliams Sweet Briar[/caption]

</figure><figure>

[caption id="attachment_1057" align="aligncenter" width="150"]<a href="http://needlepointlandstore.wordpress.com/whimsy-and-grace-needlecases/wg12345n/" target="_blank" rel="attachment wp-att-1057"><img class="wp-image-1057 size-thumbnail" src="http://needlepointlandstore.files.wordpress.com/2014/08/wg12345n.jpg?w=150" alt="Autumn leaves" width="150" height="105" /></a> Autumn leaves[/caption]

</figure><figure>

[caption id="attachment_1056" align="aligncenter" width="150"]<a href="http://needlepointlandstore.wordpress.com/whimsy-and-grace-needlecases/wg12189n/" target="_blank" rel="attachment wp-att-1056"><img class="wp-image-1056 size-thumbnail" src="http://needlepointlandstore.files.wordpress.com/2014/08/wg12189n.jpg?w=150" alt="N's bee" width="150" height="122" /></a> N's bee[/caption]

</figure><figure>

[caption id="attachment_1055" align="aligncenter" width="150"]<a href="http://needlepointlandstore.wordpress.com/whimsy-and-grace-needlecases/wg11715n/" target="_blank" rel="attachment wp-att-1055"><img class="wp-image-1055 size-thumbnail" src="http://needlepointlandstore.files.wordpress.com/2014/08/wg11715n.jpg?w=150" alt="Violets study in ivory" width="150" height="97" /></a> Violets study in ivory[/caption]

</figure><figure>

[caption id="attachment_1054" align="aligncenter" width="150"]<a href="http://needlepointlandstore.wordpress.com/whimsy-and-grace-needlecases/wg11661n/" target="_blank" rel="attachment wp-att-1054"><img class="wp-image-1054 size-thumbnail" src="http://needlepointlandstore.files.wordpress.com/2014/08/wg11661n.jpg?w=150" alt="Pansey" width="150" height="118" /></a> Pansey[/caption]

</figure><figure>

[caption id="attachment_1053" align="aligncenter" width="150"]<a href="http://needlepointlandstore.wordpress.com/whimsy-and-grace-needlecases/wg11314n/" target="_blank" rel="attachment wp-att-1053"><img class="wp-image-1053 size-thumbnail" src="http://needlepointlandstore.files.wordpress.com/2014/08/wg11314n.jpg?w=150" alt="Williamsburg" width="150" height="113" /></a> Williamsburg[/caption]

</figure></div>

<!-- HTML buttons -->

<p id="navigation">
      <button>
	Do something!
	</button>
    </p>
</body>
</html>

    the “do something” is pseudo code for the code needed to step forward and/or back through the images.

    I look forward to hearing back from you!

  • Unknown's avatar
    hallluke · Member ·

    I can’t really make sense of the HTML and CSS you posted just by looking at it, do you have a live working example of what you’re trying to replicate that you could also link to so I could take a look?

  • Unknown's avatar
    kerin2014 · Member ·

    sure
    the demo is here

    and the code i sent you is very closely based on this tutorial, which explains the math behind the code

    so there is no js, and he is using the html button and some js but i figure the checkhox hackd could be played with to replace that

  • Unknown's avatar
    kerin2014 · Member ·

    no sure what happened to the demo link

    http://desandro.github.io/3dtransforms/examples/carousel-01.html

    http://desandro.github.io/3dtransforms/docs/carousel.html

  • Unknown's avatar
    hallluke · Member ·

    It looks like you could set up the images to appear in the carousel positions (although you would need to wrap the figure elements in two divs as shown in the demo to which you linked. However I’m not sure that you can replace the javascript to scroll through them on command so I’m not sure how useful it would be to you.

  • Unknown's avatar
    kerin2014 · Member ·

    okay so the bottom line seems to be

    other than the using the search box, leaving comments, and clicking to enlarge images or start videos and clicking on poll buttons

    WordPress is devoid of interactivity – from an end user perspective.

    There may be a solution involving mouse events such as hovering, to initiate the carousel cycle, but it will need some clever CSS3 — assuming WP has not totally disabled everything useful. I am just learning CSS, but I will give it a shot anyway.

    Thank you for looking into this.

  • The topic ‘HTML5 button and CSS3 carousel’ is closed to new replies.