Delay in class change to 'activated' when using ng-click in ionic - javascript

I am using ng-click on a div element in an ionic app as such:
<div class="thediv" ng-click="showActionsheet()"><p>26</p></div>
This works well, but I have some CSS setup:
.thediv.activated {
background-color: #d18027;
border: 2px solid #ffc666;
}
The CSS activates if I press the div long enough, but when I just tap it nothing happens. I would also like to keep it activated until the actionsheet closes. Not sure how to go about that either...

I'm afraid that you can't solve the delay. That's one of the bad things of working with building hybrid mobile apps. Ionic framework is very good, but in my opinion it will never be as fast as native apps (mainly if it's not a very new-fast-modern device).
About keeping it activated, you can create a variable like $scope.isActivated and at the beginning of your method showActionsheet() give it a true. When you close the action sheet set it to false.
And in your div you can do something like
<div class="thediv" ng-click="showActionsheet()" ng-class="active: isActivated"><p>26</p></div>
In your CSS do also
.thediv.activated,
.thediv.active, {
background-color: #d18027;
border: 2px solid #ffc666;
}

Related

No styles being loaded for TipTap in React

I am in the process of finding a rich text editor to add to my application and came across TipTap. It looks great so I followed a tutorial I found on YouTube however no styles are being loaded on my site.
I have been searching for a solution for ages but can't find a replication of this problem.
No styles are being loaded on render so the editor is no more than a line of text indicating the menu buttons and a blank box (which is editable) for the input area.
All of the buttons behave as expected but there are no styles.
I noticed that if I try to render a simple HTML button on another page it also comes without default styling. Is there something obvious I'm missing here? I have been searching for a solution for a few hours now.
This is how my editor looks
This is how it should look
This is a HTML button also showing without a default style I tried to render on another page
<button type="button">Where is the style?</button>
I tried deleting the cache on Chrome however nothing changed
If anyone is in the same boat I have found a solution, each element on the page needs to be defined explicitly within the css file. Default behaviour wasn't working as expected so for the buttons I added to the style sheet:
button {
border: 2px solid black;
padding: 3px;
border-radius: 2px;
}
and styles appeared.
Adding .ProseMirror to each element had no effect on its styling so I had to style elements globally. This affected other components I had made such as a Button component, to overcome this I added editor to the class name of each button in the Editor component
<button
//
className={editor.isActive('underline') ? 'is-active' : 'editor'} //default is '' but 'editor' added
>
This allowed me to style the Editor buttons separately
button.editor {
border: 2px solid black;
padding: 6px;
width: 80x;
border-radius: 8px;
background-color: ##C1BCAC;
}

Is there a straightforward way of detecting focus changes in a container element?

In the following code:
div {padding: 10px; border: 1px solid black}
div.whenFocused {background: yellow}
input {display: block}
* {outline: none}
<div tabindex=0>
Text:
<input>
</div>
Is there a simple way of detecting when the DIV gained or lost focus, either directly or indirectly through one of its children?
I need the DIV to have a yellow background whenever the user is interacting with it. The DIV is focusable so the user may arrive there via keyboard or mouse.
If they use the mouse, clicking anywhere inside the DIV must trigger a background-color change. Also, clicking outside the DIV must return the background-color to normal.
I already have this behavior implemented with a couple of helper functions and by listening to several events on different elements. But it's too much code for such a simple thing.
I'm sure there must be a simple and straightforward way, but I can't think of one right now.
(By simple I mean listening to a couple of events plus a couple of one-liner event-handlers and that's it)
I found a simple solution using jQuery:
$('div').on('focusin focusout',function(){ $(this)[(this.contains(document.activeElement)?'add':'remove')+'Class']('whenFocused') })
It's not exactly straightforward, but at least it's a one-liner.
It requires support for:
focusin/focusout
Node.contains
document.activeElement

JQuery Mobile Menu Working Only On Desktop

I've developed a template for a client that uses a very basic desktop/mobile menu system that switches based on css media queries.
I've used this method for a several other sites without difficulty, however this one is proving more difficult. Essentially, the mobile menu will drop down when clicked in the desktop environment, but will not appear in the mobile environment when the trigger is clicked.
The trigger is based in JQuery, using the .click() method.
Here is the site in it's dev environment: dev.thinkswift.com
A few notes:
1. Jquery .click() DOES work in the mobile environment, there are extensive examples of this.
2. The function IS firing, I tried adding a console log to make sure and it executed just fine.
Any ideas?
In style.css (line: 130) try to remove 2 lines:
#top-nav {
position:fixed;
z-index:999;
top:0px;
left:0px;
font-family: 'Roboto Condensed', sans-serif;
/* overflow:hidden; */
/* height:50px; */
box-shadow:0px 2px 4px rgba(0,0,0,0.3);
background:#fff;
}
With limit 50px of height you made a thin viewport for your menu. Fixed height of parent didn't allow child container (#mobile-menu-dropdown) to expand its parent (#top-nav).
And jquery code that shows/hides menu looks a little clumsy. You can make it much shorter.
This:
$('#mobile-menu-toggle').click(function(){
if ( $('#mobile-menu-dropdown').is(':visible')) {
$('#mobile-menu-dropdown').hide();
} else {
$('#mobile-menu-dropdown').show();
}
});
may be replaced with this
$('#mobile-menu-toggle').click(function(){
$('#mobile-menu-dropdown').toggle();
});
without functionality lost.

Jquery sliders behaves differently than example from documentation

I copy pasted the code from http://jqueryui.com/demos/slider/range.html for local testing. And what I see is different from what the url shows. When I click the slider "big dots" (used to change the value) the dot image gets a dotted border around it and it doesn't go away after I release the click until I focus another element on the page.
Here's how it looks in my local test (using Vader theme makes it easy to see):
Why this doesn't happen on the example from jQueryUI demos?
It's because it is a link in firefox, which displays a border by default on all links. Use this in your css.
a { outline: none; }
button::-moz-focus-inner { border: 0; }
Edit: it is a link, so I updated the css accordingly.

How to create in-context editing?

My company is building a CMS. As a front-end web developer, I am asked to build a 'in-context editing' feature.
You can see an example here http://www.concrete5.org/documentation/general-topics/in-context-editing/
I want to know what kind of program should we know to build this? Can this be achieved with just JavaScript or some front end tools or does it need some server-side language?
Thanks.
For single line edits, here is a simple way to enable inline editing with just CSS (and a little JavaScript for IE7). In your edit-mode page, use a textbox to display the text, whether in edit mode or view mode.
Here's the css to make a form field look like plain text until it is hovered or focused:
.inContextEdit
{
border: solid 1px transparent;
margin: -2px -3px;
padding: 1px 2px;
}
.inContextEdit.focus, /* IE7 doesn't recognize :focus */
.inContextEdit:focus,
.inContextEdit:hover
{
border-color: #ccc;
}
Then, some JavaScript for IE7:
function focusInput(el)
{
el.className += " focus";
}
function blurInput(el)
{
el.className = el.className.replace(/ *focus\b/g, "");
}
And here is the markup you would use:
<input name="PageTitleInput"
value="Page title"
class="inContextEdit"
onfocus="focusInput(this);"
onblur="blurInput(this);" />
This trick will work with a <textarea> instead of an <input>, but you'll probably be better off finding an existing control for your multi-line text. The css could be tricky and hiding the scroll bar in view mode will be difficult. There are several existing controls out there with rich text capabilities.
Will need both front end and back end tools.
I assume you are talking about an in place editor.. jquery has quite a few plugins for it.
If you need a rich text editor, try out TinyMCE. I've used it, and liked it too.

Categories

Resources