css style "background-position: center; " missed, why?because background will override background-position
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.16/dist/vue.js"></script>
</head>
<body>
<div id="div1" :style="'background-position: center; height:200px;width:300px;background: url('+imgURL +')'"></div>
</body>
<script>
var vm = new Vue({
el: "#div1",
data: {
imgURL: 'https://www.baidu.com/img/bd_logo1.png'
}
});
</script>
</html>
In your CSS you are replacing the background-position with background later on in the rules. If you change background to background-image it will work.
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.16/dist/vue.js"></script>
</head>
<body>
<div id="div1" :style="'background-position: center; height:200px;width:300px;background-image: url('+imgURL +')'"></div>
</body>
<script>
var vm = new Vue({
el: "#div1",
data: {
imgURL: 'https://www.baidu.com/img/bd_logo1.png'
}
});
</script>
</html>
Related
I want to set the width of some elements within container elements in Polymer which is not working as I expected. Here's some small example:
<!doctype html>
<html>
<head>
<base href="https://polygit.org/polymer+:master/webcomponents+:master/shadycss+webcomponents+:master/components/">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="paper-input/paper-input.html">
</head>
<body>
<dom-module id="my-container">
<template>
<paper-input label="Test"></paper-input>
</template>
<script>
class MyContainer extends Polymer.Element {
static get is() {
return 'my-container';
}
}
customElements.define(MyContainer.is, MyContainer);
</script>
</dom-module>
<dom-module id="my-element">
<template>
<style>
#pblock {
width: 50%;
}
</style>
<my-container id="pblock"></my-container>
</template>
<script>
HTMLImports.whenReady(function() {
class MyElement extends Polymer.Element {
static get is() { return 'my-element'; }
}
customElements.define(MyElement.is, MyElement);
});
</script>
</dom-module>
<my-element></my-element>
</body>
</html>
I set the container to 50% width. Since the paper-input within that container is set to width 100%, I thought it considers 100% of its parent, i.e., 50% of the document.
However, the paper-input takes the whole width and does not react to the 50% of the container. How can I set the width (or height) of the container such that the internal element (in this case the paper-input) does use it as a percentual reference?
Thanks for your help!
width: 50%; is not reflecting because your container has display: inline change it to display: block
If you want it to be center aligned give margin-left:auto; margin-right:auto
<!doctype html>
<html>
<head>
<base href="https://polygit.org/polymer+:master/webcomponents+:master/shadycss+webcomponents+:master/components/">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="paper-input/paper-input.html">
</head>
<body>
<dom-module id="my-container">
<template>
<paper-input label="Test"></paper-input>
</template>
<script>
class MyContainer extends Polymer.Element {
static get is() {
return 'my-container';
}
}
customElements.define(MyContainer.is, MyContainer);
</script>
</dom-module>
<dom-module id="my-element">
<template>
<style>
#pblock {
width: 50%;
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
<my-container id="pblock"></my-container>
</template>
<script>
HTMLImports.whenReady(function() {
class MyElement extends Polymer.Element {
static get is() { return 'my-element'; }
}
customElements.define(MyElement.is, MyElement);
});
</script>
</dom-module>
<my-element></my-element>
</body>
</html>
I have an angular material slider that needs to reside inside a div with a dir="rtl" style. However, when ever I add the dir="rtl" tag the slider is getting all messed up (the mouse isn't capturing it correctly and coloring is not accurate).
Here's a full HTML example of the problem:
<html>
<head>
<link rel="stylesheet" href="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.3/angular-material.css">
</head>
<body>
<div ng-app="MyApp" ng-controller="AppCtrl" dir="rtl">
<md-slider min="0" max="255" ng-model="value" aria-label="red" id="red-slider">
</md-slider>
Value: {{value}}
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-messages.min.js"></script>
<script src="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.3/angular-material.js"></script>
<script>
angular.module('MyApp', ['ngMaterial'])
.controller('AppCtrl', function ($scope) {
});
</script>
</body>
I've tried changing the direction of the slider itself and placing it inside another div dir="ltr" but without success.
<html>
<head>
<link rel="stylesheet" href="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.3/angular-material.css">
<style>
[dir=ltr] md-slider .md-thumb {
left: auto;
right: auto;
}
[dir=ltr] md-slider .md-thumb-container {
left: 0;
right: auto;
}
</style>
</head>
<body>
<div ng-app="MyApp" ng-controller="AppCtrl" dir="rtl">
<div dir="ltr">
test
<md-slider min="0" max="255" ng-model="value" aria-label="red" id="red-slider">
</md-slider>
</div>
Value: {{value}}
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-messages.min.js"></script>
<script src="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.3/angular-material.js"></script>
<script>
angular.module('MyApp', ['ngMaterial'])
.controller('AppCtrl', function ($scope) {
});
</script>
</body>
when you override this class it seems to work
<!DOCTYPE html>
<html>
<head>
<title>jQuery Dialog Example</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
</head>
<script>
$(document).ready($(function() {
//Dialog box
$("#dialog").dialog({
autoOpen: false
});
//button to open dialog box
$("#button").click(function(event) {
$("#dialog").dialog("open");
});
});
</script>
<body>
//div containing info about the dialog box
<div id="dialog">
<p>This is supposed to be a calculator</p>
</div>
<input id="button" type="submit" value="Open">
</body>
</html>
Change $(document).ready($(function() { to $(document).ready(function() {
and also check if the braces are properly closed
I am trying to use the jquery-mobile spinner but it doesn't seem to work
From the official docs ( http://jquerymobile.com/demos/1.2.0/docs/pages/loader.html ), i tryied running this in the chrome console and it works
$.mobile.loading( 'show', {
text: 'foo',
textVisible: true,
theme: 'z',
html: "<i class='icon-spinner icon-4x'></i>"
});
but if i try running this, from application.html.haml or console, doesn't seem to work
$( document ).bind( 'mobileinit', function(){
$.mobile.loader.prototype.options.text = "loading";
$.mobile.loader.prototype.options.textVisible = false;
$.mobile.loader.prototype.options.theme = "a";
$.mobile.loader.prototype.options.html = "<i class='icon-spinner icon-4x'></i>";
});
it displayes a shadow instead of my spinner :-? .
What am i missing here?
Thanks :)
Solution:
Working jsFiddle: http://jsfiddle.net/Gajotres/vdgB5/
Mobileinit event must be initialized before jQuery Mobile is initialized and after jQuery. Also some additional changes to css must be done for this to work.
First of all, we need to override default ui-loader-default class because its opacity is to low and final spinner is hard to see. Change opacity value how ever you want.
.ui-loader-default {
opacity: 1 !important;
}
And this is our spinner. Because you are using custom i tag we need to use display: block, without it spinner will be hidden.
.custom-spinner {
width: 37px !important;
height: 37px !important;
background-image:url('http://pictures.reuters.com/ClientFiles/RTR/Images/ajax-loader.gif');
display: block;
}
Here's a working example:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<style>
.ui-loader-default {
opacity: 1 !important;
}
.custom-spinner {
width: 37px !important;
height: 37px !important;
background-image:url('http://pictures.reuters.com/ClientFiles/RTR/Images/ajax-loader.gif');
opacity: 1 !important;
display: block;
}
</style>
<script type="text/javascript" src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>
<script>
$( document ).bind( 'mobileinit', function(){
$.mobile.loader.prototype.options.text = "loading";
$.mobile.loader.prototype.options.textVisible = false;
$.mobile.loader.prototype.options.theme = "a";
$.mobile.loader.prototype.options.html = "<i class='custom-spinner'></i>";
});
</script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script>
$(document).on('pageshow', '#index', function(){
$.mobile.loading( 'show');
});
</script>
</head>
<body>
<div data-role="page" id="index">
<div data-theme="a" data-role="header">
<h3>
First Page
</h3>
Next
</div>
<div data-role="content">
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
I am developing MVC application with Razor syntax.
I am trying to Slidetoggle the Div, means when I click one Div other div should be expanded.
Its work fine after loading, but why its already expanded when page loads ?
but in my application its already expanded/toggled.
How to solve this ?
#model IEnumerable<CRMEntities.Comment>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<!DOCTYPE html>
<script src="../../Scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
function clearText()
{
document.getElementById('Comment').value = "";
}
</script>
<script src="../../Scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".ShowComments").click(function () {
$(".ParentBlock").slideToggle("slow");
});
});
</script>
<style type="text/css">
div.ParentBlock
{
position:relative;
}
div.ShowComments
{
position:relative;
}
</style>
</head>
<body>
#{
<p class="ShowComments">Show Comments</p>
<div class="ParentBlock">
#foreach (var item in Model)
{
<div id="OwnerName">
<span class="EmpName"> #Html.ActionLink(item.Owner.FullName, "Details", "EMployee", new { id = item.OwnerId }, new { #style = "color:#1A6690;" })</span>
#Html.DisplayFor(ModelItem => item.CommentDateTime)
</div>
<div id="CommentTextBlock">
#Html.DisplayFor(ModelItem => item.CommentText)
</div>
<br />
}
</div>
#Html.TextArea("Comment", "", 5, 80, "asdsd")
<input type="button" value="Add Comment"/>
<input type="button" value="Clear" onclick="clearText()"/>
}
</body>
</html>
The summary of the problem is, Div gets toggled before calling Jscript.
How to avoid it ?
set the divs that should be hidden to hidden with css. this way it will be closed and slide open when you toggle it.