I am trying to make a simple login page with dojo, I have a button at the moment but it doesn't use the dojo theme. The css works when I copy everything from the theme of claro and make a local css file but it doesn't work when i try to load it from the link.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>Button test</title>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/claro/claro.css ">
</head>
<script src="lib/dojo/dojo.js"></script>
<body class="claro">
<script>
require(["dijit/form/TextBox", "dijit/form/SimpleTextarea", "dojo/parser", "dojo/domReady!"]);
</script>
</body>
<body class="claro">
<button id="Button" data-dojo-type="dijit/form/Button"
data-dojo-props="
iconClass: 'dijitIconNewTask',
showLabel: false,
onClick: function(){ console.log('Second button was clicked!'); }">
Login
</button>
</html>
Related
Datepicker is working if I use it on page "localhost:4444/test" , "localhost:4444/test2" and "localhost:4444/dummy" but if I change the URL to "localhost:4444/test1/test2" then it is not working. I have verified it on multiple times. If there is a child page then datepicker pop-up is not getting displayed.
I tried it even on a basic page without models.
Here I am using thymeleaf, webjars/bootstrap, webjars/jquery, webjars/bootstrap-datepicker.
I am new to frontend , let me know if I am missing anything here or for additional info.
Edit1: In all scenarios at least it is showing up, just problem with pop up
Edit2:
controller:
#RequestMapping("/test") [working]
public String testPage( ){
return "helper/calender_test";
}
#RequestMapping("/test2/dummy") [not-working]
public String dummyPage(){
return "helper/calender_test";
}
helper/calender_test:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8"/>
<meta content="IE=edge" http-equiv="X-UA-Compatible"/>
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<link rel="stylesheet" th:href="#{/webjars/bootstrap/4.5.3/css/bootstrap.min.css}" type="text/css"/>
<link rel="stylesheet" th:href="#{/webjars/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker3.standalone.css}" type="text/css"/>
<link rel="stylesheet" th:href="#{/webjars/font-awesome/5.15.1/css/all.css}" type="text/css"/>
<title>Test</title>
</head>
<body>
<div class="container">
<div class="input-group date" id='example'>
<input class="form-control" type='text' placeholder= "date" />
<span class="input-group-addon">
<span class="input-group-text">
<i class='far fa-calendar-alt'></i>
</span>
</span>
</div>
</div>
<script th:src="#{/webjars/jquery/3.5.1/jquery.min.js/}" type="text/javascript"></script>
<script th:src="#{/webjars/bootstrap/4.5.3/js/bootstrap.min.js}" type="text/javascript"></script>
<script th:src="#{webjars/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.js}" type="text/javascript"></script>
<script>
$('#example').datepicker({
format: 'dd/mm/yyyy',
todayHighlight: true,
autoclose: true,
clearBtn: true,
endDate: '0d',
startDate: '-5y'
});
</script>
</body>
</html>
I have found the root cause. There was one missing slash before the bootstrap-datepicker.js link. After giving the proper path it worked.
This answer: https://stackoverflow.com/a/26198380/4370354 unfortunately doesn't seem to be working for BS4, even after trying André Rocha's answer at the end, so here is my problem:
I am trying to load bootstrap 4 via CDN, but have a fallback to a local CSS file in place, just in case.
The below code results in the bootstrap 4 css file being loaded twice, but I would like it to be loaded only once.
here is what I have (pretty much the same as in the answer above) The fallback function for the CSS file is at the very end:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Bootstrap 4.1.1 CSS CDN -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<title>Home | phpMIDAS viewer</title>
</head>
<body>
<!-- jQuery 3.3.1 CDN -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<!-- Bootstrap 4.1.1 JS CDN -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" ></script>
<!-- Bootstrap 4.1.1 JS local fallback -->
<script>if(typeof($.fn.modal) === 'undefined') {document.write('<script src="bootstrap/js/bootstrap.min.js"><\/script>')}</script>
<!-- Bootstrap 4.1.1 CSS local fallback -->
<div id="bootstrapCssTest" class="hidden"></div>
<script>
$(function() {
if ($('#bootstrapCssTest').is(":visible")) {
$("head").prepend('<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">');
}
});
</script>
</body>
</html>
After experimenting further, I figured out that all I needed to do was to replace class="hidden" with class="collapse".
Here the corrected code, in case someone wants to see/use it:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Bootstrap 4.1.1 CSS CDN -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<title>Home | phpMIDAS viewer</title>
</head>
<body>
<!-- jQuery 3.3.1 CDN -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<!-- Bootstrap 4.1.1 JS CDN -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" ></script>
<!-- Bootstrap 4.1.1 JS local fallback -->
<script>if(typeof($.fn.modal) === 'undefined') {document.write('<script src="bootstrap/js/bootstrap.min.js"><\/script>')}</script>
<!-- Bootstrap 4.1.1 CSS local fallback -->
<div id="bootstrapCssTest" class="collapse"></div>
<script>
$(function() {
if ($('#bootstrapCssTest').is(":visible")) {
$("head").prepend('<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">');
}
});
</script>
</body>
</html>
In brackets now I can only code jQuery inside the lines of my html file.
But now I want to code jQuery in another file, but of course I stall want that it interact with the html, for example that I can still target the divs:
$(".navbar")
HTML File :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Test</title>
<meta name="description" content="Test">
<link rel="stylesheet" href="main.css">
<script src="https://code.jquery.com/jquery.js"></script>
<script type="text/javscript" src="Javascript.js"</script>
</head>
<body>
<div class="navbar">
<p>Hello</p>
</div>
</body>
JS File :
$(document).ready(function(){
$(".navbar").click(function(){
$(".navbar").hide();
});
});
Apparently the reason why I can't have the jQuery-code in another file is a glitch in Brackets.
I've created a simple layout using grails default layout pattern.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title><g:layoutTitle default="my website" /></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" href="${resource(dir: 'images', file: 'favicon.ico')}" type="image/x-icon" />
<link rel="stylesheet" href="${resource(dir: 'css', file: 'main.css')}" type="text/css" />
<g:layoutHead />
<r:layoutResources />
</head>
<body id="mainContainer">
<g:render template="/templates/headerTemplate"></g:render>
<g:render template="/templates/menuTemplate"></g:render>
<g:layoutBody />
<r:layoutResources />
</body>
</html>
Now so far as I understand the <g:layoutBody /> renders the body content. (Please correct me if I'm mistaken). Now I've applied custom styling to the <body> tag of each pages. But that styling is not being applied to my rendered view. Eg. I've an image which I want to apply to the body. But that is not being applied. When I insert a div inside the body and apply the same image to it, its getting applied to it.
<!DOCTYPE html>
<html>
<head>
<meta name="layout" content="mainLayout"/>
<title>Match List</title>
<script type="text/javascript" src="${resource(dir:'js',file:'matchDetailsJS.js')}"></script>
</head>
<body class="myclass"> </body>
</html>
My css file is getting included as my styling is being applied to other elements.
What am I missing? Is something wrong with my g:layout? I tried finding in the documentation but so far did'nt find anything much.
Let me know if my question is not clear.
Thanking you!!
I suspect this is because the layout needs to understand you have properties that you wish to supply for the body tag. The Grails documentation has a good example about using page property to specify an onload attribute of the body tag.
Here is the example modified for your needs.
layout
<title><g:layoutTitle default="my website" /></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" href="${resource(dir: 'images', file: 'favicon.ico')}" type="image/x-icon" />
<link rel="stylesheet" href="${resource(dir: 'css', file: 'main.css')}" type="text/css" />
<g:layoutHead />
<r:layoutResources />
</head>
<body id="mainContainer" class="${pageProperty(name:'body.class')">
<g:render template="/templates/headerTemplate"></g:render>
<g:render template="/templates/menuTemplate"></g:render>
<g:layoutBody />
<r:layoutResources />
</body>
I am using a jquery plugin nicescroll
I am loading different pages via iframe to a section of the div (i have to use iframes to sandbox the iframe content )
I have created this small page and i am having two issues?
1) if i try to scroll by touching the iframe content nothing moves, i have to touch outside the iframe to scroll it
2) it scrolls very slow and uneven.
I have hardcoded the width to work on the scrolling. I am going to have to resize the width after load once i have this initial problem fixed.
Thanks for any help
This is the simple page
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes, maximum-scale=1.0, minimum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="/inc/jquery.mobile-1.3.1/jquery.mobile-1.3.1.min.css">
<!-- jQuery and jQuery Mobile -->
<script src="/inc/js/jquery-1.9.1.min.js"></script>
<script src="/inc/js/jquery.validate.min.js"></script>
<script src="/inc/js/jquery.cookie.js"></script>
<script src="/inc/jquery.mobile-1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script type="application/javascript" src="/inc/js/jquery.nicescroll.min.js"></script>
<script type="text/javascript">
$( document ).on( "pageinit", "#test", function( event ) {
$("#viewportdiv").niceScroll("#wrapper");
});
</script>
</head>
<body>
<div data-role="page" id="test">
<div data-role="header">
<h1>My Title</h1>
</div>
<div data-role="content" id="viewportdiv">
<div id="wrapper" style="width:1200px; height: 100%; ">
<ul>
<li>
<iframe id="myiframe" src="http://www.lipsum.com/feed/html" width="1200" height="600" seamless ></iframe>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
In regards to question no1, have you tried the niceScroll option oneaxismousemode:false
So something like this:
$(document).ready(function() {
var nice = $("html").niceScroll(); // The document page (body)
$("#div1").html($("#div1").html()+' '+nice.version);
$(".container-horizontal").niceScroll(".content",{cursorcolor:"#000",cursoropacitymax:0.7,touchbehavior:true,oneaxismousemode:false});
});
p.s. It may help to post an example link