I have spent some time creating this little Js snippet to create a char count. This is nested inside a textarea. (JsFiddle). My issue is that I have no access to CSS, HTML, or Js/Jq root files stored on the server. I am however allowed to insert my own Js through a seperate page that will excecute on the target page. So I figured what the hey, I'll give it a go.
First I generated the character limit in Js tested and all worked fine, but then I tried to target the textarea with Js to style it. As well as dynamically create a div for the char count to be displayed and style that. BAM no result. After digging around in the debugger I noticed that there are two elements that might be causing the problem but I'm not sure.
<label for="desinp">
Description
</label>
<textarea style="width: 417px; height: 237px;" class="required" id="desinp" name="desinp" maxlength="2500">
</textarea>
I noticed the for="desinp and the id="desinp" were identical. Would this cause conflict in the Js, if I don't define the attribute and target the attribute I want to target?
I would test it myself by pulling the label out, but I don't have access to the root HTML.
Any help here would be greatly appreciated. Many Thanks in advance...
Related
I am using highlight.js for syntax highlighting in a webpage.
When I change the content by setting the relevant innerHTML using JavaScript, the content output on the page updates as expected. However the changed content is not highlighted in the browser.
What is the correct way to deal with this situation, generally or with highlight.js using only JavaScript, HTML and CSS?
I found a solution thanks to #Afsar's insightful comment.
The function initHighlighting from highlight.js:
initHighlighting()
Applies highlighting to all <pre><code>...</code></pre> blocks on a page.
... contains an internal check to see whether it has already been run. Since I was attempting to run it more than once, highlighting was not working correctly.
So one possible solution to updating highlighting after updating content via JavaScript with no page reload is:
var element = document.querySelector(".class_that_contains_code_blocks");
var blocks = element.querySelectorAll('pre code');
blocks.forEach(hljs.highlightBlock);
I have a problem. I added CKeditor to my website.
Now i have a problem. If i add lines:
<script>
CKEDITOR.replace( 'tresc' );
</script>
In head section on my main page everything works, but if i go to contact or panel page unfortunetly editor doesn't work(name of the textarea is the same). If i add this lines at the end of body section in contant or panel works, but in the main page only one textarea working with editor, rest doesn't. Writing website on includes(my index is not changing and everything in content div is including from other files). Can some1 help me?
Please see: https://docs.ckeditor.com/#!/guide/dev_installation-section-adding-ckeditor-to-your-page
The replace method has to be used below textarea tag.
Your textarea tags need to have unique id and/or name attributes. So that each CKEditor instance knows to which textarea it is assigned. Unique element id's are also a requirement in HTML.
If your textarea tags can't have different names (they can't have same id's), please drop the names and assign fake class to each e.g. 'myeditor' and use replaceAll method: CKEDITOR.replaceAll('myeditor');.
I solve my problem.
I've added class and use another <script></script>. Now everything is working. Thanks j.swiderski for helping me. Best regards.
I am using a python library to convert HTML page into PDF.
It does it correctly, except it only handles inline styling. It does not reflect the styling applied to DOM elements using external style sheets.
So, as a solution I am thinking of adding those CSS styling from all the external CSS stylesheets into the head tag of the html file and then send it to get converted into pdf.
But, I am not sure how? Can anyone give me any ideas or atleast suggestion on how to go around fixing that? Or, if they know a better solution.
Much appreciate
Is the python running outside or client-side? You can examine the solution here # http://www.xportability.com/XEPOnline/FOTestSuite.html. While this does a lot more, you can reach through that page to the included Javascript. Look for flattenstyle.js for inspiration.
Because our handling is different, we actually copy a selected div element to another hidden div and "flatten" the style by extracting styles we want. What you could do is run such a javascript on page load and save out the div and not destroy it, then you have most all the print styling in the HTML.
I am trying to do some stuff with javascript on a div with the class "contentclass" in wordpress.
i need to use the document.getElementById to get the div (i cant use getElementByClassName for other reasons).
As such, i need to set an ID for that div, but i cant for the life of me figure out what file the div is generated from.
If someone could please let me know which file contains the relevant code, i would be hugely grateful.
Here is a screen of the div i am talking about (the one selected in blue):
Thanks
Cheers
Corey
PS:
I am using a modified version of the virtue theme at the moment.
I have just downloaded the Virtue theme and the file you are looking for is in the theme's root directory and is called base.php.
it contains the line you require: <div class="wrap contentclass" role="document">
Add the ID you require and you shouldn't need any JS...
NOTE: Any "customisation" should be done using a Child Theme! - You should do this which would mean you duplicate the base.php, make your customisations and then any future upgrades to your theme will keep your changes.
That code is likely generated from one of the theme files. Hard to say exactly which one from the information offered.
Any good reason why you can't lookup by class name? This code would likely provide you with the element you're looking for:
var contentclass = document.getElementById('wrapper').getElementsByClassName('contentclass')[0];
At the moment I'm working on a mobile website that stores pages in a local database. At the bottom are some basic buttons to navigate to other pages and when you press them I wanted to use jquery's .html function to replace the body content with other html strings from the database. The problem I found is when we go to our contact form page the user can't really use the form fields. They show up, but they're not clickable. I've also noticed that you can't execute javascript functions that are loaded in trough the .html function.
Hopefully you can help me with this problem or suggest a workaround. Thanks
Some jQuery functions strip out script and style tags (e.g. .replace()). That isn't a bug but documented somewhere – unfortunately I can't find that piece of documentation right now.
But that should be no problem in the case of form fields. They should get inserted without any problems.
Here is an example that illustrates your problem.
Explanation:
jQuery html seems to not process some tags, although it does. The problem is when trying to execute jQuery UI related functions on an element not within the DOM
the exemple above shows the difference between calling button jqueryUI function after and before appending the element to the DOM
a generic workaround to solve this problem is:
var div = $('<div></div>').hide().appendTo('body');
then do whatever you want with the div