I have a two part question on how I can dynamically arrange html buttons. I want to arrange the buttons without reloading the page, so I have been experimenting with jquery.
First, I have a column of html buttons and I want to be able to click on one and have it go to a specific place in the column. For example, if I clicked on one and I wanted it to go to the very top of the column, then i click on another and button and the most recently clicked button goes to the very top of the column.
I'm thinking I could accomplish this with an array of html buttons, but I am new to javascript and I don't know if it's possible to dynamically arrange html buttons in this manner. Is it possible to dynamically arrange html buttons with a javascript array? Is there a better way to arrange html elements?
Second, I would like to dynamically insert new buttons to the top of the column. I have had some success adding new buttons with jquery's before method. But the before method requires me to provide the current button at the top of the column and this doesn't work if I am dynamically arranging and rearranging the buttons.
I have looked into other "DOM Insertion" methods in jquery's API documentation, but I have not found a method to dynamically insert the buttons at the top of the column without specifically providing the top-most button's id.
Again my array concept comes in handy here. I could insert a new button into the zero index of the array, but I have not seen html elements displayed via javascript arrays in code I have viewed.
Please help. Thank you!
Have you looked at prepend() / prependTo()? You would only need to hold a reference to the container of your column of buttons, then prepend to that.
Link to Fiddle
Is it possible to dynamically arrange html buttons with a javascript array? Is there a better way to arrange html elements?
Lists of elements in javascript are typed as NodeLists. The DOM contains all of the Nodes and NodeLists. As such, they are accessible through document. In jQuery you can target these Nodes. jQuery will wrap each Node in an object, and if multiple Nodes are present, it will create an array of these jQuery objects.
I could insert a new button into the zero index of the array, but I have not seen html elements displayed via javascript arrays in code I have viewed.
var newButton = $("<input type='button' class='btn' />");
var htmlElements = $(".btn");
newButton.insertBefore(htmlElements.first());
Concerning Part one:
On click of the button, append it to the container of buttons.
<div>
<button>1</button>
<button>2</button>
</div>
<script>
$(document).ready(function() {
$('button').click(function() {
$(this).appendTo('div');
});
});
</script>
Concerning Part 2:
when you're adding a button you can use prepend.
$('button').click(function(){ $('div').prepend('<button>button</button>'); });
Here is a fiddle for both parts
here is a jsbin: http://jsbin.com/ORoXIHo/1/edit
Related
I am trying to build a website. There is options for users to post comments.
I am planning to show a few (say 5) comments in the intial fetch and an option to load more comments.
I am using jquery and was thinking to create the html divs dynamically for the same based on the number of comments.Is this the best idea ?
Also , is there a way to remove the dynamically created elements so that on re-entry to the page I have only the static elements and if needed attach the dynamic elements ?
jQuery offers some really handy tools on how to dynamically create DOM elements. You will want to use the .append() method to insert new elements.
For example, say you had a HTML structure with a container for all of your comments, and a few comments already:
<div id="comments_container">
<div class="comment">
This is a comment!
</div>
<div class="comment">
This is another comment!
</div>
<div class="comment">
Comment 3!
</div>
</div>
You could use the following code to dynamically add more comments:
$("#comments_container").append('<div class="container">'+comment_data+'</div>');
Every new dynamically added comment will appear at the bottom of the comments <div>. If you want to add the comments at the top of the comments container, then use prepend() instead of append().
Also , is there a way to remove the dynamically created elements so that on re-entry to the page I have only the static elements and if needed attach the dynamic elements ?
Yes. Any elements dynamically inserted using prepend() and append() will disappear when the user reloads or revisits the page.
A user can browse multiple img files with an <input type="file"> element. The selected file objects are than stored temporarily in an array and the attributes are shown to the user in a table build from div's and other elements.
This way the user can browse and select files multiple times and add them to the table or even delete some of them again before he finally upload the collection to the server.
While it is not a problem to append objects to an array and appending rows to a table so they match 1:1. It's getting tricky to delete rows from a table and elements of the array and keeping them matched.
So my question is if there is a nicer way to add/bind file objects to html elements, so when elements are deleted binded file objects are deleted as well ?
BTW I'm using pure JS.
I answer my question myself:
The easiest way to bind objects to a html element is described here by Osacr Paz. I tested it and it solves my problem.
Here is the answer copied from the link :
The easiest way is to do this:
<div id="myDiv">...</div>
In javascript
var myDiv = document.getElmentById('myDiv');
myDiv._variable = variable;
You can recover this later if you want, simply using the same myDiv variable, or, again, with document.getElementById() or any other DOM method that returns the element.
var variable = myDiv._variable;
The downside of doing it this way is that you can't specify, in the server, or from the markup, which object you want to attach to the element.
I am having an issue were jQuery is not inserting the specified html element into all instances of #element. However, it is only inserting it into the first element but not the other 3 with that id.
var htmlcode = '<div class="block"></div>';
$('#element').html(htmlcode);
If I switch it to $('div') it will work but this isn't what I want. I need to have this inserted into all divs with the id of #element. From what I understand from the documentation this should be working?
Ids must be unique on a page. As they are implemented as a fast-lookup dictionary there is only one element stored against each key/id.
jQuery and JavaScript can only see the first one because of this.
Use a class instead.
e.g.
$('.element').html(htmlcode);
I'm using a script for showing a tag-cloud from here.
var word_list = getTags();
$("#example").jQCloud(word_list);
<div id='example'></div>
I'm loading the tags dynamically from different sources by clicking on a button. The first time it shows the the tags properly, but the next time it "adds them up" to the tags that are already there. I need to clear or refresh the tag-cloud somehow, I tried this:
$('#example').val('');
and there was no luck.
Is there a way to do it at all?
You may try using this:
$('#example').html("");
The .val method is primarily used to get or set the values of form elements such as input, select and textarea. It won't set the value of the div as you are trying to.
You can use jQuery empty() to remove all child nodes from your div and then call $("#example").jQCloud(word_list); again so that you can fill it up with new ones
Try:
$('#example').empty();
This is related to a question I've asked previously: Calling Javascript function after loading an AJAX page
Basically, before all the thumbnails were loaded dynamically into one container called #left_box. Using the script below, I can get it to highlight one div out of all the siblings.
$('.thumbnail_small').live('click', function(){
$(this)
.css('border-color','#000')
.siblings()
.css('border-color','#ccc');
});
However, in order to accommodate a new feature, I had to split the thumbnails into even more containers called .contain. Basically #left_box contains a series of .contain that hold x number of thumbnails. Now when I click on a thumbnail in one .contain, it only affects the siblings within that container rather than the larger container #left_box.
I tried
$('#left_box').on('click', '.thumbnail_small', function(){
$(this)
.css('border-color','#000')
.siblings()
.css('border-color','#ccc');
});
but it doesn't work. Any ideas? Thanks in advance.
I'd suggest repeating your seletor, using the not method to exclude the current element:
$('#left_box').on('click', '.thumbnail_small', function(){
$(this).css('border-color','#000');
$('#left_box .thumbnail_small').not(this).css('border-color','#ccc');
});
This will select all .thumbnail_small inside your #left_box, exclude the clicked one, then applying the css to the rest of them.