I have a modal using custombox that works using a button :
<html>
<head>
<link href="assets/plugins/custombox/dist/custombox.min.css" rel="stylesheet">
<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="assets/css/core.css" rel="stylesheet" type="text/css" />
<link href="assets/css/components.css" rel="stylesheet" type="text/css" />
<link href="assets/css/icons.css" rel="stylesheet" type="text/css" />
<link href="assets/css/pages.css" rel="stylesheet" type="text/css" />
<link href="assets/css/menu.css" rel="stylesheet" type="text/css" />
<link href="assets/css/responsive.css" rel="stylesheet" type="text/css" />
<script src="assets/js/modernizr.min.js"></script>
</head>
<body>
<div id="accordion-modal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content p-0">
<div class="panel-group panel-group-joined" id="accordion-test">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion-test" href="#collapseOne" class="collapsed">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
test
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<button data-toggle="modal" data-target="#accordion-modal">Accordion in Modal</button>
<!-- jQuery -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/detect.js"></script>
<script src="assets/js/fastclick.js"></script>
<script src="assets/js/jquery.slimscroll.js"></script>
<script src="assets/js/jquery.blockUI.js"></script>
<script src="assets/js/waves.js"></script>
<script src="assets/js/wow.min.js"></script>
<script src="assets/js/jquery.nicescroll.js"></script>
<script src="assets/js/jquery.scrollTo.min.js"></script>
<!-- Modal-Effect -->
<script src="assets/plugins/custombox/dist/custombox.min.js"></script>
<script src="assets/plugins/custombox/dist/legacy.min.js"></script>
<!-- App js -->
<script src="assets/js/jquery.core.js"></script>
<script src="assets/js/jquery.app.js"></script>
</body>
</html>
I am trying to initiate this modal inside jquery, inside a datatables button with no luck.
This is the part of the code in my function :
buttons: [
{
text: 'My accordion Button',
className: "btn-sm",
action: function ( e, dt, node, config ) {
Custombox.open({
target: '#accordion-modal',
effect: 'fadein'
});
e.preventDefault();
}
}
]
The code above works to open other simple modals but not this one. This has to do I guess with the
data-toggle="modal" data-target="#accordion-modal"
that is contained in the button. From what I understand the data-target is replaced by "target" in js, but the data-toggle is not triggered anywhere. How do I trigger it properly? I attempted to initiate it with $('#accordion-modal').modal('show') but I am not sure where exactly I should put this. If I put it in the beginning it just flashes for a second
Looks like I only needed :
{
text: 'My accordion Button',
className: "btn-sm",
action: function ( e, dt, node, config ) {
$('#accordion-modal').modal('show');
e.preventDefault();
}
}
Related
I wanted to add a jquery FadeOut effect to a badge but the problem is the (effect or the function) needs
the minified version (the full one) so I replaced the slim CDN with the full version (3.5.0) CDN and then the
bootstrap 4 ( collapse class ) stopped working.
code:- include
<head>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- Bootstrap CDN Font-awesome -->
</head>
<body>
<!-- Bootstrap Jquery JavaScripts -->
<script src="https://code.jquery.com/jquery-3.5.0.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<!-- Bootstrap Jquery JavaScripts -->
collapse code and fadeOut:-
<script>
function badgefade(){
// document.getElementById("").
$("#notificationsBadge").fadeOut("slow");
}
</script>
<div class="collapse" id="'.$item['companyexported'].'"> ..... </div> ---- Collapse Not Working
<a class="nav-link" href="#" id="notificationsdrop" onclick="badgefade()" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
2:- I remember I have another issue in (Onclick) attribute the function is only triggered once what I'm trying to do is replace font awesome icon onclick
code->
<script>
function arrow(){
if (document.getElementById("arrow").className = "fa fa-arrow-down") {
document.getElementById("arrow").className = "fa fa-arrow-up";
} else {
document.getElementById("arrow").className = "fa fa-arrow-down";
}
}
</script>
<h3><a class="btn btn-success billbtn" onclick="arrow()" data-toggle="collapse" style="width: 280px !important;"href="#'.$item['companyexported'].'" aria-expanded="false" style="direction:RTL;"aria-controls="contentId"><i id="arrow" class="fa fa-arrow-down" style="float:left" aria-hidden="true"></i><span class="badge badge-light">'.$item['accountid'].'</span> فاتورة ('.$item['companyexported'].')</a></h3>
The missing is popper.min.js as correctly pointed out by Rusty
Include the below script in the same order as mentioned:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
Hope this helps
Jquery 3.5.1 has been released.It fixes the issue with collapse in bootstrap 4.4.1
https://github.com/twbs/bootstrap/issues/30553
<html>
<head>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<style>
.bs-example{
margin: 20px;
}
.accordion .fa{
margin-right: 0.5rem;
}
</style>
<script>
$(document).ready(function(){
// Add minus icon for collapse element which is open by default
$(".collapse.show").each(function(){
$(this).prev(".card-header").find(".fa").addClass("fa-minus-circle").removeClass("fa-plus-circle");
});
// Toggle plus minus icon on show hide of collapse element
$(".collapse").on('show.bs.collapse', function(){
$(this).prev(".card-header").find(".fa").removeClass("fa-plus-circle").addClass("fa-minus-circle");
}).on('hide.bs.collapse', function(){
$(this).prev(".card-header").find(".fa").removeClass("fa-minus-circle").addClass("fa-plus-circle");
});
});
</script>
</head>
<body>
<div class="container bs-example"><!--main contain start-->
<div class="accordion greyboxshadow oneborder offset-md-0" style="border-radius: 3px;" id="accordionExample"><!--Full div where the bg color and border color given-->
<div class="card"><!--inside of that acordian start-->
<div class="grad-bg grad card-header" id="headingOne"><!--accordion heading div-->
<h2 class="mb-0">
<button type="button" class="btn-plus btn-link" data-toggle="collapse" data-target="#collapseOne"><i class="fa fa-plus-circle"></i> What is HTML?</button><!--accordion button and plus and minus icon added-->
</h2>
</div>
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample"><!--This div is show the expand after clicking plus sign-->
<div class="card-body">
<p>HTML stands for HyperText Markup Language. HTML is the standard markup language for describing the structure of web pages.</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I have added a "plus" sign to button. When the user clicks on the button, the "plus" sign is replaced with a "minus" sign and show the div content
Here is my full length code for your better understanding
You may just need to change the order of scripts, jQuery needs to include before bootstrap script.
OLD CODE:
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
NEW CODE:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
Dropzone only shows at the end of the form (initially I tried putting it above the summernote) so, the submit button showed only above it. For this reason, I tried putting it outside the form and I'm not sure it works.
I can't include Dropzone in any other div, so, for example, I can't put a border around it.
It looks like it doesn't upload any files (because the following code return only a blank page with "1" written on it - from the upload.php code).
Dropzone doesn't how the RemoveImage link
I used Dropzone because I don't think Summernote can upload other files like pdf, word.
mainpage.php :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="dropzone.css" rel="stylesheet">
<script src="dropzone.js"></script>
<!-- Summernote css -->
<link href="../plugins/summernote/summernote.css" rel="stylesheet" />
<!-- Select2 -->
<link href="../plugins/select2/css/select2.min.css" rel="stylesheet" type="text/css" />
<!-- Jquery filer css -->
<link href="../plugins/jquery.filer/css/jquery.filer.css" rel="stylesheet" />
<link href="../plugins/jquery.filer/css/themes/jquery.filer-dragdropbox-theme.css" rel="stylesheet" />
<!-- App css -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="assets/css/core.css" rel="stylesheet" type="text/css" />
<link href="assets/css/components.css" rel="stylesheet" type="text/css" />
<link href="assets/css/icons.css" rel="stylesheet" type="text/css" />
<link href="assets/css/pages.css" rel="stylesheet" type="text/css" />
<link href="assets/css/menu.css" rel="stylesheet" type="text/css" />
<link href="assets/css/responsive.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="../plugins/switchery/switchery.min.css">
<script src="assets/js/modernizr.min.js"></script>
</head>
<body>
<div id="wrapper">
<!-- Start content -->
<div class="content">
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="page-title-box">
<h3>Postare raspuns</h3>
<div class="clearfix"></div>
</div>
</div>
</div>
<!-- end row -->
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="p-6">
<div class="">
<form id="myAwesomeDropzone" class="dropzone" action="upload.php" method="POST" style="border:none" novalidate>
<div class="row">
<div class="col-sm-12">
<div class="card-box">
<h4 class="m-b-30 m-t-0 header-title"><b>Textul postarii</b></h4>
<textarea class="summernote" name="postdescription" id="postdescription" required></textarea>
</div>
</div>
</div>
<h4 class="m-b-30 m-t-0 header-title"><b>Ataseaza fisiere</b></h4>
<div>
<div class="fallback">
<input name="file" type="file" multiple />
</div>
</div>
</form>
<br>
<input type="submit" name="pos" id="pos" value="Postare" class="btn btn-success btn-block" form="myAwesomeDropzone" />
<br>
<br>
<div class="btn btn-info btn-block">
Inapoi la subiect
</div>
</div>
</div>
<!-- end p-20 -->
</div>
<!-- end col -->
</div>
<!-- end row -->
</div>
<!-- container -->
</div>
<!-- content -->
</div>
<script>
var resizefunc = [];
</script>
<!-- jQuery -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/detect.js"></script>
<script src="assets/js/fastclick.js"></script>
<script src="assets/js/jquery.blockUI.js"></script>
<script src="assets/js/waves.js"></script>
<script src="assets/js/jquery.slimscroll.js"></script>
<script src="assets/js/jquery.scrollTo.min.js"></script>
<script src="../plugins/switchery/switchery.min.js"></script>
<script src="../plugins/summernote/summernote.min.js"></script>
<script src="../plugins/select2/js/select2.min.js"></script>
<script src="../plugins/jquery.filer/js/jquery.filer.min.js"></script>
<script src="assets/pages/jquery.blog-add.init.js"></script>
<script src="assets/js/jquery.core.js"></script>
<script src="assets/js/jquery.app.js"></script>
<script>
$(document).ready(function() {
$('.summernote').summernote({
height: 240,
minHeight: null,
maxHeight: null,
focus: false,
toolbar: [
['style', ['style']],
['font', ['bold', 'underline', 'clear']],
['fontname', ['fontname']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
['view', ['fullscreen', 'codeview', 'help']]
],
popover: {
air: []
}
});
$(".select2").select2();
$(".select2-limiting").select2({
maximumSelectionLength: 2
});
Dropzone.options.myAwesomeDropzone = {
autoProcessQueue: false,
url: upload.php,
uploadMultiple: true,
parallelUploads: 20,
maxFiles: 20,
addRemoveLinks: true,
// Dropzone settings
init: function() {
var myDropzone = this;
this.element.querySelector("#pos").addEventListener("click", function (e) {
e.preventDefault();
e.stopPropagation();
myDropzone.processQueue();
});
this.on("sendingmultiple", function(data, xhr, formData) {
//Add additional data to the upload
formData.append("postdescription", jQuery("postdescription").val());
});
this.on("success", function(file, responseText) {
console.log('dfd');
});
}
}
});
</script>
<script src="../plugins/switchery/switchery.min.js"></script>
<!--Summernote js-->
<script src="../plugins/summernote/summernote.min.js"></script>
</body>
</html>
upload.php :
<?php
if(!empty($_FILES)){
foreach($_FILES['file']['name'] as $key=>$val){
$file_name = $_FILES['file']['name'][$key];
// get file extension
$ext = strtolower(pathinfo($file_name, PATHINFO_EXTENSION));
// get filename without extension
$filenamewithoutextension = pathinfo($file_name, PATHINFO_FILENAME);
if (!file_exists(getcwd(). '/uploads')) {
mkdir(getcwd(). '/uploads', 0777);
}
$filename_to_store = $filenamewithoutextension. '_' .uniqid(). '.' .$ext;
move_uploaded_file($_FILES['file']['tmp_name'][$key], getcwd(). '/uploads/'.$filename_to_store);
}
echo "File(s) uploaded successfully";
}
else
{
echo "1";
}
?>
For question 3:
I tried this to see if upload.php really doesn't get any files, so I tried displaying an alert if the Dropzone Queue doesn't exist. But, when I click the submit button, it takes me to upload.php without displaying any alert.
if (myDropzone.getQueuedFiles().length > 0) {
alert("yes");
}
else
{
alert("error")
}
I am working on a page with picture that need to be displayed in a grid starting with 3 columns. But every time the page loads, the pictures all load as one column going straight down the left side of the page.
It is only once you stretch the browser that the photo realign.
I want it already in a grid of 3 columns as soon as page loads.
any ideas?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="{{site.baseurl}}/js/scrollspy.js"></script>
<script src="swipebox/lib/jquery-1.9.0.js"></script>
<script type="text/javascript" src="js/modernizr.custom.js"></script>
<script src="swipebox/lib/ios-orientationchange-fix.js"></script>
<script src="swipebox/lib/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="js/jquery-1.9.0.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
//When the DOM document is loaded in the browser
$(document).ready(function () {
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Custom Theme JavaScript -->
<script type="text/javascript">
$("#menu-close").click(function(e) {
e.preventDefault();
$("#sidebar-wrapper").toggleClass("active");
$("#menu-toggle").show("active");
$("#menu-close").hide("active");
});
// Opens the sidebar menu
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#sidebar-wrapper").toggleClass("active");
$("#menu-close").show("active");
$("#menu-toggle").hide("active");
});
// Closes the sidebar menu
$("#menu-close2").click(function(e) {
e.preventDefault();
$("#sidebar-wrapper2").toggleClass("active")//slideUp(50);
});
// Opens the sidebar menu
$("#menu-toggle2").click(function(e) {
e.preventDefault();
$("#sidebar-wrapper2").toggleClass("active")//slideDown(50);
});
/* Basic Gallery */
</script>
<script type="text/javascript">
// Scrolls to the selected menu item on the page
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') || location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
</script>
<script src="bower_components/metisMenu/dist/metisMenu.min.js"></script>
<!-- Plugin JavaScript -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Plugin JavaScript -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="js/classie.js"></script>
<script src="js/cbpAnimatedHeader.js"></script>
<!-- Contact Form JavaScript -->
<script src="js/jqBootstrapValidation.js"></script>
<script src="js/contact_me.js"></script>
<!-- Custom Theme JavaScript -->
<script src="js/agency.js"></script>
<script src="lib/ios-orientationchange-fix.js"></script>
<script src="lib/jquery-2.1.0.min.js"></script>
<script src="js/jquery.swipebox.js"></script>
<!-- <script type="text/javascript" src="js/SmoothScroll.js"></script>
--> <script type="text/javascript" src="js/jquery.isotope.js"></script>
<script type="text/javascript">
jQuery(function($) {
$(".swipebox").swipebox();
});
</script>
<!--
<script type="text/javascript">
$( document ).ready(function() {
/* Basic Gallery */
$( '.swipebox' ).swipebox();
/* Video */
$( '.swipebox-video' ).swipebox();
/* Dynamic Gallery */
$( '#gallery' ).click( function( e ) {
e.preventDefault();
$.swipebox( [
{ href : 'http://swipebox.csag.co/mages/image-1.jpg', title : 'My Caption' },
{ href : 'http://swipebox.csag.co/images/image-2.jpg', title : 'My Second Caption' }
] );
} );
});
</script>
-->
<!-- <script type="text/javascript" src="js/main.js"></script> -->
<script src="js/owl.carousel.js"></script>
<!-- <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
--><script src='http://npmcdn.com/isotope-layout#3/dist/isotope.pkgd.js'></script>
<script src="js/index.js"></script>
<link href="font-awesome/fonts/plugin.css" rel="stylesheet" type="text/css">
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="css/plugin.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<!-- Custom CSS -->
<link rel="stylesheet" href="demo/normalize.css">
<link rel="stylesheet" href="demo/bagpakk.min.css">
<link rel="stylesheet" href="src/css/swipebox.css">
<link rel="stylesheet" href="css/stylish-portfolio.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="swipebox/src/css/swipebox.css">
<link rel="stylesheet" href="swipebox/src/css/swipebox.min.css">
<link rel="stylesheet" href="swipebox/demo/normalize.css">
<link rel="stylesheet" href="swipebox/demo/bagpakk.min.css">
<link rel="stylesheet" href="swipebox/demo/style.css">
<link rel="stylesheet" href="css/owl.carousel.css" media="screen">
<link rel="stylesheet" href="css/owl.theme.css"media="screen">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<section id="portfolio" class="portfolio" style="display: none;" >
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 text-center">
<h2><font style="text-transform: uppercase;"face="Helvetica" >Portfolio</font></h2>
<hr class="large">
</div>
</div>
<div class="button-group filters-button-group">
<button class="button is-checked" data-filter="*">show all</button>
<button class="button" data-filter=".ling">Lingeria</button>
<button class="button" data-filter=".men">Men</button>
<button class="button" data-filter=".women">Women</button>
</div>
<div class="grid">
<div class="element-item men " data-category="men">
<img class="img-portfolio img-responsive" src="img/1.jpg" style="width: 300px; height: 300px;">
</div>
<div class="element-item ling" data-category="ling">
<img class="img-portfolio img-responsive" src="img/2.jpg" style="width: 300px; height: 300px;">
</div>
<div class="element-item men" data-category="men">
<img class="img-portfolio img-responsive" src="img/3.jpg" style="width: 300px; height: 300px;">
</div>
<div class="element-item women" data-category="women">
<img class="img-portfolio img-responsive" src="img/4.jpg" style="width: 300px; height: 300px;">
</div>
<div class="element-item ling " data-category="ling">
<img class="img-portfolio img-responsive" src="img/5.jpg" style="width: 300px; height: 300px;">
</div>
</div>
</div>
</section>
Add this to end of Document.ready() :
$( window ).resize()
I think that should work, it calls the resize event on the browser which should trigger the change.
Ps: I'd suggest getting rid of all the different versions of Jquery you have loaded on your page.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://www.jacklmoore.com/colorbox/jquery.colorbox.js" type="text/javascript" ></script>
<link rel="stylesheet" href="http://www.jacklmoore.com/colorbox/example4/colorbox.css" type="text/css" media="screen"/>
<script type="text/javascript">
$(document).ready(function () {
$("#test").click(function () { //on clicking the link above
$(this).colorbox({iframe:true, width:"80%", height:"100%",scrolling:false});
});
});
</script>
</head>
<body>
<h3>External Form</h3>
Please fill out my form.
</body>
</html>
Now it works fine, but i need without using iframe for some further features.
Can anybody help me?
Any help would be appreciated.
Thank you.
Use Bootstrap CSS and JS styling framework. You can download it from here. Refer the files and folder structure.
Now you can copy bootstrap.css and bootstrap-theme.css, then paste it in your project like
Myproject
CSS
bootstrap.css
bootstrap-theme.css
JS
bootstrap.js
demo.html
Now this your moderated demo.html
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://www.jacklmoore.com/colorbox/jquery.colorbox.js" type="text/javascript" ></script>
<script src="JS/bootstrap.js"></script>
<link rel="stylesheet" href="http://www.jacklmoore.com/colorbox/example4/colorbox.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="CSS/bootstrap.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="CSS/bootstrap-theme.css" type="text/css" media="screen"/>
</head>
<body>
<h3>External Form</h3>
<a id="test" href="javascript:void(0);"
data-toggle="modal" data-target="#myWufooModal">
Please fill out my form.
</a>
<div class="modal fade" id="myWufooModal" tabindex="-1"
role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<a href="https://ss88.wufoo.com/forms/rmndx1a0zzpe4m/" id="test">
</div>
</div>
</div>
</div>
</body>
</html>