this is my index.php
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="ajax.js"></script>
<script>
$("input").attr("disabled", true);
</script>
</head>
<style>
#click{
background-color:black;
color:white;
width:200px;
}
#content{
background-color:black;
color:white;
width:200px;
}
</style>
<body>
<div id="click" style="cursor:pointer;">
<a onclick="sendRequest('content.php','','content')">click</a>
</div>
<br>
<div id="content">
this is content
</div>
</body>
this is my content.php
<input type="text" />
this is my ajax.js
http://tny.cz/cb20dc87
i want input in the content.php disabled, can someone tell me how to do it ?
Change your content.php to
<input type="text" disabled />
I don't know your sendRequest() function, but here's how you do it with standard jQuery:
$('#content').load('content.php', function() {
$("#content input").attr("disabled", true);
});
The callback function runs after the AJAX call completes. Presumably your ajax.js provides similar functionality.
Related
hello I would like to know how I can add text and image inside a UI widget I also want it to be without a background please help I want to be able to write my own text and display while I'm writing it.
CSS
.thumbs img{
margin:3px;
width:50px;
float:left;
}
.bottlesWrapper img{
margin:3px;
width:400px;
float:left;
}
#main { border:1px solid #eee; margin:20px; width:410px; height:220px;}
HTML
<html>
<head>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>UI widget</title><link rel="stylesheet"
href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet"
href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
</head>
<body>
<form method="post" action="<?php echo $PHP_SELF;?>">
<textarea rows="5" cols="20" name="quote" wrap="physical">Enter your favorite quote!</textarea><br />
<input type="submit" value="submit" name="submit">
</form>
<div id='main'>
<div class="bottlesWrapper">
<div id="dialog" class="ui-widget-content">
<?
echo "<i>".$quote."</i><br />";
?>
</div>
<img src="http://placehold.it/300x160/f1f" />
</div>
<div class="thumbs">
<img src="http://placehold.it/300x180/444" />
<img src="http://placehold.it/300x160/f1f" />
</div></div>
</body>
</html>
Script
$('.thumbs img').click(function() {
var thmb = this;
var src = this.src;
$(thmb).parent('.thumbs').prev('.bottlesWrapper').find('img').fadeout (400,function(){
thmb.src = this.src;
$(this).fadeIn(400)[0].src = src;
});
});
</script> <script>
$("#dialog").dialog({
open: function(event, ui) {
var vDlg = $(event.target).parent();
var vCont = $('#main');
vDlg.draggable("option", "containment", vCont).appendTo(vCont);
$(this).dialog("option", "position", "center");
}
});
https://jsfiddle.net/barronfidel7/c1yfj0wv/
Your working fiddle.
This is what allows you to see the HTML in the UI widget as you type:
$(document).ready(function(){
$('#dialog').html($('#quote').val());
$('#quote').on('keyup', function(){
$('#dialog').html($(this).val());
});
});
While the input has focus, it assigns the HTML of the widget to it's own value after every keyup event.
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>
I am trying to allow a user to click in a textarea and when they start typing it shows an initially hidden div. Here is my script and html, but this does not work, not sure where I am going wrong.
<head>
<script type="text/javascript">
document.getElementById("showPanel").onclick = function() {
document.getElementById("thePanel").style.visibility = "visible";
}
</script>
</head>
<body>
<textarea name="showPanel" rows="2" cols="35" style="position:absolute; left:0px; top:0px; width:300px; height:50px;"></textarea>
<div id="thePanel" style="position:absolute;left:0px;top:100px;width:300px;height:200px;background: red; visibility:hidden;">
</div>
</body>
</html>
Just some minor changes based on what the guys have commented on above.
Added an id to the textarea
Moved JS script so that the the elements exist before you call the JS.
<html>
<head>
</head>
<body>
<textarea name="showPanel" id="showPanel" rows="2" cols="35" style="position:absolute; left:0px; top:0px; width:300px; height:50px;"></textarea>
<div id="thePanel" style="position:absolute;left:0px;top:100px;width:300px;height:200px;background: red; visibility:hidden;">
</div>
<script type="text/javascript">
document.getElementById("showPanel").onclick = function() {
document.getElementById("thePanel").style.visibility = "visible";
}
</script>
</body>
</html>
I want to show the div with id #flower when clicking on the link with id #button but it doesnt work. Heres is the code i wrote.. i made also a jsbin page to show you
any suggestions?
http://jsbin.com/xefanaji/3/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="front">
<div><p>Button</p></div>
</div>
<div id="flower">
<img src="http://2.bp.blogspot.com/-Gaz8V9dP5O0/UUjtKJPofuI/AAAAAAAALDQ/boET2Ns34aU/s320/blooming-flowers-35.jpg" alt="flower"/>
</div>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
$(document).ready(
function(){
$("#button").click(function () {
$("#flower").show("slow");
});
});
</script>
</body>
</html>
css
#button{
position:relative;
height:30px;
width:60px;
background-color:lightyellow;
left:40px;
top:40px;
}
#flower{
display:none;
position:relative;
top:-600px;
left:50px;
z-index:0;
}
#front {
z-index:1;
position:relative;
top:100px;
height:600px;
width:100%;
background-color:lightblue;
}
if i am not wrong.. you need to add id to your button ,if (<a ..>Button</a>) is the element you are talking about.
<div><p>Button</p></div>
//-^^^^^^^^^^----here
$("#button").click(function (e) {
e.preventDefault();
$("#flower").show("slow");
});
with CSS you have, i am sure you forget to add id to that a link
well few more thing,
always load script in your <head> section, and you don't need to add src in script tag
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
..
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
....
....
<script>
$(document).ready(
function(){
$("#button").click(function () {
$("#flower").show("slow");
});
});
</script>
Try this
<div id="front">
<div><p><a id="button" href="">Button</a></p></div>
</div>
<div id="flower">
<img src="http://2.bp.blogspot.com/-Gaz8V9dP5O0/UUjtKJPofuI/AAAAAAAALDQ/boET2Ns34aU/s320/blooming-flowers-35.jpg" alt="flower"/>
</div>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(document).ready(
function(){
$("#button").click(function (e) {
e.preventDefault();
$("#flower").show("slow");
});
});
</script>
DEMO
Put the jQuery library in the head section of your document like below
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
If you need button you can use span instead of anchor e.g.
<span class="button">Button</span>
then add a little styling
.button {
font-size: 12px;
color: #333;
}
.button:hover {
color: #ddd;
}
and then put this script just before </body> tag
<script>
$(function() {
$(".button").click(function () {
$("#flower").show("slow");
});
});
</script>
You could use the revised jQuery below to accomplish this, the reason your code isnt working is because your link doesnt have the id button set.
$('#front a:first').on('click',function(e){
e.preventDefault();
$('#flower').show();
})
You are missing id #button for that link.
<a id="button" href="">Button</a>
Thanks ALOT guys! I've got it working now, thank you!
I have a hopefully easy question:
This: http://jsfiddle.net/gSAjV/2/
is what I want to achieve, but I can't seem to get it working.
I'm all new to javascript, so I'm not sure how to properly put the script in the html document.
I have tried the <script type="text/javascript"> and others, but it just doesn't work.
So i wondered if anyone would take the time to put it in a html document and get it working, and ofcourse posting the entire code. I would be very greatfull!
my doc:
<html>
<head>
<style>
.parentDiv{
border:1px solid black;
padding:10px;
width: 80px;
margin:5px;
display:relative;
}
.childDiv{
border:1px solid blue;
height: 50px;
margin:10px;
}
</style>
<script type='text/javascript'>
$('.childDiv').click(function(){
$(this)
.css('background-color','#00ff66')
.siblings()
.css('background-color','#ffffff');
});
</script>
</head>
<body>
<div id="divParent1" class="parentDiv">
Group 1
<div id="child1" class="childDiv">
Child 1
</div>
<div id="child2" class="childDiv">
Child 2
</div>
</div>
<div id="divParent2" class="parentDiv">
Group 2
<div id="child1" class="childDiv">
Child 1
</div>
<div id="child2" class="childDiv">
Child 2
</div>
</div>
</body>
</html>
Put this somewhere in your html file:
<script type="text/javascript">
$(document).ready(function() {
$('.childDiv').click(function(){
$(this).parent().find('.childDiv').css('background-color','#ffffff');
$(this).css('background-color','#ff0000');
});
});
</script>
You can put it more or less anywhere, but just before the </body> tag would be a good place.
And as #MarkK has rightly pointed out, you need to reference the jQuery library itself.
This goes between <head> and </head>:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
In jsfiddle, you can right-click on the Results pane and View Source. This will give you the exact html that produces the result.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.4.min.js'></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type='text/css'>
.parentDiv{
border:1px solid black;
padding:10px;
width: 80px;
margin:5px;
display:relative;
}
.childDiv{
border:1px solid blue;
height: 50px;
margin:10px;
}
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$('.childDiv').click(function(){
$(this).parent().find('.childDiv').css('background-color','#ffffff');
$(this).css('background-color','#ff0000');
});
});//]]>
</script>
</head>
<body>
<div id="divParent1" class="parentDiv">
Group 1
<div id="child1" class="childDiv">
Child 1
</div>
<div id="child2" class="childDiv">
Child 2
</div>
</div>
<div id="divParent2" class="parentDiv">
Group 2
<div id="child1" class="childDiv">
Child 1
</div>
<div id="child2" class="childDiv">
Child 2
</div>
</div>
</body>
</html>
You just need to import jQuery (the library that contains the $ functions). This is simple, just add
<script src="http.//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
to your HTML, before your other script.
<html>
<head>
<!--inclue jquery - change the path 'src'. the default is jquery.js is on the same location of this html-->
<script type="text/javascript" src="jquery.js"></script>
<sript type="text/javascript">
jQuery().ready(function($){
$('.childDiv').click(function(){
$(this).parent().find('.childDiv').css('background-color','#ffffff');
$(this).css('background-color','#ff0000');
});
});
</script>
</head>
<body>
<!--the content paste your html here-->
</body>
</html>