I have radio button code below, when I clicked on that need to open fancybox modal window but while clicking it is saying 'the requested content cannot be loaded'.
$(document).ready(function(){
$("#cncstoreloc").fancybox({
target: this,
href: '#cnc',
width: 1080,
height: 400,
autoSize: false,
autoCenter: true,
scrolling: 'auto',
titleShow: false,
title: null,
centerOnScroll: true,
margin: 0,
padding: 30,
//type: 'iframe'
afterShow: function(){
$('#quicksearch').on('click', function(){
$('#cncstorepane').css('display','block');
});
},
afterClose: function(){
$('#radio_check').removeClass('radio_chk');
}
}).on("click", function (evt) {
$('#radio_check').addClass('radio_chk');
});
});
Radio button code:
<div class="" id="clickncollect_form">
<input type="radio" id="cncstoreloc" name="cncstoreloc">
<label for="cncstoreloc">Test</label>
<span id="radio_check" class="check"></span>
</div>
Content div to load in fancybox modal window:
<div style="display:none">
<div class="main-container" id="cnc">
<h1>CLICK & COLLECT</h1>
</div>
</div>
Does anyone have any idea instead of loading the content why it's throwing an error.
After trying to animate an element, when clicking on a button using this script:
$(document).ready(function()
{
$("#oone, #otwo, #othree, #ofour, #ofive, #osix, #oseven, #oeight, #onine, #oten, #otwelve, #otwenty, #othirteen, #ofourteen, #ofifteen, #osixteen, #loone, #lotwo, #lothree, #lofour, #lofive, #losix, #loseven, #loeight, #lonine, #laaten, #lotwelve, #lotwenty, #lothirteen, #lofourteen, #lofifteen, #losixteen").click(function()
{
// $(this).css('border', "solid 2px red");
// var divs = $("#div_one, #div_two, #div_three, #div_four, #div_five, #div_six, #div_seven, #div_eight, #div_nine, #dive_ten, #div_eleven, #div_twelve, #div_thirteen, #div_fourteen, #div_fifteen, #div_sixteen, #div_lone, #div_ltwo, #div_lthree, #div_lfour, #div_lfive, #div_lsix, #div_lseven, #div_leight, #div_lnine, #dive_lten, #div_leleven, #div_ltwelve, #div_lthirteen, #div_lfourteen, #div_lfifteen, #div_lsixteen");
// $(divs).siblings().slideToggle();
$(this).next().slideToggle();
$(this).siblings().slideToggle();
});
});
I've got some animation unwanted result. So I decided, instead of animating the next element of the clicked button, why I don't send the result into dialog bix using jQuery UI plugin. So I tried the following:
<script src="../include/jquery-1.12.1.min.js"></script>
<script src="../include/jquery-ui.min.js"></script>
<script src="../include/bootstrap.min.js" type="text/javascript"></script>
$(document).ready(function() {
$("#oone, #otwo, #othree, #ofour, #ofive, #osix, #oseven, #oeight, #onine, #oten, #otwelve, #otwenty, #othirteen, #ofourteen, #ofifteen, #osixteen, #loone, #lotwo, #lothree, #lofour, #lofive, #losix, #loseven, #loeight, #lonine, #laaten, #lotwelve, #lotwenty, #lothirteen, #lofourteen, #lofifteen, #losixteen").click(function() {
$(this).next().dialog({
autoOpen: false,
hide: "puff",
show: "slide",
width: 800,
modal: true
});
//$(this).dialog("open");
});
});
And here is the html code for only the first 2 buttons, because the cod is too long:
<div class="form-group col-md-12">
<input class="img1" type="image" style="width:60px;height:60px" src="../images/molar_left_t.png" id="oone" name="one" alt="button" />
<div id="div_one" class="collapse">3rd Molar:
<?php echo $resTeeth['one'] ?>
</div>
<input class="img1" type="image" style="width:60px;height:60px" src="../images/molar_left_t.png" id="otwo" name="two" alt="button" />
<div id="div_two" class="collapse">
<?php echo $resTeeth['two'] ?>
</div>
So I had this error:
jquery-1.12.1.min.js:2 Uncaught Error: cannot call methods on dialog prior to initialization; attempted to call method 'open'
How to fix this error, and is it possible to send the next() div element into dialog box using jQuery UI, or should I specify id for each div, and create a dialog script for each one of them ?
Your problem is, you're creating the dialog from the next div, but you're trying to open the dialog on the CURRENT div.
You can fix this pretty easy:
$(document).ready(function() {
$("#oone, #otwo, #othree, #ofour, #ofive, #osix, #oseven, #oeight, #onine, #oten, #otwelve, #otwenty, #othirteen, #ofourteen, #ofifteen, #osixteen, #loone, #lotwo, #lothree, #lofour, #lofive, #losix, #loseven, #loeight, #lonine, #laaten, #lotwelve, #lotwenty, #lothirteen, #lofourteen, #lofifteen, #losixteen").click(function() {
var dialog = $(this).next();
dialog.dialog({
autoOpen: false,
hide: "puff",
show: "slide",
width: 800,
modal: true
});
dialog.dialog("open");
});
});
I made the assumption you want the dialog to contain the contents of the next (following) div.
This would do that:
$(document).ready(function() {
var dialog = '<div class="mydialog" title="Basic dialog"><p class="dialogcontent">me</p></div>';
var newDiv = $(dialog);
newDiv.dialog({
autoOpen: false,
hide: "puff",
show: "slide",
modal: true,
buttons: {
Ok: function() {
$(this).dialog("close");
}
}
});
$(".form-group").on('click', ".img1", function() {
var me = $(this);
newDiv.find('.dialogcontent').html(me.next('.collapse').html())
newDiv.dialog("open");
});
});
Example in action: https://jsfiddle.net/89pyhsuj/
I am trying to create a page with different news articles(each article page directs to a different page that was created). Using modal can I create an environment where the page pop's up in the same window rather than opening in another window? If yes, can someone please help me with the code and example?
Yes, use jQuery modal dialogs. You can have a link or button for each article and when it gets clicked, open a modal dialog with the article's text.
See this JSFiddle for a working example.
<div class='article' id="article1">
<p>This is article 1, etc...</p>
</div>
<button id='article1Button'>Article 1...</button>
<div class='article' id="article2">
<p>This is another article...</p>
</div>
<button id='article2Button'>Article 2...</button>
And the javascript:
$(document).ready(function(){
$(".article").dialog({
autoOpen : false,
resizable : false,
width : 400,
height: 400,
modal : true,
buttons: {
"Close" : function(){
$( this ).dialog( "close" );
}
},
close : function(ev, ui) {
return true;
}
});
$('#article1Button').click(function(){
$("#article1").dialog("open");
})
$('#article2Button').click(function(){
$("#article2").dialog("open");
})
});
It seems like in jQuery when an element is not visible width() returns 0.
when I remove the accordion the height is reported correctly. I tried wrapping the images in a div and setting the div's display to block , but this didn't work either.
is there any alternative to find image original size when accordion applied?
<div id="accordion">
<h3>Click me</h3>
<div>
<div class="bg">
<img src="your_img_url">
</div>
</div>
<h3>Click me</h3>
<div>
<div class="bg">
<img src="your_img_url"/>
</div>
</div>
</div>
$(document).ready(function() {
$('#accordion').accordion({
autoHeight: false,
collapsible: true,
});
$("img").load(function() {
alert($(this).height());
alert($(this).width());
});
});
Setting a specific width and height on the images will return that width and height. This can be done in CSS or using the width and height attributes on the <img> element.
Changing your images to <img src="your_img_url" style="height: 20px; width: 20px;"> should work.
If you need original width, you could do something like this:
var img = $('img').clone().appendTo('body').hide();
img.load(function () {
alert($(this).width());
alert($(this).height());
});
This answer has more detailed information on how to get the original size.
Works for me!
Do you have accordion plugin?
if not: http://bassistance.de/jquery-plugins/jquery-plugin-accordion/
is it added to script?
yo should remove last , to collapsible: true,
it sould look like this:
$(document).ready(function() {
$('#accordion').accordion({
autoHeight: false,
collapsible: true
});
$("img").load(function() {
alert($(this).height());
alert($(this).width());
});
});
But it works anyways!
Can we force the Kendo to change the "collapsible: false" property of splitter to "collapsible: true" on click of a button??
On load, if the Splitter property "collapsible" is set to "false", then the user cannot collapse it back..
So is there anyway if I set the property "collapsible:false" but on click of the button at run time change the property to "collapsible:true" and then collapse and then set it back to "collapsible:false"???
Here is my code:
HTML
<p>
<button id="collapsePane" type="button" class="k-button">Collapse left pane</button>
<button id="expandPane" type="button" class="k-button">Expand left pane</button>
</p>
<div id="splitter">
<div id="left">Left column</div>
<div>Main content</div>
</div>
JS
var splitterElement = $("#splitter").kendoSplitter({
panes: [{
size: "15%",
resizable: true,
collapsible: false,
}, {
size: "85%",
resizable: true,
}]
});
var splitter = splitterElement.data("kendoSplitter");
$("#collapsePane").click(function (e) {
var splitter = $("#splitter").data("kendoSplitter");
$("#left").collapsible(true); /*How to change this property?*/
splitter.collapse("#left");
});
$("#expandPane").click(function (e) {
var splitter = $("#splitter").data("kendoSplitter");
splitter.expand("#left");
});
Here is the Link for the demo of my code: http://jsfiddle.net/hxtxokoq
Please suggest and let me know if you need any other details.
Thanks in advance!
Try changing your $("#left").collapsible(true); to:
splitter.options.panes[0].collapsible = true;
Updated jsfiddle: http://jsfiddle.net/4w7k3gz3/3/
Edit: And here's the documentation used to find a solution: http://docs.telerik.com/kendo-ui/web/splitter/overview#change-pane-settings-after-initialization