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.
Related
I have to generate some li element automatically and the way I was doing it it through a function that return text inside a loop, something like this:
function getLi(data) {
return '<li>' + data + '</li>';
}
then I found a better way to do it by writing html inside a div:
<div style="display:none;" id="Template">
<li id="value"></li>
</div>
and then I would change the id and value get the html and reset the element to original state:
var element = $("#value");
element.html(data);
element.attr('id', getNewId());
var htmlText = $("#Template").html();
element.html('');
element.attr('id', 'value');
return htmlText;
then I was reading on script template
and I figured this could be a better way of doing it,
However apply the previous code didn't work as the inner elements didn't exist according to this article
so how can I apply this?
EDIT:
I put inside a ul tag, I use this method to get the items dynamically
EDIT2:
<li>
<a href="#" >
<span>
<span>
some text
</span>
</span>
</li>
this isn't necessarily what I have but something along the way
Edit3:
my ul does not exist orgialy it's generated dynamically
I insist this is not a duplicate I want to know how to use a template with some dynamic variables
You could do the following way. It's clean, reusable and readable.
//A function that would return an item object
function buildItem(content, id) {
return $("<li/>", {
id: id,
html: content
});
}
In your loop, you could do the following. Do not append each LI inside the loop as DOM manipulation is costly. Hence, generate each item and stack up an object like below.
var $items = $();
// loop begin
var contents = ['<span><span>', data, '</span></span>'].join('');
var $item = buildItem(contents, getNewId());
$items.add($item);
// loop end
Just outside the loop. append those generated LIs to the desired UL, like below.
$("ul").append($items);
This is what I'd do and I am sure there are many better ways. Hope that helps.
One option is to upgrade to a modern JavaScript framework like AngularJS and then you could do it in one line using ng-repeat.
This would serve your purpose and make you more money as a developer.
If you're going to repeat this, use a templating system. Like {{ mustache }} or Handlebars.js.
If not, you can do this.
<ul>
<li class="hidden"></li>
</ul>
And in Javascript
$('ul .hidden').clone().removeClass('hidden').appendTo('ul');
And CSS, of course
.hidden { display:none }
Try this...
function getLi(data,ID) {
return $('<li id = "'+ ID + '">' + data + '</li>');
}
It returns javascript objest of Li..and you append it where ever you need.
what you need is using jquery templates, in the bellow link you can use good one which I'm using.
you create your template and prepare you JASON object of data.
after that every thing will be ready in one function call, more details in this link.
jquery.tmpl
hope this helps you and any one come to here in future..
I have a unordered list generated by an ng-repeat. In each list item I have a month header and a blog post.
I only want to show one instance of each month name but I can't work out a nice way of doing this without some really hacky jQuery.
Is there a way I can somehow detect this value in Angular and use an ng-hide to only show the first one of each type?
Maybe something like this could help, providing that your same-month posts are adjacent. If they are not, maybe it's okay to show the date altogether:
plnkr code example
Basically:
<li ng-repeat="post in model.blogPosts">
<span ng-show="model.blogPosts[$index - 1].date !== post.date">{{post.date}}</span>
<br>
<span>{{post.post}}</span>
</li>
Edit:
(Sorry for the default ul li styling, such uglyness)
You should probably modify your data to achieve this. Turn your post list into an object like
$scope.postsByMonth = {
October: [//...october posts],
November: [//...november posts],
//...
};
Then you can do something along these lines
<li ng-repeat-start="month, posts in postsByMonth">month<p>posts[0]</p></li>
<li ng-repeat-end ng-repeat="post in posts.slice(1)"><p>post</p>
So I've looked online in this issue, but can't seem to find the answer. Let me explain my problem fully.
I'm trying to dynamically add content to an <ul> and have it all formatted correctly. What I'm inserting to is this:
<ul data-role="listview" id="localStoresUL" data-autodividers="true" data-divider-theme="d">
</ul>
I have a list item somewhere else that is clicked and loads this up with data, and I am doing that with the following code:
$("#localStores").click(function() {
Customer.getLocalStores(13, 12, function(stores){
for(var i = 0; i < stores.length; i++){
$("#localStoresUL").append('<li class="store" id="' + stores[i].id + '"><a data-transition="slide" data-filter="false">' + stores[i].fullname + '</a></li>');
}
});
});
Now this works all fine and dandy the first time the user clicks the link and it populates that <ul>. But I have a back button on the page using this code:
<a href="#" class="ui-btn-left back" data-rel="back" data-icon="back" data-add-back-btn="true" >Back</a>
And when the user clicks this back button and then clicks on the previous <li> again (which should populate the <ul>) the content is loaded dynamically, but not formatted at all. I have no idea why this is happening. Does this problem make sense, and does anybody have any tips for how to fix it?
Not sure why it does. It shouldn't.
You need to call .refresh() on the listview.
Generally, if content is loaded but not formatted, you have an issue with your CSS. Inspect the loaded elements with firebug and see what classes are present and style rules are being applied. Then double check that your relevant CSS selectors match those elements.
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.
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.