I'm trying to combine the tree display library jstree and a re-sizable plane splitter, Splitter.js library and am having problems.
The splitter library is at http://methvin.com/splitter/ . jstree is available from http://www.jstree.com/
I'm aiming for the tree to appear on the left and the content to appear on the right.
Both libraries work on their own but when I can't figure out how to combine them. The way each positions elements seems to conflict.
What I currently have is
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="../styles/splitterStyle.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SOPs jsTree</title>
<script type="text/javascript" src="../_lib/jquery.js"></script>
<script type="text/javascript" src="../_lib/splitter.js"></script>
<script type="text/javascript" src="../jquery.jstree.js"></script>
<script>
jQuery(function($) {
$('#elContainer').jstree({core : { animation : 50 }});
// Breaks if this is added
// $("#MySplitter").splitter();
});
</script>
<script>
$().ready(function() {
// Also breaks if this is added
// $("#MySplitter").splitter();
});
</script>
</head>
<body>
<div id="MySplitter">
<div id="elContainer">
<ul>
<li id="phtml_1">treeRoot
<ul>
<li id="phtml_2">leaf node</li>
<ul>
<li id="phtml_3">another leaf</li>
</ul>
</ul>
</li>
</ul>
</div>
<div id="content">
Some content
</div>
</div>
</body>
</html>
It looks like there is a problem with splitter and later versions of jquery.
This question discusses the issue:
Splitter.js won't work with new versions of jQuery
The answer from SpYk3HH refers to using jquery layout. This works. The code below shows an example.
<!DOCTYPE html>
<html>
<head>
<title>Layout Example</title>
<script type="text/javascript" src="_lib/jquery.js"></script>
<script type="text/javascript" src="_lib/jquery-ui-latest.js"></script>
<script type="text/javascript" src="_lib/jquery.layout-latest.js"></script>
<script type="text/javascript" src="jquery.jstree.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('body').layout({ applyDemoStyles: true });
$('#elContainer').jstree({core : { animation : 50 }});
});
</script>
<script type="text/javascript">
jQuery(function($) {
$('#elContainer').jstree({core : { animation : 50 }});
});
</script>
</head>
<body>
<div class="ui-layout-center">Center content.</div>
<div class="ui-layout-north">North</div>
<div class="ui-layout-west">
<div id="elContainer">
<ul>
<li id="phtml_1">treeRoot
<ul>
<li id="phtml_2">leaf node</li>
<ul>
<li id="phtml_3">another leaf</li>
</ul>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
Related
This is my html for a dropdown menu. Initially, in CSS the menu is on display: none; .
<!doctype html>
<html>
<head>
<title>DropDown Menu</title>
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>DropDown Menu</h1>
<div id="menuButton" >Menu Button</div>
<div>
<ul id="dropdown">
<li>
Home</a>
</li>
<li>
Services</a>
</li>
<li>
About</a>
</li>
<li>
Contact</a>
</li>
<li>
Partners</a>
</li>
</ul>
</div>
<!-- Load the CDN first -->
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<!-- If CDN fails to load, serve up the local version -->
<script>window.jQuery || document.write('<script src="js/jquery-2.1.4.js"><\/script>');</script>
<script src="js/script.js"></script>
</body>
</html>
And this is my jQuery script:
// script.js
$(function () {
$( "#menuButton" ).click(function() {
$( "#dropdown" ).slideToggle();
});
});
The above jQuery does not work. However, if, inside the div I add a <p> tag with id= menuButton, it works perfectly fine. Could anyone please help me with this? I have been struggling for a while.
check this fiddle, I have corrected some issues in your markup such as making
Home</a>
to
Home
Your code work fine otherwise
There are a few problems in your code:
1. Wait for DOM
The problem is that your script is probably executed before the DOM is ready. You should trigger the script only once document is ready - i.e.:
$(document).ready(function() {
$( "#menuButton" ).click(function() {
$( "#dropdown" ).slideToggle();
});
});
Otherwise you are trying to add a click handler to a not-yet-existing #menuButton.
2. Fix the <a> tags
The following line of code
Home</a>
Should become:
Home
Do the same fix for other anchor tags as well.
Other than the markup issues in HTML, your code runs just fine as I have checked it via Jsfiddle https://jsfiddle.net/bryomckim/pmw7xjwf/
js
$(function () {
$( "#menuButton" ).click(function() {
$( "#dropdown" ).slideToggle();
});
});
css
#dropdown {
display: none;
}
<!doctype html>
<html>
<head>
<title>DropDown Menu</title>
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="style.css">
<!-- Load the CDN first -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<h1>DropDown Menu</h1>
<div id="menuButton" >Menu Button</div>
<div>
<ul id="dropdown">
<li>
Home</a>
</li>
<li>
Services</a>
</li>
<li>
About</a>
</li>
<li>
Contact</a>
</li>
<li>
Partners</a>
</li>
</ul>
</div>
</body>
</html>
I've found this jQuery show submenu if parent have been clicked but when I tried to incorporate it to my pre-made HTML page, the code does not seem to worked in a sense that it shows the submenu right away and it does not toggle to hide the sub menus, I have tried to create a separate JSP file and link it to my main HTML page but it does not work
<script src="test.js"></script>
so I just added this script below to my HTML page, which does not work as well
<script>
$('.sub-menu').hide();
$("li:has(ul)").click(function(){
$("ul",this).toggle('slow');
});
</script>
I am not well versed with JS coding so I would need some guidance on how I can incorporate the codes properly, below is my code where I have added the code that I'm trying to use
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="style.css" />
<script type="text/javascript">
$(document).ready(function(){
$('.sub-menu').hide();
$("li:has(ul)").click(function(){
$("ul",this).toggle('slow');
});
});
</script>
</head>
<body class="oneColFixCtrHdr">
<div id="container">
<div id="header" style="background-color:#7BD12E">
<h1 align="Left" style="color:#FFF; font-size: 18px;"><strong>Test</strong></h1>
<!-- end #header --></div>
<div id="mainContent">
<ul>
<li>Item</li>
<li>Item
<ul class="sub-menu">
<li>Submenu</li>
<li>Submenu</li>
</ul>
</li>
<li>Item</li>
<li>Item
<ul class="sub-menu">
<li>Submenu</li>
<li>Submenu</li>
</ul>
</li>
<li>Item</li>
</ul>
<!-- end #mainContent -->
</div>
<div id="footer" style="background-color:#7BD12E">
<p style="color:#FFF">Test</p>
<!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>
you need to wrap the jquery in a $(document).ready():
$( document ).ready(function() {
$('.sub-menu').hide();
$("li:has(ul)").click(function(){
$("ul",this).toggle('slow');
});
})
and i would move it to just before your closing </body> tag as well
and as per BrettL's comments, you need to add the jquery library
I have a page where I load another page into this page div section:
<doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>TCS</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery- ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script type="text/javascript" src="http://latex.codecogs.com/latexit.js"></script>
<script type="text/javascript"> LatexIT.add('p',true)</script>
<script>
$(function() {
$( "#tabs" ).tabs();
$( "#tabs-1" ).load("b.html");
$( "#tabs-2" ).load("latex.html");
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li>Start</li>
<li><a href="#tabs-2">Latex/a></li>
<li>aaa</li>
</ul>
<div id="tabs-1">
</div>
<div id="tabs-2">
</div>
<div id="tabs-3">
</div>
</div>
</body>
</html>
So, I load latex.html in it with next code:
<html>
<head>
<script type="text/javascript" src="http://latex.codecogs.com/latexit.js"></script>
<script type="text/javascript">
LatexIT.add('p',true);
</script>
</head>
<body>
<h1><p>Dividing $x^2+1$ by $y^2$ gives \[\frac{x^2+1}{y^2}\]</p></h1>
<p>The british pound is worth 1.5 US\$ or $1.1 \euro$</p>
</body>
</html>
If I load this page separately, I get correct Latex expressions, while if I load it into div I get pure text like [\frac{} and so on. What is the problem and a correct way to make it?
Index page code:
<doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>TCS</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script type="text/javascript" src="http://latex.codecogs.com/latexit.js"></script>
<script type="text/javascript"> LatexIT.add('p',true)</script>
<script>
$(function() {
$( "#tabs" ).tabs();
$( "#tabs-1" ).load("latex.html");
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li>Latext</li>
<li>aaa</li>
</ul>
<div id="tabs-1">
</div>
<div id="tabs-2">
</div>
<div id="tabs-3">
</div>
</div>
</body>
</html>
On latex.html page just put this(i remove all the other html tags):
<h1><p>Dividing $x^2+1$ by $y^2$ gives \[\frac{x^2+1}{y^2}\]</p></h1>
<p>The british pound is worth 1.5 US\$ or $1.1 \euro$</p>
Can you try this:
$( "#tabs-2" ).load("latex.html", function(){
LatexIT.add('p',true);
});
I need some help with a web application I'm building.
I'm using jQuery tabs. I have two pages, index.aspx and login.aspx. You start on the index page and when you log in you come to the login page.
If I'm running Google Chrome the tabs are working on both pages. But if I'm running IE the first page (index.aspx) works perfectly, but when I come to login.aspx the program breaks and jumps to the JavaScript file and there stops.
In the JavaScript file I have the following code:
$(document).ready(function () {
$(function () {
$("#tabs").tabs();
});
});
$(document).ready(function () {
var index = 'key';
var dataStore = window.sessionStorage;
try {
var oldIndex = dataStore.getItem(index);
}
catch (e) {
var oldIndex = 0;
}
$('#tabs').tabs({
active: oldIndex,
activate: function (event, ui) {
var newIndex = ui.newTab.parent().children().index(ui.newTab);
dataStore.setItem(index, newIndex)
}
});
});
It first stops at the bottom function and if I press continue it stops at the top function.
The error message I get is 'Object doesn't support this property or method'
login.aspx:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="login.aspx.cs" Inherits="Projekt.login" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form id="myform" runat="server">
<div id="content-wrapper">
<div id="content">
<div id="tabs">
<ul>
<li>tab1</li>
<li>tab2</li>
<li>tab3</li>
</ul>
<div id="tabs-1">
</div>
<div id="tabs-2">
</div>
<div id="tabs-3">
</div>
</div>
</div>
</div>
<div id="header-wrapper">
<div id="header" style="height: 81px; top: 0px; left: -1px;">
</div>
</div>
<div id="footer-wrapper">
<div id="footer">
</div>
</div>
</form>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<link rel="stylesheet" href="myCSS.css" type="text/css"/>
<script src="JSprojekt.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-2.0.3.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/additional-methods.js" type="text/javascript"></script>
</body>
</html>
Please keep it simple, I'm new to this. Thank you very much!
The problem is here:
<script src="http://code.jquery.com/jquery-2.0.3.js" type="text/javascript"></script>
jquery 2.x doesn't support IE<10
you likely don't need both jquery includes anyway, just remove it.
I apologize if you've already seen this. I'm still struggling a bit with this. I just need to modify the function to load only the colTwo div from the link selected on the menu instead of the entire page.
I see the code from the jquery website:
$('#result').load('ajax/test.html #container');
But I don't understand how to make the function do this.
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My Title</title>
<link href="default.css" rel="stylesheet" type="text/css" />
</head>
<script type="text/javascript" src ='jquery-1.9.1.min.js'></script>
<script type="text/javascript">
$(function(){
$('#menu li a').on('click', function(e){
e.preventDefault();
var page_url=$(this).prop('href');
$('#colTwo').load(page_url);
});
});
</script>
<body>
<div id="header">
<h1>My Title</h1>
</div>
<div id="content">
<div id="colOne">
<div id="menu1">
<ul id="menu">
<li>Members</li>
<li>About</li>
</ul>
</div>
<div class="margin-news">
<h2>Recent Updates</h2>
<p><strong>None At This Time</strong> </p>
</div>
</div>
<div id="colTwo"><h2>Starting Text</h2></div>
<div style="clear: both;"> </div>
</div>
</body>
</html>
Kevin B is correct:
$('#colTwo').load(page_url + ' #colTwo');
Just add the selector as a string to the URL, and don't forget the space!