Develop Reference

How to configure Popper.JS from Bootstrap 4

I'm using split.js to split the screen into two parts. On the right part, there are few input fields having Bootstrap tooltip on focus.
As the width of the container isn't wide enough on the right part, Bootstrap tooltips are not displayed on the left, as they should, over the gutter, but on the right.
To deal with it I had to import bootstrap.min.js in my project and modify the following lines :
preventOverflow: {
boundariesElement: this.config.boundary
}
by
preventOverflow: {
enabled: false,
boundariesElement: this.config.boundary
}
The structure of input fields of the right part is like this.
<div id="leftContainer"></div>
<div id="rightContainer"></div>
<table>
<tr>
<td>
<label>
<div>someText</div>
<input type="text"
size="2"
rel="tooltip"
data-toggle="tooltip"
data-trigger="focus"
data-placement="left"
data-html="true"
data-title="someTitle"
value="someValue"
name="someName" />
</label> etc. ...
And they are initialized like this
$(function() { $('[rel="tooltip"]').tooltip({ trigger:'focus', placement: 'left' }); });
My question is: instead of importing bootstrap.min.js in my project and modify the code to disable preventOverflow from PopperJS implementation in Bootstrap, is there a way to configure PopperJS in Bootstrap properly (like when I'm initializing tooltips, instead of modifying Bootstrap JS)?

You can just set the default "boundary" to the window. Then it will be able to overflow out of its parent element.
Just add this line of JS after you include bootstrap:
$.fn.tooltip.Constructor.Default.boundary = "window";
$.fn.dropdown.Constructor.Default.boundary = "window";
(it took quite some time to find the documentation on customizing these config settings, I could only find this super short explanation here)
Testing around a little bit, you can also just pass an invalid string, like "none". (only "window", "viewport", and "scrollParent" (the default) are supported)

Need jquery to activate a click through by clicking on a different div

I was hoping someone could help...I'm new to Jquery ....all I want to achieve is a click through on a hyperlinked image but this occurs when a completely separate div on another part of the page is clicked on rather than the hyperlinked image I just mentioned. .......the hyperlinked image needs to be invisible also. In case anyone is wondering why I need this ....it's because I want my own custom button rather than the standard one that comes with a CMS that I'm using and it can't be changed....it's basically a work around the owners of the system suggest.
Here's what I thought would work
<style>
#my-custom-button{
margin: 0 auto;
width: 200px
}
#the-standard-button{
display : none
}
</style>
<div id="my-custom-button">
<img src="../images/order-now.png">
</div>
<div id="the-standard-button">
<?php
proprietary PHP here that renders the standard button
?>
</div>
<script type="text/javascript">
<!--
$(function(){
$("#my-custom-button").click(function(){
$("#the-standard-button").click();
});
});
-->
</script>

The whole
<?php propiertary blah blah ?>
makes it hard to decipher but my guess is that the handler is being generated for whatever is being created by php, i.e. the php generates
<button id="phpButton">
blah
</button>
and then a handler like
$("#phpButton").click(....)
Notice that the handler is NOT on "#the-standard-button". So, you need make sure that you are using the correct selector when calling the click() in $("#my-custom-button").click(...)
Check out this jsFiddle. Notice which secondary click event is fired.

I'm not sure I understand your question perfectly, if what you want is that when You click on one button it will act as though the other was clicked.
Here is a solution that will work IF the default button is also an anchor tag (<a>)
HTML:
<div id="newButton">
<img src="/theimage.jpg"/>
</div>
<div id="oldDiv">
<img src"oldImage.png"/>
</div>
JQuery:
jQuery(document).ready(function($){
$("#oldDiv").hide();
$("#newDiv > a").click(function(){
window.location = $("#oldDiv>a").attr("href");
});
});

Bootstrap tooltip doesn't work (whatever I try)

