I’m using a jQuery mobile slider in a JQM dialog but it’s not being rendered properly, it’s most noticeable in safari and chrome. It renders fine in a standard JQM page.
<div data-role="dialog" id="Dialog1">
<div data-role="header"> <h1> Dialog</h1> </div>
<div data-role="content">
<label for="slider-2">Input slider:</label>
<input type="range" name="slider" id="slider-2"
value="25" min="0" max="100" />
</div>
<div data-role="footer"><h3>Footer</h3></div>
</div>
Here’s a link to a jsfiddle illustrating the issue, if you click the “open dialog” button the slider isn’t rendered correctly but if you click the “open as page” it is.
I’ve tried calling .slider() and .slider(‘refresh’) in the pageshow event but it doesn’t seem to make a difference.
There is an easier way to fix that:
<input type="number" data-type="range" name="slider" id="slider-0" value="0" min="0" max="100">
Its an number type but with an range data-type. Figured it out by playing around with the code.
Works fine so far!
Anyway it's fixed in the latest version 1.0.1!
OK I sort of solved the problem, though the solution is not to pretty and is a bit of a hack.
I realized that the problem is only when the slider is on a dialog, so what I’m doing is setting the data-role of the page I want as a dialog to page, then in my JavaScript I call the dialog() method on that page to initialize it as a dialog widget. The problem is that when you change to the page next the x in the corner (close button) doesn’t get rendered, so I’m manually creating the styles and markup for it.
Here’s the code I’m using
$('#progWiz').dialog().find('a:first')
.addClass('ui-btn-left ui-btn ui-btn-up-a' +
' ui-btn-icon-notext ui-btn-corner-all ui-shadow')
.attr({ 'title': 'close', 'data-theme': 'a' })
.empty()
.append('<span class="ui-btn-inner ui-btn-corner-all" aria-hidden="true">' +
' <span class="ui-btn-text">Close</span>' +
'<span class="ui-icon ui-icon-delete ui-icon-shadow"></span></span>');
If someone has a better solution I'd be happy to hear, in the meantime I'll just do this and hopefully this get's fixed in the next release of JQM.
I also seek solution. I have two Sliders in dialog.
Code below is not solution but workaround I did for my problem. Hope it helps someone.
Problem is in Android Phones it does not create input boxes on left showing value of slider.
I handled that by hiding the original input type slide and adding a text box above the slider.
On slide change event I change the Text Box Value. And as I dont want Keyboard operations , I have disabled the text box.
Code Below.
<script>
$("#slider-0").change(function(event, ui) {
$('#thicknessBox').val($(this).val());
});
</script>
<label for="slider-1">Thickness:</label>
<input type="text" id="thicknessBox" name="slider-1" disabled="disabled" ></input>
<input data-role="none" style="display:none;" type="range"
id="slider-0" value="1" min="1" max="10" />
Im not proud of it but atleast now it looks and behaves like slider outside the dialog.
Looking forward to better solution.
Related
I used a simple html
<input type="number">
It is showing a text box with up and down arrows but the arrows are not working. The value can be incremented/decremented with arrows on keyboard and mouse scroll, but when I click on any of the arrows, it seems that the down arrow is clicked and the value in the box remains the same. Please suggest what should I do!
Well I'm surprised by this but it looks like a bug, at least in Chrome. (Edge doesn't show the arrows at all and Firefox behaves correctly.)
The mousemove event listener (on the element or the document) breaks the INPUT TYPE="number" if an e.preventDefault() is present:
<input type="number" value="1"/>
$(function() {
$(document).on('mousemove', function (e) {
e.preventDefault();
});
});
See https://jsfiddle.net/MCAU/Lpojfrm2/
Can anyone confirm this?
You can try this:
HTML
<div id="incdec">
<input type="text" value="0" />
<img src="up_arrow.jpeg" id="up" />
<img src="down_arrow.jpeg" id="down" />
</div>
JQuery
$(document).ready(function(){
$("#up").on('click',function(){
$("#incdec input").val(parseInt($("#incdec input").val())+1);
});
$("#down").on('click',function(){
$("#incdec input").val(parseInt($("#incdec input").val())-1);
});
});
After so much of attempts removing JS CSS n all. Come to know that "ember-view" class was creating the issue. I was using ember and the div in which I was using input type="number" was having class "ember-view". Removing that class makes the textbox work good :). Thanks.
Earlier
<div class="ember-view">
<input type="number">
</div>
Now
<div>
<input type="number">
</div>
Try this:
<input type="number" step="1" >
Here in step option give the value you want to increment or decrement to the value.i.e if you set step=0.5 and your value is 5 on click up arrow it will change the value to 5.5
I hope this will work for you
Try it.
input field need focus to increment/decrement value.
<input type="number" autofocus="autofocus">
For me arrows were displayed on desktop Chrome but I tried so hard to restore arrows form mobile browsers like mobile Chrome, I tried many solutions without success.
Eventually I decided to make some nice buttons on the sides of the input. I made the code and you can add as many buttons as you want as long as you respect the id numeration. I invite you to look at the snippet I posted on this other similar post.
https://stackoverflow.com/a/68679616/13795525
I've been asked by a client to make a feed like exactly like this on a website.
I have the logos etc as it was profided in a photoshop document.
Would someone care to help?
IT will be going inside a <div class="col-lg-3">
The things I need answering then is, How do I go about making the feed (I'm guessing it would just be an API but I don't know how to add the logos, I also don't know if it is an API, it could be an RSS feed? again I'm unaware how to add the logos.)
and how do I add the custom slider bar?
This is what i need it to look like
Sam
Since the slider is used for users input it used the same syntax other input tags do. The type of this tag though is "range"
<input type="range" />
The previous snippt should be enough to show the slider, but this tag has more attributes you can use. Let’s set the range of values (max and min).
<input type="range" min="0" max="100" />
Now users can choose any number between 0 and 100.
The slider has a default value of zero but if you give it a different value, when the browser renders the code, the pin will be positioned at that value. The next code will position the pin halfway between the ends of the bar.
<input type="range" min="0" max="50" value="25" />
What if you just want people to choose values at intervals of 5? This can easily be accomplished using the step attribute.
<input type="range" min="0" max="50" value="25" step="5" />
How will users know what value they are choosing? That’s a good question and the answer is that you are going to have to come up with your own solution.
Here is a simple javascript code that will show the value of the slider as you slide it.
<html>
<body>
<input type="range" min="0" max="50" value="0" step="5" onchange="showValue(this.value)" />
<span id="range">0</span>
<script type="text/javascript">
function showValue(newValue)
{
document.getElementById("range").innerHTML=newValue;
}
</script>
</body>
</html>
And that should render this (if your browser supports it)
There are many apis and embeds provided by both Twitter and Facebook, that with some knowledge you can get to work. However, since you don't have any code, we can't dissect what you have tried. Have you tried searching around for options? There are plenty! I would look into TintUp, Juicer and the one I personally used, which looks a lot like your example... FeederNinja.
I have made an html wizzard for making order. There are four steps, in each is bunch of radio buttons. I redesigned each radio button label to large button (and hidding the radio input itself). This all work greatly on classic PC. But I've run into problem with mobile device (iPHONE & iPAD, I can't test it on other devices, because I don't have any), which are unable to select the radio button.
I've found only one notice of this problem here on stackoverflow, but the solution published there isn't function either.
The original inspiration comes from apple online store for selecting differnt color of device.
My example code:
<label class="option" for="edit-term-worker">
<input id="edit-term-worker" class="form-radio" type="radio">
<span class="worker-name">Sandra</span>
</label>
It's there need some JS, or I'have some flaw in my code?
Thank you all for your help.
Have you tried this?
<input id="edit-term-worker" class="form-radio" type="radio" />
<label class="option" for="edit-term-worker" onclick="">
<span class="worker-name">Sandra</span>
</label>
EDIT: Added an empty onclick, according to this that should do the trick: HTML <label> command doesn't work in Iphone browser
Note that you shouldn't put the radio button into the label tag, it should be outside.
I am still having trouble with checkboxes. They are small and hard to see. When I disable my checkbox it becomes even harder to see. The color of the check becomes lighter.
Is there another way that I can stop a checkbox from responding to a click. Maybe something with javascript / jQuery so that once a variable is set then when a checkbox is clicked it just returns straight back to its pre-click state.
You could try using plain HTML with the readonly attribute:
<input type="checkbox" readonly="readonly" .../>
<input type="checkbox" onclick="return false;" />
or with jquery:
html:
<input type="checkbox" class="disabled" />
js:
$('input.disabled').click(function(e) {
e.preventDefault();
});
I already posted a similar question and got a jQuery solution that works. Now I want to do it with only CSS/HTML. I saved twitter's homepage locally and deleted all the js scripts and noticed that the effect I'm trying to achieve is with CSS/HTML (when you click on the username/pass the values "Username"/"Password" stay there until you enter text).
I'm a newbie at these kind of new CSS/HTML effects and have spent the last couple of hours trying to replicate it with no success.
Here's the html of twitter's login form:
<form action="#" class="signin" method="post">
<fieldset class="textbox">
<div class="holding username">
<input type="text" id="username" value="" name="session[username_or_email]" title="Username or email" autocomplete="on">
<span class="holder">Username</span>
</div>
<div class="holding password">
<input type="password" id="password" value="" name="session[password]" title="Password">
<span class="holder">Password</span>
</div>
</fieldset>
<fieldset class="subchck">
<label class="remember">
<input type="checkbox" value="1" name="remember_me">
<span>Remember me</span>
</label>
<button type="submit" class="submit button">Sign in</button>
</fieldset>
I've looked over the site's CSS but it's 10,000 lines and very complicated. How should the CSS look like? Or could you point me out to a tutorial on how to achieve the same effect as this is driving me nuts?
Thank you very much,
Cris
Set the HTML autofocus attribute:
<input type="text" placeholder="Type here ..." autofocus="autofocus" />
You can target elements that are focused or blured like so:
input:focus {color:red;}
You now need to nest the CSS to hide the span called holder inside the input.
span.holder input:focus {visibility:hidden;}
I have not tried this, but it would be something like this.
To clarify, I have just pulled the JavaScript twitter use and the source for their home page and I can confirm that they are using the following JavaScript function for focus on the field
inp.focus()
The JavaScript is quite lengthy but it looks like after a quick read that they are using jQuery that is setting focus based on the class being username.
I just looked at the autofocus property suggested by another poster and this method has worked for me in my web app currently under development.
The code for this is
<input type="text" id="username" value="" name="session[username_or_email]" title="Username or email" autocomplete="on" autofocus>
Note, per the documentation at the W3C website, the autofocus property can only be used once on the page. I have put it into a form that is hidden and shown in an inline element using Fancybox.
The grayed out text in the input field can be done with the place-holder element, something I'm already using, add the following into your input element
placeholder="Username"
NOTE: Both placeholder and autofocus are HTML5 properties and may not be supported by all major browsers yet, this is why JavaScript is still being used by sites like twitter.
The styling is done based on CSS/CSS3 greatly, an excellent resource is W3Schools. I would recommend for what you're wanting to achieve start at the CSS3 section looking at borders.
Another resource that is excellent but hasn't been updated for about a month and a half sadly is doctype.tv. Nick has some fantastic advise regarding styling your website along with some great insight into design.
Judging by the bolded text in your question (when you click on the username/pass the values "Username"/"Password" stay there until you enter text), I'm guessing what you want is the placeholder attribute, which #phihag has in his example.
<input type="text" placeholder="This text will disappear" />
The placeholder attribute works without Javascript in browsers that support it. For older browsers, you'll need some Javascript, and this is probably what Twitter is doing in their code.
See the Wufoo page on the Placeholder Attribute for more details, including how to do a javascript fallback and what browsers it is currently supported in.
See also this demo which shows how to style the ":placeholder" and ":active" states (at least for webkit and mozilla).