I have HTML, jQuery and CSS report.
In static way if wee see the 'view page source' from browser I can see is
<div id='report' class="test-reports-container"> but If I use FireBug in mozilla firefox it show something different like
<div id='report' class="test-reports-container mCustomScrollbar _mCS_1">
I don't understand how its changed.
The problem is I am creating dynamic contents so I need to remember className for which I append html content, but at run time className get changed so how would I append the html to some divs?
Can you say how its style get changed at runtime?
you can append html to test-reports-container class, even when FireBug shows <div id='report' class="test-reports-container mCustomScrollbar _mCS_1">
in this case class name hasn't changed but 2 new classes added to element
now your div element has 3 classes and that are test-reports-container, mCustomScrollbar & _mCS_1
Related
I am trying to make an editor using contenteditible div(this div will show the rendered content but will also allow user to make changes by typing and other toolbar tools like bold, italic and so on), lets call this editor renditor, I also want to show the innerHTML of contenteditible div in another div for which I am using ace-editor for angular(https://github.com/fxmontigny/ng2-ace-editor) with mode html(lets call it coditor) but the problem I am facing is when I toggle from renditor to coditor(I take innerHTML of renditor div and plug it into coditor div) the renditor changes the look of innerHTML in its own mysterious way which results in overflows in coditor.
I have tried to use a pipe in angular with code provided from this answer (https://stackoverflow.com/a/43794051/4961540) but that even worsen the issue by breaking the html. I also feel renditor div is responsible for this because in past I didn't used separate div like coditor to show the code rather I just toggled in the same div using tags like pre and some other helper functions even then the html looked like it is looking now in coditor. Also it feels like renditor is responsible for it because I have observed when I set innerHTML of renditor to full html page source, it strips out html tags and some other tags so it is indeed making some changes to innerHTML and also how it looks.
<div class="mat-typography textBox editable" style="margin: 16px;"
[hidden]="isSourceVisible"
(input)="mSimpleTask.html=$event.target.innerHTML"contenteditable="true">
</div>
<div class="ace_tooltip" [hidden]="!isSourceVisible" ace-editor
[(text)]="mSimpleTask.html"
[mode]="'html'"
class="textBox ace-editor"
[theme]="'eclipse'"
[readOnly]="false"
[autoUpdateContent]="true"
[durationBeforeCallback]="1000"
(textChanged)="this.mSimpleTask.html=$event;"
style="overflow-wrap: break-word;margin: 16px">
</div>
I am looking to convert/extract innerHTML from renditor in such a way that html looks neat with proper line breaks and no overflows in coditor. Can you throw some light on how I can achieve that or even better if you can provide code with your implementation in the past ?
So my website is built using a company's software called Inksoft which leaves me very little to work in the way of customization. So I have to do many workarounds.
Here is my site's homepage.
The header on top of the page only has two links right now. "Products" and "Design Studio". My goal is to add an "About Us" link and "Buyers Guide" to the header as well.
I cannot add new content to the header using Inksoft's backend. So I coded a workaround to replace the content of existing DIV's within the header to say and link to where I want them to go.
The only issue is, the responsive mobile-nav loses functionality when this is implemented. As seen here on this test page.
The test page has the About Us in the top header, added by the use of this code:
<script>
$("#header-nav-designs").html('<document.write="<li id="header-nav-studio"><font color="#000000">About Us</font></li>');
</script>
So, the simplified question is: how do I implement this code without losing the responsive functionality of the nav bar?
The jQuery .html function will replace the HTML inside the target element. If you want to just append the one value, you likely want to .append to the element.
In addition, you aren't setting the HTML to a valid html string. You probably just want to get rid of the <document.write=" at the beginning of the string. The rest of it looks fine with just a cursory glance.
So:
<script>
$("#header-nav-designs").append('<li id="header-nav-studio"><font color="#000000">About Us</font></li>');
</script>
Edit:
After looking at it a little more, it appears as though the $('#header-nav-designs') that you are selecting is already an <li> which means you need to either select the parent <ul> list or you can use the jquery .after function instead.
<script>
$("#header-nav-designs").after('<li id="header-nav-studio"><font color="#000000">About Us</font></li>');
</script>
And as someone else commented above, you are getting an error on the page. It appears as though you are trying to get an element with the id divID and the appending some html to it, but there is no element with the id divID and so you are getting an error saying that you can't read the property innerHTML of null as the call to document.getElementById is returning null (element not found).
Element id header-nav-designs witch your code is referring have CSS style on line 170:
#header-nav-designs {display:none;}
The element will be hidden, and the page will be displayed as if the element is not there. With display:none;
If I understand you correctly your code selector points to wrong element id. It should point $(".header-nav > ul"). Document.write is not needed inside jQuery you need to give only an valid html string as argument.
jQuery html function erase html that is all ready inside element and replace it with html string given as argument. You have to use append if you want to add more html but not remove what is allready in element.
$(".header-nav > ul").append('<li><font color="#000000">About Us</font></li>');
$(".header-nav > ul").append('<li><font color="#000000">Buyers Guide</font></li>');
I'm trying to modify (by CSS) the dark gray "Contact Us" button that's at the bottom right side of the following site: coloraddicted.com.
This is a button created by an external app, so the code is inaccessible. I only have the following (external) page to refer to for the possibility of finding the right id: https://icf.improvely.com/icf-button.js?v=1479350309&shop=coloraddicted-com.myshopify.com
How can I find the "id" of the specific element in order to apply the
"overriding" CSS to it?
BTW, I have already tried several versions of the id's I see on the above mentioned external page but still haven't found the right one.
I can't remember all of them, but some I have already tried are:
#icf_button
#icf.click_button
#icf_contact_form button {
#icf_contact_form add_button {
Style Contact button by css has no effect, because right after user hover, js code excuted & override on.
You can put js code at the end of the body, to re-override on the library code (not the good way, but have to), example
let contactButton = document.querySelector('#shop-colorful-products-printed-on-demand-just-for-you > div:nth-child(38)');
contactButton.style.backgroundColor = 'white';
Demo image https://tinker.press/images/change-style-by-js-to-override-2017-01-17_090946.png
If you can't modify the button.js script you linked to, I don't think you can target this (reliably) in CSS. They style everything with that button using inline styles and just append it to body.
You could potentially use :nth-of-type (like https://icf.improvely.com/icf-button.js?v=1479350309&shop=coloraddicted-com.myshopify.com) but that would be super unreliable as I'm assuming you have a bunch of scripts and stuff on the site that dynamically append to the page, creating a variable number of divs as direct descendants of body. FWIW, nth-of-type(13) worked for me.
The element doesn't have an id, so you can't select it that way. But the site appears to be using jQuery, so you could try using :contains() to target the element based on its contents:
$( "div:contains('Contact Us')" ).css( "font-size", "2em" );
But that would target any div containing the text "Contact Us". You can use :filter to select divs that contain only the text "Contact Us":
$("div").filter(function() {
return $.trim($(this).text()) === "Contact Us";
}).css("font-size", "2em");
You could use jQuery to either apply CSS directly, or to give the element an id. This solution is kind of kludgy, but might work in a pinch.
I've got this HTML-Content. I knew that this is not correct HTML but I can't change it because it's user generated by a WYSIWG-Editor and this mistake was done hundered of times by users:
<div>
<H2 style="COLOR: #0000ff"> <DIV align=left>TEXT<br /></H2></STRONG>
</DIV>
</div><br />
Problem is that the Div AFTER the H2 Tag is closed AFTER the closing Tag from the H2.
What happens is that the H2 autocloses the enclosed DIV and the original closes the Div above.
As I can't change the Sourcecode in those masses of Content-Files, is there a way to prevent this behaviour with CSS???
CSS won't fix this. If this is generated by the editor specifically then you need a new editor. If you're setting content in JavaScript based on the content of an editable region you might be in luck. Browsers auto-close tags as the content is assigned. Say you have JavaScript to handle that content, and you're assigning that HTML to an element. When it's assigned to the element it will add the closing tag, and then when you go to programmatically close the tag at the correct time you'll get the duplicate close. I found when I do this I need to store the HTML into a string var temporarily, and then assign the HTML when it's all complete. If you need a quick lightweight html5 editor I have one at http://www.makrit.net/5edit
I'm trying to set some content in between some div tags on a JSP page using javascript.
currently the div tag on the JSP page looks like this:
<div id="successAndErrorMessages"></div>
I want to fill the content in those div tags using some javascript method so that it will look like so:
<div id="successAndErrorMessages"><div class="portlet-msg-error">This is an error message</div></div>
I know you can go like this:
document.getElementById("successAndErrorMessages").value="someContent";
But that just changes the value of the 'value' attribute. It doesn't fill in content between those div tags. Anyone out there that can point me in the right direction?
Try the following:
document.getElementById("successAndErrorMessages").innerHTML="someContent";
msdn link for detail : innerHTML Property
See Creating and modifying HTML at what used to be called the Web Standards Curriculum.
Use the createElement, createTextNode and appendChild methods.
If the number of your messages is limited then the following may help. I used jQuery for the following example, but it works with plain js too.
The innerHtml property did not work for me. So I experimented with ...
<div id=successAndErrorMessages-1>100% OK</div>
<div id=successAndErrorMessages-2>This is an error mssg!</div>
and toggled one of the two on/off ...
$("#successAndErrorMessages-1").css('display', 'none')
$("#successAndErrorMessages-2").css('display', '')
For some reason I had to fiddle around with the ordering before it worked in all types of browsers.