Photoshop Question posted in
The official user guide can be found here.

HTML and CSS twitter/Facebook feed – Photoshop

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

enter image description here

Sam

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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)

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search