Is there anyway to make ColorBox (jquery popup script) actually 'pop-up' automatically, and if so, what part do i edit for that?
I need it popped up after about 3 seconds on home page.
thanks!
Set the open parameter to true. (It defaults to false); if want a delay you'll have write a bit of javascript with an interval.
You can set open property to true.
<script type="text/javascript">
$(document).ready(function() {
//For url
$.fn.colorbox({href:"example.html", open:true});
//For link
$("a.example").colorbox({open:true});
//For delay
setTimeout("$.fn.colorbox({href:'example.html', width:500, height: 300,
open:true});", 3000);
//For inline
$.fn.colorbox({inline:true, width: 660, height: 405, href:"#example"});
});
</script>
Here is the documentation: jacklmoore.com/colorbox
Related
I have a bootstrap modal. after it's shown, I run the ajax to get remote content. after ajax get success. Response shown but bootstrap modal not allow me to scroll. I've already search for resolution but nothing. Help me please!
JS:
$("#episodenext").modal('show');
$("#episodenext").on("shown.bs.modal", function() {
$(this).find(".modal-body").load('/content.php');
});
You can make this work by setting the .modal-body height to be 70% of the document height before it loads the page content.php.
Try this code here
$("#episodenext .modal-body").css({
'overflow': 'auto',
'height': $(document).height() * 0.7
});
$("#episodenext").on("shown.bs.modal", function() {
$(this).find(".modal-body").load('/content.php');
});
$("#episodenext").modal('show');
And you can check my example here: http://zikro.gr/dbg/html/bootstrap-modalscroll/
UPDATE
Here is the screen capture with the modal after applying 70% height:
I have an application. In a button clicked I tried to open a Kendo modal window. It's opening. My application is in one domain and the content of the Kendo window is from another domain. Now I want to close the modal window with a button which is inside the Kendo window. Here the issue begins. I cannot close the modal window. I searched using Google it but did not find any solution — do you know one?
After reading your comments to my previous answer I think that you question is misleading. You talk about modal, another domain and close button but seems from your comments that nothing of that is actually relevant. I conclude from your comments that you want to place a button (actually a close button but might be any other) in a KendoUI window and in addition you want to display a page (that incidentally) is in a different domain. If this is what you actually want -and foreseeing problem related to cross-domain and security- I would recommend that you should actually use content.template and define a template including your button and an iframe referencing the page www.xyz.com.
Something like this...
var myWindow2 = $("#id2").kendoWindow({
modal : true,
draggable: false,
content : {
template: 'Close' +
'<iframe src="http://www.xyz.com" frameborder="0" class="k-content-frame"></iframe>'
},
visible : false,
width : 400,
height : 200,
resizable: false,
iframe : true
}).data("kendoWindow");
$("#open2").on("click", function () {
myWindow2.center();
myWindow2.open();
});
$("#close2").on("click", function () {
myWindow2.close();
});
You might even make the button float on top of the rest of the page by defining the following style for close button.
#close2 {
position: absolute;
top: 10px;
left: 10px;
z-index: 10000;
}
The following JavaScript code defines a button for opening a modal kendoWindow. Once clicked you can press a button inside the body of the window for closing it as you want.
JavaScript code:
var myWindow = $("#id1").kendoWindow({
title : "hi",
visible: false,
modal : true
}).data("kendoWindow");
$("#open").on("click", function () {
console.log("opening");
myWindow.center();
myWindow.open();
});
$("#close").on("click", function () {
console.log("closing");
myWindow.close();
})
and the HTML:
Open
<div id="id1">
<p>this is the content of my window</p>
Close
</div>
In telerik mvc grid i want to display some data in popup window when i click on a link button. But not using Ajax. Below is the code i am using but it is not working. Any help is appreciated
#section JavaScript{
<script type="text/javascript" language="javascript">
$(function () {
$(".lnkShortCodeAndKeyword").click(
function (e) {
e.preventDefault();
var WShortCodeAndKeyword = $.telerik.window.create({
name: "ShortcodesWindow",
title: "Shortcodes",
contentUrl: $(this).attr('href'),
modal: true,
resizable: true,
draggable: true,
scrollable: true,
width: 960,
height: 600,
onClose: function () {
destruir(this);
}
}).data('tWindow').center();
}
}
If you are not using the Window component anywhere on your View (by using Html.Telerik().Window() for example) you will have to manually add the required JavaScript files when you define your ScriptRegistrar. Normally, if you declare the components on the page the ScriptRegistrar takes care of everything for you, but if you just try to create this on the client-side you will have to do something along the following lines:
#(Html.Telerik().ScriptRegistrar().DefaultGroup(group => group.Add("telerik.common.js").Add("telerik.draganddrop.js").Add("telerik.window.js").Combined(true).Compress(true)))
As you can see I just manually defined the JavaScript files I wanted to load. Keep in mind to not add the "min" suffix as the ScriptRegistrar takes care of this as well (.min.js will only be used in production code and not debug).
I am using the jQuery TipTip plugin to display tooltips on hrefs using data from the "Title" tag.
Here is the code i am using to invoke TipTip
<script type="text/javascript" src="jquery.tipTip.js"></script>
<!-- ToolTip script -->
<script type="text/javascript">
$(function(){
$(".someClass").tipTip({maxWidth: "auto", edgeOffset: 10});
});
</script>
<!-- End ToolTip script -->
and in the body
sample content. sample,stuff.
This works fine as standalone example. However, when i set the script up to load the content into the body via ajax (using sample.html that contains the original body code), the ToolTip stops working.
<script type="text/javascript">
//loading sample ajax data
$(document).ready(function(){
$('#remote').load('sample.html');
});
</script>
Browsing in the TipTip forums, someone mentioned this could work using the jQuery .live function, but having read the documentation, i dont understand how im supposed to implement this with my code. I understand that jquery-live is an event handler, so supposedly, i could call in the data via ajax as the primary event and then apply TipTip as a secondary event, but i cant figure out how to implement this, and dont know if im definitely going down the right path.
Could someone please advise me?
An easy solution would be to create a function that activates TipTip:
function activateTipTip() {
$(".someClass").tipTip({maxWidth: "auto", edgeOffset: 10});
}
$(document).ready(function(){
activateTipTip();
$('#remote').load('sample.html', function() {
activateTipTip();
});
});
Not very elegant, but should work though.
This code will make it so that any link that has a title attribute will have TipTip's functionality applied to it:
$('a[title]').live('mouseover', function()
{
$(this).tipTip({
delay: 200,
maxWidth: '400px'
});
$(this).trigger('mouseenter');
});
Source: https://drew.tenderapp.com/discussions/tiptip/73-tiptip-and-jquery-live
This is my solution for this problem:
$(ElementParent).on('mouseover', YourElementSelector, function()
{
if($(this).data('hasTipTip') !== true)
{
$(this).tipTip(TipTipOptions);
$(this).data('hasTipTip', true);
$(this).trigger('mouseover');
}
});
i want to apply jquery tooltip plugin from jQuery Tools website
(http://flowplayer.org/tools/tooltip/index.html) to some elements loaded by ajax in my page.
i know that delegate(0 and live() methods are used for applying events to ajax loaded elements but i don't know how i can apply a plugin to these kind of elements.
the code is:
$("#mytable img").tooltip({
// each trashcan image works as a trigger
tip: '#tooltip',
// custom positioning
position: 'center right',
// move tooltip a little bit to the right
offset: [0, 15],
// there is no delay when the mouse is moved away from the trigger
delay: 0
}).dynamic({ bottom: { direction: 'down', bounce: true } });
would someone help me?
thank you.
Apply the call to a hover function portion of your script like:
$("#mytable img").live('hover', function() {
//your function here
});
Alternatively you can use the script directly inside the ajax page you're loading in, in which case the script is directly in the same layer as the content.
You have to initialize the tooltip plugin on the new content on the success function of your ajax call.
it is solved now.i wrote it here:
jQuery Tooltip plugin error