I have an html page where I am experimenting with resizable and other ui features for divs created dynamically. The page shows correctly when in a local directory and accessed by IE File > Open. When I tranfer the file to the web server and access by http://localhost/file.html. The resizable grip icons aren't shown. Also, there are css styles that aren't applied.
The div is defined
var index = getCookie("divindex");
if (index == "" || index == null) index = 1;
var divid = "compage"+index;
$("#page").append('<div id="'+divid+'" class="comdiv ui-widget-content"></div>');
$('#'+divid).append('<p class="comhdr editableText ui-widget-header">Sample'+index+'</p>');
$('#'+divid).css('top',50);
$('#'+divid).css('left',50);
$('#'+divid).css('width',150);
$('#'+divid).css('height',150);
$('#'+divid).resizable();
$('#'+divid).draggable();
$('#'+divid).draggable("option", "handle", '.comhdr');
$( '#'+divid+' p').editableText();
This also happens for a static div.
<div id="editdiv" class="comdiv ui-widget-content" style="position: absolute; top: 150px; left: 850px; width:350px;
height:250px; border:1px solid grey;">
<p id="heading" class="comhdr editableText ui-widget-header">Editable</p>
</div>
The libraries in the file are
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/jquery-ui.js"></script>
<link rel="stylesheet" href="ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://jqueryui.com/demos/demos.css">
<style>
.comdiv { position:absolute; padding: 0.5em; border: 1px solid black}
.comhdr { text-align: center; margin: 0; cursor:move; font: 14px bold Georgia; border 1px solid grey; background: grey;}
</style>
<script>
$(function() {
$( "#editdiv" ).resizable();
$( "#editdiv" ).draggable();
$( "#editdiv" ).draggable("option", "handle", '#heading');
});
</script>
Why would the behavior be different between the local file and the web server?
http://jsbin.com/awosup
If I download a copy of jquery/jquery-ui to my web server this fixes the problem. From http://jqueryui.com/download I downloaded stable version 1.8.15 UI lightness theme.
I also had the probelm that the resizable grip isn't showing up along with some other styles not applied. In my case, I found out that I had a css defined which overrode some jquery-ui styles. You can see such things e.g. in Firebug. In my case, I had defined the background for div tags which weighed heavier than the ".ui-icon-gripsmall-diagonal-se" and ".ui-icon" class style definitions.
I did not need to install a local copy of jquery on my web server. CDN version works fine now.
Related
For some reason the internal (:host) styles for the Polymer custom element aren't loading. I'm using the actual fancy_button component from pub (https://pub.dartlang.org/packages/fancy_button).
hello_world.html
<head>
<link rel="import" href="packages/polymer/polymer.html">
<link rel="import" href="packages/fancy_button/fancy_button.html">
<link rel="import" href="../lib/components/first-component/first-component.html">
</head>
<body>
<button is="fancy-button">Wooot!</button>
<script type="application/dart">export 'package:polymer/init.dart';</script>
</body>
fancy_button.html:
<link href='http://fonts.googleapis.com/css?family=Tangerine' rel='stylesheet' type='text/css'>
<polymer-element name="fancy-button" extends="button">
<template>
<style>
:host {
background: linear-gradient(to bottom, #ff5db1 0%,#ef017c 100%);
box-shadow: 10px 10px 5px #888888;
border-radius: 5px;
font-size: 2em;
border: 0;
font-family: 'Tangerine', cursive;
padding: 30px;
}
:host(:hover) {
cursor: pointer;
}
:host(:active) {
font-size: 3em;
}
</style>
<content></content>
</template>
<script type="application/dart" src="fancy_button.dart"></script>
</polymer-element>
I tried your code and it works for me (I get a big pink 'Woot' button, which increases it's size when clicked)
when I comment out this line
<!--<link rel="import" href="../lib/components/first-component/first-component.html">-->
I also had to add
transformers:
- polymer:
entry_points:
- web/hello_world.html
to pubspec.yaml (for dev channel Dart version 1.5.0-edge)
This might be the reason why it work here but not for you
but I can't see anything in CSS that wasn't already supported in Dart 1.4.
I also kept the polymer dependency (0.10.1+1)
I upgraded to the Dartium from the Dev Channel (http://storage.googleapis.com/dart-archive/channels/dev/release/latest/dartium/dartium-macos-ia32-release.zip) and it worked. So styles in Polymer web components don't seem to work in earlier versions of Dartium – either get the Dev Channel version as Günter had suggested or pub build and see it working in regular Chrome instead.
Say I have a custom component with
<head>
<link rel="stylesheet" src="...">
</head>
<body>
<element name="elem">
<template>
<ul class="foo">
...
where the referenced style sheet has an entry
ul .foo {
list-style-type: none;
}
The problem is that I can't get the style to apply to the ul. Nothing I tried works unless I put style attribute on the ul element itself. I have tried putting under with scoped attribute and that doesn't work either. It does a weird thing where the class of the ul becomes "elem_foo".
Thanks for the question! Here's how I do it:
In my main HTML:
<div is="x-click-counter">
In my custom element:
<element name="x-click-counter" constructor="CounterComponent" extends="div">
<template>
<button class="button1" on-click="increment()">Click me</button><br />
<span>(click count: {{count}})</span>
<style scoped>
div[is=x-click-counter] span {
color: red;
}
</style>
</template>
<script type="application/dart" src="xclickcounter.dart"></script>
</element>
There are two things going on here.
1) I use the form of <div is="x-foo"> instead of <x-foo>. I like how the first form is more backwards compatible, and it's more explicit with how I will find the element.
2) I put a <style scoped> inside my <template> tag.
Web UI will see the scope style tag, and generate a CSS file for you. It looks like this:
/* Auto-generated from components style tags. */
/* DO NOT EDIT. */
/* ====================================================
Component x-click-counter stylesheet
==================================================== */
div[is=x-click-counter] span {
color: #f00;
}
Web UI also adds a link to this generated CSS file to your main HTML file.
I am using Grails 2.1.0 and Twitter Bootstrap Plugin 2.1.1 and am encountering an issue with navbar-fixed-top.
In order to get the Navbar fixed to the top of the page to behave correctly during resize, the Twitter Bootstrap Docs states:
Add .navbar-fixed-top and remember to account for the hidden area underneath it by adding at least 40px padding to the . Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.
How can I do this when using the Grails Plugin for Twitter Bootstrap?
Here is what I have tried:
main.gsp
<head>
...
<r:require modules="bootstrap-css"/>
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
.sidebar-nav {
padding: 9px 0;
}
</style>
<r:require modules="bootstrap-responsive-css"/>
<r:layoutResources/>
</head>
The problem is that Grails Plugin for Twitter Bootstrap takes the content of bootstrap.css and bootstrap-responsive.css and combines them into the following merged file: static/bundle-bundle_bootstrap_head.css.
Thus, I am not able to put the body padding style "after core Bootstrap CSS and before Responsive CSS" as per Twitter Bootstrap docs.
Here is the View Source HTML that I get from the main.gsp above
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
.sidebar-nav {
padding: 9px 0;
}
</style>
<link href="/homes/static/bundle-bundle_bootstrap_head.css" type="text/css"
rel="stylesheet" media="screen, projection" />
If there is no way to do this, I could always just drop the Grails Twitter Bootstrap Plugin and manually download Twitter Bootstrap and put it my Grails Project's web-app/css, web-app/images, and web-app/js. However, I would like to be able to use the Grails Twitter Bootstrap Plugin.
Thank you very much in advance, I appreciate it!
Bootstrap recommends that place for the style because when the screen width goes below 980px navbar becomes static (not fixed). So calling bootstrap-responsive.css after the padding prevents from a blank space at the top in mobile devices (there's not fxed element to fill that padding).
You can reproduce this behaviour using a media query:
#media (min-width:980px) {
body {
padding-top: 40px;
}
}
Put this CSS anywhere in your stylesheets, and don't worry about your <links>
Does jQuery UI support showing the number inside the Progressbar, like this:
Not to drudge up an old thread, but I was attempting this earlier tonight and used the following in my CSS:
.progressBarClass{
height:20px;
width:300px;
margin:0 auto;
}
.progressBarClassspan {
width:300px;
position:absolute;
text-align:center;
font-weight:bold;
}
And have the following in my HTML:
<script type="text/javascript">
$(function() {
$( ".progressBarClass" ).progressbar({
value: 50
});
});
</script>
<div class="progressBarClass"><span>50%</span></div>
Does the trick for me, although I need to come up with a better method to allow for percentages on the .ui-progressbar class instead of fixed values.
If it isn't any official way, you can add it. Just inspect the generated code with FireBug on Mozzila, get the id/class of the container and add the numbers in there yourself.
I never used jQuery UI's progressbar so I can't do that right now, but I'm sure it's not hard...
I have a Grails application with a form in it. Once the user has entered the data and submitted it, and it's been validated etc.. I need a message to popup in a little window to give the user some feedback - it needs to popup, rather than be displayed on the page. Can anyone advise me on the best way to do this?
I have implemented the same mechanism for my application, and I am using the jQuery plugin 'smartmodal' (used by the Nimble plugin originally). See here
You simply have to redirect the request in the controller validation code to a GSP page containing the following code:
<script type="text/javascript" src="${resource(file: 'jquery-1.3.2.js')}"></script>
<script type="text/javascript" src="${resource(file:'jquery.smartmodal.js')}"></script>
<LINK rel="stylesheet" href="./css/smartmodal.css">
...
<body>
...
<g:javascript>
$(function() {
$("#msg").hide();
$("#msg").modal({hide_on_overlay_click:false});
$("#msg").modal_show();});
</g:javascript>
<div id="msg">
My feedback message is here
</div>
<g:link controller="..." action="...">Close</g:link>
I hope it helps,
Fabien
EDIT:
An extract of the smartmodal.css file that will render the 'modal effect' is:
#modal_content {
display: none;
position: fixed;
left: 50%;
padding: 0px;
top: 10%;
background: #FFF;
border: 0px solid #d2d2d2;
width: 400px;
margin-left: -200px;
text-align: left;
}
#modal_overlay {
background-color: #000;
}
However if you want the complete file, it is available inside the great Nimble grails plugin