I'm having an issue with the following code:
i'm initializing an tinyMCE editor in Wordpress:
wp_editor("<div>HTML content</div>", "id-of-editor", $settings);
This generates an tinyMCE editor within an iframe. Inside that iframe i have a dropppable jquery ui div.
I want to drop content from outside the iframe, into the iframe.
So far i have made this:
$( "#drag" ).draggable({
helper: "clone",
revert:"valid",iframeFix:true
});
$("#editor-iframe").contents().find(".droppable-div").droppable({
accept: "#drag",
});
Everything works, except for one thing. There is a 150px offset between the cursor position, and the real drag position.
Because of this, the drag event only is detected when i put the draggable item far away from the droppable zone.
Any help ?
Thanks in advance. Sorry for my bad english! It's not my native language.
Image Description of the problem:
http://i.stack.imgur.com/4hGfW.jpg
Related
So I have been searching for a good plugin but was unable to find any - On the homepage of the WP website that I am working on, I want to hide half the page and want to add a button and in middle of the page at the end of the first half that would say "Show More" - When the visitor clicks that button, the rest of the page should show. The button would then go to the end of the page saying "Show Less". The page is static and is just some text and images, nothing complex.
You can do this putting a html block and writing:
<!--nextpage-->
you can read more about this on:
https://codex.wordpress.org/Styling_Page-Links
and to get other solutions you can try:
https://es.wordpress.org/plugins/automatically-paginate-posts/
https://es.wordpress.org/plugins/sgr-nextpage-titles/
https://es.wordpress.org/plugins/page-links-single-page-option/
I hope this will help you to get what you want.
You must create a div with css display none. And then in your html code put an element with a jquery behaviour to display the previously div created. It will be something like:
$(document).ready(function(){
$('#show_content_button').click(function(){
$(this).hide();
$('#content_hide_on_home').show();
});
$('#hide_content_button').click(function(){
$('#show_content_button').show();
$('#content_hide_on_home').hide();
});
});
#content_hide_on_home { display:none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<p>Text on home</p>
Show content
<div id="content_hide_on_home">
Your extra content on home
Hide content
</div>
I hope this is what you're searching.
I'm using the extjs library. I've got a blank panel and I want to load another one of my ext projects into it with an iframe. Here is my function (called from a button), "thepanel" is my blank panel.
function(button){
var div = document.getElementById('thepanel');
div.innerHTML = "<iframe src=\"../../../project2/?&type=grades&gradeitem1=40691&\"></iframe>";
}
I can see the GET request in firebug's console when I run the function and all my second project code/data all shows up in an iframe when I look a the HTML in firebug but nothing new shows up in the browser. Any ideas of what could be keeping my iframe's contents from showing
I am using MVC architecture, here is the code that declares my panel:
items:[{
xtype:'panel',
itemId:'two',
id:'thepanel',
region:'center',
}]
UPDATE: I've tried moving the iframe to the html config option of the panel instead of adding it through jquery with a button click. Again, I can see the code from the url in the iframe show up in firebug but nothing shows up in my application. Here is the code declaring my panel:
xtype:'panel',
itemId:'two',
id:'thepanel',
region:'center',
html:'<iframe src=\"../../../extjproh2/?&type=grades&gradeitem1=40691\"></iframe>',
height:400,
width:400,
Ended up using this plugin from the sencha forums:
http://www.sencha.com/forum/showthread.php?110311-iframePanel&p=943573#post943573
Here's my page: http://ilijaveselica.com/Gallery/GetCroatiaFavPhotos
I'd like to implement this page into another website. I tried with iframe but lightbox (fancybox) opens only within iframe, not whole page. Any idea how can I solve this without much pain?
Here's how it looks: http://www.croatia-photography.com/
The only way I can imagine of doing that is including the gallery elements within the fancybox script itself.
So, in your page http://ilijaveselica.com/Gallery/GetCroatiaFavPhotos, instead of having this :
$(".fancybox-thumb").fancybox({
// API options here
});
...and all your hidden html anchors for each image of the gallery, have something like this :
$('.gallery').click(function(e){
e.preventDefault();
parent.$.fancybox([
{href:'images/01.jpg', title: '01'},
{href:'images/02.jpg', title: '02'},
{href:'images/03.jpg', title: '03'}
],{
// API options here
}); // fancybox
}); // click
Notice that we are providing the href and title within the brackets. Also notice that we used parent.$.fancybox to indicate that fancybox will open in the parent page and outside the iframe.
Then the only html you would need to open the gallery outside the iframe is :
<a class="gallery" href="javascript:;"><img src="{thumbnail}" alt="" /></a>
For further reference and DEMO (see update), check this https://stackoverflow.com/a/8855410/1055987
got the following problem as stated in topic:
How can I put the like button inside an info-window which content is loadad via ajax?
As I guess when loading the script in "main" page with map, doesn't trigger it because the content inside the info-window is not as DOM element?
thx in advance!
I have a vertical menu inside a jScrollPane in a ASP.NET page. When the user clicks a menu choice it displays content in another panel relating to the selection. How can I make sure that the selected menu choice is in view when the page refreshes.
I'm looking for the same solution myself. You may have some success with my temporary solution using the scrollToElement api. Providing you can locate the specific menu item using a jquery selector you can have jScroll automatically jump to it in the scroll pane. eg
$(window).load(function()
{var api=$('#yourMenu').data('jsp');
api.scrollToElement($('.selectedOption'));
});
This will require the latest version of jscrollpane (http://jscrollpane.kelvinluck.com)
I wanted the same solution, and found this, which wasn't much help.
I eventually got it to work.
The position of the scrollbar is saved to localstorage, then when the page loads again, either by refresh or back from another page, if localstorage has a value greater than 0 which represents the top of the scrollbar (default, unscrolled position), it scrolls to that position.
var element = $(".scroll-pane").jScrollPane({showArrows:!0});
if(void 0 != element) {
var api = element.data("jsp");
$(function() {
0 < parseInt(localStorage.getItem("ScrollPosition")) && api.scrollToY(parseInt(localStorage.getItem("ScrollPosition")));
$(".scroll-pane").bind("jsp-scroll-y", function(b, a) {
localStorage.setItem("ScrollPosition", a)
}).jScrollPane()
})
};