Seem to be having some issues with the JQRangeSlider. Trying to implement this tool into an MVC project. After the slider is called the alert is never reached. Is there a bug? I have this working in another project in Dreamweaver, though it renders fine in the live preview mode it does not work bringing it to any browser. Here's my code...
ViewBag.Title = "Test";
Layout = "";
}
<html>
<head>
<title>"Slider"</title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/start/jquery- ui.css" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/slider/CSS/classic.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js")" type="text/javascript"></script>
<script src="../../Content/slider/Scripts/jquery-ui-1.8.22.custom.min.js" type="text/javascript"></script>
<script src="#Url.Content("~/Content/slider/Scripts/jQRangeSliderMouseTouch.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Content/slider/Scripts/jQRangeSliderDraggable.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Content/slider/Scripts/jQRangeSliderBar.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Content/slider/Scripts/jQDateRangeSliderHandle.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Content/slider/Scripts/jQRangeSliderLabel.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Content/slider/Scripts/jQEditRangeSliderLabel.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Content/slider/Scripts/jQRangeSlider.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Content/slider/Scripts/jQEditRangeSlider.js")" type="text/javascript"></script>
</head>
<body>
<div class="page-header">
<h2>Test</h2>
</div>
<div id="slider" style="width:200px;"></div>
<input type="text" class="datepicker" />
<script type="text/javascript">
$(function () {
$("#slider").editRangeSlider();
alert("whocareswhateverbye");
});
</script>
</body>
</html>
I think your code is failing at
$("#slider").editRangeSlider();
due to a compatibility issue with jQuery 1.7, so it's never reaching the alert.
It's working fine with jQuery 1.8 as demonstrated here:
http://jsfiddle.net/QwAqy/1/
Related
I am a beginner in Web Developing. I created a login webpage which loads external sources.
Here's my code:
<!DOCTYPE html>
<html>
<head>
<title>
Login
</title>
<link href="http://fonts.googleapis.com/css?family=Lato:100,300,400,700" media="all" rel="stylesheet" type="text/css" />
<link href="stylesheets/bootstrap.min.css" media="all" rel="stylesheet" type="text/css" />
<link href="stylesheets/font-awesome.css" media="all" rel="stylesheet" type="text/css" />
<link href="stylesheets/se7en-font.css" media="all" rel="stylesheet" type="text/css" />
<link href="stylesheets/style.css" media="all" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"></script>
<script src="javascripts/bootstrap.min.js" type="text/javascript"></script>
<script src="javascripts/raphael.min.js" type="text/javascript"></script>
<script src="javascripts/jquery.mousewheel.js" type="text/javascript"></script>
<script src="javascripts/jquery.vmap.min.js" type="text/javascript"></script>
<script src="javascripts/jquery.vmap.sampledata.js" type="text/javascript"></script>
<script src="javascripts/jquery.vmap.world.js" type="text/javascript"></script>
<script src="javascripts/jquery.bootstrap.wizard.js" type="text/javascript"></script>
<script src="javascripts/fullcalendar.min.js" type="text/javascript"></script>
<script src="javascripts/gcal.js" type="text/javascript"></script>
<script src="javascripts/jquery.dataTables.min.js" type="text/javascript"></script>
<script src="javascripts/datatable-editable.js" type="text/javascript"></script>
<script src="javascripts/jquery.easy-pie-chart.js" type="text/javascript"></script>
<script src="javascripts/excanvas.min.js" type="text/javascript"></script>
<script src="javascripts/jquery.isotope.min.js" type="text/javascript"></script>
<script src="javascripts/masonry.min.js" type="text/javascript"></script>
<script src="javascripts/modernizr.custom.js" type="text/javascript"></script>
<script src="javascripts/jquery.fancybox.pack.js" type="text/javascript"></script>
<script src="javascripts/select2.js" type="text/javascript"></script>
<script src="javascripts/styleswitcher.js" type="text/javascript"></script>
<script src="javascripts/wysiwyg.js" type="text/javascript"></script>
<script src="javascripts/jquery.inputmask.min.js" type="text/javascript"></script>
<script src="javascripts/jquery.validate.js" type="text/javascript"></script>
<script src="javascripts/bootstrap-fileupload.js" type="text/javascript"></script>
<script src="javascripts/bootstrap-datepicker.js" type="text/javascript"></script>
<script src="javascripts/bootstrap-timepicker.js" type="text/javascript"></script>
<script src="javascripts/bootstrap-colorpicker.js" type="text/javascript"></script>
<script src="javascripts/bootstrap-switch.min.js" type="text/javascript"></script>
<script src="javascripts/daterange-picker.js" type="text/javascript"></script>
<script src="javascripts/date.js" type="text/javascript"></script>
<script src="javascripts/morris.min.js" type="text/javascript"></script>
<script src="javascripts/skycons.js" type="text/javascript"></script>
<script src="javascripts/jquery.sparkline.min.js" type="text/javascript"></script>
<script src="javascripts/fitvids.js" type="text/javascript"></script>
<script src="javascripts/main.js" type="text/javascript"></script>
<script src="javascripts/respond.js" type="text/javascript"></script>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
</head>
<body class="login3">
<!-- Login Screen -->
<div class="login-wrapper">
<div class="login-container">
<!-- <img width="230" height="45" src="images/img_wowlamp_login.png" /> -->
<img width="230" height="45" src="images/img_wowlamp_login.png" />
<form action="login.html" method="post">
<div class="form-group">
<input class="form-control" placeholder="User Name" type="text" name="user">
</div>
<div class="form-group">
<input class="form-control" placeholder="Password" type="text" name="password">
</div>
</br>
<font size="2" color="#0000ff"><script>getParameterByName('test')</script></font>
<div class="form-group">
<input class="btn btn-lg btn-primary btn-block" style="margin-top:30px" type="submit" value="Log in">
</div>
</form>
<!-- <font size="2"><font color="#fffff">No account yet?  </font><font color="#FF3838">Sign up here!</font></font> -->
</div> <!-- login-wrapper -->
</div> <!-- login-container -->
<!-- End Login Screen -->
</body>
</html>
As you can see the sources are http. If I load the web page this time. A shield icon will appear on the upper right corner of the browser asking if I need to load unsafe scripts
When I press load unsafe scripts, the web page will appear like this
I tried to change the http to https. But the the web page loaded is still like the one above.
There's nothing inherently unsafe with anything you've done. Your browser is just throwing up that warning as an alert for non computer-savvy people that a website might be trying to do something nefarious... "this page" referring to locahost.
That said, there are ubiquitous bugs with escaping HTML and such that makes it possible for people to inject their own scripts. You can read up on it and make sure to be a responsible web developer, or just use a framework which if it's worth its salt would handle this for you in the most sensible ways tried and tested by the community.
Until then, let me point you towards RequireJS. It's a JavaScript plugin that manages JavaScript files like modules.
You can try downloading them locally and load them, like what you have done for most of the scripts there.
This code is just supposed to print "Hello world" using an AngularJS directive, but instead of that, the page is blank when I load it in my browser.
Here is the HTML:
<!DOCTYPE html>
<html>
<head>
<title>ngClassifieds</title>
</head>
<body ng-app="ngClassifieds" ng-controller="classifiedsCtrl">
<hello-world></hello-world>
<script src="node_modules/angular/angular.js"></script>
<script src="node_modules/angular-animate/angular-animate.js"></script>
<script src="node_modules/angular-aria/angular-aria.js"></script>
<script src="node_modules/angular-material/angular-material.js"></script>
<script src="scripts/app.js"></script>
<script src="components/classifieds.ctr.js"></script>
</body>
</html>
And the app.js:
angular
.module("ngClassifieds", ["ngMaterial"])
.config(function($mdThemingProvider) {
$mdThemingProvider.theme('default')
.primaryPalette('teal')
.accentPalette('orange');
})
.directive("helloWorld", function() {
return {
template : "<h1>Hello world!</h1>"
}
});
The paths in the script elements are correct, there are no typos as far as I'm concerned, and I'm pretty sure nothing is wrong with my port. I'd appreciate any help on what I'm doing wrong!
You are missing the references for the angular-material, because its a dependency,
DEMO
angular
.module("ngClassifieds", ["ngMaterial"])
.directive("helloWorld", function() {
return {
template : "<h1>Hello world!</h1>"
}
});
<!DOCTYPE html>
<html>
<head>
<title>ngClassifieds</title>
<link data-require="angular-material#0.11.0" data-semver="0.11.0" rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.0/angular-material.min.css" />
<script data-require="jquery#*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script data-require="angular.js#*" data-semver="1.4.5" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script data-require="angular-material#0.11.0" data-semver="0.11.0" src="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.0/angular-material.min.js"></script>
<script data-require="angular-animate#1.4.1" data-semver="1.4.1" src="https://code.angularjs.org/1.4.1/angular-animate.js"></script>
<script data-require="angular-aria#1.4.1" data-semver="1.4.1" src="https://code.angularjs.org/1.4.1/angular-aria.js"></script>
</head>
<body ng-app="ngClassifieds">
<hello-world></hello-world>
</body>
</html>
You are not loading Angular-material.js file
.module("ngClassifieds", ["ngMaterial"])
-------------------------------------^
<!-- Angular Material Dependencies -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<!-- Angular Material Javascript now available via Google CDN; version 1.0.7 used here -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.7/angular-material.min.js"></script>
Refere Angular-Material Git-Hub page for more info
This my code.
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href="~/Style/fullcalendar.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="~/Scripts/jquery-1.7.1.min.js" ></script>
<script type="text/javascript" src="~/Scripts/Custom/fullcalendar.js"></script>
<script type="text/javascript" src="~/Scripts/Custom/moment.min.js"></script>
<script>
$(document).ready(function () {
$('#calendar').fullCalendar({
})
});
</script>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
Doing with asp.net MVC project.It nothing show.What happen and what need more in my code?I just follow do with FullCalendar Basic Usage .Thanks.
I have tried to add the fullCalendar jquery to a view in my MVC 4 project. When I try to laod the page there are no errors but the calendar does not appear on the page. I am not sure why it isn't appearing and I have looked at the documentation and it looks like I got everything covered.
Here is my HTML:
#{
ViewBag.Title = "Calendar";
}
<h2>Calendar</h2>
<html>
<head>
<title>Calendar</title>
<link href="#Url.Content("~/Content/fullcalendar.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/fullcalendar.print.css")" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="#Url.Content("/Scripts/moment.min.js")"></script>
<script type="text/javascript" src="#Url.Content("/Scripts/jquery.min.js")"></script>
<script type="text/javascript" src="#Url.Content("/Scripts/jquery-ui.custom.min.js")"></script>
<script type="text/javascript" src="#Url.Content("/Scripts/fullcalendar.min.js")"></script>
<script type="text/javascript">
$("#calendar").fullCalendar({
});
</script>
</head>
<body>
<div id="calendar"></div>
</body>
</html>
HERE IS MY CSS:
#calendar {
width: 900px;
margin: 40px auto;
}
Add refs to the libs you want to use;
<link rel='stylesheet' href='fullcalendar/fullcalendar.css' />
<script src='fullcalendar/lib/jquery.min.js'></script>
<script src='fullcalendar/lib/moment.min.js'></script>
<script src='fullcalendar/fullcalendar.js'></script>
<script type='text/javascript'>
In the code below, the color box is working and the image showing. When I tried to integrate Jcrop with it, it doesn't.
<head runat="server">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js">
</script>
<script src="../colorbox/colorbox/jquery.colorbox.js" type="text/javascript">
</script>
<script src="../jcrop/js/jquery.Jcrop.js" type="text/javascript">
</script>
<link href="../jcrop/css/jquery.Jcrop.css" rel="stylesheet" type="text/css" />
<link href="../colorbox/example1/colorbox.css" rel="stylesheet" type="text/css" />
<script>
$(document).ready(function () {
$(".example1").colorbox();
$(document).bind('cbox_complete', function(){
$('#colorbox .example1').Jcrop();
});
});
</script>
</head>
<body>
<p>
<a href="../jcrop/demos/demo_files/flowers.jpg" class="example1">
crop
</a>
</p>
</body>
Remove the script files to the master / parent page, and this should now work..