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
Related
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>
I have div tag with contentEditable = 'true'. When I enter text from my keyboard and then call the undo function (document.execCommand('undo',false, null)), all of the text I entered is deleted. I want to just undo the last character typed. How can I do that?
function doUNDO()
{
document.execCommand('undo',false, null);
}
<!DOCTYPE html>
<html>
<head>
<script src="formulas.js"></script>
<link rel="stylesheet" href="styles.css" type="text/css" media="screen" />
</head>
<body id="main" spellcheck="false">
<span contenteditable="false">
<button onclick="doUNDO()">UNDO</button>
</span>
<div id = "mainDiv"contenteditable="true">a</div>
</body>
</html>
In doUndo() instead of calling execCommand you could just remove the last character from the div, if it is not empty.
E.g.
function doUNDO() {
var mainDIV = document.getElementById('mainDiv')
mainDIV.innerHTML = mainDIV.innerHTML.substr(0, mainDIV.innerHTML.length - 1);
}
When i click one of the buttons i want the paragraphs to change size depending on the button i've clicked. That doesn't seem to work. I've checked everything and with my level of knowledge of jQuery (beginner ) i can't figure it out so i need your help. Here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<input type="button" id="smaller" value="smaller text" />
<input type="button" id="bigger" value="bigger text" />
<p > Some text inside of it.</p>
<p > Some text inside of it too!</p>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="query.js"> </script>
</body>
</html>
jQuery
$('#bigger').click(function() {
$('p').addClass('.bigger');
});
$('#smaller').click(function() {
$('p').addClass('.smaller');
});
CSS
.bigger {
font-size:30px;
background-color:red;
}
.smaller {
font-size:10px;
}
Remove . from addClass() because the function already recognize the string like a class without specifiy the class selector.
try this:
$('#bigger').click(function() {
$('p').addClass('bigger'); //instead of .bigger
});
$('#smaller').click(function() {
$('p').addClass('smaller'); //instead of .smaller
});
DEMO
Remember $.addClass("bigger"); not $.addClass(".bigger");
Demo
http://jsfiddle.net/dieegov/ebGQ2/
http://jsbin.com/OYodAvo/1/edit
Today I was wondering if there's a way to grab a div's class that's already been clicked and mirror the class name to a textbox and set it as the value.
If another div has been clicked, replace it with that one.
Is there anyway to do this in JQuery?
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Grab Element's DIV</title>
<meta charset='utf-8'>
<meta name='viewport' content='initial-scale=1.0'>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.min.js'></script>
</head>
<body>
<div class="container">
<center>
<p>
Grab DIV Class Onclick: <input type="text" id="divclass" placeholder="show class name here" />
</p>
<div class="wrapper">
<div class="im-red"></div>
<div class="blue-foo"></div>
<div class="green-beans"></div>
</div>
</center>
</div>
</body>
</html>
JavaScript:
$(function() {
$(".wrapper div").click(function() {
});
});
I think you are looking for:
$(function() {
$(".wrapper div").click(function() {
$("#divclass").val($(this).attr('class'));
});
});
Live Demo
I'd suggest:
$('.wrapper div').click(function(){
$('#divclass').val(this.className);
});
JS Fiddle demo.
References:
val().
Why could the same action when turned into a function stop working? are there any general rules? here is a very concrete and clear example of this issue.
jQuery Mobile, http://jsbin.com/osovoh/2/edit
in this version, js works well. the label of radio button gets changed instantly.
var radio_elem = $('#edit-new-amount-no-cost');
$("label[for='edit-new-amount-no-cost']").html(radio_elem).append("label changed");
but if you remove the /* s and thus turn the same action into a function triggered by the other button,
function go() {
var radio_elem = $('#edit-new-amount-no-cost');
$("label[for='edit-new-amount-no-cost']").html(radio_elem).append("label changed");
}
the the same code messes formatting of the destination. what's wrong?
If it is inside of the function, the markup change happens AFTER jQuery Mobile renders the page. You'll have to cause jQuery Mobile to re-render the page or element you are modifying.
here is the answer:
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="WORKING: replace text in radiobutton" />
<meta charset=utf-8 />
<title></title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body style="text-align:center">
<div class="form-radios">
<div class="form-item" id="edit-new-amount-no-cost-wrapper">
<label class="option" for="edit-new-amount-no-cost" >
<input type="radio" id="edit-new-amount-no-cost" name="new_amount" value="no_cost" class="form-radio"/>
original label
</label>
</div>
</div>
<input name="click to change the label" type="button" onClick="go()">
<script>
function go(){
$("label[for='edit-new-amount-no-cost'] .ui-btn-text").html("label changed");
}
</script>
</body>
</html>