I have this snippet, What I want to do is when you onclick the div it will not be affected by the mouseover and mouseout.. thank you very much for all your help..
<div id="div" onmouseover="over_div()" onmouseout="out_div()" onclick="click_div()" style="width:100px; height:100px; border:2px solid black"></div>
<script>
function click_div(){
document.getElementById("div").style.backgroundColor="red";
}
function over_div(){
document.getElementById("div").style.backgroundColor="green";
}
function out_div(){
document.getElementById("div").style.backgroundColor="white";
}
</script>
You could do something like this:
<div id="div" onmouseover="over_div()" onmouseout="out_div()" onclick="click_div()" style="width:100px; height:100px; border:2px solid black"></div>
<script type="text/javascript">
var isClicked = false;
function click_div(){
isClicked = true;
document.getElementById("div").style.backgroundColor="red";
}
function over_div(){
if(!isClicked )
document.getElementById("div").style.backgroundColor="green";
}
function out_div(){
if(!isClicked )
document.getElementById("div").style.backgroundColor="white";
isClicked = false;
}
</script>
However, using global variable is a bad practice. If you understand the concept of closure, you can use something like this instead :
<div id="div" style="width:100px; height:100px; border:2px solid black"></div>
<script type="text/javascript">
(function()
{
var div = document.getElementById("div");
var isClicked = false;
div.addEventListener("click", function() {
div.style.backgroundColor = "red";
isClicked = true;
});
div.addEventListener("mouseover", function() {
if(!isClicked)
div.style.backgroundColor = "green";
});
div .addEventListener("mouseout", function() {
if(!isClicked)
div.style.backgroundColor = "white";
isClicked = false;
});
}
)();
</script>
Using this, the div and isClicked variables won't be in conflicted with other variable that could have the same name later in your code.
You can't achieve this with events added to the tag of the element. Here is a jsfiddle which works as you want:
http://jsfiddle.net/krasimir/Ru5E5/
Javascript:
var element = document.getElementById("div");
var isClicked = false;
element.addEventListener("click", function() {
isClicked = true;
element.style.backgroundColor="red";
});
element.addEventListener("mouseover", function() {
if(isClicked) return;
element.style.backgroundColor="green";
});
element.addEventListener("mouseout", function() {
if(isClicked) return;
element.style.backgroundColor="white";
});
HTML
<div id="div" style="width:100px; height:100px; border:2px solid black"></div>
Set a global flag up and when you do your on click event set it to 1. In your mouse out event test to see if flag is 1. If it is then don't change the background colour.
If you want the onMouseOver and onMouseOut events to be completely disabled, you can also remove the event handlers from them by adding only two lines of code.
<div id="div" onmouseover="over_div()" onmouseout="out_div()" onclick="click_div()" style="width:100px; height:100px; border:2px solid black"></div>
<script>
function click_div(){
document.getElementById("div").style.backgroundColor="red";
// Disable the other two events
document.getElementById("div").onmouseover=null;
document.getElementById("div").onmouseout=null;
}
function over_div(){
document.getElementById("div").style.backgroundColor="green";
}
function out_div(){
document.getElementById("div").style.backgroundColor="white";
}
</script>
Related
So I have a list of elements that originally have white backgrounds and my goal is when I click one of it it changes color to blue, but only one element can by chosen and have color - if another element was clicked earlier it background return to white
I was trying with this code but it doesn't work
var prevDiv=null
function change_color_to_blue_click(){
if(prevDiv) {
prevDiv.style.backgroundColor = "white";
}
var target = event.currentTarget
target.style.backgroundColor="blue"
selected = true
prevDiv = target;
}
The only thing I can think of is that you didn't pass event into the function.
Was there a reason why you didn't accept an event argument in your function? (Maybe because Internet explorer used to use a global event object.)
This worked for me:
function change_color_to_blue_click(event){
if(prevDiv) {
prevDiv.style.backgroundColor = "white";
}
var target = event.currentTarget
target.style.backgroundColor="blue"
selected = true
prevDiv = target;
}
var prevDiv=null
function changeColor(){
if(prevDiv) {
prevDiv.style.backgroundColor = "white";
}
var target = event.currentTarget
target.style.backgroundColor="blue"
selected = true
prevDiv = target;
}
.box {
width: 50px;
height: 50px;
border: solid black 2px;
margin: 20px;
display: inline-block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="click">
<div onclick="changeColor()" class="box"></div>
<div onclick="changeColor()" class="box"></div>
<div onclick="changeColor()" class="box"></div>
<div onclick="changeColor()" class="box"></div>
</div>
</body>
</html>
var prevDiv = null;
function changeColor() {
var target = event.currentTarget;
if (prevDiv) {
prevDiv.style.backgroundColor = "white";
target.style.backgroundColor = "blue";
prevDiv = target;
} else {
target.style.backgroundColor = "blue";
prevDiv = target;
}
}
I've assigned the same function to 2 different div elements. I'd like the function to determine which div element called the function by it's id. No jquery.
Am just not sure how to compare values with in the I assume would be sufficient if statement.
<head>
<script>
var x = document.getElementById('one')
var y = document.getElementById('two')
function foo(){
if(????){
x.style.color='red'
}
else if(????){
y.style.color='red'
}
}
</script>
<style>
#one, #two{width:50px; height:50px; border: solid black 5px;}
</style>
</head>
<div id='one' onclick='foo()'>hello</div>
<div id='two' onclick='foo()'>world</div>
Basically have div 'one' || 'two' call function foo() and have one of the responsible ID's properties changed.
Pass the event object and get the element through currentTarget:
function foo(e){
const currEl = e.currentTarget;
if (currEl.id === 'one') {
currEl.style.background = 'red';
}
if (currEl.id === 'two') {
currEl.style.background = 'green';
}
}
<div id='one' onclick='foo(event)'>hello</div>
<div id='two' onclick='foo(event)'>world</div>
You can pass the id of the div to foo.
<div id='one' onclick='foo(this.id)'>hello</div>
<div id='two' onclick='foo(this.id)'>world</div>
Then you can use the given id in the function foo like this:
function foo(id) {
document.getElementById(id).style.color = 'red';
}
function foo(id) {
document.getElementById(id).style.color = 'red';
}
#one, #two{width:50px; height:50px; border: solid black 5px;}
<div id='one' onclick='foo(this.id)'>hello</div>
<div id='two' onclick='foo(this.id)'>world</div>
if i'm not mistaken inline js is disencouraged.
you could do like this:
change the html to this:
<div class="mycatchid" id='one' >hello</div>
<div class="mycatchid" id='two' >world</div>
and use this js:
[...document.querySelectorAll('.mycatchid')].forEach(elem =>{
elem.addEventListener('click', function(){
if(this.id == 'one') { console.log(this.id)}
else console.log(this.id);
})
});
some notes, done in es6, can check a live example: https://jsfiddle.net/jrzh9wxL/
The below code snippet shows the invite code when I click "Invite Code". But how do I re-hide the invite code if the same link is clicked again? And can it be done where it cycles back and forth with subsequent clicks? I didn't write this code but merely modified it to my use. I am still very new to this type of thing. Thanks!
<style>
div.hide { display:none; }
div.show { text-align:center; }
</style>
<script type='text/javascript'>
function showText(show, hide) {
document.getElementById(show).className = "show";
document.getElementById(hide).className = "hide";
}
</script>
<br>
<font color="red">-</font>Home<font color="red"> / </font><a onclick="showText('text1')" href="javascript:void(0);">Invite Code</a>-</font>
<div id="text1" class="hide"><font color="red">abc123</font></div>
</center></h3>
Simply use this function:
function showText(id)
{
var elem = document.getElementById(id);
if(elem.style.display == 'none')
{
elem.style.display = 'inline';
}
else
{
elem.style.display = 'none';
}
}
<a onClick="showText('text1');" href="#">Show or Hide</a><br/>
<div style="height: 30px;"><div id="text1" style="display: none;">Text to hide or show... WTF?!</div></div>
<div>This text should not move.</div>
PS: This also works for 2 Elements...
Greetings
I really don't see the use for the show class. You could just toggle the hide class on the elements that you want to toggle.
Assume you dont need the show class, then use the classList.toggle function like this
function toggle(target){
document.getElementById(target).classList.toggle('hide');
}
.hide{ display:none }
<button onclick="toggle('test')">Show / Hide</button>
<div id="test" class="hide">Hello world!</div>
save the state with a boolean
var hided = true;
function showText(show,hide){
if (hided){
document.getElementById(show).className = "show";
document.getElementById(hide).className = "hide";
}
else{
document.getElementById(show).className = "hide";
document.getElementById(hide).className = "show";
}
hided = !hided;
}
fiddle with this code and some of your html : fiddle,
isn't it the expected behavior ?
<html>
<div ID="content" style="display:block;">This is content.</div>
<script type="text/javascript">
function toggleContent() {
// Get the DOM reference
var contentId = document.getElementById("content");
// Toggle
contentId.style.display == "block" ? contentId.style.display = "none" :
contentId.style.display = "block";
}
</script>
<button onclick="toggleContent()">Toggle</button>
</html>
//Code is pretty self explanatory.
I am trying to dynamically populate a div based on the Innertext. Can anyone tell me why this is not working?
<div id="bs3" class="survey_dashboard_item" onclick="window.open('/building-specifications?bldgaddress=333 Johnson','_self');" style="font-size:40px; border:1px solid #bbb;">
<script>
window.onload = function Element(id) {
if (this.innerText == '333 Johnson') {
document.write('<div style="float:left; padding-left:10px; padding-top:10px;"><img src="/checkmark.png" title="Project Entered"></div>');
} else {
}
}
</script>
***333 Johnson***</div>
You don't need and you shouldn't use document.write() in such case.
You can do it with:
<script type="text/javascript">
function update_bs_3(){
var el = document.getElementById('bs3');
if (el.innerHTML.trim() == '333 Johnson') {
el.innerHTML = '<div style="float:left; padding-left:10px; padding-top:10px;"><img src="/checkmark.png" title="Project Entered"></div>';
}
}
</script>
Then put the event handler to your body element:
<body onload="update_bs3();">
And here is the fiddle http://jsfiddle.net/DxjGv/1/
EDIT: And here is the version for multiple divs:
HTML:
<div id="bs1" class="survey_dashboard_item" onclick="window.open('/building-specifications?bldgaddress=111 Steve','_self');" style="font-size:40px; border:1px solid #bbb;">
111 Steve</div>
<div id="bs2" class="survey_dashboard_item" onclick="window.open('/building-specifications?bldgaddress=222 Frankie','_self');" style="font-size:40px; border:1px solid #bbb;">
222 Frankie</div>
<div id="bs3" class="survey_dashboard_item" onclick="window.open('/building-specifications?bldgaddress=333 Johnson','_self');" style="font-size:40px; border:1px solid #bbb;">
333 Johnson</div>
JS:
function update_bs_divs(){
var divs = {
'bs1': {
'match': '111 Steve',
'replacement': '<div>Steve replaced</div>'
},
'bs2': {
'match': '222 George',
'replacement': '<div>George replaced</div>'
},
'bs3': {
'match': '333 Johnson',
'replacement': '<div>Johnson replaced</div>'
}
};
for (var id in divs) update_div(id, divs[id].match, divs[id].replacement);
};
function update_div(id, match, replacement){
var el = document.getElementById(id);
if (!el || (el.innerHTML.trim() != match)) return;
else el.innerHTML = replacement;
}
window.onload = update_bs_divs;
Save this JS code in a file and include it in your HTML head section.
Fiddle is here - http://jsfiddle.net/DxjGv/2/
For three reasons:
You are running the code when the document is complete, then document.write will either replace the entire document (as document.open is implicitly called), or it is ignored, depending on the browser. You can't write to the document when it has been parsed already.
The context of the method (this) is not the element that the script tag is inside, it's the object where the event happens, in this case the window object.
The innerText property only works in Internet Explorer.
Put the script tag outside the div, otherwise it may interfer with your check. You can use the innerHTML property to get and set the content:
<div id="bs3" class="survey_dashboard_item" onclick="window.open('/building-specifications?bldgaddress=333 Johnson','_self');" style="font-size:40px; border:1px solid #bbb;">333 Johnson</div>
<script> type="text/javascript"
window.onload = function() {
var el = document.getElementById('bs3');
if (el.innerHTML == '333 Johnson') {
el.innerHTML = '<div style="float:left; padding-left:10px; padding-top:10px;"><img src="/checkmark.png" title="Project Entered"></div>' + el.innerHTML;
}
};
</script>
Document.write prints a string into a blank page.
You have to use append/prependChild or innerHTML.
When using slideToggle, how to change the Text close/show?
I did a simple one, but cannot get the text change back.
Here is what I did:
$(document).ready(function(){
$('.open').click(function(){
$('.showpanel').slideToggle('slow');
$(this).text('close');
});
$('.open2').click(function(){
$('.showpanel2').slideToggle('slow');
$(this).text('close');
});
});
body{
font-size:20px;
}
#box{
border:2px solid #000;
width:500px;
min-height:300px;
}
.open,.open2 {
width:450px;
height:50px;
background:blue;
margin:5px auto 0 auto;
color:#fff;
}
.showpanel,.showpanel2{
width:450px;
height:300px;
margin:0 auto 10px auto;
background:red;
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box">
<div class="open">Show</div>
<div class="showpanel">This is content</div>
<div class="open2">Show</div>
<div class="showpanel2">This is content</div>
</div>
http://jsfiddle.net/9EFNK/
You can use the is() assertion method to check whether the panel is open or closed in the animation's callback and set the text accordingly - http://jsfiddle.net/9EFNK/7/
$('.open').click(function(){
var link = $(this);
$('.showpanel').slideToggle('slow', function() {
if ($(this).is(':visible')) {
link.text('close');
} else {
link.text('open');
}
});
});
Just add a simple if statement to test the text like so
$('.open').click(function(){
$('.showpanel').slideToggle('slow');
if($(this).text() == 'close'){
$(this).text('Show');
} else {
$(this).text('close');
}
});
Like this DEMO
Not the prettiest of methods, but it does the job in a single statement.
$(this).text(($(this).text() == 'Close') ? 'Show' : 'Close');
Use .toggle()
Here is Working Demo
$('.open').click(function(){
$('.showpanel').slideToggle('slow');
}).toggle(function() {
$(this).text('Hide');
}, function() {
$(this).text('Show');
});
check this may be user question is solve Fiddle
Here's an updated version http://jsfiddle.net/9EFNK/1/
You can simply toggle a class on close/open, perform a check for that class and change the contained text accordingly
if( $(this).hasClass('active') )
$(this).text('open');
else
$(this).text('Show');
$(this).toggleClass('active');
try this demo
$(document).ready(function(){
$('.open').toggle(function(){
$('.showpanel').slideToggle('slow');
$(this).text('close');
}, function(){
$('.showpanel').slideToggle('slow');
$(this).text('Show');
});
$('.open2').toggle(function(){
$('.showpanel2').slideToggle('slow');
$(this).text('close');
}, function(){
$('.showpanel2').slideToggle('slow');
$(this).text('Show');
});
});
Use this
jQuery.fn.toggleText = function() {
var altText = this.data("alt-text");
if (altText) {
this.data("alt-text", this.html());
this.html(altText);
}
};
Here is how you use it
jQuery.fn.toggleText = function() {
var altText = this.data("alt-text");
if (altText) {
this.data("alt-text", this.html());
this.html(altText);
}
};
$('[data-toggle="offcanvas"]').click(function () {
$(this).toggleText();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<button data-toggle="offcanvas" data-alt-text="Close">Open</button>
You can even use html provided it's html encoded properly