I'm a designer, but I also do some programming (javascript, html, css). I need to create a custom timeline for a website (Couldn't post a photo because of insufficient reputation on here, but here's a link to the design: http://postimg.org/image/5p92wkk8f/ Like you hover the mouse over a part of the timeline, and according to that the year changes) But I have no idea where to begin. (I tried looking it up on the internet, but there's no timeline code examples and I don't wanna generate a timeline from other websites, I wanna make a custom one that would be exactly like this design). Would anyone be able to give me hints, say anything useful, tell me where to start? Thanks!
Timeline JS is may be exactly what you are looking for. As it's open source tool, you can modify it as per your needs.
I'd make many divisions, one for each part (year in this case) of the timeline. So there'll be about 20 divs that together make the whole white line.
CSS would be something like:
.timeline { /*"timeline" is a class name that I made up.*/
background-color:#ffffff; /* This is white color, change it to the cream color of the timeline.*/
height: 30px; /*estimation*/
width: 30px; /*estimation*/
position:absolute;
}
.timeline:hover {
background-color:#000000; /* This is black color, change it to the brownish background color.*/
}
This is just a part of the CSS. You'll need to position each division with margins. With the CSS code done, you'll have the timeline change it's color for each div you hover on.
The harder part is actually changing the text, and for it we'll use javascript. In order to make the code not too long (and easier for me to write) I'm going to write it as if there were only 2 divisions in the timeline. Once you get what I do, you will be able to finish it off easily.
So first of all, add an id to the division in which the text is, "text" e.g. In html, add to the 2 timeline divisions the event onmouseover, then a function. The functions are numbered.
<div id="text">Here is some text</div>
<div class="timeline" onmouseover="changeText1()"></div>
<div class="timeline" onmouseover="changeText2()"></div>
Now we need to write the functions. We'll make a variable which will include the whole "text" id, then make 2 functions (one for each div) and make each function change the text according to the function's number.
var text_div=document.getElementById("text");
function changeText1()
{
text_div.innerHTML="Some Text"; //"Some Text" should be the text to be written when the user hovers his mouse on the FIRST part of the timeline.
}
function changeText2()
{
text_div.innerHTML="Some Text"; //"Some Text" should be the text to be written when the user hovers his mouse on the SECOND part of the timeline.
}
So let's review. The CSS makes the division change color when hovered on. Additionally, when a division of the timeline is hovered, it will trigger a function from the javascript code which will change the text, according to which division was hovered on.
Another thing you should notice: In the image you added, there isn't one paragraph only, for each paragraph a different CSS code. The javascript code I wrote will change the whole "text" division, making it's CSS be the affecting one for the whole text you entered in javascript ("Some Text" part). If you wish the CSS to stay different, you should:
make for each paragraph its own id (in html).
then make a new variable in javascript for each id.
and then add a new line to each function, which will change the inner HTML of the new paragraph separately.
If something is unclear, please ask.
Related
I need to get the text inside these images.
The overview of the problem -> I basically need to have text inside each image.
Link to codepen --> https://codepen.io/martispyc/pen/KKmjWZj?editors=1100
Appreciated if the slider would slide these kinds of divs, not the images and text, but whatever works!
<div class="slider__images--container">
<img src="" alt="" class="slider__images--container-img">
<h3 class="slider__images--container-h3">Example</h3>
</div>
So, for everyone wondering, I solved it myself! I did put text inside and I am proud of it. The basic way I did it was as follows:
I added the same amount of text blocks as my slider has images. After that,
I coded some javascript so the nth text block as the nth image has the class .active
2.5 text had absolute positioning so I can move it around and `a z-index of >1
.active == opacity 1, .unactive == opacity 0.
And then I made it so every time it slides it checks which one has to be active (text block) and add the class and remove active from the last one.
Added a transition and boom!
(Basic rundown of how I did it, won't share the code only because of the thrill coding it up yourself!) byebye!
PS. I won't accept my answer just so if there's someone willing to put a real answer, go for it!
So, I'm successfully doing something where I have an animation at start of loading page, and everything behind the animation is black. Once the animation is done loading, all the white text then appears.
I'm doing this with a function that changes the color of the text. For ex, I have a black background, and I tell the text to be black, but once animation is done, I tell it to turn white, or green. Thus hidden when animation is going on, visible after.
I have an issue though with the way I found this example, it directs the html by using a
<p class="appear-later">
However, this is causing me issues. I need to find another way of defining text to change in this way, without using the p class. As you can see below, I have various php outputted data, but it seems to cancel the P function, every time a new PHP is called forth. Now, I could just keep repeating the
<p class="appear-later">
For every line of text, but this causes a further issue, by breaking up the code into different vertical lines. Not good.
So I'm wondering if there's another way of basically telling the html that everything below this tag, until the tag is ended, apply the text effect. I know there is, I'm just bad at programming. Thanks for thoughts! Something besides a p class. A way to re write that html code without having to make it a p class that wouldn't cause such issues with the php outputs
Here's the code
<div id="ethereum">
<div class="mainheader">
<p class="appear-later">Price of Ethereum
</div>
<?php outputValueFromCache("ethereumvalue", "ignore");?>
[
<?php outputValueFromCache("ethereumchange");?>
]
</p>
</div>
.appear-later { color: black; }
setTimeout(function () {
$('.appear-later').removeClass('appear-later');
}, 1000);
If you are trying to apply css to all child elements of the <p class="appear-later"> then use *, as such
.appear-later * {
color: black;
}
Although I suggest making that <p> into a <div> and then have your child elements there. Here is a fiddle to use as example.
https://jsfiddle.net/Arparas/wunjgqo0/
I hope this solves your problem.
My JavaScript slider worked fine in the beginning and then it get corrupted after time, sometimes it takes one minutes, sometimes it takes five.
Actually I don't know if it is a conflict or what, could you please help me guys?
you can check it out here: http://test-code.bugs3.com/
When looking at the code it seems you do not yet have much web development skills. That is fine, and thereby I will go through each step of improving your webpage, as I want you to become a great developer too.
First, lets start with some CSS things. Instead of setting the padding for every side, you can also set it on all sides without needing four lines. Simply using padding:0; is enough in this case. For the margin, when you want the left and right sides to be auto, and the top and bottom 0px, you can 'chain' them in one property: margin:top right bottom left;, like a clock. Even shorter is margin:top&bottom left&right;, which in your case is margin:0 auto; <-- the top and bottom have 0 margin and the sides have auto margin. (btw if something is 0 you don't need to add a unit to it).
For a border I found this:
border: solid;
border-width: thick;
border-color: #E6E6E6;
You can also put that together by using border:thick solid #E6E6E6;
Now for the javascript. The problem that it is slow is because it uses a lot of timers and intervals to do things, and the timers do not get cleared well. My opacity is currently at -850. Instead of improving the code I suggest we rewrite it. You have written the same code over and over again for every picture, where only some variable names differ. What if we just write that code once? Would be a lot faster. And we could add as many pictures as we want.
To be able to instantly get a list of all the picture elements, I add a class to them: class="sliderPicture". Now when I want the list I can call document.getElementsByClassName('sliderPicture'); and there we have our array (I removed the ID's as we won't need em). We also need a variable to keep track of at which picture we are right now. I will elaborate on this later.
As we do not want the animation to be done by using javascript but just by using CSS, we are going to add some css code to the sliderPicture class:
.sliderPicture {
opacity:0; /*We want all images to be transparent, as we override this value when we want to display the picture*/
position:absolute; /*this puts all the pictures in the same place behind eachother, so that we do not need to display:none; and display:block; them*/
transition:2s opacity; /*this means, every time the opacity of the element changes, do not directly set it to that opacity but fade to it in 2 seconds*/
}
Now we create a class which will show the images. The script then only needs to add/remove the class:
.showPicture{
opacity:1;
}
Now on to the javascript code. It is pretty short, and I hope the comments explain good enough:
var images = document.getElementsByClassName('sliderPicture'); //this contains an array of all the images.
var imageTime = 3000; //the time in ms for when the pictures should change
var i = 0; //the picture we are at
setInterval(function(){
if(images[i].classList.contains('showPicture')) images[i].classList.remove('showPicture'); //if the element contains the class showPicture, remove it. (we first check for it to not generate errors when removing something that might not be there (it should, but never create any room for errors))
i++; //increment the image where we are at
if(i >= images.length) i=0; //if we are at the end of our array. Picture 2 of the array is the last picture, so, as we increment it above, our i value should be 3 then. The length of our array is also 3, so when i=length of the array we set it back to 0 to display the image
images[i].classList.add('showPicture'); //here we add the class so the element gets opacity 1
}, imageTime);
as we want the first picture to directly show up we just add showPicture to its class.
I also see nice buttons on the bottom. I think you want them to automatically switch to the picture. I can help you with automatically generating buttons to not have to bother about adding them manually.
Furthermore, if this slider is to display many different images, you can also write a little script to add the images from an array containing the url's. Then you don't need to add <img class="sliderPicture" src="..." /> every time, but let the javascript generate that for you (including generating the buttons.
All this code is combined in this jsfiddle.
If you have a question, any at all, feel free to ask them. I hope you enjoyed reading this answer and have a better understanding on how to combine css and javacript to generate nice webpages.
old:
this looks like a problem with all the intervals and clearing of things. your code does even look like it can be made much simpeler, as you are using timers to fade things, instead of css. For this fading you can use transitions. For the condition code, you'd better use an array and take the next item from it (or 0 if there is no next item).
I am trying to emulate how twitter highlights users when they are #mentioned when composing a tweet.
I am using the mentionsInput jQuery plugin. I want to change the color of the #screen_name instead of changing the background color as the plugin does by default.
Is there a way to color the #screen_name and still show the blinking cursor at the end?
I was able to do it but I need to hide the textarea text so it doesn't darken the CSS styled text over it... but then it hides the blinking cursor which I don't want to do.
See my jsFiddle showing the problem: http://jsfiddle.net/thhbe/1/
OR see it...
Required: jQuery, Underscore.js and the plugin.
HTML:
<div><textarea id="tweet_textarea" class="mention textarea compose_text"></textarea></div>
JS:
/*
* Add handlers to HTML elements and set options....
*/
$('textarea.mention').mentionsInput({
onDataRequest:function (mode, query, callback) {
var data = [
{ id:1, name:'Kenneth Auchenberg', 'avatar':'http://goo.gl/SUCm1', 'type':'contact' },
{ id:2, name:'Jon Froda', 'avatar':'http://goo.gl/SUCm1', 'type':'contact' },
{ id:3, name:'Anders Pollas', 'avatar':'http://goo.gl/SUCm1', 'type':'contact' }
];
data = _.filter(data, function(item) { return item.name.toLowerCase().indexOf(query.toLowerCase()) > -1 });
callback.call(this, data);
}
});
I'm a couple of years late, but hopefully I can provide an actual answer to your problem.
You (or the plug-in) have got the idea right... utilizing another element (the "facsimile element") which contains a styled version of the text in the textarea. There are just a couple of changes that need to be made:
The fascimile element is supposed to have the same dimensions (the element as a whole as well as its content area), shape, and position as the textarea
The fascimile element is supposed to be placed underneath the textarea rather than on top of it.
The background of the textarea is supposed to be made transparent.
The text and border of the fascimilie element is supposed to be made transparent.
I'm not sure how much of this is able to be done without modifying the plug-in, but once these changes are made, you shouldn't have to worry about the cursor disappearing since there will no longer be a need for you to hide the textarea.
You're not out of the woods just yet though, there is a lot more that needs to be done to make the solution robust.
So I'd recommend checking out Mentionator, which is a jQuery plug-in that robustly implements the functionality you desire. Its source code is a well-structured, easy to follow, and copiously commented, so should you want to look at the code to understand how the plug-in, and Twitter's tagging utility by extension (most likely), work, you should have little trouble doing so.
One more thing, given i'm such a big proponent of transparency, I'd like to let you know that Mentionator is maintained by yours truly :) .
The answer for me is to use contenteditable http://html5demos.com/contenteditable. It does not appear that this is how twitter has done it for their tweet input (which has mentions highlighted) but I have given up on figuring out how they did it.
I've had a similar problem and found it difficult to find a nice solution. I was implementing my own caret/cursor into the styled element with a span tag, this has some issues with splitting up words onto new lines however. But I found a solution that's pretty simple and seeing as this is the first thing on Google for this problem I'll share it, as this would have been ideal for me weeks ago if it was here! :)
As said, the solution is to have your styled element underneath the text input. You need to make the text input have a alpha=0 background and color. The color also hides the caret. But there's a CSS property specifically for the caret that you can use the unhide it:
background: rgba( 0, 0, 0, 0.0 );
color: rgba( 0, 0, 0, 0.0 );
caret-color: rgba( 0, 0, 0, 1.0 );
On the homepage of my website - www.mobiuspc.com, I have some distinct sections that I color coded so I could see how its all laid out. There is the master page section, which works just fine (its the tan bar with buttons like "Components" and such), and at that level and up everything works as best as I could wish for.
Down below I have some issues. There are 3 primary DIV's that I use to break down the page:
<div id="mainarea" runat="server" >
This is anything in between the header/master page area, and the yellow color coded area. This big area is supposed to be 700px high, and 1024px wide, and is colored silver. If you go to the site, you will see that it is not. There is a panel with a repeating hard drive image, that is my drop zone for Drag 'n drop functionality (unrelated to this question). I have it set to runat server, because if I don't do that, then Drag 'n Drop seems to break.
<div id="categorybar">
This is the yellow color coded area that holds all my buttons. I'm happy with it. Hit the button called "Display" and watch what happens to the DIV above it. It goes way out of bounds! My CSS to set its width and height seem to be overruled.
<div id="detailbox">
This is the blue colored area, no issues here. Eventually I will put controls in here, but for now it is fine being blue.
The initial thought might be that my CSS is borked. If this is the case, I can't see where! I've set the height/width and all that good stuff. I've tried added the float:left into random sections, to no effect. Here is the relevant excerpts from my CSS file"
#mainarea
{
background-color:Silver;
height:700px;
width:1024px;
}
#categorybar
{
background-color:Yellow;
height:80px;
width:1024px;
}
#detailbox
{
background-color:Blue;
height:420px;
width:1024px;
}
I create objects at run time when you click the "Display" button, and all those objects are added to a pane that resides in the #mainarea DIV. That pane is known as toolbox, and here are it's CSS properties:
#toolboxpanel
{
height:700px;
width:324px;
max-height:700px;
max-width:324px;
overflow:scroll;
}
For some reason it keeps expanding beyond its predefined size when I add controls at runtime instead of simply having a scrollbar like I would prefer. The panel with all the hard drive pictures as the drop zone, that is also in the #mainarea DIV, and here is the CSS in case its relevant:
#droppanel
{
height:700px;
width:700px;
margin-top:-700px;
margin-left:324px;
}
Should I get rid of the runat=server bit? If I do that and click on the display button, I still get that horrid panel expanding itself all the way to the bottom of the page, but at least the silver colored #mainarea DIV stays the proper size (the panel just gets out of control). If I go that route, any idea why it breaks my drag and drop? I hope I don't have to go that route, and instead there is simply something goofy in my CSS that I'm overlooking...
Thanks for your help!
Bill
runat="server" will change the client id of the control you are using it on meaning your #mainarea css will not apply.
You could get around this by assigning mainarea a css class and using that to apply styles rather than its id.