I've turned a simple text box into one with editing features using the wysihtml5 editor. The project necessitates that the text box inject its html into an iframe. Previous to installing the editor, things were working great. Now, the jQuery for the iframe injection no longer works, since the editor has converted the textarea to an iframe. Any ideas on how I might convert the following jQuery to work with the editor?
(function() {
var frame = $('iframe#preview'),
contents = frame.contents(),
body = contents.find('body'),
styleTag = contents
.find('head')
.append('<style>*{font-family:arial}h2{color:#CC6600}</style>')
.children('style');
$('textarea').focus(function() {
var $this = $(this);
$this.keyup(function() {
body.html( $this.val() );
});
});
})();
I know that something needs to change in the $('textarea').focus call, I just don't know what. I'm new to the javascript/jQuery world and have tried a few possibilities, but so far haven't been able to figure this one out.
Many thanks for any insight.
As i know (probably i know what im talking), you cannot apply css styling to iframes outside of iframe (from parent document). You should TRY to embed styling inside iframe. Its because browser styling works with document, but iframe its another document and must ship with own css styling. Hope this helps
Related
I've looked around and tried a few things I've seen on here to try to fix this issue but I can't seem to find out why. I have five images in the toppic class. I want to be able to hover over an image in the toppic class and change the big image (id = Biggin) in my screen with the image that is being hovered over, and then change back to the default when the mouse leaves the image. Is there anything blatantly wrong? I copied and pasted from a previous working function and I'm not sure as to what I did wrong this time.
$(".toppic").hover(function() {
var imgsrc = this.src;
$("#Biggin").attr("src", imgsrc);
})
$(".toppic").mouseout(function() {
$("#Biggin").attr("src", ".//Images/IMG_3604.JPG");
})
I had similar issues when starting out using jQuery, and there could be a few reasons why your code isn't working as intended. The most common reason mine wasn't working is that the jQuery script element was getting activated before the DOM existed.
Make sure that the jQuery script element in your html file loads after your DOM loads. You can place the jQuery script element at the end of the HTML file so your jQuery would be loaded after the HTML loads.
I hope that helps.
I am trying to use Trademark & Registered/Copyright symbols smaller in a WordPress site, but doing some of the standard methods for CSS were not working, and using what I have below maybe somebody has an idea on how I could expand.
Traditional/Normal way I would have done this:
Awesomesauce <sup>®</sup> would look like Awesomesauce® (the R is smaller than other text).
In the theme I am using, it was not doing that with that tag
I then tried <span style="font-size:6px;"> just see if it would do anything different. No luck.
So, I then approached it from a JavaScript side of things.
I started with my H1 tag
jQuery(function($){
var $el = $(".section_header .post_title");
var t = $el.text();
t = t.replace('®','<sup>®</sup>');
$el.html(t);
});
Since that works, how would I make the same work for body text because I cannot get it to work using the following code
jQuery(function($){
var $el = $(".wpb_text_column .wpb_wrapper p");
var t = $el.text();
t = t.replace('®','<sup>®</sup>');
$el.html(t);
});
jQuery(function($){
var $el = $(".section_header .post_title");
var t = $el.text();
t = t.replace('®','<sup>®</sup>');
$el.html(t);
});
What the HTML section looks like:
It's very normal that WP themes overwrite default browser style.
Try adding this to your custom.css file:
sup {
vertical-align: super;
font-size: smaller;
}
If you don't use custom style or child theme (Why use a Child Theme)
Then, add that code at the very bottom of your theme style css file.
I don't think that your issue is WordPress not recognizing the "sup" element. I support a few WordPress sites and "sup" works just fine whenever I use it. In your case, it appears that you are trying to use javascript (jQuery in particular within your WordPress site. WordPress does not process javascript reliably when found within a page. The documentation that I have read states that it is unsupported to use your own javascript on WordPress pages. However, I have succeeded in using Javascript in some pages within my WordPress site but with rather inconsistent results overall. I recommend that you format your text directly within the WordPress WYSIWYG editor as follows:
AWESOMESAUCE<sup>®</sup>
I'm looking for a solution that will allow me to display a div when I click on a single link (which will change the way css style) with variable content (eg a sub-div with service1, service2, service3 ). This div will be displayed also propose several offers that will only display the div payment when one of these offers will be selected.
It's maybe hard to explain (i'm not english so sorry for really noob level), so maybe with this image you will "understand" a little bit more:
http://image.noelshack.com/fichiers/2015/38/1442422045-fonctionnement.jpg
I confess to being a bit lost with JavaScript for this kind of thing. I know it's probably achievable, but how? :-(
Thank you for your help folks!
If you want to go the way with altering CSS with javascript, assuming you are not creating the variable content on the fly, have the divs css for display set to none.
#divID {
display = none;
}
Then set an event listener on your link to change the display style to block.
document.getElementById("linkID").addEventListener("click", function() {
document.getElementById("divID").style.display = "block";
}
Ok so I created a crude representation of what you asked without much effects. But the fiddle I created completely functions as you intended. If you click buttons on div 1 the content of div 2 gets updated. If you click anything on div2 the information is displayed in div3. Here is the example: Working Example
window.function1 = function(){
var edits = document.getElementById('2');
edits.style.background="aliceblue";
}
//SAMPLE CODE TO EDIT ANY ELEMENT BY REFERRING BY ID. CALL SUCH FUNCTION ONCLICK
Please check the example to understand it fully.
I have integrated CKEditor into my website CMS. The Preview button works but I cannot get it to use stylesheets (CSS). I have edited the preview.html located in:
Website/ckeditor/plugins/preview/
But it doesn't seem to listen to any of the html I wrap around the code that pulls the content from the WYSIWYG editor.
As I understand this bit of code:
<script>
var doc = document;
doc.open();
doc.write( window.opener._cke_htmlToLoad );
doc.close();
delete window.opener._cke_htmlToLoad;
</script>
Pulls in whatever is in the editor, so I should be able to wrap around that html to include elements that will be available for every page? And links to stylesheets?
Anyone ever done this? Is it possible?
The "window.opener._cke_htmlToLoad" seems to be a string (containing a complete html document).
To get the innerHtml of the <body></body>, you can use this regex:
var doc = window.opener._cke_htmlToLoad; // is string
var innerBody = ( doc.replace(/((?:.(?!<\s*body[^>]*>))+.<\s*body[^>]*>)|(<\s*\/\s*body\s*\>.+)/g,'') );
document.getElementById('insertIntoMe').innerHTML = innerBody;
From my testing this seems only to work in Firefox. But Chrome and Internet Explorer directly display the window document without allowing any changes. So maybe somebody else can provide a better solution?
can anyone explain what happens when you use javascript to insert a javascript based widget?
here's my js code:
var para = document.getElementsByTagName("p");
var cg = document.createElement("div");
cg.setAttribute("class", "twt");
cg.innerHTML='<a href="http://twitter.com/share" class="twitter-share-button"
data-count="vertical" data-via="xah_lee">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>';
document.body.insertBefore(cg, para[1]);
it inserts the twitter widget, before the first paragraph. As you can see above, the twitter widget calls for a javascript that shows how many time the page has been tweeted.
doesn't work in Firefox, Chrome, but semi-works in IE8. What should be the expected behavior when this happens? Does the newly inserted js code supposed to execute? If so, how's it differ from if the code is on the page itself?
In order to execute the JS code you insert into a DIV via innerHTML, you need to do something like the following (courtesy of Yuriy Fuksenko at http://www.coderanch.com/t/117983/HTML-JavaScript/Execute-JavaScript-function-present-HTML )
function setAndExecute(divId, innerHTML) {
var div = document.getElementById(divId);
div.innerHTML = innerHTML;
var x = div.getElementsByTagName("script");
for (var i=0;i<x.length;i++) {
eval(x[i].text);
}
}
A slightly more advanced approach is here: http://zeta-puppis.com/2006/03/07/javascript-script-execution-in-innerhtml-the-revenge/ - look for <script> tags, take their content and create a new element into the <head>.
innerHTML does not work to insert script tags (because the linked script, in most browsers, will fail to execute). Really, you should insert the script tag once on the server side and insert only the link at the location of each post (that is, if you are adding this to a blog home page that shows multiple posts, each with their own URLs).
If, for some reason, you decide that you must use one snippet of JavaScript to do it all, at least import the tweet button script in a way that will work, for example, the Google Analytics way or the MediaWiki way (look for the importScriptURI function). (Note that I do not know the specifics of the tweet button, so it might not even work.)