I have the following javascript that displays a hidden div in a dialog, the hidden div holds a TimyMCE instance. My problem is I can’t type into the TinyMCE text area, it’s locked or something. I think the problem is the dialog needs to fully load before loading TinyMCE, I guess so that TinyMCE is on top of everything.
Can I edit this code so that collorbox has fully loaded before loading TimyMCE inside quictEditPanel?
<script type="text/javascript">
$("#quictEdit").colorbox({
width: "740px",
inline: true,
href: "#quictEditPanel"
});
</script>
$(document).ready(function() {
$('#quictEdit').colorbox({
width:"740px",
inline:true,
href:"#quictEditPanel"
});
});
Your problem is that you call the element ID before the dom load, try this:
<script type="text/javascript">
$(document).ready(function() {
$("#quictEdit").colorbox({
width: "740px",
inline: true,
href: "#quictEditPanel"
});
});
</script>
Related
I'm trying to resize a fancybox lightbox so that it doesn't take up the whole entire page. Here's the code I have so far:
<script type="text/javascript">
$(.fancybox.open({
autoDimensions: false,
width: "60%"
});
</script>
But that doesn't do anything. Is there anything wrong with this code specifically?
You could try something like:
<script type="text/javascript">
$('.fancybox').css("width", "60%");
</script>
You may need to do this after the box is opened, if the box attributes are created when the box is first opened.
It looks like you are trying to do some function call, but I don't think that's needed. However, if you do need that, try using this:
<script type="text/javascript">
$('.fancybox').open(function(){
width: "60%"
});
</script>
Or, try this based on #Xetnus suggestions.
I would like to create a popup window in the middle of the web browser when the mouse pointer enters and leaves the elements. The pop up window shows an image that I provide.
How should I implement this in Jquery? Or is there any good plugin to do it?
Thanks
Try jQuery UI dialog box.
DEMO
Bind the event handler to a mouseout event. See the link for more info:
http://api.jquery.com/mouseout/
One way to approach the problem is to create a div(which will hold your popup window) and use the hide and show jquery effects along with it.
That's quite easy, you can do it like that:
$('.hovered_element').mouseenter(function() {
// you can use some plugin here, or just a simple .show()
$('.popup_element').show();
//if you want popup to fade in
//$('.popup_element').fadein(600);
});
$('.hovered_element').mouseleave(function() {
// again: any js plugin method, or just .hide()
$('.popup_element').hide();
//if you want popup to fade out
//$('.popup_element').fadeout(600);
});
Of course you need to style your .popup_element so it shows up in the center, or anywhere you like.
Since you are new to coding, I suggest using the jQuery team's jQueryUI library -- which includes a .dialog() capability (they call it a "widget"). Here's how it works:
(1) Include both jQuery and the jQueryUI libraries in your <head></head> tags. Note that you must also include an appropriate CSS theme library for jQueryUI (or the dialogs will be invisible):
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/flick/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
(2) Create an empty div in your HTML, and initialize it as a dialog:
HTML:
<div id="myDlg"></div>
jquery:
$('#myDlg').dialog({
autoOpen:false,
modal:true,
width: 500,
height: 'auto'
});
(3) Then, when you are ready to display the dialog, insert new data into the myDlg div just before opening the dialog:
$('#myDlg').html('<div>This will display in the dialog</div>');
$('#myDlg').dialog('open');
Note that you can put any HTML in the html() method, including an image.
The above code allows you to change the content of the dialog and use the re-same dialog DIV each time.
Here's what the working example would look like:
jsFiddle Demo
HTML:
<div id="myDlg"></div>
<div id="questiona" class="allques">
<div class="question">What is 2 + 2?</div>
<div class="answer">4</div>
</div>
<div id="questionb" class="allques">
<div class="question">What is the 12th Imam?</div>
<div class="answer">The totally wacky reason why Iran wants a nuclear bomb.</div>
</div>
jQuery:
var que,ans;
$('#myDlg').dialog({
autoOpen:false,
modal:true,
width: 500,
height: 'auto',
buttons: {
"See Answer": function(){
$('#myDlg').html(ans);
$('.ui-dialog-buttonset').next('button').hide();
},
"Close": function(){
$('#myDlg').html('').dialog('close');
}
}
});
$('.allques').hover(
function(){
//hover-IN
que = $(this).find('.question').html();
ans = $(this).find('.answer').html();
$('#myDlg').html(que).dialog('open');
},
function(){
//hover-OUT -- do nothing
}
);
Resources:
How to use Plugins for PopUp
http://jqueryui.com/dialog/
http://blog.nemikor.com/2009/04/08/basic-usage-of-the-jquery-ui-dialog/
jQuery UI Dialog Box - does not open after being closed
Dynamically changing jQueryUI dialog buttons
jQuery UI dialog - problem with event on close
Hi I am using this script to add social media icon into my site.
<div id="menu" class="shareSelector" style="width:250px; height:250px;"></div>
$(document).ready(function () {
$('.shareSelector').socialShare({
social: 'facebook,google,pinterest,twitter',
whenSelect: true,
selectContainer: '.shareSelector'
});
});
div gets the content upon clicking on it.Can we call this function without clicking div means on bodyload?
Regards:Ali
The $(document).ready(function () {}); function should run when the page loads.
Have you got the jquery in a <script> tag?
If so, the bindings are setup by the socialShare plugin, so you may need to look at that.
What does whenSelect option do?
$(document).ready(function () {
$('.shareSelector').socialShare({
social: 'facebook,google,pinterest,twitter',
whenSelect: true,
selectContainer: '.shareSelector'
});
$('.shareSelector').click()
});
Dont know about the socialShare plugin but you have an option there which says "whenSelect: true"
try false
I need to have a jQuery UI dialog box that pops up and shows a basic form, which also includes an external javascript file.
The modal pops up, but none of the script contents load. Not sure why. If I go directly to the page the modal is loading, it works fine.
Modal content:
<link rel="stylesheet" href="http://www.bankrate.com/free-content/css/bankrate-fcc-calculators.css" type="text/css"/>
<input id="mrtgCal" type ="text" value="1,Arial,600" style="display:none" />
<script language="Javascript" src="http://js.bankrate.com/free-calculators/free-simple-mortgage-calculator-widget.js" type="text/javascript"></script>
<script type="text/javascript">mrtgCalcinit();</script>
Modal call:
$(function(){
$('.modal-popup a, .email-button a').each(function() {
var $link = $(this);
var $dialog = $('<div></div>')
.load($link.attr('href') + ' #region-content')
.dialog({
autoOpen: false,
width: 600,
draggable: false,
resizable: false,
modal: true,
show: "fade",
hide: "fade",
closeText: 'X'
});
$link.click(function(){
$dialog.dialog('open');
return false;
});
});
});
The scripts are not running because of the way you're calling .load(). The library will not run embedded scripts when you use a selector after the URL. By that I mean the addition of ' #region-content' to the end of the "href" value.
Why? I don't completely know; I suspect it has something to do with the fact that jQuery doesn't know whether the embedded <script> bodies rely on scripts in the <head> (or elsewhere) to work.
As stated before, load wont load the scripts (read the Script Execution section). However it is not necesary to extend the dialog, you can use .delegate(), .on() or even a very to use plugin called liveplugin to manage the dynamic content loaded into the dialog.
The best variant is to write your custom jquery ui widget, extending jquery ui dialog with your functionality.
I have a button that when clicked loads an external page (same domain) in to a div and displays that div as a jQuery UI dialog box.
<div id="Dialog_box"></div>
<script type="text/javascript">
$(function() {
$("#Dialog_box").dialog({
autoOpen: false,
modal: true,
width: 500,
height: 400,
title: "Dialog",
close: function(event, ui) {
$("#Dialog_box").html(""); // Ensure the page is no longer loaded
}
});
});
function openDialog() {
$(document).ready(function() {
$("#Dialog_box").load("dialog.php").dialog('open');
});
}
</script>
<button onclick="openDialog();">Open Dialog</button>
The first time the button is clicked it opens fine. After closing it then it will no longer come back up.
First I verified that it was in fact being closed upon hitting the 'X'
$("#Dialog_box").dialog({
...
close: function(event, ui) {
alert("Closed");
}
});
And the alert was being shown. I then tried using my normal code but did not load in the page
$("#Dialog_box").dialog('open');
At this point, the dialog would open and close properly without any problems. Although I don't believe it should matter, I even tried separating out the load and dialog commands
function openDialog() {
$(document).ready(function() {
$("#Dialog_box").load("dialog.php");
$("#Dialog_box").dialog('open');
});
}
Once again, the box would display the first time but would not reappear after that.
My external file essentially looks like this
<link type="text/css" href="path/to/style.css" rel="stylesheet" />
<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript" src="path/to/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#Submit_button").click(function() {
// Do stuff with form data
// POST data without changing page
});
});
</script>
<form action=''>
// Input fields
<input type="button" id="Submit_button" />
</form>
Just for clarification, the problem occurs whether or not I post my form.
Why won't the dialog box re-open after I've loaded (and to my understanding, unloaded) a page in to it?
Remove the line to embed jquery.js from the external file.
This line will load jQuery again, overwrite the existing jQuery, what will destroy the already instantiated dialog-object, because it's registered in the overwritten jQuery-instance.
To clarify: you don't need to embed jquery and jqueryui again, because if you use $.load() the returned fragment will be a part of the DOM of the requesting document(they already exist there).
$(function() {
$( "#btnCallCompany" ).button().click(function() {
$( "#divOpenConversation" ).dialog({
autoOpen: true,
height: 500,
width: 650,
modal: true
});
$.get("/Conversation.aspx",function(data){
$( "#divOpenConversation" ).html(data);
});
});
});//end func