Develop Reference

Bootstrap modal on html element append missing css

I have a website with some bootstrap modal windows. On server rendering these modal windows everything is as should be, but after loading (appending) new items and theirs modal windows, somehow attached modals don't have bootstrap css.
Steps:
opening web page in gridview it shows 30 items blocks
clicking on any block shows modal with correct css
clicking on 'Load more' I am using ajax call for getting more
items on a page and server generated html for these Items then
append to specific div.
items appended correctly but clicking on appended item modal
window missing css.
Probably I need to recall bootstrap css or js after appending new items to page?

Here you are identifying element by id. That's why JQuery selector is taking only first matching element and ignoring others.
To fix this issue, use class to identify element in JQuery selector.

I found the answer here: bootstrap toggle doesn't work after ajax load
And my actual fix was reloading attributes after ajax success:
setTimeout(function(){
// add an element dynamically,
// now that we have dynamically loaded elements
// we need to initialize any toggles that were added
// you shouldn't re-initialize any toggles already present
// but we also do want to have to figure out how to find the ones we added
// instead, we'll destroy all toggles and recreate all new ones
$("[data-toggle='toggle']").bootstrapToggle('destroy')
$("[data-toggle='toggle']").bootstrapToggle();
$('.tags-list').tagsinput('refresh');
}, 1000)

How can I expand / collapse a Jarvis Widget programmatically?

I'm working with JarvisWidgets and JQuery since some time and I need to open programmatically a widget that is collapsed by default.
Up to now I've tried the following attempts without success.
1st attempt:
$('#my-widget-id').removeClass("jarviswidget-collapsed");
2nd attempt:
$('#my-widget-id').removeAttr("data-widget-collapsed");
however I'm still unable to trigger the widget expansion.
Note: the first method should be the right one as I've seen that, when the widget is expanded by clicking on the collapse toggle button, the class jarviswidget-collapsed is removed while the attribute data-widget-collapsed="true" is always there. So the attribute is just used to define the default widget startup state; in other words if the attribute data-widget-collapsed="true" is present then the widget will appear collapsed by default, if the attribute is removed the widget will appear expanded by default. Having said that I cannot understand the reason why removing the class jarviswidget-collapsed, hence behaving as the widget was expanded by user click, the widget doesn't expand.

I think maybe they are using something similar to this:
show widget:
$('#wid-id-2').removeClass('jarviswidget-collapsed').children('div').slideDown('fast');
Hide widget:
$('#wid-id-2').addClass('jarviswidget-collapsed').children('div').slideUp('fast');
I cannot find the code source of jarvis widgets, but there is an old version here has almost the same code as above but without slideUp or slideDown function, they use only show() and hide() methods
Hope this helps

How to hide a container when a button is clicked and make a form appear?

So I'm trying to make a store for computers and I'm making a webshop for it, but I ran into a problem.
Now I have a container, and I want it to hide it's content when i click a button, and then a form needs to appear with name, email and a textrea for what they want to buy..
but if they click anywhere on page, other then the button I want to bring the old content back!
I'm building this in a program called Wakanda Studios, i don't know if this helps, but I'm sure someone will find my answer.
Quick note: I don't have any code yet, other then my container!

Try this, it is written in jQuery so you will have to add jQuery to your page by putting
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> in the document head and then adding the following code at the end of your page...
$(document).ready(function(){
$("#button-id").click(function(){
$("#container-id").hide();
$("#form-id").show();
});
$(document).click(function(){
$("#container-id").show();
$("#form-id").hide();
});
});
All you will have to now is add the ID attribute to the button which starts everything off, the container, and the form.

If you are using the WAF framework of Wakanda and Studio, you would select your button, go to the events tab and add an on click event.
This will stub in a wrapper for the code to execute on click.
To hide a container, you need the container id. Using this you create a Wakanda reference to the widget and use the "hide()" method.
$$('yourContainerId').hide();
JQuery would work as well.

How to add a button in every tweet on Twitter timeline via a chrome extension

I want to dynamically add a button in DOM of Twitter timeline such that there will be one button for each tweet.
How can this be done?
I have created a div using document.createElement("div")
Now, how will I make it append to every tweet?

You're asking us to do the whole work for you. But a brief tip, fetch the class of tweets and then append the element to that div and use CSS to position it.

Check box inside drop down menu with javascript

How can a checkbox inside a drop down menu using javascript to be implemented so that every time you click the menu to change situation?

The website you have linked presents a list along this lines: http://jsfiddle.net/XJWkH/
Of course this is just a raw example but basically this is the way the dropdown list on the site works. When you click on a dropdown/submenu element, jQuery adds or removes 'checked' class on that element.

jQuery is the easiest path here. I have used this plugin with great success and have rolled my own as well.
Good luck!