We Keep Coding

Why does bootstrap modal activation work after page refresh but not after initial form push?

I am pushing a form to our users. The form has a button that is intended to open a bootstrap multi-step-modal. When I push the form this button does not open the modal, but if I refresh the page, then it works as intended.
I have tried having the button manually open the modal with jquery, but that breaks other functionality of the modal.
Here is the definition of the button and the modal.
<input type="button" class="btn btn-primary" data-toggle="modal" data-backdrop="false" data-target="#demo-modal-3" value ="Create"/>
<div class="modal multi-step" style="color:black;" id="demo-modal-3">
I am performing a minimum of additional javascript beyond the default behavior.
$.getScript("/files/bootstrap.min.js", function() {
$.getScript("/files/multi-step-modal.js", function() {
sendEvent = function(sel, step) {
$(sel).trigger('next.m.' + step);
}
$('#demo-modal-3').on('hidden.bs.modal', function () {
//reset();
console.log('modal reset');
$('#demo-modal-3').trigger('next.m.1');
$('#demo-modal-3').find('.step-1').show();
});
});
});
When the button functions properly, I can see the div is modified to display the modal.
<div class="modal multi-step in" style="color: black; display: block;" id="demo-modal-3">
However when it is not working, the div is also modified, but display is set to 'none' and the modal does not appear.
<div class="modal multi-step" style="color: black; display: none;" id="demo-modal-3">

Fancybox doesnt open onclick submit form

When I fill in my form and send it the fancybox is not coming up.
Here is the code i am using for the fancybox:
<div class="hidden" id="fancybox-popup-form">
(your Fancybox content goes in here)
</div>
<style>
.hidden { display: none; }
</style>
This is the confirmtation text i filled in at the plugin Gravity forms
<script type='text/javascript'>
$('#gform_submit_button_2').click(function () {
$#gform_submit_button_2([
{ href : '#fancybox-popup-form' }
]);
});
</script>
And this is the HTML for the button where i need to click on the fire the function
<input type="submit" id="gform_submit_button_2" class="button gform_button" value="Verzenden" tabindex="6" onclick="if(window["gf_submitting_2"]){return false;} window["gf_submitting_2"]=true; ">
Thanks for your time!

When I fill in my form and send it the fancybox is not coming up.
When you send it the page will be refreshed by the submit so your fancybox will not shown, so try to prevent the default action (submit) using preventDefault() :
$('#gform_submit_button_2').click(function (e) {
e.preventDefault();
//Your code
})
Hope his helps.

Bootstrap Input File cursor

I am using this library to create a nice input file button with bootstrap theme.
I added a cursor pointer on the button, but
I can not see the cursor on the whole button.
<button style="cursor:pointer" />
DEMO

You can use code:
$fileButton.on('click', function(){
$(this).next('input').trigger('click');
});
After:
$fileButton = $('<button style="cursor:pointer" class="' + config.uploadButtonClass + '">' + config.uploadText + '</button>').insertBefore($self);
And add styles to:
.inputfile .btn{
position:relative;
z-index:2;
}

I have done this with different way using Javascript
You can hide the input by placing it into a div which is height:0px and overwflow:hidden. THen you add a button or an other html element which you can style as you want. In the onclick event you get the input field using javascript or jQuery and click it:
HTML:
<div style="height:0px;overflow:hidden">
<input type="file" id="fileInput" name="fileInput" />
</div>
<button style="cursor:pointer" onclick="chooseFile();" class="btn btn-defualt"><span style="cursor:pointer" class="glyphicon glyphicon-upload"></span> Search for a file to add</button>
Now the input is hidden, but you can style the button as you want, it will always open the file input on click.
javascript:
function chooseFile() {
document.getElementById("fileInput").click();
}
Here is Live Demo

If I understood it properly, your problem was in inability to style shadow-dom input tag, generated by browser
This css helped me in the same issue:
input[type="button"]::-webkit-file-upload-button,
input[type="file"]::-webkit-file-upload-button,
button::-webkit-file-upload-button {
cursor: pointer;
}

Colorbox and Image Resize

