I need help regarding the script. lightbox works properly but jQuery not working. am totally confused what to do???
<script type="text/javascript" src="js2/prototype.js"></script>
<script type="text/javascript" src="js2/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js2/lightbox_s.js"></script>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script>jQuery.noConflict();</script>
<script>
jQuery(document).ready(function()
jQuery("#menu_btn").mouseover(function() {
jQuery("#menu").stop(true, false).animate({
'bottom': '-10px'
}, 500);
});
jQuery("#menu_btn").mouseout(function() {
jQuery("#menu").stop(true, false).animate({
'bottom': '-50px'
}, 500);
});
jQuery("#menu").mouseover(function() {
jQuery("#menu").stop(true, false).animate({
'bottom': '-10px'
}, 500);
});
jQuery("#menu").mouseout(function() {
jQuery("#menu").stop(true, false).animate({
'bottom': '-50px'
}, 500);
});
});
</script>
I do not have a choice rather I post this question... I have found same thing i.e. jQuery.noConflict() to use but its not working together.
I need help in this regard.
Thanks in advance
The noConflict is secondry.
The main issue here is that jQuery has to be loaded before you include lightbox
<script type="text/javascript" src="js2/prototype.js"></script>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js2/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js2/lightbox_s.js"></script>
First include jquery and include lightbox after that as the latter is dependent on the former.
Related
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
Can anyone please guide me on adding this line of code:
$('.link-all').trigger('click');
to Google translate:
<div id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'de,en,fr', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, multilanguagePage: true}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
I have custom tag which can have itself as an inner tag and I want to bind it its props as data. I can change the first test tag title property and see the change but cannot do that for the inner test tag. I think it is because of the wrong arguments of this.tagCtx.content.render(). Below is the example:
<!DOCTYPE html>
<html>
<head>
<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="js/jsrender.js" type="text/javascript"></script>
<script src="js/jquery.observable.js" type="text/javascript"></script>
<script src="js/jquery.views.js" type="text/javascript"></script>
<script id="testTemplate" type="text/x-jsrender">
<div>{^{>title}}{^{:content}}</div>
</script>
<script id="myTemplate" type="text/x-jsrender">
{^{test title='Test1'}}
{^{test title='Test2'}}
{{/test}}
{{/test}}
</script>
<script type="text/javascript">
$.views.tags({
test: {
render: function(){
this.tagCtx.props.content = this.tagCtx.content.render();
return this.template.render(this.tagCtx.props, this.tagCtx, this.tagCtx.view);
},
template: "#testTemplate"
}
});
$.templates({myTemplate: "#myTemplate"});
$(function () {
$.link.myTemplate('#container', {});
$('#editTitle').click(function () {
$.observable($.view('#container div:first div').data).setProperty('title', prompt());
});
});
</script>
</head>
<body>
<span id="editTitle">EditTitle</span>
<div id="container"></div>
</body>
</html>
The problem here is that the inner tag is being rendered as a string, not as a data-linked tag, since the this.tagCtx.content.render() call is simply calling the render method on the compiled template corresponding to the block content.
If you want to render as a data-linked tag, you need to call this.tagCtx.render().
In addition, in calling this.tagCtx.render() you need the tag to render its content, and not another template. Setting template: "#testTemplate" will cause the tag to use that template instead of the content. So what you need is something along these lines:
var template = $.templates("#testTemplate");
$.views.tags({
test: {
render: function() {
var tagCtx = this.tagCtx;
tagCtx.props.content = tagCtx.render();
return template.render(tagCtx.props, undefined, tagCtx.view);
}
}
});
You probably don't want to pass in tagCtx as context in the template.render(...) call. You can pass in tagCtx.ctx, or simply undefined...
I am trying to use Lightbox plugin but with jquery there is a conflict and gone through some articles and find out to get work around this but I have no luck in implementing it.
Here is my code:
References:
<link href="Lightbox/css/lightbox.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="Lightbox/js/prototype.js"></script>
<script type="text/javascript" src="Lightbox/js/scriptaculous.js?load=effects,builder"> </script>
<script type="text/javascript" src="Lightbox/js/lightbox.js"></script>
Script:
<script type="text/javascript">
jQuery.noConflict();
(function ($) {
$(document).ready(function () {
$("a[rel=lightbox[group1]]").live("click", function () {
$("a[rel^='lightbox[group1]']").lightbox();
return false;
});
});
})(jQuery);
</script>
Any help will be greatly appreciated!
I am using jquery 1.5.2 version
To prevent $ conflicts between jQuery and prototype, you have to put jQuery.noConflict(); right after you include jQuery and before any other code that expects $ to belong to another library. Then, once you've done that, $ will not map to jQuery, it will be used by the other libraries.
You don't show how you include jQuery. Here's an example right from the jQuery doc page for .noConflcit():
<script type="text/javascript" src="other_lib.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$.noConflict();
jQuery(document).ready(function($) {
// Code that uses jQuery's $ can follow here.
});
// Code that uses other library's $ can follow here.
</script>
In your case, I think your code would go like this:
<link href="Lightbox/css/lightbox.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="Lightbox/js/prototype.js"></script>
<script type="text/javascript" src="Lightbox/js/scriptaculous.js?load=effects,builder"> </script>
<script type="text/javascript" src="Lightbox/js/lightbox.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
jQuery.noConflict();
(function ($) {
$(document).ready(function () {
$("a[rel=lightbox[group1]]").live("click", function () {
$("a[rel^='lightbox[group1]']").lightbox();
return false;
});
});
// other jQuery code that uses $ can go here
})(jQuery);
// other jQuery code that uses jQuery (but not $) can go here or in other script tags
</script>
The order of including js files in relation to the call to jQuery.noConflict() is critically important.
You could try using jQuery object instead of $:
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery("a[rel=lightbox[group1]]").live("click", function () {
jQuery("a[rel^='lightbox[group1]']").lightbox();
return false;
});
});
</script>
Everything looks right, so I'm thinking jQuery isn't loaded?
If using jQuery instead of $ doesn't work, then that's probably the case.
If you have the jQuery script in your site header, you'll want check FireBug's net console to see if it loaded - Google Chrome also has a nice network monitor you can use.
You could also use a jQuery lightbox instead of introducing the prototype library just to use a single plugin.
I have a problem to use jquery Plugin/Validation.
I want to add a method and follow the documentation but I think I still missing some thing.
First I add the method but I think I have a problem to implement it.
please check my code and advice me.
<script src="js/jquery-1.4.1.js" type="text/javascript"></script>
<script src="js/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
jQuery.validator.addMethod("domain", function(value, element) {
return this.optional(element) || /^http:\/\/yahoo.com/.test(value);
}, "Please specify the correct domain for your documents");
$("#aspForm").validate();
});
<asp:TextBox ID="TextBox1" runat="server" CssClass="domain" ></asp:TextBox>
</script>
I was able to find the right code for how to implement validation rule:
here is the code:
<script src="js/jquery-1.4.1.js" type="text/javascript"></script>
<script src="js/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">
//Our validation script will go here.
$(document).ready(function() {
jQuery.validator.addMethod("domain", function(value, element) {
return this.optional(element) || /^http:\/\/yahoo.com/.test(value);
}, "Please specify the correct domain for your documents");
//validation implementation will go here.
$("#aspnetForm").validate({
rules: {
"<%=TextBox1.UniqueID %>": {
domain: true
}
}
});
})
</script>