I'm trying to use Bootstraps tooltip. But I just don't get it working. Its not showing up. Whatever I try. I got all latest Jquery, Javascripts loaded. I tested if they actually work by the URL.
I followed many tutorials, read documentations, but no luck :/
This is my complete code with Javascript toggle:
https://gist.github.com/matthijs110/1e7fc36902b0da5184aa
To save you the searching, here is the Script:
<script>
$(function(){
$('#domain').tooltip(animation)
})
});
</script>
And here is the text where it should toggle on hover:
<h4 id="domain" data-toggle="tooltip" title="first tooltip">play.domain.com</h4>
I just don't know what is wrong. I also tried the A tag. But I've read somewhere that H4 etc.. works too.

You must use:
jquery-1.8.3.js
bootstrap.min.css
bootstrap.min.js
I edited codes:
<div class='my_div'>
hover me
</div>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(document).ready(function(){
$(".marker").tooltip({placement: 'right'});
});
});//]]>
</script>
view on http://jsfiddle.net/ytpAy/314/
Edited:
For change the tooltip directions, on placement: 'right' use bottom , top , left or right

JS - Toggle all DIVs

My issue involves multiple DIVs that display:block or display:none each with their own anchor tag. The main problem is that I have recommissioned the JS code that runs this feature without completely understanding it. All I need is a way to toggle all of the DIVs with a single "Show All/Hide All" link. I cannot wrap my head around it.
I have tried absolutely everything that my exceptionally limited grasp will allow - which consists mostly of swinging my arms in the dark and hoping I accidently build a miracle. Since that hasn't worked I am shamefully seeking help.
The only thing that makes this question unique are all the variables with this specific issue -
An (almost) working example can be found at: www.robertmeans.com/menu.htm
The JS code:
imageX01='plus';
imageX02='plusEven';
function toggleOdd(ee){
imgX="imagePM"+ee;
divX="div"+ee;
imageX="imageX"+ee;
divLink="divHref"+ee;
imageXval=eval("imageX"+ee);
element = document.getElementById(divX).style;
if (element.display=='none') {element.display='block';}
else {element.display='none';}
if (imageXval=='plus') {document.getElementById(imgX).src='_images/minus.gif';eval("imageX"+ee+"='minus';");document.getElementById(divLink).title='Hide Content';}
else {document.getElementById(imgX).src='_images/plus.gif';eval("imageX"+ee+"='plus';");document.getElementById(divLink).title='Show Content';}
}
function toggleEven(ee){
imgX="imagePM"+ee;
divX="div"+ee;
imageX="imageX"+ee;
divLink="divHref"+ee;
imageXval=eval("imageX"+ee);
element = document.getElementById(divX).style;
if (element.display=='none') {element.display='block';}
else {element.display='none';}
if (imageXval=='plusEven') {document.getElementById(imgX).src='_images/minusEven.gif';eval("imageX"+ee+"='minusEven';");document.getElementById(divLink).title='Hide Content';}
else {document.getElementById(imgX).src='_images/plusEven.gif';eval("imageX"+ee+"='plusEven';");document.getElementById(divLink).title='Show Content';}
}
The HTML
<div id="task_item01">
<img src="_images/plus.gif" alt="" name="imagePM01" width="33" height="33" border="0" class="task_itemPlusImage" id="imagePM01" />
Div #1
</div>
<div style="display:none;" id="div01">
Content 1
</div>
<!-- ******************************** Item 1 End **************************** -->
<!-- ******************************** Item 2 Start ************************** -->
<div id="task_item02">
<img src="_images/plusEven.gif" alt="" name="imagePM01" width="33" height="33" border="0" class="task_itemPlusImage" id="imagePM02" />
Div #2
</div>
<div style="display:none;" id="div02">
Content 2
</div>
I have spent countless hours trying to work this out on my own. Any help is deeply appreciated.

