Hello guys I'm trying to implement the wmd editor like this on stackoverflow but I can't show the buttons of the editor only the textarea appears.. here is my codes.. Am I doing something wrong here? Or missing something? Thanks hopefully you guys could help me.
<!DOCTYPE html>
<head>
<link href="#Url.Content("~/Content/wmd.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/showdown.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/wmd.js")" type="text/javascript"></script>
<body>
<div id="wmd-button-bar" class="wmd-panel"></div>
<textarea id="wmd-input" class="wmd-panel"></textarea>
<div id="wmd-preview" class="wmd-panel"></div>
<div id="wmd-output" class="wmd-panel"></div>
</head>
</body>
Related
I just installed ckeditor on my server but the wysiwyg editor doesn't replace the textarea. It's something basic and I don't understand why.
EDIT : apparantly, the problem is linked with the language of the browser. English brwoser are ok, french not ! Any thought ?
Here is my page: http://cliniquelactuel.com/testckeditor/samples/
Here is the code :
<html>
<head>
<meta charset="utf-8">
<title>CKEditor Sample</title>
<script src="http://cliniquelactuel.com/testckeditor/ckeditor.js"></script>
</head>
<body id="main">
<form>
<textarea name="editor1" id="editor1" rows="10" cols="80">
This is my textarea to be replaced with CKEditor.
</textarea>
<script>
CKEDITOR.replace('editor1');
</script>
</form>
</body>
</html>
Thanks.
I have a default blade file that yields other contents this is where im calling the link to style sheet and javascript i downloaded bootstrap 3.3.5 and created a link to it here is my default blade
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="bootstrap335/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/plug- ins/1.10.7/integration/bootstrap/3/dataTables.bo‌​otstrap.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"> </script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
</head>
<body>
<div class="container">
#yield('content')
</div>
</body>
</html>
The bootstrap is working properly in my views except one. i don't know the problem because it works fine on the others and it is extends the default blade file
I am trying to add a zoom on my image with the jQuery (brilliant) plugin gzoom (http://lab.gianiaz.com/jquery/gzoom/ or http://www.chouselive.co.za/demo/pictures/zoom/gzoom.php).
But it doesn't work. My image is just resized, but there is no zoom in it.
Here is my code :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test gzoom</title>
<link rel="stylesheet" href="css/jquery-ui-1.7.1.custom.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/jquery.gzoom.css" type="text/css" media="screen">
<style>
div#zoom{
cursor: crosshair;
}
</style>
</head>
<body>
<div id="gzoomwrap">
<div id="zoom" class="zoom minizoompan">
<span class="loader">loading...</span>
<img src='img/myImage.png'/>
</div>
<!-- START gzoom zoom bar -->
<div class="ui-icon ui-icon-circle-minus gzoombutton"> </div>
<div class="gzoomSlider ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" style="width: 258px;"></div>
<div class="ui-icon ui-icon-circle-plus gzoombutton"> </div>
<br style="clear:both">
<!-- END gzoom zoom bar -->
</div>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<!-- START gzoom dependencies -->
<script type="text/javascript" src="js/ui.core.min.js"></script>
<script type="text/javascript" src="js/ui.slider.min.js"></script>
<script type="text/javascript" src="js/jquery.gzoom.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript">
/*<![CDATA[*/
$(function() {
$zoom = $("#zoom").gzoom({
sW: 300,
sH: 225,
lW: 1400,
lH: 1050,
lighbox : false
});
});
/*]]>*/
</script>
<!-- END gzoom dependencies -->
</body>
</html>
I looked on the Chrome console, and found some errors in the libraries. So I assume I didn't implement gzoom correctly. (Doesn't work in all browsers)
If you know what I'm doing wrong... I'll thank you a lot !
I'm the gzoom plugin author.
The plugin was developed a lot of time ago, but it's still working with new versions of jquery and jquery ui.
If you include a modern jquery version you have also to include a modern version of jquery-ui.
I've just tried the plugin with this versions and it does his job:
jquery-1.10.2.min.js
jquery-ui-1.10.3.custom.min.js
Include this files, and remove the ui.core.min from, and ui.slider.min.
Am using jquery draggable collision plugin which throws the error on loading the page that is "Type Error i is undefined"
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Droppable - Default functionality</title>
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type= "text/javascript" src="js/jquery-ui.js"></script>
<script type= "text/javascript" src="js/jquery-collision.min.js"></script>
<script type= "text/javascript" src="js/jquery-ui-draggable-collision.min.js"></script>
<script type= "text/javascript" src="js/common.js"></script>
</head>
<body>
<div id="header">Sprite Generator</div>
<div id="droppable" >
<div id="overLay">Drop Files Here</div>
</div>
<div id="cssDetails">
<div id="cssHead">CSS Data</div>
</div>
<div id="errorMessage"></div>
</body>
</html>
This is the code I use. Kindly help, am not aware what is going wrong here.
The error lies in the draggable collision plugin file. Each time the method .data("draggable") is called, an undefined value is returned.
There is a slight difference between jQuery UI 1.9.2 and 1.10.3. In this last version, .data("draggable") has been replaced by .data("ui-draggable").
You should :
Either use an old version of jQuery UI plugin,
or use the last version, then replace .data("draggable") by .data("ui-draggable") in the jquery-ui-draggable-collision.min.js file.
In my own case, I used the second solution. But your case may be different, since I don't know which version of jQuery UI plugin you are using now.
The README for jQuery UI Draggable Collision reads:
Load jquery-ui-draggable-collision and its dependencies:
<script src="jquery-1.8.3.js"></script>
<script src="ui/jquery.ui.core.js"></script>
<script src="ui/jquery.ui.widget.js"></script>
<script src="ui/jquery.ui.mouse.js"></script>
<script src="ui/jquery.ui.draggable.js"></script>
<script src="jquery-collision-1.0.2.js"></script>
<script src="jquery-ui-draggable-collision-1.0.2.js"></script>
It doesn't explain why you need to load modules separately, but my suspicion is there's a conflict going on somewhere. I'd try including the specific individual files (core, widget, mouse, draggable, collision, and ui-draggable-collision) and see if that works. Without more information in your question, it's hard for me to try a set of specific things, but this may be your best bet.
I want to use Agile Uploader to resize images before upload on my server.
But when I try to upload image on server it does nothing... I mean that there is no image in POST data. I've checked POST and there is no items at all. What am I doing wrong?
Here is my code:
<html>
<head>
<script type="text/javascript" src="/static/js/jquery1.6.4.min.js"></script>
<script src="/static/js/jquery.flash.min.js" type="text/javascript"></script>
<link type="text/css" rel="stylesheet" href="/static/css/unrelated.css" />
<script src="/static/js/agile-uploader-3.0.js" type="text/javascript"></script>
<link type="text/css" rel="stylesheet" href="/static/css/agile-uploader.css" />
</head>
<body>
<form action="/test" method="post" id="singularDemo" enctype="multipart/form-data">
<div id="single"></div>
</form>
Submit
<script type="text/javascript">
$('#single').agileUploaderSingle({
formId:'singularDemo',
progressBarColor:'#3b5998',
flashVars:{
firebug:true,
form_action:'/test',
}
});
</script>
</body>
</html>
Most code part taken from their demo.
Thanks in advance!
you have to edit the process.php file, where you'll define the remote upload folder!
and then modify the form_action in: "form_action: process.php"