I would like to make a user interface inside a leaflet popup (large amont of datas from mysql, buttons, little tchat system.etc..)
Should I bind all this html code + datas with the leaflet "bindpopup" function or should I better include another webpage into the popup with iframe ? or other idea ?
How does leaflet will display a very large popup on a mobile device?
If this is what you really want to do, you'd better bind all the content to a pop-up.
Why? Because using an iframe implies restrictions if the frame is loaded from cross-domain. Also, iframe and main page do not share any CSS styles or even JavaScript objects, they both have their own "scopes" of execution.
So you'll have to "double" load css/js files for examples (even if browsers are smart, I mean you'll have to handle two or more html files), and perhaps you codes like var L = window.top.L from your iframe.
If you have a really nasty DOM as pop-up content, what you could do it to create a template in an .html file, then load it through ajax and append it to your pop-up content. For example :
<div class="popup-container">
<div class="inner">
<input type="text">
...
</div>
</div>
Like this, this will create a logic separation between your map, and the content of your pop-up.
Related
On my webpage, I've got several tabs and, in one of them, I want to display an iframe containing a Google Doc.
When the iframe is displayed, the google doc is loaded and there is no problem.
But by default, this tab is hidden (so, the iframe inside too)
Something like
<div id="tab-1">...</div>
<div id="tab-2" hidden>...</div>
<div id="tab-3" hidden><iframe src="https://docs.google.com/document/d/......../edit?usp=sharing&embed=true"></iframe></div>
with jquery to handle actions
And, when the iframe is hidden, it seems like it can't load until it's not hidden anymore. The problem is I endlessly get popup saying
This error has been reported to Google and will be examined as soon as possible. To continue, please refresh the page.
In a page without tab, if the iframe has the "hidden" attribute, the bug occurs too
I could get around the problem by "hiding" the iframe with a "heigth=0" but when it's hidden in a tab, the problem comes back
Have you ever met this problem and find a way to solve it ? Do I have to "dynamically load" the google doc iframe when it becomes visible ? (And then, how to ?)
Thanks
I don't mind if the iframe is loaded later so I decided to load the <iframe> with jquery, when the tab is opened, by storing the src into the attributes.
There could be problems though, if the tab is closed while the iframe is not fully loaded.
That's why I prevent this by stop loading if the tab is changed, (and don't if it's already fully loaded.)
html
<iframe data-src="https://docs.google.com/document/d/......"
class="google-doc"></iframe>
jquery
//Stops iframe loading
$(".tab-to-close iframe.google-doc").not('.isloaded').prop('src','')
//Change the tabs
$(".tab-to-close").hide();
$(".tab-to-open").show();
var iframetoload = $(".tab-to-open iframe.google-doc");
//Load iframes on the new tab
iframetoload.prop('src',iframetoload.data('src'))
//If it's loaded in time, save it so it's not destroyed on tab changing
iframtetoload.on('load', function(){
$(this).addClass('isloaded');
});
I'd like to open TinyMCE in a modal dialog from inside the custom block I am building. I know how to implement a modal dialog but couldn't figure out a way to integrate TinyMCE inside the dialog.
What I am trying to achieve is when a text is clicked in the block add/edit popup, it should open up a dialog with TinyMCE to edit that clicked text. Anyone done this before?
This is what I am trying to achieve in add/edit forms:
$this->addHeaderItem(Loader::helper('html')->javascript('tiny_mce/tiny_mce.js'));
Loader::element('editor_init');
Loader::element('editor_config');
Loader::element('editor_controls');
<textarea name="field-name" class="text-area-value ccm-input-textarea">Some text here or empty....</textarea>
$bt = BlockType::getByHandle('myblock');
<a class="dialog-launch ccm-block-type-inner"
dialog-on-close="ccm_blockWindowAfterClose()" dialog-append-buttons="true"
dialog-modal="false" dialog-width="500"
dialog-height="500" dialog-title="<?php echo t('Add/Edit Text)?>"
href="<?php echo $th->getBlockTypeToolsURL($bt); ?>/tinymce_dialog.php?text=<?php echo $text-area-value; ?>">
Edit the above text in TinyMCE
</a>
In tinymce_dialog.php in tools folder:
<textarea name="textarea-name"
class="ccm-input-textarea advancedEditor ccm-advanced-editor">
<?php echo $_GET['text']; ?>
</textarea>
<div class="ccm-buttons dialog-buttons">
<a href="javascript:void(0)" onClick="ccm_blockWindowClose();"
class="ccm-button-left btn">Cancel</a>
Ok
</div>
But I am unable to pass the value of textarea into the modal dialog popup. I tried using href in the anchor tag to pass the value of textarea to a script that resides in the tools folder but that does not seem to work either.
Edit: I've also added buttons in tinymce_dialog.php (See the code above). Not sure if it's possible to pass those buttons through <a dialog-on-close="ccm_blockWindowAfterClose()" dialog-append-buttons="true".....> in the form.
Should work the same as anywhere else. First, include this line of code once in your dialog (you only need it once, regardless of how many TinyMCE's you have):
<?php Loader::element('editor_config'); ?>
Then, for each TinyMCE you want, use this:
<?php Loader::element('editor_controls'); ?>
<textarea name="your-field-name" class="ccm-advanced-editor"></textarea>
There's two ways to go about this:
As you describe in your question edits, where you load a tools file. There are a few points here:
URLs aren't great for passing text data, especially the kind of text that'd be edited in tinymce (long and formatted). With that being said, it should work. I don't see why the $_GET wouldnt' work. Make sure that the URL contains the text in the first place (you can see by looking at your developer console).
Better is to pass an ID (tinymce_dialog?id=[ID]). This is assuming that the text is saved in the DB, but it looks like you might be providing them an interface to basically "wysiwyg edit in a modal text that they're not-wyswiwyg editing already". I'm not sure if you've thought through how this will work, though. By default, they'll have to deal with a bunch of HTML tags ?
The alternative is to create the dialog out of an DOM element. Create a div hidden in the form, with CSS display: none;, save the text into it (if already initialized, tinymce has a .update() or something), and then show the hidden div (with Example 3 from http://www.concrete5.org/documentation/how-tos/developers/javascript-jquery-and-concrete5/). When they click (SAVE), you can then (presumably) copy the data out of tinymce and put it back where it needs to go.
Note that in many cases, the tinymce initialize code only runs on page load. I think that's what Loader::element('editor_init') does. And it works by detecting the appropriate textareas (based on class name). So if the page with the editor_init is loaded before the textarea is loaded (such as how it looks now), you'll have to reinit tinymce. That's a vote for #2. In general, I suggest you go that route.
I'm creating a new application using ASP.NET MVC.
I'd like to use a series of jQuery tabs at the top of my window to allow the user to access the various modules of the application.
I want to put the tabs in my shared layout view so that I don't replicate them throughout the app.
I'm running into two conflicting issues that I can't seem to find a coherent solution for:
When I click on a tab, I'd like the whole window to navigate to that page, rather than just loading the content into a div. I'm doing this to allow for bookmarking of a particular module. (I'd like the address bar to contain the URL of the current content, rather than just a "main page" URL.)
Currently when I call $("#tabs").tabs(); jQuery creates a div for each of my tabs and attempts to load the content of my href into the div. That ends up creating a copy of the page I'm on nested within itself.
Here are my tab definitions (from the default layout page):
<section class="tabs">
<div id="tabs">
<ul>
<li>Instructions</li>
<li>Questions</li>
<li>Finish</li>
<li>FAQ</li>
</ul>
</div>
</section>
And here's the script I'm using to set them up:
function SetupTabs(sel) {
$("#tabs").tabs();
$("#tabs").tabs("select", sel); // Selects the tab
$('#tabs').tabs({
select: function (event, ui) {
location.href = ui.tab.rel;
}
});
}
This actually gets my page navigating correctly, but nests the pages within themselves (issue #2 above). If I re-arrange it so that I have a main page, and load the content from the tabs using partial views, then I don't have a usable URL in the address bar (issue #1 above).
Any ideas would be greatly appreciated. I know this isn't the design paradigm for the jQuery tabs, but we're using them elsewhere in the app and we use a lot of jQuery UI-themed elements, so I'd like to stick with them for this element, too, if I can make it work.
Thanks
Since you want each tab click to act as navigation, you may want to consider not using the JQueryUI Tabs, instead use a <ul> styled to look like tabs with the click events set to navigate to the pages you'd like.
I'm using the Google Maps API v2 and I'd like to be able to print the map the same way as Google does on its Maps page.
You can click the little printer icon and it creates a new popup window with the same map but all the unprintable stuff (like the controls) is taken out.
I know that they use #media print to achieve that effect when you hit "Print preview" or "Print" in the navigator. However, the popup window isn't in print mode.
Is there any way of doing the magic trick they're doing, like setting the current media type to "print"? Or or they cheating and setting a custom CSS style cheat?
I've got a Silverlight plugin and a Google Map on the same page and I want to be able to create a popup window containing just the map ready for printing (like Google is doing).
Thanks to http://abcoder.com/google/google-map-api/print-button-for-google-map-api/ I know how to get the HTML content but I can only get the content with all the controls etc on it (which I don't want).
Any help will be appreciated.
Google maps put a class gmnoprint on all elements that they do not want to print .. so setting this to display:none in your print css file or popup window will hide them ..
.gmnoprint{
display:none;
}
Of'course this will hide whatever google deems as not-for-printing.. If you want to select other items you will have to somehow parse their html code :(
I was having the same problem with a custom map image overlay added via kml. Gaby's heads-up about the gmnoprint class was the key. In my case, the div with the gmnoprint class applied was the direct parent of my img element that was getting disappeared. I basically created a "make overlay printable link":
$("#printable-map").click(function() {
if($(this).text() == "Include overlay when printing") {
$(this).text("Exclude overlay when printing");
$("[src$=blah.png]").parent().removeClass("gmnoprint");
} else {
$(this).text("Include overlay when printing");
$("[src$=blah.png]").parent().addClass("gmnoprint");
}
});
Tested and works in Safari, FF, and Chrome.
Another useful approach for printing google maps is to use the Google Static Maps API. You can generate an static image based on a range of display paramters (location, zoom level, size, markers etc...) and include that image in your print view page.
When you open the yahoo main page at the top there is a search section that contains links like: Web, Images, Video, More
When clicking on the link the chosen section is activated and the text of the search button is being changed. The only part of the page that is updated is the search part at the top and the other parts of the website remain unaffected.
My question is how is this implemented? And more importantly how similar behaviour could be
implemented in .net using VS 2008?
Are the links really links or different elements that only mimic the links behaviour?
Does it need to be ajax, or just everything is preloaded and hidden using some css techniques?
Is the same technique used in the news section on the same page when changing tabs: News, Sport, Entertainment, Video?
Thank you
This is actually done with CSS and Javascript:
<ul id='menu'>
<li><a href="#web_search" class='active'>Web</a></li>
<li>Image</li>
<li>Video</li>
<li>Local</li>
</ul>
<div id='web_search' class='search'></div>
<div id='image_search' class='search' style='display: none;'></div>
<div id='video_search' class='search' style='display: none;'></div>
<div id='local_search' class='search' style='display: none;'></div>
Then Javascript (example uses jQuery, can be done many ways...):
$('a','#menu').click(function() {
$('div.search').hide();
$('a.active', '#menu').removeClass('active');
$($(this).addClass('active').attr('href')).show();
$(this).blur();
return false;
});
And this is an example of it in action. The styling and such would all be CSS.
After doing a quick inspection of the search field using Firebug, it appears that clicking on each of search type links (Web, Images, etc) simply modifies the DOM. This includes adding fields, removing fields, toggling class names, etc. I wouldn't be surprised if hidden fields are also being manipulated.
Behavior like this is accomplished using JavaScript. Specifically (and at a very high-level), there are event handlers attached to the links each of which modify the DOM in their own way.
It can definitely be implemented using Visual Studio 2008 as it's really (and likely) nothing more than CSS, JavaScript, and HTML. .NET really wouldn't come into play until you're ready to take the specified query and begin running it against your data store.
Paolo's answer gives a really good, straight-forward example of how that behavior can be emulated.
Those links have onlclick JavaScript handlers attached to them. When you click on them different tab becomes visible and current tab gets hidden. All tabs are preloaded but only the first one is visible initially.
Take a look at Tabs control from ASP.NET AJAX control toolkit. You can customize tabs so that they look like links.