I try to put background-color in paragraph through jquery before this i create div and there is two buttons show and hide when click on show div displayed and when click on hide div is hide .. so after this when i try this background-color not visible
check this code
<head>
<title></title>
<meta charset="utf-8" />
<script src="jquery-2.2.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#btnhide").click(function () {
$("#dvmain").hide("slow");
});
$("#btnshow").click(function () {
$("#dvmain").show("slow");
});
});
$document.ready(function () {
$("p").css("background-color", "red");
});
</script>
</head>
<body>
<input type="button" id="btnshow" value="show" />
<input type="button" id="btnhide" value="hide" />
<div id="dvmain" style="width:100%;height:400px;background-color:red;">
</div>
<p>this is paragraph one</p>
<p>this is paragraph two</p>
<p>this is paragraph three</p>
</body>
any solution?
Replace your script like this,
$(document).ready(function () {
$("#btnhide").click(function () {
$("#dvmain").hide("slow");
});
$("#btnshow").click(function () {
$("#dvmain").show("slow");
});
$("p").css("background-color", "red");
});
And remove this part
$document.ready(function () {
$("p").css("background-color", "red");
});
<head>
<title></title>
<meta charset="utf-8" />
<script src="jquery-2.2.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("p").css("background-color", "red");
$("#btnhide").click(function () {
$("#dvmain").hide("slow");
});
$("#btnshow").click(function () {
$("#dvmain").show("slow");
});
});
</script>
</head>
<body>
<input type="button" id="btnshow" value="show" />
<input type="button" id="btnhide" value="hide" />
<div id="dvmain" style="width:100%;height:400px;background-color:red;">
</div>
<p>this is paragraph one</p>
<p>this is paragraph two</p>
<p>this is paragraph three</p>
</body>
Related
I want the background of the div changed where the button is in. Now it changes all at same time and I know why, but I don't know how I can make them work on their own.
When I press the "yes" button in server1, I want the background color of server 1 to be red and when I press the button again, it has to be the original color again. I don't mind if the script is totally different, but I would like to keep the HTML.
// var white = false
// var bgcolor;
// $("button ,yes").click(function () {
// if (white = !white) {
// bgcolor = $(this).css('backgroundColor');
// $(this).css("background-color", "red");
// } else {
// $(this).css("background-color", bgcolor);
// }
// });
var green = false
function toggleStatus()
{
if (green = !green)
{
$("#maindiv .serverstatus ").each(function ()
{
$(this).css("background-color", "red");
});
}
else
{
$("#maindiv .serverstatus").each(function ()
{
$(this).css("background-color", "#639919");
});
}
};
// function updateStatus(){
// $("#maindiv .serverstatus").each(function(){
// $(this).css("background-color", "red");
// });
// }
//
// $( document ).ready(function() {
// updateStatus();
// });
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/layout.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>Grafiek</title>
</head>
<body>
<h1>Server Stats</h1>
<div id="maindiv">
<div id="server1" class="serverstatus">
<h3>(servername1)</h3>
<div>
Status:
</div>
<br>
<div>
Last Checked:
</div>
<div>
Last Online:
</div>
<div>
<button onclick="toggleStatus()">yes</button>
</div>
</div>
<div id="server2" class="serverstatus">
<h3>(servername2)</h3>
<div>
Status:
</div>
<br>
<div>
Last Checked:
</div>
<div>
Last Online:
</div>
<div>
<button onclick="toggleStatus()">yes</button>
</div>
</div>
<div id="server3" class="serverstatus">
<h3>(servername3)</h3>
<div>
Status:
</div>
<br>
<div>
Last Checked:
</div>
<div>
Last Online:
</div>
<div>
<button onclick="toggleStatus()">yes</button>
</div>
</div>
</div>
</body>
</html>
I updated your code with below steps (only changed your code to become working with solution, didnt do the cleanup and refactoring):
toggleStatus function is now accepting server_name and color_name
two parameters
toggleStatus function definition updated to change
the background color for passed server_name
Steps done to change it back on clicking again (based on feedback in comment):
create three css classes with name of your colors to give background
color of same name
update toggleStatus function to toggle the css class of color_name
// var white = false
// var bgcolor;
// $("button ,yes").click(function () {
// if (white = !white) {
// bgcolor = $(this).css('backgroundColor');
// $(this).css("background-color", "red");
// } else {
// $(this).css("background-color", bgcolor);
// }
// });
var green = false
function toggleStatus(server_name,color_name)
{
//$('#'+server_name).css("background-color", color_name);
$('#'+server_name).toggleClass(color_name);
};
// function updateStatus(){
// $("#maindiv .serverstatus").each(function(){
// $(this).css("background-color", "red");
// });
// }
//
// $( document ).ready(function() {
// updateStatus();
// });
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/layout.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>Grafiek</title>
<style>
.red{
background-color:red;
}
.blue{
background-color:blue;
}
.green{
background-color:green;
}
</style>
</head>
<body>
<h1>Server Stats</h1>
<div id="maindiv">
<div id="server1" class="serverstatus">
<h3>(servername1)</h3>
<div>
Status:
</div>
<br>
<div>
Last Checked:
</div>
<div>
Last Online:
</div>
<div>
<button onclick="toggleStatus('server1','red')">yes</button>
</div>
</div>
<div id="server2" class="serverstatus">
<h3>(servername2)</h3>
<div>
Status:
</div>
<br>
<div>
Last Checked:
</div>
<div>
Last Online:
</div>
<div>
<button onclick="toggleStatus('server2','green')">yes</button>
</div>
</div>
<div id="server3" class="serverstatus">
<h3>(servername3)</h3>
<div>
Status:
</div>
<br>
<div>
Last Checked:
</div>
<div>
Last Online:
</div>
<div>
<button onclick="toggleStatus('server3','blue')">yes</button>
</div>
</div>
</div>
</body>
</html>
I tried keeping things as close to original as possible. I've also removed any JQuery code so unless you need it elsewhere you can remove that reference to trim the page a bit.
I've replaced toggleStatus() with toggleStatus(this) so it passes the element (a button in this case) so it can be referenced in the function.
Since your HTML structure is laid out this way:
<div id="server1" class="serverstatus"> <!-- This would be the button's parentNode.parentNode -->
<h3>(servername1)</h3>
<div>
<button onclick="toggleStatus(this)">yes</button>
</div>
</div>
Going up the parent/child tree twice will grab the server# div. That is what is compared in the if/else statement inside the following JavaScript:
function toggleStatus(e)
{
var parentDiv = e.parentNode.parentNode;
var bgColor = parentDiv.style.backgroundColor;
if(bgColor == "green"){
parentDiv.style.backgroundColor = "red";
}
else{
parentDiv.style.backgroundColor = "green";
}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/layout.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<title>Grafiek</title>
</head>
<body>
<h1>Server Stats</h1>
<div id="maindiv">
<div id="server1" class="serverstatus">
<h3>(servername1)</h3>
<div>
Status:
</div>
<br>
<div>
Last Checked:
</div>
<div>
Last Online:
</div>
<div>
<button onclick="toggleStatus(this)">yes</button>
</div>
</div>
<div id="server2" class="serverstatus">
<h3>(servername2)</h3>
<div>
Status:
</div>
<br>
<div>
Last Checked:
</div>
<div>
Last Online:
</div>
<div>
<button onclick="toggleStatus(this)">yes</button>
</div>
</div>
<div id="server3" class="serverstatus">
<h3>(servername3)</h3>
<div>
Status:
</div>
<br>
<div>
Last Checked:
</div>
<div>
Last Online:
</div>
<div>
<button onclick="toggleStatus(this)">yes</button>
</div>
</div>
</div>
</body>
</html>
Well I am not sure if I should be doing your homework, but here is a (not optimal) solution. I would change you HTML too, but I leave that up to you.
This will set all to green and the clicked one to red. There are more elegant solutions
function toggleStatus(e) {
$("#maindiv .serverstatus").each(function ()
{
$(this).css("background-color", "#639919");
});
$(e).parent().parent().css("background-color", "#ff0000");
};
The fade effect being used in the showed Jquery doesn't work, why?
$(function() {
$(document).ready(function() {
$('.Game').fadeIn(500);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text">
<h1 class="Game">Darkness Island</h1>
<h2>Available soon</h2>
<button class="Download">Download</button>
<button class="Details">See details</button>
</div>
What is wrong ?
Add display: none; on "Game" div to start with.
Also keep the script tag at the end of html
$(document).ready(function () {
$('.Game').fadeIn(500);
});
And most impportantly, include jquery in the head tag.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<div class="text">
<h1 class="Game" style="display: none;">Darkness Island</h1>
<h2>Available soon</h2>
<button class="Download">Download</button>
<button class="Details">See details</button>
</div>
<script>
$(document).ready(function () {
$('.Game').fadeIn(500);
});
</script>
Before you can use fadeIn function, the item shouldn't be visible.
this example should work
$(function(){
$(document).ready(function () {
$('.Game').fadeOut();
$('.Game').fadeIn(500);
});
});
If I use insertAfter() id block then textbox is not clickable!
<link href="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery-ui.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#id").click(function() {
$("#id").insertAfter($(".logo"));
});
});
</script>
<body>
<p>This is a paragraph.</p>
<p class="logo">This is another paragraph.</p>
<button>Clone all p elements, and append them to the body element</button>
<div id="id">
<form>
<input type="text" />
</form>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
var clickedOnce = false;
$(document).ready(function(){
$("#id").click(function(){
if(clickedOnce === false) {
$("#id").insertAfter($(".logo"));
clickedOnce = true;
}
});
});
</script>
<body>
<p>This is a paragraph.</p>
<p class="logo">This is another paragraph.</p>
<button>Clone all p elements, and append them to the body element</button>
<div id="id">
<form>
<input type="text" />
</form>
</div>
</body>
This is because you when you clicked the second or more times, it is still inserting #id after .logo and it will make the textbox buggy.
You need to check if the button has been clicked once.
It is Working Check.
<link href="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery-ui.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
var moved = false;
$("#id").click(function() {
if(!moved) {
$("#id").insertAfter($(".logo"));
moved = true;
}
});
});
</script>
<body>
<p>This is a paragraph.</p>
<p class="logo">This is another paragraph.</p>
<button>Clone all p elements, and append them to the body element</button>
<div id="id">
<form>
<input type="text"/>
</form>
</div>
</body>
First of all I will explain how website functions. First of all user clicks on a template and that is pulled from a database into a div. I than have a button and if that button is clicked a div from that pulled template should change a color. I will now further explain that with a code:
Template pulled:
<!DOCTYPE html>
<html>
<head>
<title>Template 1</title>
<link href="http://localhost/fyproject/public/templates/css.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="logo">
<button id="realButton" type="button" class="btn btn-default" ></button>
<input id="logo_upload" type="file" id="files" visbility="hidden" style="opacity: 0;"/>
</div>
<form id="form1" runat="server">
<input type='file' onchange="readURL(this);" />
<img id="blah" src="#" alt="your image" />
</form>
<div contenteditable="true" id="content" class="draggable ui-widget-content refresh"><p>hlo</p></div>
<div id="comments">
<form name="forma">
<textarea name="commentUser" id="commentUser" class="refresh" cols="40" rows="5">
Comments here...
</textarea><br>
<input type="submit" value="Ready!" id="send-data" /><!--onClick="writeComment(e);"-->
<div id ="editTxt" class="refresh" contenteditable="true">
This text can be by the user.
</div>
</div>
</form>
</body>
</html>
Main page where button and template is:
#extends('layouts.master')
#section('title', 'Website Builder')
<script type="text/javascript" src="{!! asset('js/template.js') !!}"></script>
#section('content')
<div class= "container template_class ">
#foreach ($templates as $template)
<a class="content-link" href="{{ asset($template->file )}}">
<img id = "image" src="{{ asset($template->image )}}"/>
</a>
#endforeach
<button id="color">hello</button>
<p>hello</p>
</div>
<div id="content-link2"></div>
</body>
<script type="text/javascript" src="{!! asset('js/template.js') !!}"></script>
</html>
#endsection
#show
So once template is clicked it is inserted inside div id="content-link2"
Jquery:
$(function() {
$('.content-link').click(function(e) {
e.preventDefault();
$('#content-link2').load($(this)[0].href, function() {
$('#content').draggable({
containment: "#content-link2",
scroll: false
});
});
});
return false;
});
$('#h').click(function(e) {
e.preventDefault();
var code = document.getElementById('content-link2').innerHTML;
console.log(code);
});
function writeComment(e) {
var comment = document.forma.commentUser.value;
e.preventDefault();
document.getElementById('comments').innerHTML = comment;
}
document.getElementById("content-link2").onmousedown = function() {mousedown()};
document.getElementById("content-link2").onmouseup = function() {mouseup()};
function mousedown() {
var code2 = document.getElementById("content-link2").innerHTML;
console.log(code2);
}
function mouseup() {
var code2 = document.getElementById("content-link2").innerHTML;
console.log(code2);
}
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah').attr('src', e.target.result);
};
reader.readAsDataURL(input.files[0]);
}
}
$(document).ready ( function(){
$('#color').click(function(){
$('#content-link2 > p').css({"background-color": "yellow", "font-size": "200%"});
});
});
And once button is pressed, whatever is inside div id="content-link2 with p tag I want to apply some css doesn't matter what it is. However now when I click a button nothing happens.
Can someone post some suggestions or solutions?
After you pull the template and render it into the div id="content-link2" call these lines again in your javascript,
$("button").click(function(){
$("p").css({"background-color": "yellow", "font-size": "200%"});
});
try this
$(document).ready ( function(){
$('#color').click(function(){
$('#content-link2 > p').css({"background-color": "yellow", "font-size": "200%"})
});
});
You can use :
$(window).load(function(){
$('body').on("click", 'button', function(){
$("p").css({"background-color": "yellow", "font-size": "200%"});
});
});
I'm new to JQuery and I would want like to know how to apply the .toggle() method only in clicked DIV instead of the all DIVs of the page.
Can anyone help me?
PS: I need implement in the JQuery version 1.4
This is my code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="card.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('#toggle2').live("click", function() {
$('.toggle2').toggle();
return false;
});
});
</script>
</head>
<body>
<div class="card">
Switch Text Toggle<br />
<p class="toggle2">FRONT 1</p>
<p class="toggle2" style="display:none;">BACK 1</p>
</div>
<div class="card">
Switch Text Toggle<br />
<p class="toggle2">FRONT 2</p>
<p class="toggle2" style="display:none;">BACK 2</p>
</div>
</body>
Thanks in advance!
$(function() {
$('#toggle2').live("click", function() {
$(this).parent().find('.toggle2').toggle();
return false;
});
});
ID's are unique, and this will probably only work on the first occurence of #toggle, so you'll need to use classes there as well.
FIDDLE