I've got a menu that uses the jQuery toggle function to open and close a sub-menu. This is working perfectly fine in all of my pages, BUT, when I try to add this same menu and sub-menu into a jQuery dialog box it will not open the sub-menu.
Here is my index.php code, including the javascript includes from the <head> of the page:
<script src="javascripts/jq/jquery-1.4.2.min.js"></script>
<script src="javascripts/jq/jquery-v1.8.3.js"></script>
<script src="javascripts/jq/jquery-v1.9.2.js"></script>
<p align="center" id="temp_menuOpener">[Click Here to Toggle Menu]</p>
<div id="temp_menu">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="ui-corner-bl ui-corner-br cus-dialog-content"><?php include("includes/menu.php");?></td>
</tr>
</table>
</div>
<script>
$( "#temp_menu" ).dialog({ autoOpen: false, width: 'inherit'});
$( "#temp_menuOpener" ).click(function() {
$( "#temp_menu" ).dialog( "open" );
});
</script>
Here is my menu.php code:
<script>
$(function()
{
$('.schedOpener').click(function()
{
$('div#submenu_sched').toggle();
});
});
</script>
<div id="menu">
<div class="menu schedOpener">
<img src="/roster/images/menu/schedule.png" border="0" title="Schedule" alt="Schedule">
</div>
<div id="submenu_sched">
<div class="menu">
<img src="/roster/images/menu/sched_month.png" border="0" title="Schedule Month View" alt="Schedule Month View">
</div>
</div>
</div>
The CSS for submenu_sched is set to display:none;.
So, like I said, this menu works perfectly until it's added to a dialog box and then it fails. Simply removing id="temp_menu" from the <div> will make it work, but that also removes it from the dialog box.
I tried adding this to a jsfiddle, but I couldn't get the dialog box to work at all, even when I chose the jQuery 1.8.3 library framework. So instead I set it up on my test server to make it so you can at least see what I mean. You will notice on my test server there is more to the menu, and the page itself, than what I've posted here. I am trying to keep the static to noise ratio at a good level :)
IWACTITE
Alright, after a while playing around on jsFiddle, I've figured all the problems out. First the JavaScript shouldn't be inside the dialog. Secondly, you have to use ($("#temp_menu").dialog("isOpen") == true) ? $("#temp_menu").dialog("close") : $("#temp_menu").dialog("open"); to compare whether to open or close the dialog.
Here's my working jsFiddle
and here's the fullscreen version jsFiddle.
Related
I made a widget in the summary view of the account module. In this widget i want to use a slideToggle to show some details. Sometimes the code works perfectly but other times it double toggles and instantly closes the details.
JS:
$(document).ready(function() {
$('.potential_single_title').on('click',function(e) {
$(this).parent().find('.potential_comment_list').slideToggle('slow');
});
});
TPL:
<script src="resources/ChildCommentScript.js"></script>
<link rel="stylesheet" type="text/css" href="resources/ChildCommentStyle.css">
{strip}
<div class="potential_comment_container">
{foreach from=$OPP key=K item=POT}
<br />
<div class="potential_single">
<div class="potential_single_title">
<strong>{$POT[1]}</strong> <span class="potential_assignee">Assigned to : {$POT[2]}</span>
</div>
<hr>
<div class="potential_comment_list">
<div class="commentContainer">
{foreach from=$COM[$K] item=POTCOM}
<div class="commentDetails" style="width:100%;">
<div class="span1">
<img class="alignMiddle pull-left" src="layouts/vlayout/skins/images/DefaultUserIcon.png">
</div>
<span class="commentorName"><strong> {$POTCOM[0]}</strong></span>
<span class="pull-right"><p class="muted"><small>{$POTCOM[1]}</small></p></span>
<div class="commentInfoContent">{$POTCOM[2]}</div>
</div>
{/foreach}
</div>
</div>
</div>
{/foreach}
</div>
{/strip}
Usage of slide toggle seems to be correct. I suspect the click is happening twice sometimes which is causing slide again.
Modifying JS to reject clicks if slide action is happening might resolve the issue.
$(document).ready(function() {
var sliding = false;
$('.potential_single_title').on('click',function(e) {
if(sliding) return false;
sliding = true;
$(this).parent().find('.potential_comment_list').slideToggle('slow', function() {sliding = false;});
});
});
Simple flag to reject click action while sliding is included!
This is just to show how to see if the click is happening twice.
$(document).ready(function() {
$('.potential_single_title').on('click',function(e) {
console.log("clicked")
});
});
for one click.. if in console you see clicked twice you can assume your trigger happy ;-)
try also putting a debugger in there... may highlight things
$(document).ready(function() {
$('.potential_single_title').on('click',function(e) {
console.log("clicked");
debugger;
});
});
in chrome the debugger console must be open for it to hit the debugger line.
just want to rule out stupid things.. this is one for one what is on the page no other js... like maybe your wrapping $(document).ready( twice or something and just havnt included that code in the question?
Hi I have a question about the Metro UI (http://metroui.org.ua/dialog.html)
I'm using the dialog like this:
<div id="TestDialog" data-role="dialog" class="Dialog">
<h1>Simple dialog</h1>
<p>
Dialog :: Metro UI CSS - The front-end framework
for developing projects on the web in Windows Metro Style.
</p>
</div>
<script type="text/javascript">
var x_dialog = $("#" + dialogId).data("dialog");
x_dialog.options = {
width: width,
height: height,
closeButton: true
}
x_dialog.open();
</script>
But the Dialog isn't showing with a close button or my desired width / height.
Are there any useful examples for Metro UI dialogs? I haven't found any and the API from Metro UI seems nice, but if you're searching for JavaScript with Dialogs you wont find any...
first of all the metro 3.0 is till in beta so it will probably still be improved. It contrast to 2.0 it relies heavily on html5 data attributes and hence it can be specified on the html code but can still be modified in the javascript by using methods like the .attr('data-*','') . Here is a working code:
<script>
function showDialog(id){
var dialog = $("#"+id).data('dialog');
if (!dialog.element.data('opened')) {
dialog.open();
} else {
dialog.close();
}
}
</script>
</head>
<body onload="init()">
<div class="container page-content">
<div class="padding20 no-padding-right no-padding-left no-padding-top">
<button class="button" onclick="showDialog('dialog')">Show dialog</button>
</div>
<div data-role="dialog" id="dialog" class="padding20" data-close-button="true" data-width="200" data-height="200">
<h1>Simple dialog</h1>
<p>
test
</div>
</div>
</body>
</html>
Either specify them on the html or have it set dynamically on the click event in the js script. Something like this:
$('.button').click(function () {
$('#dialog').attr('data-width','200');
$('#dialog').attr('data-height','200');
showDialog('dialog');
});
Hope it helps.
There are options given there in http://metroui.org.ua/dialog.html
to help you customize the dialog to your taste. Now your Question, the answer would be
<div id="TestDialog" data-role="dialog" class="Dialog" data-close-button="true" data-width="300" data-height="300">
thats it. you can replace the width and height with an value of your choice
for the javascript that will help open and close the dialog
<script>
function showDialog(id){
var dialog = $(id).data('dialog');
dialog.open();
}
</script>
the button or whatever link that will open the dialog should have this showDialog('#TestDialog') the TestDalog is the id you gave the dialog div
<button onclick="showDialog('#TestDialog')">Show dialog</button>
I have a link like this
COME HERE
I want to open the popup.html file as a jquery popup. And I cant have it inside the current page as a <div> with an id. I must have it out side the current file.
And I cant use dialog's as it reloads the current page. Any idea on how to do it?
Inside the popup.html I am using just a single header.
Or any methods through which I can avoid the page being reloaded when dialog is closed?
Use .load() to load popup.html into a placeholder (i.e <div id="PopupPH">). This placeholder can be placed either inside data-role="page or outside it, depending on jQuery Mobile version you are using.
Moreover, in popup.html, you need to change data-role=page" to data-role="popup in order to treat it as a popup not a page.
jQuery Mobile 1.4
Insert placeholder inside body tag or data-role="page" and load popup.html.
<body>
<div data-role="page">
</div>
<div id="PopupPH">
<!-- placeholder for popup -->
</div>
</body>
Or
<body>
<div data-role="page">
<div id="PopupPH">
<!-- placeholder for popup -->
</div>
</div>
</body>
Load popup.html into placeholder
$("#PopupPH").load("popup.html");
Inside popup.html popup div, add JS to create, open and remove popup once it's closed.
<div data-role="popup">
<!-- contents -->
<script>
$("[data-role=popup]").enhanceWithin().popup({
afterclose: function () {
$(this).remove();
}
}).popup("open");
</script>
</div>
jQuery Mobile 1.3 and below
Do the same as above, except for popup placeholder should be inside data-role="page", because jQM 1.3 doesn't support external popup. Also, replace .enhanceWithin() with .trigger("create").
Using the frames & popups in jQuery mobile, you can simply include an iframe inside, although dialogs are still probably your better bet. (Especially as a click outside the popup.. kills it)
<div class="hidden">
<div data-role="popup" id="externalpage">
<iframe src="http://www.bbc.com"
width="480"
height="320"
seamless>
</iframe>
</div>
</div>
<a href='#externalpage'
data-rel="popup"
data-role="button">COME HERE</a>
<script>
$(document).on("pageinit", function() {
$( "#externalpage" ).on({
popupbeforeposition: function( event, ui ) {
console.log( event.target );
}
});
});
</script>
Demo: http://jsfiddle.net/tcS8B/
jQuery Mobile Dialogs don't refresh the page I don't think, it simply masks it with a new background for focused attention.
Try
Test
I'm having a problem that I thought someone else might have a quick answer for. I'm attempting to use a Colorbox to display multiple hidden inline divs. The first div is displayed correctly on load. When I click on one of the anchors, nothing happens. If I click again, the correct div shows. Is there a way not to require the extra click?
Here's my HTML:
<p><a class='inline' href="#inline_content">Inline HTML</a></p>
<p><a class='inline' href="#inline_content2">More inline HTML</a></a></p>
<div style='display:none'>
<div id='inline_content' style='padding:10px; background:#fff;'>
<p><strong>Inline content.</strong></p>
</div>
<div id='inline_content2' style='padding:10px; background:#fff;'>
<p><strong>Different inline content.</strong></p>
</div>
</div>
Here's my code
$(document).ready(function(){
$(".inline").colorbox({inline:true, open: true, rel: 'inline', current: "", width:"50%"});
});
Exhibits the behavior described above in Opera, Firefox, Chrome. Doesn't do anything in IE. I'm using the most current versions of jQuery, Colorbox.
I am currently building a website for an indie game development team I am working with.
Right now I am writing the alpha sign up page and I have created layout which needs to make use of the slideToggle() and fadeToggle() methods, however after a few hours of faffing around in my editor I cannot seem to fathom a solution for the behavior I want.
When the page loads I want the form container to be in its slid up position and when the user clicks on the div I want the form container to animate down.
I have tried to animate the display property from hidden to block and I have also tried to hide the element when the document loads and then re-show it on click, however when I did that I noticed a strange behavior as the div would slide down and then up, which would cause the user to have to press the button again to view the sign-up form.
The code below handles the click event,
<a href="#" >
<div onclick="$('#showForm .inner').fadeToggle({queue:false});$('#showForm').slideToggle();" id="alpha-container" class="alpha-off"></div>
</a>
And this is the div I want to be hidden and re-appear
<div id="formContainer" class="form container">
<div id="showForm" class="outer">
<div class="inner">
<form method="post" action="verify.php">
<table>
<tr>
<td class="intro">
<h1 class="header-orange">Liberico Alpha Application</h1>
<p class="body-text">So you think you have what it takes to brave the battlefield?
</p>
</td>
</tr>
</table>
</form>
</div>
</div>
</div>
I have created a jsfiddle demonstrating how my page currently renders - http://jsfiddle.net/alexmk92/54EUC/ - any pointers would be greatly appreciated.
Firstly, i removed the javascript code from html and added a class "clickable" to the clickable element:
<a class="clickable" href="#" >
<div id="alpha-container" class="alpha-off">CLICK ME FOR ANIMATION</div>
</a>
And then, i've created a custom javascript toggle function with slideDown and up:
$('.clickable').click(function(){
var showFormObj = $('#showForm');
if(showFormObj.hasClass('active')){
showFormObj.removeClass('active');
showFormObj.slideUp();
}else{
showFormObj.addClass('active');
showFormObj.slideDown();
}
});
On the css part i hid the 'showForm' element:
#showForm {display:none;}
Here is the fiddle: http://jsfiddle.net/Karzin/54EUC/2/
If you need to hide the form when page loads. For form container use
display : none
Eg:
http://jsfiddle.net/54EUC/1/