I've come with hopes that I can achieve a functional answer to my series of baffle. I have tried linking my indexjs.js to my index.html using <script type="text/javascript" src="./indexjs.js"></script> --- yet to no avail. I have also tried inline editing such:
link type="text/css" rel="stylesheet" href="./indexcss.css"/
script type="text/javascript"
$(document).ready(function(){
$('div').mouseenter(function(){
$(this).fadeTo('fast',0.5);
});
$('div').mouseleave(function(){
$(this).fadeTo('slow',1.0);
});
});
/script
also to no avail. With sidenotes intact I have tried several JQuery installations and the plugin but receive an error code upon is finalization similar to: Windows Script Host
Script: C:\Users\....\Desktop\public_html\indexjs.js
Line: 1
Char: 1
Error:'document' is undefined
Code:800A1391
Source: Microsoft JScript runtime error
I have used googleajax referenceing through src ; as well as saving jquery-1.12.4 to the same public_html folder.
Seems the issue is with link & script tag
Note < & >
HTML LINK TAG
<link rel="stylesheet" type="text/css" href="href="./indexcss.css">
Script Tag
<script type="text/javascript">
$(document).ready(function(){
//Rest of code
});
</script>
JSFiddle here.
I am trying to include this JQuery plugin (Github) into my a web page. But it seems to Not get included.
I checked this demo page, particularly their <head> tag to see what they have included, and so included JQuery, tinycolor.js, and jquery.colorpickersliders.js (the other scipts included like prettify.js and bootstrap.js don't seem to have an effect - I tested that by removing those <script> tags from their demo).
Then I tool the first example code snippet from their tutorial/guide here, and used it. The problem is that it does not seem to work. What am I missing?
index.php:
<head>
<meta charset="utf-8"/>
<link type="text/css" rel="stylesheet" href="jquery-colorpickersliders-master/jquery-colorpickersliders/jquery.colorpickersliders.css" />
<script src="jquery-2.1.3.js"></script>
<script src="jquery-colorpickersliders-master/libraries/tinycolor.js"></script>
<script src="jquery-colorpickersliders-master/jquery-colorpickersliders/jquery.colorpickersliders.js"></script>
</head>
<body>
<span class="hsl-demo">...</span>
<script>
$(".hsl-demo").colorPickerSliders({
flat:true,
previewformat:'hsl',
order: {
hsl : 1,
preview : 2
}
});
</script>
</body>
$(".hsl-demo").colorPickerSliders({
flat:true,
previewformat:'hsl',
order: {
hsl : 1,
preview : 2
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://github.com/istvan-ujjmeszaros/jquery-colorpickersliders/blob/master/jquery-colorpickersliders/jquery.colorpickersliders.js"></script>
<script src="https://github.com/istvan-ujjmeszaros/jquery-colorpickersliders/blob/master/libraries/tinycolor.js"></script>
<link href="https://github.com/istvan-ujjmeszaros/jquery-colorpickersliders/blob/master/jquery-colorpickersliders/jquery.colorpickersliders.css" rel="stylesheet" />
<span class="hsl-demo">...</span>
EDIT:
The error in console is:
Timestamp: 4/28/2016 11:05:52 AM
Error: TypeError: $(...).colorPickerSliders is not a function
Source File: http://localhost/Tests/Test1/index.php
Line: 17
Line 17 is the beginning of the <script> tag in the <body> tag.
EDIT 2:
Try to upper case the 'c' in colorPickerSlider to make the code
$(".hsl-demo").ColorPickerSliders({
flat:true,
previewformat:'hsl',
order: {
hsl : 1,
preview : 2
}
});
Note:Never try to include the libraries from github repo directly ,because the resource is read as text/html from github repo over the net. instead try consuming the resource from a CDN.
Live Demo # JSFiddle
I followed Summernote-rails official to add rich text editor in my Rails project.
Then in my edit.html.erb I added class place_editor to my text_area:
<%= f.text_area :text, class: "place_editor form-control col-md-7 col-xs-12", rows: "15j ,placeholder: "Text", required: "required"%>
and then JavaScript as:
<script type="text/javascript">
$(function() {
$('.place_editor').summernote();
var edit = function () {
$('.click2edit').summernote({ focus: true });
};
$("#edit").click(function () {
$('.click2edit').summernote({ focus: true });
});
$("#save").click(function () {
var aHTML = $('.click2edit').code(); //save HTML If you need(aHTML: array).
$('.click2edit').destroy();
});
// Adding Css to give border to text editor
$(".note-editor").css("border", "solid 1px #e7eaec");
});
</script>
Everything works fine except ICONS.
It's Simple
Just Download summernote compile zip file click here.
Unzip the file. Copy font folder. Paste it you summernote.css root. Be sure your summernote.css file stay with font folder. Now Refresh your Browser using Ctrl + F5.
Folder Location demo:
Demo Output:
I searched for hours and finally solved it.
Actually, summernote doesn't save icons locally, instead it download it
I added this links in header
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.1/summernote.css" rel="stylesheet">
And it did the job
I 'll welcome if someone can elaborate it further
Import the font files, it will work.
I tried import through CSS #font-face rule. You can import in javascript also.
#font-face {
font-family: summernote;
src : url('/fonts/summernote.ttf');
src : url('/fonts/summernote.eot'),
url('/fonts/summernote.woff');
}
After unzipping the Summernote distribution download, you must copy the Font folder to the same place you put the summernote.css file.
In this example, Elmer is the root folder of the website, and both summernote.css and the Font folder are copied to the /assets/css folder.
Similarly, the summernote.js file is copied to the /assets/js folder. If you're not using plugins or languages, that's all you need to install.
Here's the code to put in the header to load those files as shown:
<!-- include summernote css/js-->
<link rel="stylesheet" type="text/css" charset="utf-8" href="/assets/css/summernote.css">
<script type="text/javascript" charset="utf-8" src="/assets/js/summernote.js"></script>
Note: Including the charset="utf-8" attribute is important.
Though an answer is already accepted, still I would like to post a better answer for people seeking a solution to the problem in question.
Of course this will work:
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.1/summernote.css">
But I prefer to STORE ASSETS LOCALLY. It eliminates the need of CDN which affects the loading time of the page its embedded in.
By default "summernote" looks for font-awesome icons (and some other summernote fonts) in the directory /css/font/:
//=================== The style-sheets stacking
<link type="text/css" rel="stylesheet" href="css/font-awesome.min.css">
<link type="text/css" rel="stylesheet" href="css/summernote.css">
//=================== The font goes here
/css/font/
So what u need to do is:
Download fontawesome,
Take out the fonts folder from the downloaded archive and rename it to font
Place the directory font inside the css directory of the project.
And this should work.
Considering your assets are available like this http://localhost:1337/css/font/summernote.ttf
//summernote.ttf is just an example
I hope this will help.
Thanks
Copy the font folder in your project css.
just like YourProject/css/font
that should work.
It's work with my project.
Do you have font-awesome included in your project? I believe that plugin uses font-awesome. If not, trying including this in your application.html.erb file as the src for a script tag: https://www.bootstrapcdn.com/fontawesome/
Also read this: https://github.com/summernote/summernote/issues/505
For anyone that may be having trouble with icons in MVC, it seems as though summernote looks at the base folder (in my case, Content) and the font folder needs to go in there. Here's a screenshot of my project's layout:
For whatever reason, summernote looks in the /summernote/font/ folder in Content rather than where summernote-lite.css is.
Hope this helps!
I found the same problem. The solution was I deleted the 'toolbar' key from the summernote config:
$(".summernote").summernote({
lang: 'hu-HU',
height: 300,
minHeight: null,
maxHeight: null,
toolbar: [
['font', ['roboto',]],
]
});
version: summernote v.0.8.12.
Hi I am new for Jquery mobile. I need to develop mobile apps which consist lot of screen. There are around 50 html inside my apps. I am facing this problem nw which is hw to linking to each other page?
Btw let say i need to embedded cordova.js or custom js file to all pages. So did i need to embedded java-script file to every 50 page's header? It is very time-consuming to restructure my apps
for example
<head>
<meta charset="utf-8">
<title>Smart Realtor</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="css/smartrealtor-theme.css" />
<link rel="stylesheet" type="text/css" href="css/snap.css" />
<link rel="stylesheet" href="css/custom.css">
<link rel="stylesheet" href="css/themes/default/jquery.mobile.structure-1.4.2.css">
<link rel="stylesheet" href="css/themes/default/jquery.mobile.icons-1.4.2.css">
<link rel="stylesheet" href="css/jqm-icon-pack-fa.css">
<script src="js/jquery.js"></script>
<script src="js/globalsetting.js"></script>
<script src="js/jquery.mobile-1.4.2.min.js"></script>
</head>
Did Jquery mobile provide any function like I need only include js file to index.html. Then my other page will automatically load those js file. Please guide me solution and provide me some sample code instead of give me jquery mobile document link. Thanks
Okay so just to clarify, it sounds like you've got 2 problems:
Adding navigation links to all 50 html files
Adding an extra javascript source to all 50 html files
Two basic approaches come to mind:
You could write a script or use a program to do a text find and replace for all the files in the html directory. If you want to use a program, you could use ReplaceText or a similar tool. If you want to use a script then you could write it in whatever you prefer, I'd probably use Python, this link might help you write such a script. So then to add the navigation links and embed an extra javascript file, you could seach for <body> and replace with:
<body>
<nav>
link1
link2
</nav>
<script src="js/cordova.js"></script>
Another possible option would be to add the navigation and dynamically load the javascript file using a javascipt file that you already include in all of your html files. Note though that this approach will slightly reduce the performance of the page as compared to directly changing the html files (as in the previous approach). So for example, to load an extra javascript source, you could add the following code to globalsetting.js
Using jQuery's getScript() function
$( document ).ready(function() {
$.getScript( "js/cordova.js", function( data, textStatus, jqxhr ) {
console.log( data ); // Data returned
console.log( textStatus ); // Success
console.log( jqxhr.status ); // 200
console.log( "Load was performed." );
});
});
Or as normal javascript (source1, source2)
var head= document.getElementsByTagName('head')[0];
var script= document.createElement('script');
script.type= 'text/javascript';
script.src= 'helper.js';
head.appendChild(script);
And to add the navigation you could add the following jQuery code to globalsetting.js: (source)
$("body").append("<nav>
link1
link2
</nav></nav>")
I already have the following for the JS files:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">!window.jQuery && document.write(unescape("%3Cscript src='/app_shared/script/jquery-1.6.1.min.js' type='text/javascript'%3E%3C/script%3E"))</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
<script type="text/javascript">!window.jQuery.ui && document.write(unescape("%3Cscript src='/app_shared/script/jquery-ui.min.js' type='text/javascript'%3E%3C/script%3E"))</script>
How can I go for something similar for a theme?
I can download it from the cdn like this:
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
But how can I detect if the file was downloaded, to reference a local copy on failure?
I know how to add the local copy programatically with jQuery, but I don't know how to check whether the CSS download succeded. Also, are <link> tag downloads blocking, or are they async? That'd be a problem, too.
You could do a style check where a font should be a particular family and then check against that family name. If the name is not what you expect then load the local copy.
You can also try something like Get a CSS value from external style sheet with Javascript/jQuery
<style>
p {color: blue}
</style>
$(document).ready(function() {
var $p = $("<p></p>").hide().appendTo("body");
alert($p.css("color"));
$p.remove();
});