I am new to knockout js and
need help.
I want, when I will add number in text box division should resize to that size of pixel.
Following is the code:
<html>
<head>
<style type="text/css">
#myDiv {
border:solid 1px #f00;
}
#myOtherDiv {
border:solid 1px #00f;
width: 150px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.1.0/knockout-min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var viewModel = {
myWidth: ko.observable( '250px'),
anotherDiv: ko.observable('KO is working')
};
ko.applyBindings(viewModel);
});
</script>
</head>
<body>
<div id="myDiv" data-bind="style: { width: myWidth }">
Some Text
</div>
<div id="myOtherDiv">
Some More Text
</div>
<div data-bind="text: anotherDiv"></div>
Enter size<input type = text />
</body>
</html>
You should bind input field tomyWidth property:
Enter size <input type = text data-bind="value: myWidth"/>
Also link to knockout is broken try this one: http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.0.js
Here is a working fiddle: http://jsfiddle.net/wAYqY/
you have to use this link for knockout-2.2.0.js its work
<script src="http://knockoutjs.com/downloads/knockout-2.2.0.js"></script>
Related
Well i'm new to html/js scripting but i'm working on a project and i want to using hyperlink to show/hide divs
for example if i click on first hyperlink it should show div id:1 only and if i click on second hyperlink it should show 2nd div only.
i managed to find an example of what i need on internet but i have no idea,why whatever i try it doesnot work for me
an example of what i need - my fiddle
and this is my code
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top:20px;
}
</style>
</head>
<body>
<body>
Click a button to make it visible:<br /><br />
One
Two
Three
Four<br /><br />
<div id="one">One</div>
<div id="two">Two</div>
<div id="three">Three</div>
<div id="four">Four</div><br/><br/>
</body>
<script>
$("div").hide();
// Show chosen div, and hide all others
$("a").click(function (e)
{
//e.preventDefault();
$("#" + $(this).attr("class")).show().siblings('div').hide();
});
</script>
</body>
</html>
so you ned to include JQuery that's what $() is.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style>
#myDIV {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top:20px;
}
</style>
</head>
<body>
<body>
Click a button to make it visible:<br /><br />
One
Two
Three
Four<br /><br />
<div id="one">One</div>
<div id="two">Two</div>
<div id="three">Three</div>
<div id="four">Four</div><br/><br/>
</body>
<script>
$("div").hide();
// Show chosen div, and hide all others
$("a").click(function (e)
{
//e.preventDefault();
$("#" + $(this).attr("class")).show().siblings('div').hide();
});
</script>
</body>
</html>
It is Working For me on JSFIDDLE. Add jquery library on your local project.
add This on your Head Tag
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
you forget to include $ jquery in you script tag
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top:20px;
}
</style>
</head>
<body>
<body>
Click a button to make it visible:<br /><br />
One
Two
Three
Four<br /><br />
<div id="one">One</div>
<div id="two">Two</div>
<div id="three">Three</div>
<div id="four">Four</div><br/><br/>
</body>
<script
src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
<script>
$("div").hide();
// Show chosen div, and hide all others
$("a").click(function (e)
{
//e.preventDefault();
$("#" + $(this).attr("class")).show().siblings('div').hide();
});
</script>
</body>
</html>
You should add jquery in your project.
You can use a CDN
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
OR
you can include your own copy of library in project.
<script src="path/jquery.min.js"></script>
I want to make an Angular-driven page where input tags are bound to h3 tags in other DIVs.
Here's what my HTML looks like (with Plunker):
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div.square {
background-color: #ccc;
height: 200px;
width: 200px;
margin: 10px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0-rc.2/angular.js"></script>
<script type="text/javascript">
var app= angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
$scope.items= [
{value: ''}
];
$scope.squares= [
{value:''}
];
$scope.addSomething= function(){
$scope.items.push({value:''});
$scope.squares.push({value:''});
};
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<button id="button" ng-click="addSomething()">click me</button>
<div ng-repeat="item in items">
<input type="text" placeholder="Headline" ng-model="item.value">
</div>
<div ng-repeat="square in squares">
<div class="square">
<h3>{{item.value}}</h3>
</div>
</div>
</body>
</html>
Problem: The stuff I type into the input tag does not show up into corresponding h3 tags. When I type into the first input tag, I want the words written to appear in the first h3 tag, and so on for the second, third, etc... But this does not happen.
How do I fix this?
If you want the input to bind to the h3 tag you must bind them to the same array .i.e you don't need both a items array and a squares array.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div.square {
background-color: #ccc;
height: 200px;
width: 200px;
margin: 10px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0-rc.2/angular.js"></script>
<script type="text/javascript">
var app= angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
$scope.items= [
{value: ''}
];
$scope.addSomething= function(){
$scope.items.push({value:''});
};
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<button id="button" ng-click="addSomething()">click me</button>
<div ng-repeat="item in items">
<input type="text" placeholder="Headline" ng-model="item.value">
</div>
<div ng-repeat="item in items">
<div class="square">
<h3>{{item.value}}</h3>
</div>
</div>
</body>
</html>
I am implementing a preview color. When I input a color in the input text box, the preview div will change color. For instance, when the input is #000, the preview div changes to black. But when I start pressing backspace, the preview div does not change color. I put an alert to check the input text box value and it does change to '00' when I start pressing backspace. What am I missing here?
Here is a fiddle of it: https://jsfiddle.net/8atcbfwh/1/
<!-- Jquery code -->
$(document).ready(function() {
$('#test').on('keyup', function(event) {
$('#preview').css('background-color', '#' + $('#test').val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!-- Html code -->
<input id="test"></input>
<div id="preview" style="width: 50px;height:50px;border: 1px solid black"></div>
After #Teemu pointed out the .css probably doesn't attach invalid values, I did another search on stackoverflow and found this: change background color of div with jquery that has an !important tag
Before assigning a color to the preview div, I now clear the background-color and THEN give it the value of the input textbox.
New working fiddle here: https://jsfiddle.net/8atcbfwh/3/
$('#test').on('keyup', function(event) {
$('#preview').css('background-color', '');
$('#preview').css('background-color', '#' + $('#test').val());
$("#color").html('#' + $('#test').val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="test"/>
<div id="preview" style="width: 50px;height:50px;border: 1px solid black;"></div>
<div id="color">
</div>
Hope this can help someone.
This help you :
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<!-- Html code -->
<input id="test">
<div id="preview" style="width: 50px;height:50px;border: 1px solid black"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script>
$('#test').on('keyup', function(event) {
if(event.keyCode == 8)
$('#preview').css('background-color', '');
$('#preview').css('background-color', '#' + $('#test').val());
});
</script>
</body>
</html>
Here is my code,
<html>
<head>
<style>
.containerTitle {
background-color:silver;
text-align:center;
font-family:'Segoe UI';
font-size:18px;
font-weight:bold;
height:30px;
}
</style>
</head>
<body>
<div id="a"/>
</body>
</html>
how to change the background-color in containerTitle style using jquery..
there you go: $(".containerTitle").css("background-color","red");
usage example:
// wait until the DOM tree is loaded
$(document).ready(function(){
// click event handler on <a> tags
$("a").click(function() {
// change the color on click
$(".containerTitle").css("background-color","red");
});
});
.containerTitle {
background: black;
height:100px;
width:100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="containerTitle"></div>
<a href="javascript:;" >change color</a>
try this
$(".containerTitle").css(
"background","#dedede"
);
Add this code to change the style attribute dynamically.
$('.containerTitle').css({'background':'red'})
Like this,
<script>
$(document).ready(function() {
$(".containerTitle ").css("background-color","silver");
});
</script>
and also you should js library in your head section of your code:
<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
and this <div id="a"/> should be like this, <div id="a" ></div>
Im trying to implement a simple plugin that resize image based on a container.
The problem is , I don't understand why it's not resizing my image when I placed it inside a container
This is the simple plugin demo page i'm trying to replicate
https://dl.dropboxusercontent.com/u/6983010/wserv/imgLiquid/examples/imgLiquid.html
This is my Code
<html>
<head>
<link rel="stylesheet" href="css/float.css">
<script type = "text/javascript" src ="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type = "text/javascript" src ="https://raw.github.com/karacas/imgLiquid/master/src/js/imgLiquid-min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".imgLiquidFill").imgLiquid({fill:true, fadeInTime:500});
$(".imgLiquidNoFill").imgLiquid({fill:false});
});
</script>
</head>
<body>
<div class="container" >
<img src="Creek.jpg"/></div>
</div>
</body>
</html>
My CSS
.container {height: 440px; width: 950px; background:#FFFFFF}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Image</title>
<style>
.container{
background-color:#f7f7f7;
border:2px solid #ccc;
margin:10px;
display:inline-block;
}
.imgLiquid {
display:block;
overflow: hidden;
background:transparent url('http://www.lotienes.com/imagenes/loading.gif') no-repeat center center;
}
.imgLiquid img{
visibility:hidden;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"
type="text/javascript"></script>
<script type="text/javascript"
src="https://raw.github.com/karacas/imgLiquid/master/src/js/imgLiquid-min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".imgLiquidFill").imgLiquid({
fill: true,
fadeInTime:200,
horizontalAlign: "center",
verticalAlign: "top"
});
});
</script>
</head>
<body>
<div class="container">
<span class="imgLiquidFill imgLiquid" style="width:250px; height:250px;">
<a href="/media/Woody.jpg" target="_blank" title="test">
<img alt="" src="/media/Woody.jpg"/>
</a>
</span>
</div>
</body>
</html>
Your changing the codes and you forgot to define the imgLiquidFill and imgLiquid in the class which is very important to make this plugin effective. In modifying the codes make sure you didn't forgot anything. Another thing is you can rename the class but make sure you also rename it in the script to make it the same.