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

Remove a Class Element from Third Party Widget

I have a third party widget which loads on my site via javascript, take for example DISQUS. Now there is a class element as shown in attached picture below, inside DISQUS. If I delete it from inspect element, that user image / class element gets deleted.
I want to achieve that in real time on page load. So as soon as page load, my site javascript or CSS should delete or hide these class elements.
Please let me know if that's possible.
Thanks,
Shubham

Use jQuery removeclass method:
https://api.jquery.com/removeclass/
$('#foo').removeClass('classToRemove');

You can try this to hide all elements with specific class
$(document).ready(function(){
$('.className').hide();
});

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.

Make a clickable object appear when I click on a different DIV

See the image I've included. When you click on a row in the table (it won't be a table most likely, as each row will probably be a Dojo Widget), the 'pulldown shade' appears and is clickable. When the user clicks it, a new layer of content appears and the pulldown shade switches from 'Open' to 'Close'.
Can that all be done with CSS, meaning do a Hover:After type event, or am I going to have to use JS to make this happen? JS isn't an issue, just trying to confirm I'll have to use JS to make it happen.

Javascript is required for the click event,
1 - you can show the additional content with hover
2 - then bind this to click ( *no point using hover as old IE does not work unless it is an anchor tag <a> * )
3 - you then can switch the text with js.
:)
remember
css is for visual
js is for behaviour :)

In CSS there is an option to use :target pseudo class (more on this here https://developer.mozilla.org/en-US/docs/CSS/:target ), but I am not sure this will work well for in your case - you’d have to create separate element for each row, and it doesn’t seem wise.