I am trying to create a full page interface using the excellent jQuery UI Layout plugin.
but unfortunately west side unable to resize with mouse which i have mentioned in below image. i am not able to find any solution for it.
Below is my code which i used:
<div class="ui-layout-west">
<%#include file="abc.jsp"%>
</div>
Below is my sample image of west pane.
I found a solution, It looks like you have to include js for jquery ui. you can then set resizable option like below according to your need.
<html>
<head>
<script src="jquery-latest.js"></script>
<script type="text/javascript" src="jquery-ui-latest.js"></script>
<script src="jquery.layout-latest.js"></script>
<script>
$(document).ready(function () {
$('body').layout({
applyDefaultStyles: true,
resizable: true,
east__resizable:false,
north__resizable:false,
south__resizable:false,
});
});
</script>
</head>
<body>
<div class="ui-layout-center">Center</div>
<div class="ui-layout-north">North</div>
<div class="ui-layout-south">South</div>
<div class="ui-layout-east">East</div>
<div class="ui-layout-west">West</div>
</body>
</html>
Related
I have set up a html page to display a timeline using jquery.timeline.min.js library.
I get the timeline displayed but no events are added to it.
Its the basic example given at the help page on the github of this library at https://ka2.org/getting-started/
What am i missing, my code is the following
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href='dist/jquery.timeline.min.css'>
<script type='text/javascript' src='script/jquery-3.3.1.min.js'></script>
<script src='dist/jquery.timeline.min.js'></script>
</head>
<body>
<!-- Timeline Block -->
<div id="myTimeline">
<ul class="timeline-events">
<li data-timeline-node="{ start:'2019-02-26 10:00',end:'2019-02-26 13:00',content:'<p>Event Body...</p>' }">Event Label</li>
<li data-timeline-node="{ start:'2019-03-01 23:10',end:'2019-03-02 1:30' }">
<span class="event-label">Event Label</span>
<span class="event-content"><p>Event Body...</p></span>
</li>
</ul>
</div>
<!-- Timeline Event Detail View Area (optional) -->
<div class="timeline-event-view"></div>
<script>
$("#myTimeline").Timeline();
</script>
</body>
</html>
You need to make two changes.
initialize timeline inside jquery on-ready event.
set startDatetime of your timeline while initializing.
please see below
<script>
$(function () {
$("#myTimeline").Timeline({
startDatetime: "2019-02-25 00:00"
})
})
</script>
hope it helps.
thanks
I have a problem using jquery-ui dialog with php. I'm begginer to jquery. I tried to solve it my self but I couldn't.
I have "index.php" as home page to my website:
index.php:
<?php include "includes/header.php"; ?>
<?php include "includes/config.php"; ?>
<?php include "includes/right_side_bar.php"; ?>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/wow.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/slick.min.js"></script>
<script src="assets/js/custom.js"></script>
<script src="assets/js/dropdown.js"></script>
<script type="text/javascript" src="assets/js/ajax.js"></script>
</body>
</html>
I referenced all the related jquery-ui scripts, also the style sheets (which are exists in the "header.php").
in the index.php I included "right_side_bar.php", which has a button that call jquery-ui:
right_side_bar.php:
<link rel="stylesheet" href="./assets/css/general.css">
<link rel="stylesheet" href="./assets/js/jqueryui/jquery-ui.css">
<link rel="stylesheet" href="./assets/js/jqueryui/jquery-ui.min.css">
<link rel="stylesheet" href="./assets/js/jqueryui/jquery-ui.theme.css">
<script type="text/javascript" src="assets/js/jqueryui/external/jquery/jquery.js"></script>
<script type="text/javascript" src="assets/js/jqueryui/jquery-ui.js"></script>
<script type="text/javascript" src="assets/js/jqueryui/jquery-ui.min.js"></script>
<script type="text/javascript" src="assets/js/validation.js"></script>
<div class="right_sidebar">
<div class="single_widget">
<h2 id="welcomeLogin">Login Page</h2>
<form id="loginForm" action="" method="post">
<div class="form-group text-center">
<span class="input-group-btn">
<a id="clickform" name="login" class="btn btn-primary">login</a>
</span>
</div>
</form>
<div id="container"></div>
</div>
</div>
what I need when I click on that button which exists in "right_side_bar.php" is to make jquery-ui fires and create the dialog
validation.js:
$(document).ready(function(){
$("#container").hide();
$("#clickform").click(function(){
$("#container").load("includes/update_user_info.php #customForm",function(rt,ts,xhr){
if(ts == "error")
alert("ERROR!!!!!!");
else
alert("Success!!");
});
alert("Done..!!");
$("#container").attr('title','Registration Form').dialog({width:600, height:600, closeOnEscape: true, draggable: true, resizable: false, show:'fade',modal:true});
});
});
the "#container" is a "div" tag which exists in the main page (index.php), this "div" will hold the form tag that came from "update_user_info.php".
when I run the code everything works fine, even the alerts are displayed, but the "jquery-ui dialog" never displayed.
I forgot to mention that I made "index2.php" and copied the "right_side_bar.php" into "index2.php" (I mean without including it) and the dialog works correctly without any problem. but I need that code to be included.
I know I wrote very much, but I want you to guide me if I made something wrong with this code.
any help will be appreciated, thanks in advance.
One thing that pops out at me is that you have jquery-ui included twice:
<script type="text/javascript" src="assets/js/jqueryui/jquery-ui.js"></script>
<script type="text/javascript" src="assets/js/jqueryui/jquery-ui.min.js"></script>
You should only include it once, I would recommend you use the jquery-ui.min.js minified version only as it is a smaller payload, and remove jquery-ui.js.
Other than that are you seeing any errors in your console?
Alternatively if you need an external jquery-ui to verify you can try:
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
I would suggest a few changes.
Working example: http://jsfiddle.net/Twisty/km3zx1pt/
jQuery
$(function() {
$("#container").dialog({
autoOpen: false,
width: 600,
height: 600,
closeOnEscape: true,
draggable: true,
resizable: false,
show: 'fade',
modal: true
});
$("#clickform").click(function() {
// Example Code to test loading HTML content from remote source
// Replace with .load() and your own URL
$.post("/echo/html/", {
html: "<h2>ALL YOUR BASE ARE BELONG TO US.</h2>"
},
function(d) {
$("#container").html(d);
$("#container").dialog("option", "title", 'Registration Form')
.dialog("open");
});
});
});
In this way, we initialize the dialog with all our settings up front. We collect the Form data or HTML and add it to the Dialog container. We then update the title and open the dialog for viewing.
It all appears to work here, but I do not have all the extra scripts you're eluding to in your post. There could be a conflict.
Since I started using a html-templatefile for my navbar elements I haven't got one of my scripts to execute(I can execute it via the console). I have experimented with on-load-functions but even that didn't seem to work. My problem is that I understand to little of the execution order and if I'm somehow blocking my script. I don't get any error messages either and when the html-template isn't used (ie - the navbar structure is included with everything else in the same html-file) the page loads as it should. So something there is messing it up. And I can call it from the console as well.
(I have tried a variety of ways but nothing have really worked, other than including the template in the document and that I would like to avoid. This setup is one of many). I hope someone can see the errors I do on the spot. I have cut out som css aswell, for readability.
Edit: Threw js out the window, since ASP was found available. Solved it in about half an hour using asp.
Just place your DOM elements inside body tag. Always render script at the end of the body, and append async javascript files at document ready (or at least this is my view of things).
<html>
<head>
<link href="Bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body id="bodyCanvas">
<div class="masthead">
<div class="container">
</div>
</div>
<div class="container Override" id ="pageContainerId" >
</div>
<script>
<script src="http://code.jquery.com/jquery.js"></script> // create a local copy of jquery and other async javascript files you can load at $(document).ready(function(){ //here append async scripts like google maps });
<script type="text/javascript" src="d3.min.js"></script>
<script src="Bootstrap/js/bootstrap.min.js"></script>
<script type='text/javascript'>
$(function(){
$("#pageContainerId").load("navbarTemplate.html");
});
</script>
Here goes code....
</script>
</body>
</html>
The code you are trying to reference in the $("#pageContainerId").load("navbarTemplate.html"); is outside the body tag and most browsers will cut this out.
Try the following:
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript" src="d3.min.js"></script>
<script src="Bootstrap/js/bootstrap.min.js"></script>
<script type='text/javascript'>
$(function(){
$("#pageContainerId").load("navbarTemplate.html");
});
</script>
</head>
<body id="bodyCanvas">
<div class="masthead">
<div class="container">
</div>
</div>
<div class="container Override" id ="pageContainerId" >
</div>
<script>
Here goes code....
</script>
</body>
</html>
Also as the script is at the top the DOM may not be loaded at the time try the following:
$(document).ready(function(){
$("#pageContainerId").load("navbarTemplate.html");
});
DOM ELEMENT SHOULD INSIDE BODY TAG
<body id="bodyCanvas">
<div class="masthead">
<div class="container">
</div>
</div>
<div class="container Override" id ="pageContainerId" >
</div>
</body>
Ok, I couldn't get it to work the way I wanted but it turned out we had asp enabled on our server so when I switched to that I got it to work beautiful in about half an hour.
And it's a better way I suspect, in terms of best practice.
Thanks for the responses.
I have looked around and although I have found similar questions to this one, none of them had any solutions that worked for me.
Here is a link to another question similar.
Draggable and resizable in JqueryUI for an image is not working?
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
</head>
<body>
<div id="draggableHelper" style="display:inline-block">
<img id="image" src="http://www.google.com.br/images/srpr/logo3w.png" />
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#draggableHelper').draggable();
$('#image').resizable();
});
</script>
</body>
</html>
This is just a very basic example but when I run this the image is movable but is not resizable. Although as far as I can tell, it should definitely work.
In the link above at the bottom of the question there is a link to a working example.
http://jsfiddle.net/8VY52/
The example is using jfiddle with this exact same HTML and javascript.
Is there something I am missing about Jquery UI, why does this work through Jfiddle but does not seem to work within the code above.
Thanks.
You are missing the jquery-ui CSS file in your code
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"/>
Demo: Plunker
Complete working code would be.
</head>
<body>
<div id="draggableHelper" style="display:inline-block">
<div id="image"><img src="http://www.google.com.br/images/srpr/logo3w.png" /></div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#image').resizable();
$('#image').draggable();
$('#image').resize(function(){
$(this).find("img").css("width","100%");
$(this).find("img").css("height","100%");
});
});
</script>
</body>
</html>
This will work for you.
<div id="draggableHelper" style="display:inline-block">
<div id="image"><img src="http://www.google.com.br/images/srpr/logo3w.png" /></div>
</div>
As the resizable property only works on right side and bottom side so find the image borders find that by selecting a image in css and border to it then see the output it will work perfectly
I am using [tinyMCE][1] and [tinybox2][2] i can get both to work independently but what i am tryng to achieve is that i click on edit button tinybox2 opens the url with the relevant id string on the page the link opens up this has tinyMCE on it with the update form, but i dont understand why tinymce does not load within the popup.
Is there a way to allow javascript to go to this popup of tinybox? or why is it preventing more javascript to load?
Thanks for any help :D
I have done this so far:
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
get test.php content via $.ajax(); -no idea on this one-
<p><a class="Forumusername" onclick="TINY.box.show({url:'test.php',width:750,height:300})">CLICK ME</a>
reinit TinyMCE editor with tinyMCE.init call. -i dont know how to implement this either-
Edited links but question is answered.
I'm not good in updating old code, so I will rewrite it completely. That's content of two my files test.php and edit.php:
test.php
<!doctype html>
<link rel="stylesheet" href="js/tinybox2/style.css" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="js/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript" src="js/tinybox2/tinybox.js"></script>
<script type="text/javascript">
$(function(){
$('#open_editor').click(function(){
$.get(this.href).done(function(html){
TINY.box.show({
html: html,
width: 500,
height: 400,
openjs: function(){
tinyMCE.init({ mode: 'textareas', theme: 'advanced' });
}
});
});
return false;
});
tinyMCE.init({ mode: 'textareas', theme: 'advanced' });
});
</script>
<a id="open_editor" href="edit.php">Open editor</a>
<textarea></textarea>
edit.php
<textarea name="body" rows="10" cols="50"></textarea>
Correct paths to stylesheets and scripts before running test.php.
These scripts are checked and tested.