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.
Related
this is the current code I have right now. I have other lines of code written above it but none of them would affect what I have written here. the thing I'm doing is telling me to write code describing it. I have written a label for an email and text tag. which it is has verified having code written to describe them. the labels I've written for them are exactly the same. does anybody know if this is different for a number tag.
number tag code:
`<input id="number" type="number" min="1" max="100" placeholder="number">Your favorite Number</input>`
<label id="number-label">
email tag code:
<input required id="email" type="email" placeholder="bobwho22#gmail.com">Your Email</input>
<label id="email-label">
the email tag and the text tag worked and I don't know why it won't work for my number tag. I just wanna know if the code is different or if I'm making a mistake. Thank you
I want to make it possible for visitors of my website to add fraction in a input text field.
So if they push the '/' or a specific button on my website, in the text field a fraction line should popup and a number can be added in the numerator and denominator.
The same I would do for the exponent, when push the '^' or a specific button.
[edit] Maybe my question wasn't clear. I tried to create it myself, but I have really no idea how to start. I can create it in two separated fields, but I want the visitor to choose if he has to add a fraction.
I saw the solution in a flash website, but I thought with the introduction of html 5, flash would disappear.
This is the best solution i can come up. I dont really know how you would make a fraction like this in an input field.
Hope it helps
$('#input-main').change(function(){
$('.main').html($('#input-main').val());
})
$('#input-denom').change(function(){
$('.denom').html($('#input-denom').val());
})
$('#input-num').change(function(){
$('.num').html($('#input-num').val());
})
p {display: inline-block}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<lable for="input-main">Number</lable>
<input id="input-main" type="text" value="">
<lable for="input-num">Numerator</lable>
<input id="input-num" type="text" value="">
<lable for="input-denom">Denominator</lable>
<input id="input-denom" type="text" value="">
<p class="main" >1</p><sup class="num">1</sup>⁄<sub class="denom">2</sub>
Is it possible to have an input element with type equal to number, whose arrow buttons would change the value not by step attribute, but by other given number?
I need to have a field with step equal to .001, buy I'd like to make +-1 jumps by clicking arrows. (I ask aboout native arrow buttons, of course I can simulate them anyhow, but that's not the question.)
googling turned this up first
<input type="number" name="points" min="0" max="100" step="0.001" value="30">
Other than that, I guess you'll need to use JS to manipulate the behaviour. Maybe sth like:
<input id="example" type="number" name="points" step="0.001" onchange="checkChangedInput();">
<script>
function checkChangedInput() {
// check if number got lower or higher
...
document.getElementById("example").value += OldValuePlusZeroPointNineNineNine;
</script>
Though I guess using onchange might give unexpected results when sth is being typed in the field. So you should also check if in/decrement was more than your step(0.001).
This might yield some useful information as well: HTML5 input type=number change step behavior
I'm creating an app that contains a draggable location bar. This element would allow you to drag thru chapters in a book and be seen at the bottom of the viewport. Much like Kindle or other mobile reading apps.
I'd like to hear your thoughts on what element to use.
<progress>
element, or was also thinking about using
<input type="range">
Or should we just roll our own and throw some javascript at it?
Semantically, your use case is best answered by the number or range input types
<input type="number" max="50" min="1" value="10">
<input type="range" max="50" min="1" step="1" value="10">
The challenge is in styling.
Filament Group have done some interesting work around making accessible slider controls for a variety of inputs, including number: http://filamentgroup.com/dwpe/slider/
Code on Github: https://github.com/filamentgroup/jQuery-Slider
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.