Ok first of all, it seems like way too much code to me... you can do this very easily by using jQuery. I have made an example here: http://jsfiddle.net/Nr2f6/4/
Here is some simple html to help you better understand what is being done:
<div id="item-1"><span class="plus"></span>Open these items</div>
<div class="contents" data-rel="item-1">
I have superb items in this div... the world is about to understand just how awesome I am!
</div>
<div id="item-2"><span class="plus"></span>Open these other items</div>
<div class="contents" data-rel="item-2">
I have amazing contents in this div. I want to show them to the world!
</div>
as you can see above, there is no inline css. All the styling (display: none) should be placed separately, to not conflict with what you are trying to do. So simply place it in a separate css file.Then run this code:
$("div[id^=item]").click(function(){
var reference2open = $(this).attr("id");
//get the data-rel attribute associated
$("div[data-rel='"+reference2open+"']").slideToggle();
$("span",this).toggleClass('minus');
});
$("#all").click(function(){
if($(this).hasClass('close')){
$("div[data-rel^=item]").slideUp();
$("div[id^=item] span").removeClass('minus');
$("#all").removeClass('close');
$("#all").html('open them all');
}else{
//open and close them all by clicking
$("div[data-rel^=item]").each(function(){
if($(this).is(':hidden')){
$(this).slideDown();
$("div[id^=item] span").addClass('minus');
$("#all").html('close them all');
}
});
//change the button to close
$("#all").addClass('close');
}
//$("div[id^=item] span").toggleClass('minus');
});
****ADDED IN THE TOGGLE PLUS AND MINUS SIGNS USING CSS****
.plus{
background: url(http://www.robertmeans.com/offsite_files/code_help/_images/plus.gif);
width: 33px;
height: 33px;
display: inline-block;
}
.minus{
background: url(http://www.robertmeans.com/offsite_files/code_help/_images/minus.gif);
width: 33px;
height: 33px;
display: inline-block;
}
Do not forget to include your jQuery file! Hope this helps :)
Just wanted to add in some details for better understanding:
div[id^=item]: Is saying whenever a div is clicked that has an id that starts with (^=) item, run the code.
$("div[data-rel='"+reference2open+"']").slideToggle(): is saying take the id from the div that was clicked and find the content box where with the same name but in the data-rel attribute. The slide it down, if it is already down, slide it back up (toggle). You do not have to use a slide effect, I just thought it was more fun!
Then last but not least, the function you were looking for: How to open them all at once. Again we are using the (^=) to find all of the divs.
$("div[data-rel^=item").slideToggle();: So here we are saying to jQuery, hey toggle all the boxes that have a data-rel attribute that starts with (^=) item.
This last part is pretty neat, because you can create many instances of the item-? boxes and this code will work for any number of them. You can also add the same code to a different div, like even and odd, and toggle all the even and all the odd elements accordingly.

You could assign a specific class to all the things you want to toggle, then loop through all of them with a toggle function.

Pop up with javascript

I am very new to java script, can anyone tell me how I can get a pop up with javascript on a button click.
I need to add some text and image to this popup.
Thanks

If you want a new window to open as a popup, you can use:
window.open('newpage.html');
This will open the file newpage.html in a new window, that you can style however you like with HTML and CSS.
Edit:
If you want to do it inside the same window, I would recommend hiding a div and then showing it on click, like this:
DEMO
You can use jQuery plugins to achieve this and much more for you, but as a learning exercise the above is very simple and doesn't require external libraries

You can use:
alert('your text');
But if you need to customize the popup with images, backgrounds etc then you'd better get your hand on jQuery and study it.
http://jquery.com/
There are many tutorials around, just google for them (or buy a good manual :)

The simplest method is to use the jQuery UI popup plugin. You will also need to include the jQuery library.
http://jqueryui.com/dialog/#modal-message
Javascript:
$(function() {
$( "#dialog-message" ).dialog({
modal: true,
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}
});
});
HTML:
<div id="dialog-message" title="Download complete">
<p>
<span class="ui-icon ui-icon-circle-check" style="float: left; margin: 0 7px 50px 0;"></span>
Your files have downloaded successfully into the My Downloads folder.
</p>
<p>
Currently using <b>36% of your storage space</b>.
</p>
</div>

The easiest way is using jQuery Dialog and this is a sample: jQuery Dialog