Does anyone have some css styles and images to apply to jqTree to show the outline of the tree? Something like YUI treeview that shows a dotted border
http://developer.yahoo.com/yui/examples/treeview/default_tree.html
Turns out YUI treeview allows you to use existing html to render.
<script src="scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="scripts/tree.jquery.js" type="text/javascript"></script>
<!-- Required CSS -->
<link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/2.9.0/build/treeview/assets/skins/sam/treeview.css">
<!-- Dependency source file -->
<script src="http://yui.yahooapis.com/2.9.0/build/yahoo-dom-event/yahoo-dom-event.js" ></script>
<!-- Optional dependency source file to decode contents of yuiConfig markup attribute-->
<script src="http://yui.yahooapis.com/2.9.0/build/json/json-min.js" ></script>
<!-- TreeView source file -->
<script src="http://yui.yahooapis.com/2.9.0/build/treeview/treeview-min.js" ></script>
<script>
var tree;
function treeInit() {
tree = new YAHOO.widget.TreeView("committeeTree");
// if required, add nodes here
tree.render();
}
$(function () {
$("#myTree").tree({
data: source
});
treeInit();
});
</script>
Related
I am trying to call the callback on zoom in and zoom out images but the function is not called, please help
$('.materialboxed').materialbox({
onOpenStart: function(){
imgZoomIn()
},
onOpenEnd: function(){
imgZoomOut()
}
});
Do you want something like this?
$('.materialboxed').materialbox();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css" rel="stylesheet" />
<img class="materialboxed" width="650" src="https://www.jqueryscript.net/images/Universal-Placeholder-Text-Lorem-Ipsum-Generator-getlorem.jpg">
Run the code snipped to check.
The following wasn't working for me, so I had to update my materialize references to this, actually I just added with the local materizalize.min files link I had:
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
And then, only initialize like this (for jquery):
$('.materialboxed').materialbox({
inDuration:275,
outDuration:200,
onOpenStart: function() {console.log("onOpenStart");},
onOpenEnd: function() {console.log("onOpenEnd");},
onCloseStart: function() {console.log("onCloseStart");},
onCloseEnd: function() {console.log("onCloseEnd");}
});
I'm trying to use jsTree in AngularJS powered MVC5 school project. To use jsTree in angular app I'm using this directive.
From what I can observe everthing working ok:
- jstree loads correctly data and structure, and fires all events
- jstree loads CSS style (if i change for instance margin in css, it's reflected to jstree, if remove css reference it rendered as ordinary HTML UL)
However it looks like, that rest of layout doesnt work:
- no background change, when i move cursor over node
- no conectors, no node images, no arrows
From what i was able to find it looks like that css is not using images referenced in it:
background-image: url("data:image/gif;base64,R0lGODlhCwAHAIAAACgoKP///yH5BAEAAAEALAAAAAALAAcAAAIORI4JlrqN1oMSnmmZDQUAOw==");
background-image: url("32px.png");
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAACAQMAAAB49I5GAAAABlBMVEUAAAAdHRvEkCwcAAAAAXRSTlMAQObYZgAAAAxJREFUCNdjAAMOBgAAGAAJMwQHdQAAAABJRU5ErkJggg==");
So I tried to use:
bundles.Add(new StyleBundle("~/jstree").Include(
"~/Content/jstree/style.css", new CssRewriteUrlTransform()));
Css with images is placed in same folder:
But that also did not worked. Any ideas? Sugestions?
Rest of the code:
angular.module('JosefinaApp', ['ui.layout', 'JosefinaApp.controllers', 'jsTree.directive']);
angular.module('JosefinaApp.controllers', [])
.controller('TreeViewController', ['$scope', '$location', '$http', function ($scope, $location, $http) {
$location.path('/home');
$http({
method: 'GET',
url: '/api/project/gettasks/1',
}).
success(function (data) {
$scope.treeModel = data;
}).
error(function () {
$scope.test = "Error";
});
$scope.treeViewNodeSelected = function (e, data) {
console.log(data.node.id);
};
}])
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title ng-bind="models.helloAngular"></title>
<script src="#Url.Content("~/Scripts/plugins/jquery.validate.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/plugins/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-2.1.4.min.js")" type="text/javascript"> </script>
<link href="#Url.Content("~/Content/themes/base/all.css")" rel="stylesheet" type="text/css" />
#Styles.Render("~/Content/css")
#Styles.Render("~/jqueryUI")
#Styles.Render("~/uiLayout")
#Styles.Render("~/jstree")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/jqueryUI")
<script src="#Url.Content("~/Scripts/angular.js")" type="text/javascript"> </script>
<script src="#Url.Content("~/Scripts/angular-ui-router.js")" type="text/javascript"> </script>
<script src="#Url.Content("~/Scripts/angular-resource.js")" type="text/javascript"> </script>
<script src="#Url.Content("~/Scripts/angular-ui/ui-layout.js")" type="text/javascript"> </script>
<script src="#Url.Content("~/Scripts/jstree/jstree.js")" type="text/javascript"> </script>
<script src="#Url.Content("~/Scripts/jstree/jsTree.directive.js")" type="text/javascript"> </script>
<script src="#Url.Content("~/Scripts/JosefinaApp.js")" type="text/javascript"> </script>
<script src="#Url.Content("~/Scripts/Controllers/LandingPageController.js")" type="text/javascript"> </script>
<script src="#Url.Content("~/Scripts/Controllers/TreeViewController.js")" type="text/javascript"> </script>
</head>
<body>
<div ng-app="JosefinaApp">
<div ng-controller="TreeViewController">
<js-tree theme="default" tree-events="select_node:treeViewNodeSelected" tree-data="scope" tree-model="treeModel">
</js-tree>
</div>
</div>
#RenderBody()
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
Browser stored images, internet explorer was caching empty images and showing them instead of geting them from server.
... kill me please
On my Site.master file, I have the following in my <head>:
<!-- jQuery library (served from Google) -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<!-- easing Javascript file -->
<script type="text/javascript" src="http://bxslider.com/lib/plugins/jquery.easing.1.3.js"></script>
<!-- bxSlider Javascript file -->
<script type="text/javascript" src="http://bxslider.com/lib/jquery.bxslider.js"></script>
<!-- bxSlider CSS file -->
<link href="lib/jquery.bxslider.css" rel="stylesheet" />
<script>
jQuery(document).ready(function ( $ ) {
$('.slider').bxSlider({
mode: 'horizontal',
infiniteLoop: true,
auto: true,
autoStart: true,
autoDirection: 'next',
autoHover: true,
pause: 3000,
autoControls: false,
pager: true,
pagerType: 'full',
controls: true,
captions: true,
speed: 500
});
});
</script>
What happens is, the little bullets that represent each slide as well as the "prev" and "next" arrows are not using the images they are supposed to. If I change the CSS reference to "http://bxslider.com/lib/jquery.bxslider.css" instead of my own copy, it works FINE. I have all the images and folders in the correctly reference locations.
The issue here is, I want to change some of the CSS, but I can't if I use the external file.
Apparently it needs to be pointed like this:
<!-- jQuery library (served from Google) -->
<script type="text/javascript" src=".//Scripts/jquery-1.10.2.min.js"></script>
<!-- easing Javascript file -->
<script type="text/javascript" src=".//plugins/jquery.easing.1.3.js"></script>
<!-- bxSlider Javascript file -->
<script type="text/javascript" src=".//js/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href=".//lib/jquery.bxslider.css" rel="stylesheet" />
I face a problem when i try to use jqm in my website. A message of 'loading' appears on the bottom of my site. I figured out that it happens since I don't add jqm css. When I add the jqm css everything changes (color layout ect.). How is it possible to remove 'loading' message or add css without conflicts with the main css of my site?
<head>
<link href="css/site.css" rel="stylesheet" />
<!--<link href="css/jquery.mobile-1.3.2.min.css" rel="stylesheet" /> -->
<!-- disable loading msg -->
<script>
$(document).bind("mobileinit", function(){
$.mobile.loadingMessage = false;
});
</script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"> </script>
<script src="scripts/jquery.mobile-1.3.2.min.js"></script>
</head>
I add script in my code. Nothing seems to happen! My problem solved only when i uncomment jqm css code, but then i got many conflicts with the site.css which i dont know how to solve.
To disable jQuery Mobile loading message, you need to override global settings once mobileinit triggers. The code should be placed in head after loading jQuery and before loading jQuery Mobile libraries.
<head>
<script src="jquery.js"></script>
<script>
$(document).on("mobileinit", function () {
$.mobile.loadingMessage = false;
});
</script>
<script src="jquery-mobile.js"></script>
</head>
I have two javascripts that I think are in a conflict. idTabs, which helps me make the navigation and lightbox, which is the photo gallery. I also want to add that I have a 3rd page linked, a PHP SELECT from database page.
this is in my head
<title>Untitled Document</title>
<script type="text/javascript" src="jquery.idTabs.min.js"></script>
<script type="text/javascript" src="lightbox0/js/jquery.js"></script>
<script type="text/javascript" src="lightbox0/js/jquery.lightbox-0.5.js"></script>
> <link rel="stylesheet" type="text/css" href="lightbox0/css/jquery.lightbox-0.5.css" media="screen" />
<script type="text/javascript">
$(function() {
$('#gallery a').lightBox();
});
</script>
I dont understand what the light box doesn work. the id tabs works perfectly but when i click on a page, it doesn have the lightbox effect. i tried with at least 4-5 lightobx versions, the same effect. help ?
idTabs should be loaded after jQuery. Try the following:
<script src="lightbox0/js/jquery.js"></script>
<script src="lightbox0/js/jquery.lightbox-0.5.js"></script>
<script src="jquery.idTabs.min.js"></script>
Sanity Check: Do you have a <div id="gallery"> with links in it in the page?