I'm using Semantic-UI (with Codeigniter, no React or anything beyond common use) to validate a form.
This is the semantic UI init code:
$form.form({
on: "submit",
fields: fieldsToValidate,
inline: true
});
I want the errors messages to show in the correct input field and I already included the semantic.min.js and semantic.min.css files (in other similar questions I found that this may be the reason for my problem but it's not), but every time I submit the form I get this error:
Transition: Element is no longer attached to DOM. Unable to animate.
Use silent setting to surpress this warning in production. scale in
I cannot make sense of this error, any kind of suggestions would be much appreciated. Thank you all!
All Semantic-Ui files imported.
<link rel="stylesheet" href="{{ asset('/js/semantic-ui/semantic.min.css') }}" />
<script src="{{ asset('/js/semantic-ui/semantic.min.js') }}"></script>
Error message on submit:
Transition: Element is no longer attached to DOM. Unable to animate.
Use silent setting to surpress this warning in production. scale in
I am having a problem with my XSLT, I am using SharePoint 2010 and I am building a custom front-end that will pull data from lists and render the data in a nice manner. I have figured out how to use XSLT with HTML to render a SharePoint list, I wasn't able to add an image of my news feeds because my rep is too low but I will get it up!
Now here is where my problem starts:
I am using jQuery toggle to show/hide the body paragraph of this news feed. The Continue Reading button is where my issue is, every time I click on the "Continue Reading" button in the lower right of each news post, it show/hides all the news items, not just the one I click on.
I have tried using Bootstrap collapse and now I am using jQuery Toggle() however I run into the same issue! Take a look at my XSLT code snippet to display thee body paragraph and the corresponding jQuery code snippet that actives the show/hide toggle:
XSLT:
<tr class="spacer">
<td valign="top" class="td-newscontent">
<div class="news content">
<!-- start excerpt -->
<xsl:value-of select="#BodyExcerpt" disable-output-escaping="yes" />
<div class="moving">
<xsl:value-of select="#Body" disable-output-escaping="yes" />
</div>
<!-- end news excerpt -->
<!-- start continue reading link -->
<xsl:text disable-output-escaping="yes"><![CDATA[<br class="continue-br" />]]></xsl:text>
<a class="butt pull-right continue-right">Continue Reading</a><br /><br />
<!-- end continue reading link -->
</div>
</td>
</tr>
Javascript (jQuery)
$(".moving").hide();
$(".butt").click(function() {
$(".moving").toggle("slow", function() {
});
});
.moving is the actual #body being shown/hidden
.butt is the "continue reading" button (I know butt was a bad name to use)
I have read a few things on the net about "this" but I am not sure how to use it.
First time posting so I couldn't post any images, but when you click on "continue reading" all the body news articles expand then you click it again and all the body news items contract, what I would like it to do is open just the one I am clicking on!
I have a lot going on, everything is housed in SharePoint, using HTML5, Css3, jQuery and XSLT. I started by using IDs but I switched to classes, not sure if that was a good idea but it functions, but not as intended.
Any help would be appreciative, I have been researching this issue for almost 2 weeks so I finally decided to ask some experts :) (Feel free to ask any questions or ask for more information, I will answer with everything I got!)
You are close, so well done for getting this far! Your problem lies in your JavaScript. If you look at the rendered code using your browser's developer tools (F12), you will find that all of the different body texts have the same class (moving) and all of the buttons have the same JavaScript onclick, which is to toggle everything of class .moving.
Thus the solution you are looking for is to match each button with its respective body text. There are two main ways you can do this.
You can give each text div and each button a unique ID by assigning it to some unique feature of the list item (SharePoint list items already have a unique identifier as the field ID). Using xsl:value-of within HTML attributes would violate XML rules, so you can use something called an Attribute Value Template, which is the bit in the curly braces:
<div id="newstext_{#ID}">
<xsl:value-of select="#Body" disable-output-escaping="yes" />
</div>
<!-- etc... -->
<a onclick="$('#newstext_{#ID}').toggle('slow', function() {});">Continue reading</a>
Modify just the JavaScript to target the parent of the button. The following code selects the parent DOM element of the button, which should be the div of class .news, then finds the child of class .moving, then applying your toggle:
$(".butt").click(function() {
$(this).parent().find(".moving").toggle("slow", function() {
});
});
The second method is easier but can get complicated if you end up running a lot of JavaScript. It is easier (and more efficient) to select elements by ID, so personally I think the extra effort is worth it. I haven't tested this code so let me know if it doesn't work. On some of your other points:
no, butt is not a good name for a class - remember, you can use element types in your jQuery selectors, so there is no need to duplicate the type as the class. For example, $('a') selects all the anchor tags on the page.
IDs should be used when elements need to be uniquely identified (e.g. for scripts), classes when you are grouping elements together (e.g. for styles).
The example Tumblr gives is
<html>
<head>
<!-- DEFAULTS -->
<meta name="if:Show people I follow" content="1"/>
<meta name="if:Reverse pagination" content="0"/>
</head>
<body>
{block:IfNotReversePagination}
Previous Next
{/block:IfNotReversePagination}
{block:IfReversePagination}
Next Previous
{/block:IfReversePagination}
{block:IfShowPeopleIFollow}
<div id="following">...</div>
{/block:IfShowPeopleIFollow}
</body>
</html>
For these meta-if tags, when I change content="1" to content="0" or content="" nothing seems to happen to the appearance of my tumblr.
I don't understand what these meta-if tags do.
According to Tumblr: By including the special meta-if tags in your theme, users can easily toggle options you define. This is useful for showing or hiding different widgets or design elements.
I understood this as you can show/hide different design elements by changing the content value ie. content="0", content="1", content="". But nothing seems to happen to the design if I do this.
I googled this and I can't find any explanation elaborating on what Tumblr says. Can someone please explain?
Tumblr uses meta tags to save preferences of the theme. Meta if will cause that user gets a new checkbox on the Appearance menu. If its checked than the
<div id="following">...</div>
will be shown on your page.
So there should be new div element in the page source and three dots displayed on the page.
What Bojan Dević said is correct. Although, I would like to address the other half of your question, as well. content="1" automatically sets the element to be shown, or as content="0" makes it hidden.
In Webkit on iPhone/iPad/iPod, specifying styling for an :active pseudo-class for an <a> tag doesn't trigger when you tap on the element. How can I get this to trigger? Example code:
<style>
a:active {
background-color: red;
}
</style>
<!-- snip -->
Click me
<body ontouchstart="">
...
</body>
Applied just once, as opposed to every button element seemed to fix all buttons on the page. Alternatively you could use this small JS library called 'Fastclick'. It speed up click events on touch devices and takes care of this issue too.
As other answers have stated, iOS Safari doesn't trigger the :active pseudo-class unless a touch event is attached to the element, but so far this behaviour has been "magical". I came across this little blurb on the Safari Developer Library that explains it (emphasis mine):
You can also use the -webkit-tap-highlight-color CSS property in combination with setting a touch event to configure buttons to behave similar to the desktop. On iOS, mouse events are sent so quickly that the down or active state is never received. Therefore, the :active pseudo state is triggered only when there is a touch event set on the HTML element—for example, when ontouchstart is set on the element as follows:
<button class="action" ontouchstart=""
style="-webkit-tap-highlight-color: rgba(0,0,0,0);">
Testing Touch on iOS
</button>
Now when the button is tapped and held on iOS, the button changes to the specified color without the surrounding transparent gray color appearing.
In other words, setting an ontouchstart event (even if it's empty) is explicitly telling the browser to react to touch events.
In my opinion, this is flawed behaviour, and probably dates back to the time when the "mobile" web was basically nonexistent (take a look at those screenshots on the linked page to see what I mean), and everything was mouse oriented. It is interesting to note that other, newer mobile browsers, such as on Android, display `:active' pseudo-state on touch just fine, without any hacks like what is needed for iOS.
(Side-note: If you want to use your own custom styles on iOS, you can also disable the default grey translucent box that iOS uses in place of the :active pseudo-state by using the -webkit-tap-highlight-color CSS property, as explained in the same linked page above.)
After some experimentation, the expected solution of setting an ontouchstart event on the <body> element that all touch events then bubble to does not work fully. If the element is visible in the viewport when the page loads, then it works fine, but scrolling down and tapping an element that was out of the viewport does not trigger the :active pseudo-state like it should. So, instead of
<!DOCTYPE html>
<html><body ontouchstart></body></html>
attach the event to all elements instead of relying on the event bubbling up to the body (using jQuery):
$('body *').on('touchstart', function (){});
However, I am not aware of the performance implications of this, so beware.
EDIT: There is one serious flaw with this solution: even touching an element while scrolling the page will activate the :active pseudo state. The sensitivity is too strong. Android solves this by introducing a very small delay before the state is shown, which is cancelled if the page is scrolled. In light of this, I suggest using this only on select elements. In my case, I am developing a web-app for use out in the field which is basically a list of buttons to navigate pages and submit actions. Because the whole page is pretty much buttons in some cases, this won't work for me. You can, however, set the :hover pseudo-state to fill in for this instead. After disabling the default grey box, this works perfectly.
Add an event handler for ontouchstart in your <a> tag. This causes the CSS to magically work.
<a ontouchstart="">Click me</a>
This works for me:
document.addEventListener("touchstart", function() {},false);
Note: if you do this trick it is also worth removing the default tap–highlight colour Mobile Safari applies using the following CSS rule.
html {
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
As of Dec 8, 2016, the accepted answer (<body ontouchstart="">...</body>) does not work for me on Safari 10 (iPhone 5s): That hack only works for those elements that were visible on page load.
However, adding:
<script type='application/javascript'>
document.addEventListener("touchstart", function() {}, false);
</script>
to the head does work the way I want, with the downside that now all touch events during scrolling also trigger the :active pseudo-state on the touched elements. (If this is a problem for you, you might consider FighterJet's :hover workaround.)
//hover for ios
-webkit-tap-highlight-color: #ccc;
This works for me, add to your CSS on the element that you want to highlight
Are you using all of the pseudo-classes or just the one? If you're using at least two, make sure they're in the right order or they all break:
a:link
a:visited
a:hover
a:active
..in that order. Also, If you're just using :active, add a:link, even if you're not styling it.
For those who don't want to use the ontouchstart, you can use this code
<script>
document.addEventListener("touchstart", function(){}, true);
</script>
I've published a tool that should solve this issue for you.
On the surface the problem looks simple, but in reality the touch & click behaviour needs to be customized quite extensively, including timeout functions and things like "what happens when you scroll a list of links" or "what happens when you press link and then move mouse/finger away from active area"
This should solve it all at once: https://www.npmjs.com/package/active-touch
You'll need to either have your :active styles assigned to .active class or choose your own class name. By default the script will work with all link elements, but you can overwrite it with your own array of selectors.
Honest, helpful feedback and contributions much appreciated!
I tried this answer and its variants, but none seemed to work reliably (and I dislike relying on 'magic' for stuff like this). So I did the following instead, which works perfectly on all platforms, not just Apple:
Renamed css declarations that used :active to .active.
Made a list of all the affected elements and added pointerdown/mousedown/touchstart event handlers to apply the .active class and pointerup/mouseup/touchend event handlers to remove it. Using jQuery:
let controlActivationEvents = window.PointerEvent ? "pointerdown" : "touchstart mousedown";
let controlDeactivationEvents = window.PointerEvent ? "pointerup pointerleave" : "touchend mouseup mouseleave";
let clickableThings = '<comma separated list of selectors>';
$(clickableThings).on(controlActivationEvents,function (e) {
$(this).addClass('active');
}).on(controlDeactivationEvents, function (e) {
$(this).removeClass('active');
});
This was a bit tedious, but now I have a solution that is less vulnerable to breakage between Apple OS versions. (And who needs something like this breaking?)
A solution is to rely on :target instead of :active:
<style>
a:target {
background-color: red;
}
</style>
<!-- snip -->
<a id="click-me" href="#click-me">Click me</a>
The style will be triggered when the anchor is targeted by the current url, which is robust even on mobile. The drawback is you need an other link to clear the anchor in the url. Complete example:
a:target {
background-color: red;
}
<a id="click-me" href="#click-me">Click me</a>
<a id="clear" href="#">Clear</a>
No 100% related to this question,
but you can use css sibling hack to achieve this as well
HTML
<input tabindex="0" type="checkbox" id="145"/>
<label for="145"> info</label>
<span> sea</span>
SCSS
input {
&:checked + label {
background-color: red;
}
}
If you would like to use pure html/css tooltip
span {
display: none;
}
input {
&:checked ~ span {
display: block;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<style>
a{color: red;}
a:hover{color: blue;}
</style>
</head>
<body>
<div class="main" role="main">
Hover
</div>
</body>
</html>
I have a custom tag like this:
<content name="Home" />
When I click the Html button of the TinyMCE it was replaced with
<content name="Home"></content>
Currently my settings are: valid_elements: "content[name]"
What should I put in the valid_elements variable so that the tag will will be:
<content name="Home" />?
I am not perfectly sure, but i think this issue is not to be solved easily.
I do not think that you can configure this behavior because it is browser related and not tinies fault. Looks like the browser treats your custom html element like an html element with an opening and a closing part on default, even though you want to have a single part html element like a br-tag. The only way - i see - is to get the browser to accept your custom thlm elment as one part html element, which i do not know how to do.