I am building a string comparer using diffjs library and want to display the resultant table in a new page using javascript.
Although I can see the table on a new window and also able to passed the css and js script on the new window (as they are there in the inspect element tab of the browser) but till css is not working and I see only plain text.
I have used w.document.getElementsByTagName("head")[0].appendChild(cssNode);to pass css and respective javascripts to pass js and css to new window
I'm not sure,but maybe wrap it into style tags.
w.document.getElementsByTagName("head")[0].appendChild("<style>"+cssNode+"</style>");
Related
I'm developing a new Widget for CKEditor 4 and some of its content is generated dynamically by a tool that parses CKEditor content window.
At first, the widget is simply a <span class="my-widget"></span> but then some content will be added on the fly.
When switching to CKEditor's source mode, then all the content inside span is visible and it gets really messy. Moreover, I don't want to save all that content in database but only the outer <span class="my-widget"></span>
I'm pretty sure this is feasible because this is how CKEditor's MathJax plugin works: when inserting a formula using TeX syntax, the plugin generates a <span class="math-tex">[formula here]</span>. Then, Mathjax runs and typesets the formula, producing the nice-looking LaTeX-like formula in CKEditor. However, when inspecting the code, it only shows the outer <span class="math-tex">[formula here]</span>.
I inspected their source code and I saw they were using an iframe inside the widget.
Can someone explain to me how it works and the way to do it without using an iframe if possible?
Thanks!
I actually achieved the desired result using the downcast property of a CKeditor widget. We can register a custom method that will be used to convert a widget into its text-based representation. Also, it is called both when switching from wysiwyg mode to source mode and when calling editor.getData().
Also, reading the docs, you get that:
The downcast function will be executed in the CKEDITOR.plugins.widget context
meaning that this is pointing to your widget. So, essentially, I replaced all my widget's children by a single text node:
downcast: function(element) {
element.children = [new CKEDITOR.htmlParser.text(CKEDITOR.tools.htmlEncode(this.data.text))];
return element;
}
And it does the trick!
I am attempting to write a small script which will look at page URL and, based on what URL it sees, add a new class to an HTML element. More specifically, on this page:
http://pamaphilly.wpengine.com/volunteer/
I'm going to add a class for the active URL which will add an arrow marker to the appropriate left hand nav marker. I have tried this strategy: jQuery add class based on page URL and, when I used the script on a dummy page, it works fine. But when I try adding it to the Wordpress Template, nothing happens. I've tried adding the script at the bottom of the template file and just (as a test) embedding it in the php template. I'm guessing my failure relates to a Wordpress issues (probably a failure of knowledge on how to do this) but I would appreciate any guidance.
Thanks.
You need to include .slick before you can use it. (before script.js + in the same way you include your script.js file)
Why not do this with CSS and WordPress directly, and skip JavaScript?
You can use WordPress's body_class() function to dynamically add a class to the <body> of your page. Using CSS, you can then target your appropriate .volunteer .sidebar-member li via CSS.
In my web application, I have written a cross-domain ajax call which is fetching an HTML page from a different domain. This newly fetched page is being rendered in a jQuery dialog using the following code $('#previewDialog').html(response).dialog('open');
This renders the response properly in the dialog. However, the response (HTML page) also has some CSS styles in it. These styles (generally BODY, INPUT etc) are getting applied to my main window (parent page) and distorting the complete view of the page.
When the dialog with the HTML page opens, the view of the parent page is completely distorted because of the CSS used in the HTML page (response of AJAX call) which gets applied to all the components. And when I close the Dialog, the parent page gets back into shape.
Is there anyway, by which I can prevent the CSS of the HTML page which is being displayed in dialog, not get applied to my parent page?
Trivial answer: have everything from the page that you pull in be wrapped in a div with a class not used elsewhere. modify the .css for that page so that it only applies to elements within a div of that class.
Edit: If you cannot control the css of the origin page, things become somewhat more complicated. your problem, though, is that you're injecting the HTML (including the css link) directly into your page. Instead, try the following:
Grab the HTML for the other page. Place it into a div off to the side that you're not using for anything else using the html() command.
Go into that div using the jquery DOM commands. Grab the portion of the page inside of the troublesome links, and pull it over to the $('#previewDialog') location. Destroy the contents of the working space div. If there is javascript or css that you need to preserve, have it entered (modified, if necessary - like with div wrappers) elsewhere in the page.
Now, this only works if the pages that you're being fed don't have their css or javascript changing with any frequency.
An alternate version of the same thing - while you have it as a response (a string format) use string manipulation tools to excise the css reference, rather than using DOM commands to pull what you need out of it.
More complicated/difficult version of the same thing (though somewhat more robust): Use string commands to slice out the css references (as with the alternate version) and then make another call using that css reference to acquire the .css file. Use string commands on the .css file to add in the div-wrapper limits as initially described, then insert it elsewhere on the page as an internal style sheet.
I was trying to write a global JavaScriptfunction which overrides any HTML object (img, iframe, links and so on) before it being loaded by the page. The purpose of the overiding action was to to change the SRC and HREF of these objects using the DOM to any other link.
Unfortunately I didn't find any solution to that without firstly loading the object and only then changing it by the onload event.
My second option was to change the SRC and HREF by matching these attributes with a regular expression and replacing the resultant values. I prefer not to do so because it's slow and consumes a lot of time.
I would be glad if someone can share with his/her experience and help me solve this out.
JavaScript only works within the DOM.
You could however, load the page via AJAX, get the content and do any string manipulation on it.
If you are trying to modify items that exist in the static HTML of the page, you cannot modify them with javascript until they are successfully loaded by the browser. There is no way to modify them before that. They may or may not be visible to the viewer before you have a chance to modify them.
To solve this issue, there are a couple of options.
Put CSS style rules in the page that causes all items that you want to modify to initially be hidden and then your javascript can modify them and then show them so they will not be seen before your modification.
Don't put the items that you want to modify in the static part of your HTML page. You can either create them programmatically with javascript and insert them into the page or you can load them via ajax, modify them after loading them via ajax and then insert them into the page.
For both of these scenarios, you will have to devise a fallback plan if javascript is not enabled.
Im using DOM window ( http://swip.codylindley.com/DOMWindowDemo.html ) to create alerts. However the content that goes in the windows is under the id inline content.
However the js file doesnt do anything with this id and the content inside isn't showing up.
Is there a css file im missing because the window appears but with nothing in it?
p.s. I'm using example one
Unless you absolutely need to use this DOM Window plugin, I'd recommend just using simple javascript or jquery commands to achieve this rather simple task.
But anyways, since you're using example one, you need to make sure that the href on the a tag that you use for your Open DOMWindow function is pointing to the div that houses the content.