I have a typical link for which I would like to display the output in a popup window. To do that I'm using featherlight.
I would like to display some kind of a loading indicator until I get data from ajax call.
This is what I have tried:
function wait() {
document.querySelector('.featherlight-content').textContent='pls wait...';
}
<a href='../servlet/NavWarn?action=send' data-featherlight="ajax" data-featherlight-before-content="wait();">
If I do that, it only prints "pls wait..." and the ajax data doesn't appear ever.
If I remove the "data-featherlight-before-content" from the A tag, ajax data appears correctly, but until it does I get an empty window (which is what I would like to avoid).
I've also tried doing it at featherlight's css (something like content:"pls wait...") without luck.
Any ideas?
Thank you
Short answer: replace -content by -inner.
Details:
The featherlight-content div contains the close box, any other static elements (like the navigation in case of the gallery), and the actual content called featherlight-inner. If you obliterate it, you destroy the -inner div and that's the one that displays your content!
I'll improve the doc on this
Related
I'm trying to put TinyMCE on my website. I figured out how to get it to show up, but I'm lost on how to process the content. In their example, they just have a link that references the top of the page and clicking on it somehow magically causes their dump.php script to execute. I don't understand what's going on here. Here is the link:
http://www.tinymce.com/tryit/basic.php
The "Submit" button at the bottom is really a link in a span element with href="#". The form action is dump.php. I want to know how they configured this to run without an actual submit button. Any help in understanding this is greatly appreciated!
To Get Content From Tinymce You Can Use GetContent Method of Currently ActiveEditor Instance
tinyMCE.activeEditor.getContent();
method is used to getting Content .. to Set The Content
tinyMCE.activeEditor.setContent("I Want Text To Be in Tinymce");
to find a perticular element in tinymce get body and find element
var body = tinyMCE.activeEditor.getBody();
$(body).find("#elem_id")
to get a full html
tinyMCE.activeEditor.getDoc().documentElement.innerHTML
hope that helps ..
Since I use PHP, I found this which is also useful:
http://www.tinymce.com/wiki.php/TinyMCE3x:How-to_implement_TinyMCE_in_PHP
I have a form within a tab. It is second tab so it doesn't render until you open it.
I have tried to submit data to the form with Ext.getCmp('DetailsForm').getForm().setValues(selections[0]); but it says that it is not a function. Probably because it is not rendered yet. What I have to do?
Set the deferredRender config property of your Ext.tab.Panel to deferredRender: false
That will force the rendering of all tabs instead of just active ones. Now the form will be there. As mentioned before I recommend you also to use myTabPanelRef.down('from').getForm().setValues(selections[0]); to access the form.
subscribe to the second tabs show event OR painted event
then look for the form preferably by using .down() method as this wont look with in the entire DOM.
set the values
Use render event of form panel.
Your code will be something like this -
Ext.getCmp('DetailsForm').on('render', function(){
this.getForm().load(selections[0]);
});
I used code from
http://developers.facebook.com/docs/reference/plugins/like/
to add a like button on the site. I have the script tags right after the body as described and the div further down by my header, but when I load the page, the like button is not there. but if I hit refresh its there. my guess is that the all.js is taking too long to load and its missed somehow on the 1st load. on the 2nd refresh, I assume the js is cached and things work as expected.
any idea how to wait on this? I have tried putting the script in the head, at the bottom.
When you say "I have the script tags right after the body", do you mean outside of the body? If so, try putting it in side the body, but after all other element inside of the body.
<body> ...other code ...other code ...other code
<script>Put your script here</script>
</body>
I'm using the Facebook Like/Send buttons along with dynamically generated HTML (loaded via AJAX requests). I've found that even though the Send button works fine when the element exists on page load, dynamically created Send buttons aren't working correctly. Clicking the button activates it and the button greys out, but the popup doesn't appear.
Here is a demonstration of what is happening: http://jsfiddle.net/Daniel15/VxpSj/
Any suggestions?
Thanks!
Yes, I can confirm the problem from your fiddle.
function addLikeButton()
{
// […]
FB.XFBML.parse(newEl);
document.getElementById('container').appendChild(newEl);
}
For some reason, this seems to be “the wrong way around”. Reverse the order of these two lines – put the new element into the DOM first and let FB.XFBML.parse parse it afterwards, then (from my test with your fiddle) it seems to work in the desired way.
On my page, overlays are loaded by inserting their content with jQuery and then fading in.
What I want to do is this:
When you click to open an overlay, an URI is loaded (e.g. news/12, where news is the category and 12 is the id of the item to load).
Except, instead of loading it in body, it should be loaded in the overlay.
In other words, I want to achieve something like on facebook, where you open an overlay, the url changes, but the main page stays the same.
I'm guessing you need ajax for this, but I have no idea whatsoever how to do it.
Thanks
It sounds like you want to use the new history.pushState(...) and history.popState(...) browser API.
This SO post might help you out: Change the URL in the browser without loading the new page using JavaScript
Use Boxy. See http://onehackoranother.com/projects/jquery/boxy/tests.html#
AJAX example:
<a href='#' onclick='Boxy.load("test-1.html");'>Test 1</a>
See this question: Ajax - How to change URL by content
I solved it thanks to Lethargy's answer.
.pushState() is exactly what I need to have the URL reflect the contents of the overlay that is dynamically created with jQuery.
With some tweaking around and debugging I managed to get it all working.
Now my overlays (or popups, dialogs, whatever) are search engine ready, and the url is copy-pastable for users :)