I try to have a function to display a box with calling dialog('Hello') for example.
I just want to replace the basic function alert by dialog jquery but I don't succeed.
Please help me
**Steps** :
Create a div with id : dialog. Also set it's class
Set the css property of the class display:none
Align it in center with width and height 25%
Create a function dialog(str) that accepts msg as a parameter
Use jquery to change the class of div dialog and set the css property display:block
In the div that you created place a small ok button and map it's click event to a function that hides the div or set's property : display:none
i got this working once i was using it.
$(function() {
$( "#messagebox" ).dialog();
});
And you need some info to go in that box, with this code.
<div id="messagebox" title="some title">
<p>You type your message here</p>
</div>
you use the id to identify which box, and then the rest gives itself :) good luck.. hope it helps. should be easy.
Related
In an XPages application I've been given the following HTML code for a navigation bar which will be used to select which of three different Custom Controls display:
<ul class="Navigation">
<li>Option One</li>
<li>Option Two</li>
<li>Option Three</li>
</ul>
I know lots of ways to display or hide Panes or Divs or Custom Controls from buttons or code but I can't figure out how to do it from a simple HREF call. I've tried hiding a div using dojo which works in CSJS in a button but not here, and using CSJS to set a sessionScope variable which of course doesn't work:
<li>Option One</li>
<li>Option Two</li>
I'd appreciate any help with this. Thanks very much in advance!
If you want to hide a custom control based on url. I believe that's can be done via the dynamic content control that comes with the ext library or 9.0x. I might have the name wrong but should be close. I think there's an example in the ext library demo app that you can get from OpenNTF.
You could hide the whole <li> element by using a panel:
<xp:panel tagName="li" rendered="...">
...
</xp:panel>
Just calculate the rendered property with your logic for that panel element.
Use XSP.partialRefreshGet() or XSP.partialRefreshPost() to refresh your panel with all custom controls from client side. Set a parameter "option" with the current value.
javascript:XSP.partialRefreshGet("#{id:panelAll}", {params: {'option': 'One'}}
Refresh the panel on server side testing the delivered option with
param.option == 'One'
and render your sub panels accordingly.
If it must be
href="optionOne"
or similar, you could try with
href="currentpage.xsp?nav=optionOne"
and use param.nav in your code to find out which option is selected. Much like Knut's idea, but then doing a full refresh.
On my page I want to disaply a Polymer Paper-Dialog so I wrote an own element that looks like this:
<polymer-element name="my-dialog" constructor="MyDialog" extends="paper-dialog" noscript>
<template>
<span>I'm a dialog!</span>
</template>
</polymer-element>
Now I tried to display the dialog with this JS code:
var dialog = new MyDialog();
dialog.toggle();
But the dialog does not show up. Any ideas why?
When you are creating a new Dialog in your javascript function, you aren't adding it to the DOM anywhere. So, when you call toggle on it, it tries to show/hide a dialog that hasn't been added to the page.
If you want this to work, you should be adding the markup for the dialog to your html, getting a reference to that element in javascript, and then calling toggle.
Something else you could consider doing is looking at the Core-Overlay polymer element. It handles a lot of the dialog functions for you, and even allows you to shade everything that isn't in the dialog itself.
This time I'm struggling with my custom widget for Orchard.
It's a simple content part with two fields:
- Background Color
- Size
I want to be able to add HTML content to this widget; so I added the Body Part. This part must be displayed within my widget. The result should be something like this:
<div class="size-small bg-color-red"> BODY PART HTML CONTENT </div>
But unfortunately, the Body Part is always displayed before or after my widget.
<Placement>
<Place Parts_ContentTile="Content"/>
<Place Parts_ContentTile_Edit="Content:7.5"/>
</Placement>
Not so nice 'solution':
A way to resolve this is to remove the body part and replace it with a simple text field. This text field is rendered at the desired position. But then the TinyMCE Editor is not available.
Update after comment from Ivan:
I tried to change both (Content Type and Content Part (separate)) but unfortunately, both times, the TextField content is displayed after the widget. Should that be fixed in the Placement.info?
Another option is to add a String field to my Widget Model. But then it is not possible to show the TinyMCE editor. Am I right?
So I've got the feeling that my expectations about widgets, content parts and placements are incorrect. Hopefully somebody here can point me in the right direction.
When using TextField, you can use TinyMCE by specifying HTML flavor in the settings of the field.
To do that you can go to Content → (Content Types or Content Parts depending on which you are trying to change) → Select your ContentType or ContentPart → Expand the definition of the TextField you're using → Select HTML from the drop down menu next to Flavor → Click on Save button.
This post on SO from Mark Z was really helpfull to me!
I added a String property to my Model and added a new Database Migration:
public int UpdateFrom3()
{
// Adds a new Content column
SchemaBuilder.AlterTable("ContentTileRecord", table => table.AddColumn("Content", DbType.String));
return 4;
}
After that I added the field to the Editor Part View:
#Script.Require("OrchardTinyMce")
<div class="editor-label">
#Html.LabelFor(model => model.Content)
</div>
<div class="editor-field">
#Html.TextAreaFor(model => model.Content, new { #class = "html tinymce" })
</div>
The Content Property is now displayed as a TextArea. Because of the classes 'html and tinymce' the TinyMCE editor is instantiated. (Don't forget the Script.Require call)
Because of the fact that the Content property contains HTML, it is required to use the #Html.Raw helper to display the value of this property.
#Html.Raw(Model.Content)
I created a script to publish the following html page using Html Service:
<html>
<div id="fixeddiv"></div>
<script>
var div=document.getElementById("fixeddiv");
div.style.position="fixed";
alert(div.style.position);
</script>
</html>
The alert window shows an empty string.
Isn't possible to set a fixed position for a div element?
I just ran into the same thing and the answer appears to be NO. Apparently they're worried fixed divs are a security exposure.
Next thing they'll be wanting to remove the keys from our keyboards too ;-)
I used this to get a 'fixed' effect for a global navbar at the top. It might be of use to you or others.
$(document).ready(function() {
$( window ).scroll(function() {
$( '.fixed' ).css('top', $( this ).scrollTop());
});
});
Note: in GAS the $( window ).scroll() wasn't working for me so I instead created a div block the size of the view port with a scroll bar overflow and used that instead.
I've found another 'solution' for this:
I created 2 divs, fixedHeader and content
<div id="fixedHeader"></div>
<div id="content"></div>
The css code, where we set #fixedHeader to be always on top and for #content we set a padding-top matching the height of #fixedHeader so the elements won't get under #fixedHeader:
#fixedHeader {position:absolute; top:0;}
#content {padding-top:50px; overflow:auto;}
And finally javascript to make #contet match the height of the viewport when document loads:
$(function(){ $("#content").css('height',window.innerHeight); }
Hope it helps
It appears that position:fixed is not allowed due to security concerns: http://code.google.com/p/google-apps-script-issues/issues/detail?id=1840
I am looking to open a dialog from a specific page and load dynamic data into the dialog.
On the main page I have a number of different links that when clicked provides more information on that link. All the data I have for that link is included on the main page. Somehow I would like to assign the dialog so that it is populated when the dialog opens.
I've tried something like this so far:
<?php foreach($offers as $offer) : ?>
<?php echo $offer->{'offer_name'}; ?>
<?php endforeach; ?>
Then I have an event catcher to catch the link click and then load the "data-desc" meta into the dialog but this doesn't work.
$('.offer').live('click', function(){
var data = $(this).attr('data-desc');
$("#data-desc").html(data);
$("#dialog-offer").dialog("open");
return false;
});
<div data-role="content" id="dialog-offer">
<p class="data-desc"></p>
</div>
I have been looking for an example on how to do this in jQM. This is such a basic necessity for jQM in general that I am surprised that I cannot find any examples. Could someone point me in the right direction. Thanks for the help.
You have a number of errors in your code:
You have given the id="dialog-offer" to a <div> with data-role="content". You should wrap that div in another div with data-role=page
You don't necessarily need to use $("#dialog-offer").dialog("open");. Just set <a href='#dialog-offer'>
You have the wrong selector for the html() call. The class name of the <p> is what you're using with an id-style selector
I have rewritten the code and posted it here: http://jsfiddle.net/PBb3h/
Not exactly like yours, but it does what you want.