So I have a js game like scrabble. Now when the user makes a new word, I would like the word to be added to a list that is displayed in a div on my page.
The issue is I quite don't understand, how I could keep my old word created and insert a new word with new formatting and everything in a list form.
I know there is a list tag --
<ul>
<li>apple</li>
<li>ball</li>
</ul>
but what I can't really figure out is how do I use java script to enter the word as a new list entry.
I have used js to display the word created by the following syntax
document.getElementById('currentword').innerHTML = word;
where word is the variable that holds the current word created and currentword is the div id. but how do I use this kind of syntax for a list?
Please help!
Thanks
EDIT: I would also like the last entry to the list as the first item on my list. Seems like the list populates itself but the latest entry gets hidden and the list doesn't really auto scroll down as the items are added.
PS: Also incase someone knows how I could replace the tacky scroll bar option generated by CSS to a custom scroll bar. It would be great if you could point me in the correct direction!
Given a list:
<ul id="theList" >
<li>apple</li>
<li>ball</li>
</ul>
you could add an <li> like this (assuming that the variable word contains the word you want to add):
document.getElementById('theList').innerHTML += ('<li>'+word+'</li>');
There are other ways too, but this one is probably the simplest.
I use jQuery for dom manipulation and would recommend the same for you, it adds a lot of readability and tons of neat (x-browser friendly) functionality.
For example... the append api call would do the job if you were using jQuery.
<ul id="words">
<li>Some Word</li>
<li>Another Word</li>
</ul>
$("#words").append("<li>" + yourNewWord + "</li>");
Or with straight javascript...
document.getElementById('words').innerHTML += '<li>' + yourNewWord + '</li>';
EDIT:
I believe in motools the equivalent to .append is .grab
Basic idea:
var li = document.createElement("li");
li.innerHTML = "new text";
document.getElementById("TheULsId").appendChild(li);
<ul>
<li>apple</li>
<li>ball</li>
</ul>
then,
var newListItem = $('<li></li>').html("myNewWord");
$("ul").append(newListItem);
Well to the exact solution of my question, I figured out the rest from mootools docs :)
This fiddle demonstrated most of it.. http://jsfiddle.net/WngSS/1/
As for the scroll bar goes, well to customize ur own scrollbar you just use css effects.
Related
How does this work? and what are other ways to do it?
redirect = function(sectionName){
document.location.assign('about/' + sectionName + '/');
};
If by block menu you mean an HTML menu made of other HTML elements like divs, ordered / unordered lists then the response below applies, other than that, please explain in detail what do you mean by block menu
select is an object which contains a reference to the HTML "select" tag, so is options in the line var opsArray= select.options; the code provided by you will not work with block menus.
You have will have to create a function which looks totally different.
Let's say this is your menu:
<ul id="list">
<li id="about" onclick="redirect(this.id)">About</li>
<li id="news" onclick="redirect(this.id)">News</li>
</ul>
your javascript code will have to be:
redirect = function(sectionName){
document.location.assign('projects/' + sectionName + '/');
};
This is one way to do it, there are too many ways to do this. Hopefully I understood your question correctly.
So, first some background.
I have 9 types of rooms that are displayed as thumbnails with the name. What I want to do is that on click "Additional Information" - the rooms with disappear and the expanded version of a chosen room type will appear with the description and bigger picture. Also, there is an ability to go next and previous in the expanded view. I do not have a problem with this expansion and previous/next. BUT!
Here is what I am trying to achieve: if the code looks approximately like
<ul id="room_holder">
<li><div class="room 1">Additional Info</div></li>
<li><div class="room 2">Additional Info</div></li>
and so on...
And the expandable area will look something like:
<div id="expandable">
<div id="picture">Blah-blah-blah, some description, etc</div>
</div>
So, basically, what I can't figure out is how to get the needed slide to show when the correspondint thumbnail is pressed. I know I can do the .addClass method, and copy the code 9 times, for each of the numbers (1-9). But I believe it is 9 times more compact if I have some sort of function, that gets the second class name (the number) by using .split(' ')[1] and then using it as part of the variable in the part which opens the corresponding expandable view. So, my question is: how do I do this? I am a newbie with javascript, but try to learn on the go!
Oh, and the codepen that I've been trying to deal with is:
http://codepen.io/godban/pen/QbZmxz
Firstly, you should use data-* attribute instead of classes (new in HTML5) data attributes, w3school :
<ul id="room_holder">
<li><div class="room" data-room="1">Additional Info</div></li>
<li><div class="room" data-room="2">Additional Info</div></li>
Then, use the click function from jQuery .click( handler ), use it this way to know which one has been clicked :
$(".room").click(function(event){
var target = event.currentTarget;
var room = $(target).data("room");
alert(room);
});
I'm learning Angular JS and currently doing a chat app, I want to apply the Javascript conversion .shortnameToImage(str) offered by Emojione to the list of messages in the chat app on my front end.
This is on my html index the messages display
<ul>
<li ng-repeat="message in messages track by $index">
{{message}}
</li>
</ul>
So, my intention is that everything in the {{message}} gets evaluates so if another user sends :smile: well the smile emoji shows up without involving the back end.
So far I've tried to use a javascript function that that evaluates the user input and makes the conversion to li element but works on the first message.
What's the best approach I can take to resolve this?
The real Angular way would be to create a filter yourself (https://docs.angularjs.org/guide/filter) or use existing https://github.com/globaldev/angular-emoji-filter. And then usage would be as simple as {{message | emoji}}.
Edited to reflect Sergio's comments
Javascript is a good approach for this. You can cycle through all of your li elements with
var array_of_li = document.querySelectorAll("ul.messages li");
You can then convert them with a simple loop.
var array_of_li = document.querySelectorAll("ul.messages li");
for (var i = 0; i < array_of_li.length; i++) {
convert(array_of_li[i]);
}
And here's the conversion code based on the emojione doc :
function convert(li_html) {
var input = li_html.innerHTML;
var output = emojione.shortnameToImage(input);
li_html.innerHTML = output;
}
I've put all of that together in this jsfiddle and it displays a nice emoji smile.
Looking at their docs, it's pretty straightforward and there are no gotchas (if you managed to install it correctly, that is)
http://git.emojione.com/demos/jsshortnametoimage.html
<ul>
<li ng-repeat="message in messages track by $index">
{{ emojione.shortnameToImage(message) }}
</li>
</ul>
I have dropdown-Lists which have a lot of elements (>1000). When I select one of those elements the dropdown has to be rebuild because the selection of one element can cause others to disappear. I solve this in code behind (asp.net). Showing and hiding that dropdown usually is done in several milliseconds.
But when I select an element the div has to be rebuild which takes up to 20 seconds which is no surprise as that div contains about 300KB of Data which have to be sent to the client. The DIV looks like this:
<div id="ctl00_PlaceHolderMain_ctlProductSelector_SubstancesList" class="substancesListWrapper">
<ul>
<li class='elementSingle'>(2-Propyloxy)ethyl acetate</li>
<li class='elementSingle'>[(2-Propenyloxy)methyl] oxirane</li>
<li class='elementSingle'>1-(2-Pyridyl) piperazine</li>
<li class='elementSingle'>1,1,1,2-Tetrachloro-2,2-difluoroethane</li>
<li class='elementSingle'>1,1,1,2-Tetrafluoroethane</li>
<li class='elementSingle'>1,1,1-Trichloroethane</li>
(etc.)
Now I wonder if there is a way to compress that div-String and decompress it client-side by jQuery or something like that to reduce traffic. Does that work and if yes: What percentage of bytes do I usually safe?
This all happens in a SharePoint-Site (which should not make any difference hopefully)
You might improve several things.
One would be to move all your JavaScript links into one.
This would save you 85 characters per row.
<li class='elementSingle'>(2-Propyloxy)ethyl acetate</li>
<li class='elementSingle'>[(2-Propenyloxy)methyl] oxirane</li>
Could become this
<li class='elementSingle'><a href='#3268'>(2-Propyloxy)ethyl acetate</a></li>
<li class='elementSingle'><a href='#2415'>[(2-Propenyloxy)methyl] oxirane</a></li>
...
And one jquery click handler:
jQuery("li.elementSingle a").click(function(){
__doPostBack('ctl00_PlaceHolderMain_ctlProductSelector_pnlSubstances', this.href.replace('#',''));
});
Another point would be to remove class='elementSingle' and add a id to your ul for css/js.
This would save 22 characters per row.
If you're using jQuery already, just remove the anchors completely and provide id attributes for the list item elements.
The use a jQuery selector that reads out the id.
HTML would look kinda like this...
<div id="ctl00_PlaceHolderMain_ctlProductSelector_SubstancesList" class="substancesListWrapper">
<ul>
<li class='elementSingle' id="ct100-3268">(2-Propyloxy)ethyl acetate</li>
<li class='elementSingle' id="ct100-2415">[(2-Propenyloxy)methyl] oxirane</li>
etc...
The jQuery could be something like this...
$(function() {
$('#ctl00_PlaceHolderMain_ctlProductSelector_SubstancesList .elementSingle')
.click(function() {
var number = $(this).attr('id').match(/-(\d+)$/)[1];
__doPostBack('ctl00_PlaceHolderMain_ctlProductSelector_pnlSubstances', number);
});
});
(disclaimer; above is untested, but should give you a decent indication. Post a jsfiddle example first if you want a tested example).
Alternatively, think about using AJAX to load the list after loading the rest of the page.
I am trying to find a plugin or a solid way to narrow a list of items as a user types.
Essentially there would be a list that is always visible containing product names for users to scroll through. At the bottom would be a form where you can type in the name of a product. As you type the list is narrowed down.
I have been trying to find a way to adapt something like jQuery UI's autocomplete to work in this way but having some trouble.
Anyone created something like this before or have any ideas?
Here's a quick example of an approach that can work:
HTML:
<ul id="products">
<li>Apple</li>
<li>Banana</li>
<li>Mango</li>
</ul>
<input id="filter" />
jQuery:
var $products = $('#products li');
$('#filter').keyup(function() {
var re = new RegExp($(this).val(), "i"); // "i" means it's case-insensitive
$products.show().filter(function() {
return !re.test($(this).text());
}).hide();
});
That's a simple approach and would probably need a bit of tweaking, but it's close to what you need.
How about the quickSearch plugin?