I have a gallery where I want the User to Open a Picture with Colorbox. (Then send the Picture with a Mail or Print it etc.)
This Site must be programmed dynamically because it has to work on an IPad too.
Now to the actual Problem:
This div should be shown in the Colorbox:
<div style = "display:none">
<div id="inline" style="height:100%; width:auto">
<img src="#" id="inline_img" style="max-height:90%; max-width:100%"/>
<div id="buttons">
<button > test </button>
<button > test1 </button>
<button > test2 </button>
</div>
</div>
</div>
And this is the Javascripit function where the div opens up in the colorbox.
$(function(){
//$('.element a').colorbox({});
$('.element a').click(function(){
// Using a selector:
$('#inline_img').attr('src',$(this).find("img").attr('src'));
$.fn.colorbox({
inline:true,
href:"#inline",
maxHeight:'90%',
maxWidth:'90%'
});
return false;
});
$('.element a').colorbox({
onComplete : function() {
$(this).colorbox.resize();
}
});
But the Colorbox always is much bigger than the Picture itself. The Colorbox must be as big as the Image and in the center of the screen.

I'm use the following code and resolve problem.
$('.colorBox').colorbox({
scalePhotos: true,
maxWidth: '100%'
});

That result makes sense to me. You gave colorbox a display:block element with no defined width and asked it to estimate the size, which of course will be 100% of the available width.

How do I use popover from Twitter Bootstrap to display an image?

The canonical example for Twitter Bootstrap's popover feature is sort of a tooltip on steroids with a title.
HTML:
hover for popover
JS:
<script>
$("#blob").popover({offset: 10});
</script>
I'd like to use popover to display an image. Is this possible?

Very simple :)
hover for popover
var img = '<img src="https://si0.twimg.com/a/1339639284/images/three_circles/twitter-bird-white-on-blue.png" />';
$("#blob").popover({ title: 'Look! A bird!', content: img, html:true });
http://jsfiddle.net/weuWk/

Sort of similar to what mattbtay said, but a few changes. needed html:true. Put this script on bottom of the page towards close body tag.
<script type="text/javascript">
$(document).ready(function() {
$("[rel=drevil]").popover({
placement : 'bottom', //placement of the popover. also can use top, bottom, left or right
title : '<div style="text-align:center; color:red; text-decoration:underline; font-size:14px;"> Muah ha ha</div>', //this is the top title bar of the popover. add some basic css
html: 'true', //needed to show html of course
content : '<div id="popOverBox"><img src="http://www.hd-report.com/wp-content/uploads/2008/08/mr-evil.jpg" width="251" height="201" /></div>' //this is the content of the html box. add the image here or anything you want really.
});
});
</script>
Then HTML is:
mischief

simple with generated links :)
html:
<span class='preview' data-image-url="imageUrl.png" data-container="body" data-toggle="popover" data-placement="top" >preview</span>
js:
$('.preview').popover({
'trigger':'hover',
'html':true,
'content':function(){
return "<img src='"+$(this).data('imageUrl')+"'>";
}
});
http://jsfiddle.net/A4zHC/

This is what I used.
$('#foo').popover({
placement : 'bottom',
title : 'Title',
content : '<div id="popOverBox"><img src="http://i.telegraph.co.uk/multimedia/archive/01515/alGore_1515233c.jpg" /></div>'
});
and for the HTML
<b id="foo" rel="popover">text goes here</b>

Here I have an example of Bootstrap 3 popover showing an image with the tittle above it when the mouse hovers over some text. I've put in some inline styling that you may want to take out or change.....
This also works pretty well on mobile devices because the image will popup on the first tap and the link will open on the second.
html:
<h5>Template Preview 1 <i class="fa fa-external-link"></i></h5>
<h5>Template Preview 2 <i class="fa fa-external-link"></i></h5>
<h5>Template Preview 3 <i class="fa fa-external-link"></i></h5>
js:
$('.preview').popover({
'trigger':'hover',
'html':true,
'content':function(){
return "<img src='"+$(this).data('imageUrl')+"'>";
}
});
https://jsfiddle.net/pepsimax_uk/myk38781/3/