0

I have recently installed DevExtreme (from the Dev Express website) as I was looking for a way to create a single solution for multiple mobile devices (this software allows that). Having created a 'Basic' Typescript project, I feel quite the idiot for not being able to get it to work!

Below shows something similar to the desired effect:

Text input, where the focused textbox 'glows'

However, I am having some difficulty replicating this for some of the devices. For example, the windows Phone does this automatically, whereas the IOS device doesn't, and remains 'normal'. :(

I followed the advise here, and copied everything, but still the textbox refuses to 'glow' for me!

My script: 

<script>
    $(function () {
        $("#glow-trigger").on('click', function (e) {
            var glower = $('.glow');
            window.setInterval(function () {
                glower.toggleClass('active');
            }, 1000);
        });
    });
</script>

My css for this:

.glow {
    background-color: #ccc;
    border: 1px solid transparent;    
    -webkit-transition: border 0.1s linear, box-shadow 0.1s linear;
       -moz-transition: border 0.1s linear, box-shadow 0.1s linear;
            transition: border 0.1s linear, box-shadow 0.1s linear;
}

.glow.active {
    border-color: blue;
    -webkit-box-shadow: 0 0 5px blue;
       -moz-box-shadow: 0 0 5px blue;
            box-shadow: 0 0 5px blue;
}

The 'practise' HTML:

 <div class="home-view" data-options="dxContent : { targetPlaceholder: 'content' } ">
        <br />
        <p class="hovertest">
            <button id="myButton" onclick="sayHello()"> this is a button</button>
        </p>
        <br />
        <h1>this is a heading</h1>
        <br />
       <h2>another heading</h2>
        <br />
        <a id="glow-trigger" href="#tomytextbox">Click Me</a>
        <p>this is normal text</p><div data-bind="dxTextBox: {}"></div>

        <div id="tomytextbox">
            <input class="glow" type="text" />
        </div>
        <div data-bind="dxMultiView: { height: 300, items: [{ text: 'Drag me to left' }, { text: 'drag me to right' }] }"></div>
     </div>

If I am doing something stupidly wrong, please tell me!

Thanks :)

Community
  • 1
  • 1
jbutler483
  • 24,074
  • 9
  • 92
  • 145

2 Answers2

1

I hope this is What you wanted:

CSS:

.glow:focus { box-shadow: 0 0 5px rgba(81, 203, 238, 1);
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid rgba(81, 203, 238, 1); }

Working Fiddel

EDIT:

As you commented it doesn't work on IOS

I don't think it's prohibited to do that. Although I think Apple would recommend if it's necessary to mark the selected textfield, you should consider splitting your view into multiple screens. A single screen shouldn't get too cluttered.

However if in your case that's not possible or not wanted, the easiest way to achieve a 'glow-effect' would be this (modify the values as you see fit):

#import <QuartzCore/QuartzCore.h>

textField.layer.masksToBounds = NO;
textField.layer.shadowColor = [[UIColor blueColor] CGColor];
textField.layer.shadowOffset = CGSizeZero;
textField.layer.shadowRadius = 10.0f;
textField.layer.shadowOpacity = 1.0;

(Don't forget to add the Quarz Framework to your project)

It would look like this: enter image description here

Gagan Gami
  • 10,121
  • 1
  • 29
  • 55
  • I was just wondering if you could possibly be able to replicate this design, without the movement of the tb? or is this possible? – jbutler483 Sep 15 '14 at 08:13
  • @jbutler483 : I didnt understand for what you are looking for? – Gagan Gami Sep 15 '14 at 08:31
  • 1
    it's ok got it sorted - all it was that the textbox was shifting a few pixels when in focus, but managed to do a few tweaks to get it working! thanks :) – jbutler483 Sep 15 '14 at 08:38
  • Surprised really - I literally know NOTHING of css/html/typescript! – jbutler483 Sep 15 '14 at 08:44
  • I know that site very well-it's more typescript that's hard to understand (i've basically created a typescript project and only used the css and html part! :S – jbutler483 Sep 15 '14 at 08:48
0

This is how bootstrap 3 does it:

.form-control:focus {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
}

Why are you using JS when CSS :focus does the job?

Sergiu Paraschiv
  • 9,929
  • 5
  • 36
  • 47