|
JavaScript - Rendering Tree Using Jquery ,jstree
I need to render a tree in freemarker.
I am not sure about what technology should be used. I was thinking Jquerys jsTree plugin. My requirements - 1. Tree control -Name and instead of Icon ,i want customized letters(A,B,C) that represents type of element. 2.I dont want dotted lines connecting root and children like folder tree. 3.collapsable. Please suggest what and how can i do .? Similar TutorialsSo, i have this code which retrieves php files for me using jquery and id love to get it working with Jquery history plugin. I tried modifying the code i got from the ajax demo to work for me, but i just couldnt do it as i do not know any javascript really.. ( actually what i tried was simply to change "#ajax-links a" to "#menu li a" and .html to .php ..but nothing.. :rolleyes: Id be very gratefull if someone would help me out with this one. All related code can be found bellow (the ones that should be needed anyways): This is the code that retrieves php files inside "#content" when item from "#menu li a" with the specified id is clicked Code: $(document).ready(function(){
//References
var change = $("#menu li a");
var loading = $("#loading");
var content = $("#content");
//Manage click events
change.click(function(){
//show the loading bar
showLoading();
//load selected section
if(this.id == "home")
{
change.load(this.className='current-page');
content.slideUp();
content.load("pages/index.php", hideLoading);
content.slideDown();
}
else if(this.id == "secondpage")
{
change.load(this.className='current-page');
content.slideUp();
content.load("pages/secondpage.php", hideLoading);
content.slideDown();
}
else
{
//hide loading bar if there is no selected section
hideLoading();
}
});
//show loading bar
function showLoading(){
loading
.css({visibility:"visible"})
.css({opacity:"1"})
.css({display:"block"})
;
}
//hide loading bar
function hideLoading(){
loading.fadeTo(1000, 0);
};
});
Heres the structure of the menu/content Code: <ul id="menu"> <li><a id="home" class="normal" href="#Home"></a></li> <li><a id="secondpage" class="normal" href="#Secondpage"></a></li> </ul> <div id="content"> <ul id="sec-menu"> <li><a id="link1" class="normal" href="#">Link1</a></li> <li><a id="link2" class="normal" href="#">Link2</a></li> </ul> </div> Heres the code that jquery history plugin uses in demo for ajax Code: jQuery(document).ready(function($) {
function load(num) {
$('#content').load(num +".html");
}
$.history.init(function(url) {
load(url == "" ? "1" : url);
});
$('#ajax-links a').live('click', function(e) {
var url = $(this).attr('href');
url = url.replace(/^.*#/, '');
$.history.load(url);
return false;
});
});
hi, i have a jquery problem... this script is not working with jquery-1.4.2.min, but it works with jquery-1.2.6.min.js, can anyone help me???the script is the above: (it is not working the tab actions, the slideout works...) http://www.benjaminsterling.com/wp-c...es/sidetab.htm the javascript code is the above: PHP Code: var jqsideTabs; var tabs, h = 50, r = 0,ra = 0; $(document) .ready(function(){ jqsideTabs = $('#sideTabs').addClass('closed'); tabs = jqsideTabs .find('.tab h3') .clone() .appendTo(jqsideTabs) .each(function(i){ var that = $(this), cls = '',ow,newThis, newEl; if( i == 0 ) cls = ' active'; newEl = $('<a href="#" class="tabLinks'+cls+'">' + that.text() + '</a>'); that.replaceWith(newEl); ow = newEl.outerWidth(); if( i == 0 ) ra = ow; else r = ow; h = newEl.css({'top':h , 'right': -ow }).height() + h; newThis = newEl.get(0); newThis.jq = newEl; newThis.i = i; newEl.click(function(){ var el = this.jq; if( jqsideTabs.hasClass( 'closed' ) ){ jqsideTabs.removeClass('closed'); } else if( !jqsideTabs.hasClass( 'closed' ) && el.hasClass('active') ){ jqsideTabs.addClass('closed'); } el .siblings() .removeClass('active') .css({'right': -r }) .end() .addClass('active') .css({'right': -ra }); tabs.eq( this.i ).show().siblings('.tab').hide(); return false; }); }) .end() .parent() .eq(0) .addClass('active') .end() .filter(':not(:eq(0))') .hide() .end(); jqsideTabs.bind("mouseleave",function(){ jqsideTabs .animate({left:-310}, 'fast', function(){ jqsideTabs.addClass('closed').removeAttr('style'); }); }); }); and the html file is: [HTML] <div id="sideTabs"> <div class="tab"> <h3>Tab 1</h3> <div class="gut"> <p>Some text</p> </div> </div> <div class="tab"> <h3>Tab 2</h3> <div class="gut"> <ul> <li>link</li> </ul> </div> </div> <div class="tab"> <h3>Tab 3</h3> <div class="gut"> <ul> <li>link</li> </ul> </div> </div> </div> [/HTML] the problem is that the tab button works, but the content doesnt change...in all of tabs showing the same text(showing all tbas content).... can anyone help...please..... Hi all, I'm looking to find a way to making a FAQ selection search which has a hierarchy effect. For example: Whats your favorite color? Red Blue Green Say you select red What shade of red do you prefer? Dark Light Say you select Light Final page that will contain the information that you had rounded down through the search. Does any one have any ideas on how I can do this as I cant seem to find anything on the net! Thanks Hi, need help in making a check box list menu, wherein when initial check box is clicked another checkbox will appear. Help Help i keep getting the error GET http://code.jquery.com/jquery.min.map net::ERR_TOO_MANY_REDIRECTS & Failed to load resource: net::ERR_TOO_MANY_REDIRECTS when i load my page...and the havascript doesn't work properly on ym page...how do i resolve this. thanx in advance Hello I am trying to create a family tree, parents / grandparents etc, of a single person... My database etc is already working but I cannot find any working examples that I can make sense of... Each of my records has a name, dob and id of each parent.... How can I get X generations from this.. I thought something like this might work.. GetParents For each parent GetParents And so on... But I have no idea how to put this into code... Any suggestions to put me on the right line would be greatly appreciated Thanks Hi all. I'm experiencing an issue with dijit.Tree/ForestStoreModel/ItemFileWriteStore and I just can't seem to figure out what's going on. If I start with an empty store model ... var myData= { "identifier" : "id", "label" : "name", "items" : [] }; var myStore = new dojo.data.ItemFileWriteStore({ data: myData }); var myModel = new dijit.tree.ForestStoreModel({ sto masterStore, query: {type: 'task'}, rootId: "tasks_id", rootLabel : "Tasks", childrenAttrs: ["children"] }); If I eventually execute newItem on the store, the tree is not updated. myStore.newItem( { id: "2", name : "someName2", type : 'task', children : [], } ); However, if during declaration of my data, I include 1 item, ie. var myData= { "identifier" : "id", "label" : "name", "items" : [ {"id" : "1", "name" : "someName", "type" : "task"} ] }; Then I can subsequent call newItem as many times as I wish, and the tree is updated correctly. If anybody has any ideas, I'm all eyes. Hi, I am really in a slump right now... I thank all of the people who have helped me in this site... i have a script already that allows check boxes to show the next checkbox using the onclick function. and now I cannot figure out how to make a decision tree.. eg. a person will call or ask for 4 possible inquiries.. billing leads to 2 scenarios - the caller wants the charges explained; once explained its good - the caller wants the charges cancelled technical leads to 2 scenarios -the caller asks for technical assistance; hence resolved -the L1 tech cannot resolve the problem and escalates it to a higher dept gen inq leads 3 scenarios - sell the product - higher department cannot locate any account - declines the sale cancellation leads to 2 scenarios - with refund - no refund i am thinking of a combo box for this to make things much easier.. but it is not.. the hard part for me is when the last check box is clicked I want this drop down shown then, after the user selects the any of the scenarios another check box appears and then another one to finish the process. also I had a script were in all the selected values can be copied to a clipboard but, doesnt copy it. I am really really depressed about this.. I want to learn the js. but I am stuck with the level 0 degree.. please help me.. I would like to put a script on our website that users could interact with and that would ask a series of questions and based on those questions propose answers. Im surprised I cant find much on the web to help me do this. Does anyone know a PHP script, widget, or template that could provide me this functionality? I just want to be able to input a series of questions and answers and the logical flow and be able to host it on our web server. woundering if any could point me in the right direction, where i can find a soul tree canculator script or any one who can make one. thanks shaun. Code: <script type="text/javascript">
function validate(form) {
// Checking if at least one period button is selected. Or not.
if (!document.form1.sex[0].checked && !document.form1.sex[1].checked){
alert("Please Select Sex"); return false;}
var total=""
for(var i=0; i < document.form1.scripts.length; i++){
if(document.form1.scripts[i].checked)
total +=document.form1.scripts[i].value + "\n"
}
if(total=="")
alert("select scripts") else
alert (total)
return false;
} </script>
<table border='0' width='50%' cellspacing='0' cellpadding='0' ><form name=form1 method=post action=action_page.php onsubmit='return validate(this)'><input type=hidden name=todo value=post>
<tr bgcolor='#ffffff'><td align=center ><font face='verdana' size='2'><b>Sex</b><input type=radio name=sex value='male'>Male </font><input type=radio name=sex value='female'><font face='verdana' size='2'>Female</font></td></tr>
<tr><td align=center bgcolor='#f1f1f1'><font face='verdana' size='2'><b>Scripts You know</b><input type=checkbox name=scripts value='JavaScript'>JavaScript <input type=checkbox name=scripts value='PHP'>PHP <input type=checkbox name=scripts value='HTML'>HTML </td></tr>
<tr bgcolor='#ffffff'><td align=center ><input type=submit value=Submit> <input type=reset value=Reset></td></tr>
</table></form>
In this code a checkbox is accessed as "document.form1.scripts[i].checked" If we see the tree view of this document, it is "table/form1/tr/td/scripts[i].checked" SO are we not required to add table elements in the path to the checkbox ? I guess its not required. But why ? Because cell, row and table are the parent elements in HTML tree, then why are they not required ? var s="attr" var i=$(s) // jQuery(elem).attr(attr,eval("elm"+attr)); jQuery(elem).$(s)(attr,eval("elm"+attr));//i tried this. how to assign a variable name in the above code(in place of s) so that i need to add an attribute to the element "elem". Code: oaktree.addItem("RC Mail", branch1, "rcmail/") //Add this item to branch2
I can open it up in the current page, but the menu is in a frame and I need to open it in a fram called "home". How can I do that~?? Hello, I have a specific need in javascript. Can I be guided in this context if its possible or not??? I am using virtuemart extension in joomla to make an ecommerce website. I will try to explain my requirement with the example. Following is the sample category tree with number. 1.0 .....1.1 ..........1.1.1 ..........1.1.2 .....1.2 ..........1.2.1 ..........1.2.2 .....1.3 ..........1.3.1 ..........1.3.2 2.0 .....2.1 ..........2.1.1 ..........2.1.2 .....2.2 ..........2.2.1 ..........2.2.2 .....2.3 ..........2.3.1 ..........2.3.2 Now I have a drop down main menu as 1.0 and 2.0. I want that when i click on 1.0 all the nodes of 1.0 should be opened and 2.0 should be closed and similarly when i click on 2.0 all its child nodes should be opened and 1.0 should be closed. What happen with most extensions is that at a time only one child is opened. If i click on 1.0 then only 1.1 or 1.2 or 1.3 will remain open at a time. Does this kind of customization can be done or is available in javascript .... I hope i will be helped... Thanks a lot for the time. Hi everyone, I've downloaded the curvy corners codes from the following address: http://www.curvycorners.net/downloads/ The instructions in the curvycorners.src.js file say that all i need to do is add the following piece of code which I've inserted into the head section: <script type="text/javaScript" src="js/curvycorners.src.js"></script> <style type="text/css"> <!-- p.round { -webkit-border-radius: 25px; -moz-border-radius: 25px; CCborderRadius: 25px; } --> </style> However, it's not rendering in opera and internet explorer. I wondered if someone could tell me where I'm going wrong? The is the xhtml I'm targeting: Code: <div id="content_wrapper">
<div class="accomm">
<h3 id="accomm"><a href="#" title="Quality accommodation"> Quality accommodation</a></h3>
<p class="round">lam et deliciisqui cor resto il eos verciderit ee litate niam eaqui denihicae dolorio rpore, nisinim aut as eum alitior eriaesti atioreiunde erem is sin expelenet, verae dus, conseribus dit odit remqui volestias exceri ullam, con cullatiamet, ut ipite officil igenem non. <a href="about.php">Learn more...</a></p>
<p id="fees"><a href="fees.php">Fee structure</a></p>
</div>
<div class="local">
<h3 id="local_area"><a href="#" title="Our local area"> Our local area</a></h3>
<p class="round">lam et deliciisqui cor resto il eos verciderit ee litate niam eaqui denihicae dolorio rpore, nisinim aut as eum alitior eriaesti atioreiunde erem is sin expelenet, verae dus, conseribus dit odit remqui volestias exceri ullam, con cullatiamet, ut ipite officil igenem non. <a href="local_area.php">Learn more...</a></p>
<p id="directory"><a href="directory.php">Hospital directory</a></p>
</div>
<div class="welcome">
<h3 id="packages"><a href="#" title="Welcome packages">Welcome packages</a></h3>
<p class="round">lam et deliciisqui cor resto il eos verciderit ee litate niam eaqui denihicae dolorio rpore, nisinim aut as eum alitior eriaesti atioreiunde erem is sin expelenet, verae dus, conseribus dit odit remqui volestias exceri ullam, con cullatiamet, ut ipite officil igenem non. <a href="welcome_packs.php">Learn more...</a></p>
<p id="map"><a href="location_map.php">Find us on the map</a></p>
</div>
</div>
</div>
Really appreciate any help. Hi All, I'm building a featured content slider using AnythingSlider. It works fine in FF, Safari, Chrome, and IE8, but in IE7 it will not show the navigation buttons. Take a look at the site here. The navigation buttons are added by the script in a ul called thumbNav. This ul either doesn't load or can't be seen in IE7. Any help would be greatly appreciated as I've got to have this ready for the client by tonight. If any other info is necessary let me know and I'll provide it. Thanks very much, Mike I have a javascript-run rotating (as in rotating through a series of content, not rotating in a circle) div. Each content div has an image and a bit of text. The title text - bold arial - is really messy, as though it's a badly pixelated image - smudged, almost. the rest of the text - smaller and not bold - isn't bad, but still doesn't match text outwith these divs. it's fine in firefox, chrome, and even IE6!! Does anyone know what's happening in IE7? What I am trying to achieve is when the Input Box value is increased or decreased using the up/down arrows that the new value will be writen to the Canvas, though the code I have works it dosent render properly. I also have a Span Tag absouletly positioned within the canvas which works perfectly but I'd like the Canvas text to work instead. Not sure if it's possible. Code:
<!doctype html>
<html>
<head>
<title></title>
<!------------------------------------- STYLE ------------------------------------->
<style type="text/css">
canvas {
background:#222;
}
#length{
position:absolute;
left:10px;
top:10px;
width:150px;
}
#text_in_canvas{
position:absolute;
left:500px;
top:100px;
width:400px;
font-style: normal;
font-size: 25px;
color: red;
}
</style>
<!------------------------------------- CODE ------------------------------------->
<script type="text/javascript">
var fps = 100;
function draw_canvas() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");//returns drawing functions to allow the user to draw on the canvas.
var width = canvas.scrollWidth;
var height = canvas.scrollHeight;
//
var startPosX = (300); // Start Position from X axis
var startPosY = (height - 50); // Start Position from Y axis
//
var length = document.getElementById("length").value; //Get's value from Text Input Box
var text = "This is the number from Input Box: " + length;
document.getElementById("text_in_canvas").innerHTML= text;
//LEFT BLOCK
context.beginPath();
context.rect(0, 0, 250, height); //position & size of left block
context.fillStyle = 'black'; //background colour
context.fill();
context.lineWidth = 0;
context.strokeStyle = 'red';
context.stroke();
context.closePath();
//TEXT
context.font = 'bold 28px sans-serif'; // set text font
context.textAlign = 'center';
context.fillStyle = '#FFFFFF'; // set text color
context.fillText(text, 548, 50);
}
</script>
</head>
<body onload="draw_canvas()">
<!-- CANVAS STARTS HERE -->
<div id="" style="width:1000px;height:600;margin:auto;position:relative;">
<canvas id="myCanvas" width="1000" height="600" style="border:1px solid #000000;"></canvas>
<!-- FORM BEGINS HERE -->
<form id="my_form">
<label for="length">Outside too Outside Wallplate Measurement (millimeters):</label>
<input type="number" id="length" name="length" step="1" min="0" max="" placeholder="" oninput="JavaScript: draw_canvas()">
</form>
<span id="text_in_canvas"></span>
<!-- FORM END's HERE -->
</div>
<!-- CANVAS END's HERE -->
</body>
</html>
|
|||||||