Develop Reference

How to apply css styles to Popover using onBeforeShow() of Angular-strap

Please let me know about applying CSS(left) styles using onBeforeShow() event of Angular-strap Popover lib.
Basically, I want to reduce the left position of the pop-over by 50-100px in order to show it in the middle(at least closer) of the element, not just at the corner.
You can use this example or folk it - http://plnkr.co/edit/62BDv7JwluOl3eqtXPCZ?p=preview
I appreciate our help.

angular strap popover make use of tooltip module internally. And if you're using $popover service by creating directive of popover then you've to handle event on tooltip. So what you need is:
$scope.$on('tooltip.show.before', function(){
alert('The popover onBeforeShow state');
//$('.popover').css('left','100px')
});
But it seems at this event popover element is not yet created on dom so not able to change its style from controller (If you want to change style by changing its configuration then it's correct event). But tooltip.show event does what you need (from controller function). on this event you can have functionality to change css of popover element.
Plunker example: https://plnkr.co/edit/eSzNE95yBjegzYSTdFRE?p=preview
(Transition may not be clean but you can handle that with little bit slow animation.)
P.S. You can make use of all these events for handling popover:
tooltip.show.before,
tooltip.show,
tooltip.hide.before,
tooltip.hide,

Flickity: Trigger a "dot" click from another element via jQuery

I'm trying to trigger a click on one of the navigation dots from another DOM element, but I can't seem to do it a la the following:
$('li.dot')[0].click();
Any help is appreciated.

EDIT: Sorry I don't usually use jQuery. I forgot you need to use first, or first-child, or something of the type to get the node from the jQuery object, not use el[0].
$('li.dot').first().trigger('click');

jquery issue with new version

I'm using this sample but I wish to use the latest version of Jquery.
I noticed when using Jquery-ui 1.9.0 or above, the dialog does not show up anymore. It works fine with the original version (1.0.8) available in the demo.
Same thing if I use Jquery 2.2.1 (Jquery not Jquery -ui) instead of 1.4.2
The only change I have tried was replacing $('a.delete').live('click',function(){ by $('delete').on('click', 'a', function(){ in order to remedy to the deprecated .live
I can't figure out what else needs to be changed, even after looking at the Jquery and Jquery change logs. The Jquery-migrate tool doesn't give anything wrong.
The goal of the script is to remove a line when clicking on the icon. A dialog should be displayed to invite the user to confirm/cancel.

$('delete').on('click', 'a', function(){})
is not equivalent to
$('a.delete').live('click',function(){})`
These do two different things.
Your .live() one is actually attaching an event to document and then checking to see if the element actually clicked was a child <a class="delete"> tag.
In your .on() example, you are trying to bind an event to a <delete> element, and check to see if the actual element triggered was a child <a>. This is obviously not what you want.
If your elements are being added to the page dynamically, then you can try:
$(document).on('click', 'a.delete', function(){});
This will be the same as your .live().

Why are you changing the selector?
$('a.delete').live('click',function(){})
should be changed to:
$('a.delete').on('click',function(){})
or
$('a.delete').click(function(){})

Jquery Toggle on click of image

I am trying to understand how the jquery toggle works. I want to toggle to next anchor with class plr-anchor on click of image with class go_down. The data is populated using maps.
Jquery code:
$('.go_down').on('click',function(e){
#('.plr-anchor').next('.plr-anchor').toggle()});
}
Code snippet:
{data.map(function(categ) {
return <div>
<a className="plr-anchor" id={categ.short_name}></a>
<img src="/static/img/icon_up.png" className="go_down"/>
</div>}.bind(this)}
There seems to be a problem with the syntax on the Jquery call function. I am newbie with Jquery, any help will be great. Thanks in advance.

You have used # instead of $ inside click handler. Also you need to find exact plr-anchor which is before the clicked image. Right now you are toggling all plr-anchor.
For dynamic elements, use $(document).on(event, selector, function(){}); for binding click handlers. See below code
$(function(){
$(document).on('click','.go_down',function(e){
$(this).prev('.plr-anchor').toggle();
});
});

Your jQuery code has a "#" instead of a "$". By the way, React and jQuery don't always go together. The whole purpose of React is to use virtual dom and let React take care of dom updates. While jQuery is mostly about direct dom manipulation. What you are trying here will interfere with React because it won't expect the dom to change without the v-dom changing.
Ideally, you should be using event handlers and state in your component to toggle visibility.

adding a new section on webpage using only css and js

I am trying to click on an image on my webpage and it open a new section on the page that would be created in css and javascript/jquery. I thought about using .addclass() but i am not entirely sure how to go about it. Can anyone give me an example of this being done?

An example by clicking on a element with the id foo and adding a div with the id bar after that element:
$("#foo").click(function(){
$(this).after('<div id="bar">Some content</div>');
});
Of course, there are multiple methods in jQuery which insert content somewhere in the DOM tree, see:
https://api.jquery.com/category/manipulation/dom-insertion-outside/
https://api.jquery.com/category/manipulation/dom-insertion-inside/

There are many ways to do it. As an example, you can simply attach a click event handler to your image, like so:
$('img').click(newSection);
function newSection() {
$('#someDiv').append('<div class="newSection"></div>');
}