i get source code, in CKEDITOR demo, and put in index.html in empty body.
Included:
<script src="//cdn.ckeditor.com/4.4.7/standard/ckeditor.js"></script>
But, content dispayed very bad, appears ugly in style and displayed.
<html>
<head>
<script src="//cdn.ckeditor.com/4.4.7/full/ckeditor.js"></script>
</head>
<body>
---Content source in CKEDITOR demo HERE
</body>
</html>
displayed:
http://i.stack.imgur.com/ATTWO.png
why it is displayed not as in a demo as it is correct to me to display content created through CKEDITOR
I took a look at their homepage and downloaded the basic package. I
found a file called content.css in the package folder,
img.right
{
border: 1px solid #ccc;
float: right;
margin-left: 15px;
padding: 5px;
}
img.left
{
border: 1px solid #ccc;
float: left;
margin-right: 15px;
padding: 5px;
}
And if you look at the source code of the content snippet on their demo,
<h1><img alt="Saturn V carrying Apollo 11" class="right" src="http://c.cksource.com/a/1/img/sample.jpg" /> Apollo 11</h1>
The image has a class called right, which is defined in content.css, and therefore it is floating to the right.
I think your problem is that the css file in not present/found in your project.
Maybe you can try to download the package and see if it works locally, so you can make sure that the problem is caused by the CDN and the missing file.
Just in case, I download the package here (no advertisements intended)
http://ckeditor.com/download
It is rendered by the browser in this way. If you want to add additional styles and modify the look you need to learn some CSS. There is no CSS whatsoever in the source from the editor.
Related
I am making a simple web extension. I want to attach a python program to its files so that the python program can use the data entered by the user in the extension popup for a particular operation and the output will be displayed on the extension popup.
Please guide me in this process. It's my first time making a web extension.
I don't think you can execute python script inside javascript file.
these are two option you can use:-
create api with python script and call api inside you javascript file.
explore pyscript , Pyscript is used for using python script inside html code.(I have not tried it yet)
You can use PyScript to write your entire extension with Python.
Take a look at this simple example of running python and DOM manipulating:
<html>
<head>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
<style>
h1 {
font-size: 20px;
color: green;
text-transform: uppercase;
text-align: center;
margin: 0 0 35px 0;
text-shadow: 0px 1px 0px #f2f2f2;
}
</style>
</head>
<body>
<h1>PyScript Events</h1>
<div>
<p> I am just a random element </p>
<p id="change_me"> I think PyScript is awesome </p>
<p> I like hamburgers </p>
</div>
<py-script>
import pyodide
def on_click(e):
e.target.innerHTML = "PyScript is really awesome!"
change_me_element = document.getElementById('change_me')
change_me_element.addEventListener('click', pyodide.create_proxy(on_click))
</py-script>
</body>
Here you have a great tutorial about getting started with PyScript.
I am learning to build websites and at the moment I am coding in visual-studio code insiders, with most jQuery plugins installed.
When I open this url :
" http://www.completewebdevelopercourse.com/content/4-jquery/4.3.html "
which has identical source code as the code below,
I get two different results.
one, In which the java-script is working (this is the page from the link), and in the other(stored in a local folder and opened inside VScode), it is not.
I have consulted the VS-code website and forums. No luck and my problem is not mentioned at all. Only that there does not seem to be a good plugin for jQuery but snippet-packages, which I have installed.
And normal google-ling gives me all the same results in which people are asking for jQuery plugins as mentioned above
How can this be? And how do I fix it?
[code]
<!DOCTYPE html>
<head>
<title>jQuery</title>
<script type="text/javascript" src="jquery.min.js"></script>
<style type="text/css">
#circle {
width: 150px;
height: 150px;
border-radius: 50%;
background-color: green;
margin: 10px;
}
.square {
width: 150px;
height: 150px;
background-color: red;
margin: 10px;
}
</style>
</head>
<body>
<div id="circle"></div>
<div class="square"></div>
<div class="square"></div>
<script type="text/javascript">
$("div").click(function() {
alert("a div was clicked!");
});
</script>
</body>
Make sure that you downloaded the jquery.min.js file (you should place it in the same folder of the html page), otherwise it would go 404.
I'm using the Disqus comments plugin on my wordpress site on http://swiftcarbon.com/carocap-the-journey-thus-far/
As you can see it is using a much darker blue (rgb(0,0,238)) than the sites blue (##288ce4), for the underlines, and anchor tags.
I've read the documentation on https://help.disqus.com/customer/portal/articles/545277 , but according to this article Disqus should apply a black colour to those links, which I'd be happy with.
So far I've tried to override the style with !important to change the colour which didn't work. I've even tried, although I know it's a no-no, to inject styles using the Javascript on the $(window).load() method to ensure the Disqus section is loaded before the js runs.
css
#disqus_thread .publisher-anchor-color {
color: black !important;
}
js
$("#disqus_thread .publisher-anchor-color").css("color", "black !important");
or
$("#disqus_thread .publisher-anchor-color").removeClass("publisher-anchor-color);
Has anyone had a similar problem and managed to change the style.s
The disqus thread is get inside an iframe. You can't change the css of the frame content from the parent page. So this need to be resolved on disqus side - maybe there is an api option that you need to set.
Disqus link colors are inherited from your site's "a" defined color, change your css to define new link colors, and it will automatically pick it up
The final working solution :
<html>
<head>
<style>
#disqus_thread a {
color: red;
}
</style>
<script type='text/javascript'>
/* <![CDATA[ */
var embedVars = {
"disqusConfig":{"platform":"wordpress#4.3.1","language":""},
"disqusIdentifier":"5829 http:\/\/swiftcarbon.com\/?p=5829",
"disqusShortname":"swiftcarbon","disqusTitle":"CAROCAP: THE JOURNEY THUS FAR",
"disqusUrl":"http:\/\/swiftcarbon.com\/carocap-the-journey-thus-far\/",
"options":{"manualSync":false},"postId":"5829"};
/* ]]> */
</script>
<script type='text/javascript' src='http://swiftcarbon.com/wp-content/plugins/disqus-comment-system/media/js/disqus.js?ver=4.3.1'></script>
</head>
<body>
<div id="disqus_thread">
<iframe id="dsq-app1" name="dsq-app1" allowtransparency="true" frameborder="0" scrolling="no" tabindex="0" title="Disqus" width="100%" height="100%" src="http://disqus.com/embed/comments/?base=default&version=9c6bf8c60a74cf4ced706cfda8a939f7&f=swiftcarbon&t_i=5829%20http%3A%2F%2Fswiftcarbon.com%2F%3Fp%3D5829&t_u=http%3A%2F%2Fswiftcarbon.com%2Fcarocap-the-journey-thus-far%2F&t_e=CAROCAP%3A%20THE%20JOURNEY%20THUS%20FAR&t_d=CAROCAP%3A%20THE%20JOURNEY%20THUS%20FAR&t_t=CAROCAP%3A%20THE%20JOURNEY%20THUS%20FAR&s_o=default&l=" style="width: 100% !important; border: 1px solid red !important; overflow: hidden !important; height: 475px !important;" horizontalscrolling="no" verticalscrolling="no"></iframe>
</div>
</body>
</html>
**// UPDATED ** And the debug :
I'm sure I am missing something obvious and I have checked the other questions regarding this but none seem to have exactly my issue. I am new to Javascript but I'm sure this is a very simple script to implement on a website. If I can get it to work I can edit it from there and see how it works to further enhance it or remove from it.
Here is my code so that you can see exactly how i have it in the .html file
<!DOCTYPE>
<html>
<head>
<title>Example</title>
<link rel="stylesheet" href="css/nanoscroller.css">
<script rel="text/javascript" src="js/jquery.nanoscroller.min.js"></script>
<style type="text/css">
/* START NanoSlider */
.nano { background: #bba; width: 500px; height: 500px; }
.nano .content { padding: 10px; }
.nano .pane { background: #888; }
.nano .slider { background: #111; }
/* END NanoSlider */
</style>
<script>
$(document).ready(function(){
$(".nano").nanoScroller();
});
</script>
</head>
<body>
<div id="about" class="nano">
<div class="content">
This is the content box and it should be scrolling but it is not!! =/.
</div>
</div>
</body>
</html>
Here is a JSFiddle: http://jsfiddle.net/fcJr3/1/
Maybe I am linking in or refering to required files wrong? or possibly NOT linking in or referring to all the files I am suppose to?
As you can see in the JSFiddle I only get the box. I don't get the scroll bar or any of the effects. Your help is greatly appreciated, thanks!
EDIT: this is the nanoSlider here: http://jamesflorentino.github.io/nanoScrollerJS/
You need to include the jQuery library itself. You can download it or run it straight from the google cdn i.e.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
In your fiddle you need to include jquery using the dropdown top left i.e.
http://jsfiddle.net/fcJr3/2/
I'm a newbie to AngularJs.
What I'm trying to do is update the page on hashchange events.
What I currently do (and know is not the "right" way to go) is:
<!DOCTYPE html>
<html>
<head>
<style>
#hashdrop {
display:block;
border: 1px solid gray;
width: 500px;
overflow: auto;
background-color: rgb(241,241,241);
border-radius: 4px;
text-align: center;
vertical-align: middle;
line-height: 100px;
font-size: large;
height: 100px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script>
var example = function($scope) {
$scope.lastHash = location.hash.slice(1);
$(window).on('hashchange', function (event) {
$scope.lashHash = location.hash.slice(1);
$scope.$apply();
});
};
</script>
<meta charset=utf-8 />
</head>
<body ng-app ng-controller="example">
<div id="hashdrop" >
{{lastHash}}
</div>
</body>
</html>
(This can be copy-pasted into a blank html file and run. jsbin didn't detect the haschange correctly, for me.)
This doesn't really work. for some reason the value is not updated and I would assume there is a 'right' way to this in angularjs.
I would to understand how to do this right and more specifically how to correct the code in this example to work the "angular way".
Thanks!
UPDATE 1
Okay, After reading the comment about $location, I found some information and change my app to this:
<!DOCTYPE html>
<html>
<head>
<style>
#hashdrop {
display:block;
border: 1px solid gray;
width: 500px;
overflow: auto;
background-color: rgb(241,241,241);
border-radius: 4px;
text-align: center;
vertical-align: middle;
line-height: 100px;
font-size: large;
height: 100px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script>
angular.module('example',[]).config(function($locationProvider, $routeProvider) {
$locationProvider.html5Mode(true);
});
var example = function($scope, $location) {
};
</script>
<meta charset=utf-8 />
</head>
<body ng-app="example" ng-controller="example">
<div id="hashdrop" >
Hash = {{$location.hash()}}
</div>
</body>
</html>
Still doesn't work. Nothing shows in output..
AngularJs uses hashes in urls for all normal routing, it's the default way of navigating the page. You use the routeProvider to define url-schemas much like you would in back end MVC frameworks like Django, and the routeProvider will listen for changes in the hash and load new content accordingly.
I suggest doing the tutorial. It is fairly good (even if it misses a lot of stuff). Routes are demonstrated in step 7.
Just warning. Angular assumes that you use hashes as your main way to handle urls and routing, so routeParams will not let you change only part of a page when changing the hash part of the url. To do that you would either switch to using get parameters or use something like ui-router which is more flexible.
You can bind to the hashchange event using angular.element instead of jQuery, potentially reducing dependencies.
Include this in your controller.
angular.element(window).bind('hashchange', function() {
console.log('hash has changed');
});
This code will log "hash has changed" when the hash changes.
Not sure it will solve your problem (there's some more funky stuff in your code, as Kevin Beal pointed out), but it's kind of unclear what you're saying "doesn't work".
Worth noting that angular.element uses jQuery if it's available, so if you want to use jQuery anyways, angular.element(window) won't do anything differently than $(window).