I'm making a website where first I use the JSX and React to creat the content and later wanna use the jQuery to create a slideshow, but I don know why the slideshow doesnt work.
function Peli (prop){JSX code}
$(document).ready(function)(){slideshow})
let element = <Peli />
ReactDOM.render((element), document.getElementById('root'))
If the code for the slideshow is put in the html file works
In either of the cases the console doesn't show an error
I found the problem.
React elements are immutable. Once you create an element, you can’t
change its children or attributes.
Related
I'm not really sure what is happening when the component tries to find the div, but here is my render and my div.
HTML:
<div id="app"></div>
Render function:
Meteor.startup(() => { ReactDOM.render(<App />, document.getElementById('app')); });
I get this error in the console: Error: Target container is not a DOM element.
I also put a console.log after my render function trying to find the div id but returned = null.
What packages have you got installed?
if you've still got blaze-html-templates or templating, remove them both and replace with static-html
Otherwise Meteor will render the html as a blaze template some time after startup. (Also if you're using React, you probably don't want to ship Blaze to the client as well!)
See http://archive.is/g20il#selection-399.104-399.186
Hard to see without your full html but your script tag to the .js script should be after the div id "app" tag.
I am using createFileInput() from the P5.js library. More info on that here.
function setup() {
noCanvas();
var fileInput = createFileInput(addedFile);
}
When I use this in my setup function it simply adds the element to the end of the HTML page. I cannot figure out how to place the input anywhere within my page, like between some span tags.
I've tried .html(), .value() and even tried placing it directly inline in the HTML file but I cannot get it to appear where I want it. Usually it just disappears or I get an error.
I've tried using this tutorial and looking at the js to figure out how he placed it in the middle of the page but I can't even find that!
Any help on this would be much appreciated!
Your first stop should be the reference.
Specifically, it looks like the parent() function does what you want: it takes an element you created in your P5.js code (in your case, your fileInput variable) and moves it into a parent element in the HTML webpage.
So your first step would be to create an html webpage that contains an element (probably a <div>) in the middle of the page. Then you'd write P5.js code that calls the parent() function and passes in the id of that <div> element.
I have a situation where I am storing dynamic css data about a text object in a database as json. I need to map that same css data into styles in CKEditor. I am successfully able to load the classes into the CKEDITOR styles dropdown by parsing the json into the style set by running:
CKEDITOR.stylesSet.add('myStyles',styleObj);
Unfortunately this does not fully work with the onscreen text because the css does not exists as a file.
I've also successfully generate the css into the head of the dom by appending the dynamically generated css to a style tag. Unfortunately this still does not connect the actual css generated to the CKEDITOR because it is in a separate context.
Does anyone know how I can either connect document level css to the CKEDITOR instance or generate the CSS in a way that CKEDITOR understands? I'd prefer not to write a temporary CSS file to disk for every single user who needs to view the text object.
I figured out the answer to this by using the CKEDITOR.addCss() function.
Instead of trying to load the css into the document head as styles, the process can be much simpler by running CKEDITOR.addCss() function.
The code looks like:
for each css style found in the json:
styleObj.push({name:this.name,element:'p',attributes: { 'class':cssClassName}});
var cssSheetString = '.'+cssClassName+' {font-family:'+this.fontFamily+'; font-size:'+fontSize+'; font-weight:'+this.fontStyle+'; text-decoration:'+textDecoration+'; } ';
CKEDITOR.addCss(cssSheetString);
after the loop ends then also add the styles object:
if(!CKEDITOR.stylesSet.registered.myStyles){
CKEDITOR.stylesSet.add('myStyles',styleObj);
}
Just for posterity. I've seen answers that say this will work
CKEDITOR.on('instanceCreated', function (event) {
event.editor.addCss(styles);
});
but it does not, you have to use
CKEDITOR.on('instanceCreated', function (event) {
CKEDITOR.addCss(styles);
});
also if your styles variable changes you have to destroy and recreate your ckeditor instance with the new styles.
I'm a total newbie to Onsen UI and I managed to make my first little app (static that is) with a few pages, popovers, lists, etc.
But when I try to add dynamic stuff in there, it does not want to cooperate.
When I click my side menu, it calls menu.setMainPage and in the callback I want to modify the content of the list (lets say iterate a JSON request and add a ons-list-item for each of them). However, they do not look styled with Onsen UI icing.
I guess it's because the menu.setMainPage has already parsed the ons-page and showed it in the browser.
Is there a way to do a load page, update the dom, and then pass it to be displayed?
I have a simila problem with an popover that contains a list. I want to add items in that list, but my jQuery append never work. Same reason I suppose.
Thanks!
Sounds like you're not running ons.compile() on the dynamic elements. The custom elements must be compiled after they've been added to the DOM to get the correct style and behavior.
I made a short example to illustrate it:
ons.bootstrap();
var addItem = function() {
var $myList = $("#my-list"),
$item = $("<ons-list-item>").text(Math.random());
$myList.append($item[0]);
ons.compile($item[0]);
};
If you attach the addItem function to a click handler you can add items dynamically to an <ons-list>.
This is a running example on codepen:
http://codepen.io/argelius/pen/gbxNEg
I'm playing around with building a template I've purchased onto our CMS to see how it displays, and am largely there, but I cannot get the text to correctly display.
This is the template I am using.
Our CMS is custom, and is running here. While based on bootstrap2 in the code, I'm also looking to get it updated to bootstrap3 as part of this.
It is running here: style demo site
Problem at the moment is none of the text is showing, and I can't figure out what is preventing this?
The script needs an id on the body. I tested it on a local copy. That does the trick!.
<body id="cbp-so-scroller">
Otherwise this.el is null in cbpScroller.js
// Slide effect on sections
new cbpScroller( document.getElementById( 'cbp-so-scroller' ) );
You've got this error:
Uncaught TypeError: Cannot call method 'querySelectorAll' of null
Basically means you've not got the required element in the DOM for this function to fire. I think it's having a trickle-down effect with your content (your content loads via JS?)
I had a look at your code and it looks like this is the offending line:
this.sections = Array.prototype.slice.call( this.el.querySelectorAll( '.cbp-so-section' ) );
Do you have the .cbp-so-section element available? If you either remove this line, or put the right element into the DOM, you should fix the issue