Why the below if statement does not give me the desired results. Every time it just give me a yellow paragraph even though the concerned word does not satisfy the :contains expression. I am pasting the query below.
$(document).ready(function() {
if ($("p:contains(x)")) {
$("p").css("background-color", "yellow");
} else {
$("p").css("background-color", "red");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script src="scripts/jquery-3.2.0.min.js"></script>
<script src="scripts/script.js"></script>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>This is a heading</h1>
<p class="hand">This is a paragraph</p>
<p>glow</p>
<p>The heading, paragraph and button element have a click event defined. Click on each element to display which element triggered the event.</p>
<div style="color:blue;"></div>
</body>
</html>
I couldn't see a reference to the variable x - so I just made it up :). The following determines is the string "glow" is in the p and makes the background yellow. Any p that does not contain "glow" has a background colour of red. I would however suggest adding / removing classes rather than adjusting the CSS directly.
$(document).ready(function(){
$("p:contains('glow')").css("background-color", "yellow");
$("p").not(":contains('glow')").css("background-color", "red");
})
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<h1>This is a heading</h1>
<p class="hand">This is a paragraph</p>
<p>glow</p>
<p>The heading, paragraph and button element have a click event defined. Click on each element to display which element triggered the event.</p>
<div style="color:blue;"></div>
</body>
</html>
you want to use condition means you have to check whether the value of length is greater than 0. other wise you can simply use
$("p").css("background-color", "red");
$("p:contains(glow)").css("background-color", "yellow");
which sets the background color for all paragraph as red and the selected one as yellow
$(document).ready(function() {
if ($("p:contains(glow)").length > 0) {
$("p").css("background-color", "red");
$("p:contains(glow)").css("background-color", "yellow");
} else {
$("p").css("background-color", "red");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>This is a heading</h1>
<p class="hand">This is a paragraph</p>
<p>glow</p>
<p>The heading, paragraph and button element have a click event defined. Click on each element to display which element triggered the event.</p>
<div style="color:blue;"></div>
</body>
</html>
Related
First see this plunker
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
<div style="height:100px;width:100px; background-color:blue" draggable="true"></div>
<input disabled draggable="true"/>
<script>
</script>
</body>
</html>
In Chrome, both the blue square and the text input are draggable.
But in Safari, only the blue square is draggable. The input field does not work.
Is there a work around for Safari? I have tried wrapping the input with dives and making the div draggable and still does not work.
See this Forked Plunker for the functioning work around described below:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<script>
const selectInput = () => {
let target = document.getElementById('input');
target.className = "";
target.focus();
};
const disableInput = () => {
document.getElementById('input').className = "input-disabled";
};
</script>
<style>
.input-disabled {
pointer-events: none;
}
</style>
</head>
<body>
<h1>Hello Plunker!</h1>
<div style="height:100px;width:100px; background-color:blue" draggable="true"></div>
<div draggable="true" onmouseup="selectInput();">
<input id="input" class='input-disabled' onblur="disableInput();" />
</div>
</body>
</html>
The steps are:
Wrap the input in a draggable div
Disable mouse events on the input via the "pointer-events: none;" CSS property
Add an onmouseup callback to the div that selects the input, removes the "pointer-events: none;" CSS property, and assigns the input focus
Add an onblur callback to the input that re-adds the "pointer-events: none;" CSS property such that the div will be draggable again once the user leaves the input field
I want to do text editor and change the texts which is inside the content editable elements and also selected by the user.
my question is:
How to get the selected texts inside the content editable elements?
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="D:\JQueryPath\jquery-3.1.1.js"> </script>
<script type="text/javascript">
$(document).ready(function(){
$("#show").click(function(){
//alert("selected texts");
});
});
</script>
</head>
<body>
<div id="textEditor" style=" border:solid 1px #D31444" contenteditable="true" ></div>
<p></p>
<button id="show">show selected elements</button>
</body>
</html>
This should get you started, although you will need to consider expanding on this code to cater for situations where someone selects outside of your text area and when someone presses the button and nothing is selected.
Oh, and I have console logged the output rather than alerted it.
$(document).ready(function(){
$("#show").click(function(){
range = window.getSelection().getRangeAt(0);
console.log(range.toString());
});
});
You can use window.getSelection() method.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="D:\JQueryPath\jquery-3.1.1.js"> </script>
<script type="text/javascript">
$(document).ready(function(){
$("#show").click(function(){
alert(window.getSelection().toString());
});
});
</script>
</head>
<body>
<div id="textEditor" style=" border:solid 1px #D31444"contenteditable="true" ></div>
<p></p>
<button id="show">show selected elements</button>
</body>
</html>
So I have a button within a paragraph. When the user pushes the button, I want it to change the background color of the specific paragraph it is in. here is the JQuery that I have so far:
$('<button/>',
{
text: "Done",
click: function () {
$("p:first").addClass("first");
$(".first").css({ 'background-color': 'green' });
}
});
My idea is to place the paragraph into a specific class first, then give it a background color. However my button is not working and when I check the console, I do not get any errors. Anything else I can try?
Current button jQuery object at Question does not have p child element.
Try substituting html: for text: ; wrapping "Done" string within <p></p> ; using context at selector within click event to reference this button element ; using .appendTo() to append jQuery object button to document
$("<button/>", {
html: "<p>Done</p>",
click: function() {
$("p:first", this).addClass("first");
}
}).appendTo("body")
.first {
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
You can do it like following. Use closest function to find parent p and css function to change background color.
$("button").click(function () {
$(this).closest('p').css('background-color', 'red');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
<button>Click</button>
</p>
you can do this
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<style>
.myclass
{
background-color: yellow;
}
.newclass
{
background-color: red;
}
</style>
</head>
<body>
<p class="myclass">This is a paragraph.
<button id="changecolor"> change color </button>
</p>
<script>
$('#changecolor').click(function()
{
$(this).parent().removeClass('myclass').addClass('newclass');
}
);
</script>
</body>
</html>
When the user pushes the button, I want it to change the background color of the specific paragraph it is in.
The codes below do the work!
$('p button').click(function(){
$(this).parent('p').css('backgroundColor', 'yellow');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
<button>Click Me</button>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</p>
<p>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
<button>Click Me</button>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</p>
<p>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
<button>Click Me</button>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</p>
I am trying to make a navbar out of text that hides/shows different divs. I want to have it so when you click on one of the options, the text turns red to show that it's been selected, and whatever other item is selected is "unselected". I am fairly new to JavaScript, but I thought the best way to do this is to add a class to it onClick, and remove the class from its siblings onClick. But it's not working—nothing happens onClick. What am I doing wrong?
<html>
<head><title>test</title>
<style>
.reddish { color:red; }
</style>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script type="text/javascript" language="javascript">
function redFunction() {
$( '.navItem' ).addClass( 'reddish' );
}
</script>
</head>
<body>
<p class="navItem" onClick="redFunction()">Option 1</p>
<p class="navItem" onClick="redFunction()">Option 2</p>
<p class="navItem" onClick="redFunction()">Option 3</p>
</body>
</html>
Javascript code should be seperated from css !
<style>
.reddish { color:red; }
</style>
<script type="text/javascript" language="javascript">
function redFunction() { $( "p" ).addClass( 'reddish' ); }
</script>
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
jQuery id selector works only for the first element
I want jquery to select all divs with id = box:
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="css/main.css" type="text/css"/>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="js/sizer.js"></script>
<title>
Design tests
</title>
</head>
<body>
<div id="box" style="width:300px;">
Hallo
</div>
<div id="box" style="width:300px;">
Hallo
</div>
<script>
$(document).ready(function(){
$("#box").mouseenter(function(){ $(this).css("border", "1px gray outset");}).mouseleave(function(){ $(this).css("border", "none");});
});
</script>
</body>
</html>
But it only selects the first one. Can somebody please help me? This isn't difficult is it?
HTML allows only one element with a given id. That's the reason (internally jQuery uses getElementById which returns one element).
From the spec :
id = name [CS]
This attribute assigns a name to an element. This name must be unique in a document.
If you want to select more than one element, use a class, not an id :
<div class="box" style="width:300px;">
Hallo
</div>
<div class="box" style="width:300px;">
Hallo
</div>
<script>
$(document).ready(function(){
$(".box").mouseenter(function(){ $(this).css("border", "1px gray outset");}).mouseleave(function(){ $(this).css("border", "none");});
});
</script>
You cannot have more than 1 same ID, use a class instead
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="css/main.css" type="text/css"/>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="js/sizer.js"></script>
<title>
Design tests
</title>
</head>
<body>
<div class="box" style="width:300px;">
Hallo
</div>
<div class="box" style="width:300px;">
Hallo
</div>
<script>
$(document).ready(function(){
$(".box").mouseenter(function(){ $(this).css("border", "1px gray outset");}).mouseleave(function(){ $(this).css("border", "none");});
});
</script>
</body>
</html>
change your selector to div#box and it'll work like so
$(document).ready(function(){
$("div#box").mouseenter(function(){ $(this).css("border", "1px gray outset");}).mouseleave(function(){ $(this).css("border", "none");});
});
Also note that it's bad practice to have multiple elements with the same id.
​
The syntax $('#box') means go and select the first element whose id matches "box". What you want to do is using class instead or if you insist on using id $('div[id="box"]') will do what you want