I've downloaded the YUI library for the nice SimpleEditor. When installed and created a simple test. It will not display right.
this is how it should look like.
http://developer.yahoo.com/yui/examples/editor/simple_editor.html
and this is how it looks with my example:
http://ms.robertcabri.nl/testing.php
Here is the code of my testing page:
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="http://ms.robertcabri.nl/js/yui/assets/skins/sam/skin.css" />
<link rel="stylesheet" type="text/css" href="http://ms.robertcabri.nl/js/yui/editor/assets/skins/sam/simpleeditor.css" />
<link rel="stylesheet" type="text/css" href="http://ms.robertcabri.nl/js/yui/button/assets/skins/sam/button.css" />
<script type="text/javascript" src="http://ms.robertcabri.nl/js/yui/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://ms.robertcabri.nl/js/yui/element/element-min.js"></script>
<script type="text/javascript" src="http://ms.robertcabri.nl/js/yui/container/container_core-min.js"></script>
<script type="text/javascript" src="http://ms.robertcabri.nl/js/yui/editor/simpleeditor-min.js"></script>
<script type="text/javascript">
window.onload = function () {
var Dom = YAHOO.util.Dom, Event = YAHOO.util.Event;
var editor = new YAHOO.widget.SimpleEditor('blaat', {
dompath: true,
handleSubmit: false
});
editor.render();
};
</script>
</head>
<body>
<form action="#" method="post" id="test">
<fieldset>
<legend>test</legend>
<textarea name="blaat" id="blaat" cols="30" rows="5"></textarea>
</fieldset>
</form>
</body>
</html>
Well found the answer myself.
YUI SimpleEditor documentation is really bad. The Main styling has to be set for this element.
in my example i've set a wrapper around the textarea and then the styling picks up.
<div class="yui-skin-sam">
<textarea></textarea>
</div>
You also could place this class on a form element or on the body. It has to be a parent of the textarea node you want to replace with the simpleeditor
You need to put the "yui-skin-sam" class on your body tag, for one thing.
Related
Here's the HTML for the div i want to fadeIn
and the jQuery code for fading the text in the above div
$(document).ready(function() {
$('#message').fadeIn('fast');
});
<html>
<head>
<title>Band Site| Home</title>
<link rel="stylesheet" href="band.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div id="message" style="display:none;">welcome to my website</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="js/init.js"></script>
</body>
</html>
I think fast is too fast. :)
Try it like this:
<!DOCTYPE html>
<html>
<head>
<title>Band Site| Home</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div id="message" style="display:none;">welcome to my website</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#message').fadeIn(3000);
});
</script>
</body>
</html>
I've removed band.css (since I don't have that file) and I've put jquery code directly into <script> tag so everything is in one place.
Your code is working just fine. Instead of adding 'fast' use some duration.
HTML
<div id="message" style="display:none;">welcome to my website</div>
jQuery
$(document).ready(function() {
$('#message').fadeIn('8000');
});
Fiddle
I am trying to have a simple text box that will use the jQuery API from DevBridge. I watched this tutorial to produce my code.
However, I recieve the below issues although I have declared scripts before the JS code and also mapped properly:
Here is my code:
<script type="text/javascript" src="resources/js/jquery.autocomplete.js"></script>
<script type="text/javascript" src="resources/js/jquery.autocomplete.min.js"></script>
<link rel="stylesheet" href="resources/css/main.css" type="text/css">
<link rel="stylesheet" href="resources/css/styles.css" type="text/css">
<style>
h1 {text-align:center; margin:20px 20px;}
#autocomplete{margin:0 auto;})
</style>
<title>Job Search</title>
</head>
<body>
<form method ="GET" action="Jobs">
<fieldset>
<legend>Page:</legend>
<input type="text" name="page" placeholder="enter a number" oninput="this.value=this.value.replace(/[^0-9]/g,'');" id="myId"/>
<legend>Descending?</legend>
<input type="text" id="autocomplete" />
<script type="text/javascript">
var arr= ["test", "apple", "orange"];
$('#autocomplete').autocomplete({
lookup: arr
});
</script>
The error message in the console shows you that you are missing the jQuery library, which the jQuery Autocomplete library reuqires.
You need to include jQuery above the autocomplete libraries like so:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="resources/js/jquery.autocomplete.js"></script>
<script type="text/javascript" src="resources/js/jquery.autocomplete.min.js"></script>
<link rel="stylesheet" href="resources/css/main.css" type="text/css">
<link rel="stylesheet" href="resources/css/styles.css" type="text/css">
I am using the Emojione Area JavaScript plugin. However, I am only getting the text area displayed, without the emoji pane.
Here is my HTML file :
<html>
<head>
<link rel="stylesheet" href="https://cdn.rawgit.com/mervick/emojionearea/master/dist/emojionearea.min.css">
<script type="text/javascript" src="https://cdn.rawgit.com/mervick/emojionearea/master/dist/emojionearea.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<script>
$(document).ready(function() {
$("#emojionearea1").emojioneArea({
pickerPosition: "left",
tonesStyle: "bullet"
});
</script>
<div class="row">
<div class="span6">
<textarea id="emojionearea1">Default :smile:</textarea>
</div>
</div>
</body>
</html>
There is two things to fix on your code:
You need to import the Javascript File from jQuery before EmojioneArea
Your Script in Javascript doesn't close the function $(document).ready()
So the should should be:
<html>
<head>
<link rel="stylesheet" href="https://cdn.rawgit.com/mervick/emojionearea/master/dist/emojionearea.min.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/mervick/emojionearea/master/dist/emojionearea.min.js"></script>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<div class="row">
<div class="span6">
<textarea id="emojionearea1">Default :smile:</textarea>
</div>
</div>
<script>
$(document).ready(function() {
$("#emojionearea1").emojioneArea({
pickerPosition: "left",
tonesStyle: "bullet"
});
})
</script>
</body>
</html>
The Popup will appear on the Right side because Left is not a valid value for the propertie pickerPosition. According to the documentation (www.github.com/mervick/emojionearea) the only valid values are top, right and bottom. The value top is the default one
I Hope it helps you
Best regards
I had a similar issue with the emojioneArea panel not being visible no mater what the position was set to. I added the property inline: true and it showed up.
<script>
$(document).ready(function() {
$("#emojionearea1").emojioneArea({
pickerPosition: "left",
tonesStyle: "bullet",
inline: true
});
})
So I am working on a simple image cropping function using pre-built Yahoo UI. However, it seems the cropping box or whatever it is called lies under the image, or maybe it's just transparent.
Here is my code, you can just copy and paste to inspect.
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/assets/skins/sam/resize.css">
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/assets/skins/sam/imagecropper.css">
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/resize/assets/skins/sam/resize.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/imagecropper/assets/skins/sam/imagecropper.css" />
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/element/element-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/resize/resize-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/imagecropper/imagecropper-min.js"></script>
<img id="yui_img" src="http://developer.yahoo.com/yui/examples/imagecropper/assets/yui.jpg">
<script>
(function(){var crop = new YAHOO.widget.ImageCropper('yui_img');})();
</script>
Here is the URL to the demo Yahoo provides
http://developer.yahoo.com/yui/examples/imagecropper/simple_crop_clean.html
Please help me. Thanks in advance!
This is the code that was working for me
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Simple Crop Interface</title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/resize/assets/skins/sam/resize.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/imagecropper/assets/skins/sam/imagecropper.css" />
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/element/element-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/resize/resize-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/imagecropper/imagecropper-min.js"></script>
<!--there is no custom header content for this example-->
</head>
<body class="yui-skin-sam">
<h1>Simple Crop Interface</h1>
<div class="exampleIntro">
<p>This example shows how to make an image croppable.</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<img id="yui_img" src="http://developer.yahoo.com/yui/examples/imagecropper/assets/yui.jpg">
<script>
(function() {
var Dom = YAHOO.util.Dom,
Event = YAHOO.util.Event;
var crop = new YAHOO.widget.ImageCropper('yui_img');
})();
</script>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</body>
</html>
When I removed the last script ie
<script>
(function() {
var Dom = YAHOO.util.Dom,
Event = YAHOO.util.Event;
var crop = new YAHOO.widget.ImageCropper('yui_img');
})();
</script>
This code then the box dissappeared please check with your code. Maybe the javascript is essential or maybe ur missing some thing else. Better to keep all the js and css and try debugging removing one by one. You will get to know the specific point. And my code is hopefully working please let me know if it isn't. :)
I've made a small page that just has this as the HTML:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>hi</title>
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<link type="text/css" href="js/jquery-ui-1.9.1.custom/css/black-tie/jquery-ui-1.9.1.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="js/jquery-ui-1.9.1.custom/js/jquery-ui-1.9.1.custom.js"></script>
<link type="text/css" href="css/main.css" rel="Stylesheet" />
<script src="js/main.js"></script>
<script>
$(main());
/* or $(document).ready(main()); */
</script>
</head>
<body>
<div id="loginDiv" class="popupDiv">
<div id="usernameDiv">
<label for="username">username</label>
<input type="text" id="username"/>
</div>
<div id="passwordDiv">
<label for="password">Password</label>
<input type="password" id="password"/>
</div>
</div>
<div id="introDiv">
<div class="headerDiv">
<button id="loginButton">Login</button>
</div>
</div>
</body>
</html>
And then I have my main.js:
function main()
{
var $loginButton = $('#loginButton');
var $loginDiv = $('#loginDiv');
$loginDiv.dialog({ autoOpen: false });
$loginButton.click(function() {
$loginDiv.dialog("open");
//alert('sfsdf');
});
}
I can trigger alerts, but selectors will not return any elements if the .ready() handler is specified in the head.
I have tried moving it to the end of the body tag and everything works fine. According to the JQuery docs, the entire DOM and all images and resources are supposed to be loaded before the handler gets called. What gives?
Firefox 16.0.2 on Linux x86
JQuery 1.8.2
JQuery UI 1.9.2 (not really used for the purposes here)
Because you are calling your function!
$(main()); <--() means run it
You want to assign a reference to it
$(main); <-- no ()!