I have a scenario where when i click on input box which is inside a div the div functionality is getting effected.
Suppose the div is selected and is red in color,when i click on the input box which is inside the selected div, the div is turning unselected(grey color).
For this i have used $event.stopPropogation on input box which isn't working
html
<body>
<div class="container" ng-controller="BaseController">
<div class="row" ng-click="selectedDiv=!selectedDiv" ng-class="{'colorDiv':selectedDiv}">
<input placeholder="enter text" ng-mousedown="$event.stopPropagation()">
</div>
</div>
</body>
controller:
app.controller('BaseController', function($scope) {
$scope.selectedDiv=true;
});
css:
.row{
width:250px;
height:200px;
border:1px solid grey;
}
.colorDiv{
border:1px solid red;
}
DEMO
Any help would be appreciated.
You've to explicitly stop click event propagation of input box to bubble up, for the same you could use ng-click instead of ng-mousedown(mousedown will only fire when hover over on input box).
ng-click="$event.stopPropagation();"
Plunker
You're current setup starts out in the selected state, and when you click the div it becomes the unselected state.
app.controller('BaseController', function($scope) {
$scope.selectedDiv=false;
});
Change the starting value of $scope.selectedDiv = false;
Related
I've set up a method which when a button is clicked changes it's background colour and resets the colour of the other three buttons. The method for button1 looks like this
<script>
function changeBttn1() {
document.getElementById("bttn1").style.backgroundColor = '#add8e6';
document.getElementById("bttn2").style.backgroundColor = '#D3D3D3';
document.getElementById("bttn3").style.backgroundColor = '#D3D3D3';
document.getElementById("bttn4").style.backgroundColor = '#D3D3D3';
}...
Also I want to be able to make the Div that applies to each button appear and the others hidden with the same button press. The Div uses Class=Collapse which corresponds to Display:None in Bootstrap.css but I want to change it to run from the same method as the buttons. How can I do both events using Css?
Please do it like this very simple and easy
$('.my-btn').on('click',function(){
var colorval=$(this).attr('color');
$('.my-btn').css('background-color', 'grey');
$(this).css('background-color', colorval);
});
button{
background-color:grey;
padding:10px;
border:1px solid #000000;
color:#ffffff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="button-wrapper">
<button class="my-btn" color="red">Red</button>
<button class="my-btn" color="green">Green</button>
<button class="my-btn" color="purple">Purple</button>
</div>
i need help getting this to work, tried everything google had to offer.. but still stuck. what i need it to do is load the value of (div id="availablecredits") to (div id="beta") on click. can any body help me out?
onclick="javascript:document.getElementById('beta').value=(javascript:document.getElementById('availablecredits').value)"
i also tried onclick="javascript:document.getElementById('beta').value=('#availablecredits')"
The property value is common for input elements like <input>, <select>, <textarea> and <button>
I think what you want is to copy a content of a <div> element to another div. If it's the case, use innerHTML instead of value.
Here is a snippet, just click on the gray area.
#div-two {
min-height: 20px;
background: #CCC;
}
<div id="div-one">
Hello this is #div-one
</div>
<div id="div-two" onclick="document.getElementById('div-two').innerHTML=document.getElementById('div-one').innerHTML"></div>
SNIPPET #2
You've defined a third <div> which you use as trigger but you can't click it if it's not visible, because it's height is 0. Specify some text inside it, then it's visible and the JS part work. Take a look at the snippet.
#getCredits {
background: #CCC;
}
<div id="beta">0.00</div>
<div id="availablecredits">500</div>
<div id="getCredits" onclick="document.getElementById('beta').innerHTML=document.getElementById('availablecredits').innerHTML">Click here to get available credits</div>
SNIPPET #3 - jQuery
$('#getCredits').click(function() {
$("#beta").html($('#availablecredits').html());
});;
#getCredits {
background: #CCC;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="beta">0.00</div>
<div id="availablecredits">500</div>
<div id="getCredits">Click here to get available credits</div>
Simple javascript function, change the ids in the function call to those of the elements in question.
<script>
function set_value( src,tgt ){
document.getElementById( tgt ).innerHTML=document.getElementById( src ).innerHTML;
}
</script>
<style>.p5{ display:block; padding:1rem; margin:1rem; border:1px solid black;}</style>
<div class='p5' id='src_div' onclick="set_value('src_div','tgt_div')">Weebles wobble but they don't fall down!</div>
<div class='p5' id='tgt_div'></div>
Or you can use a link to set the value
you should try to avoid writing inline event.try this:
<style>
#getCredits {
background: #CCC;
}
</style>
<div id="beta">0.00</div>
<div id="availablecredits">500</div>
<div id="getCredits">Click here to get available credits</div>
<script>
document.getElementById('getCredits').addEventListener("click",function(){
document.getElementById('beta').innerHTML=document.getElementById('availablecredits').innerHTML;
});
</script>
Why inline css and javascript are bad:http://robertnyman.com/2008/11/20/why-inline-css-and-javascript-code-is-such-a-bad-thing/
The .val() method is sometimes useful:
var input = $("#Input").val();
I have a form and need to append a field as many times as required. If the button CLICK TO ADD ANOTHER FIELD is clicked the div should be appended. After the first append (onload), the div responses correctly but from the second one on, I am not getting the similar response from the div. Here is my JSFiddle
If I click on the TEST BUTTON , I get alert for the first div but on adding another div (by clicking the CLICK TO ADD ANOTHER FIELD button) , the button (TEST) doesn't work anymore for the second div onwards.
I tried clone() to help this but unable solve this one. May be I am not using it correctly.
To replicate the issue please follow the steps::
Click on the CLICK TO ADD ANOTHER FIELD button to add div
Click on the TEST button on the second div onwards
Please take a look and suggest. Thanks in advance.
You have to use delegation like $(document).on('click','.test',function(){
var count = 1;
$.fn.addclients = function(add){
var mydiv = '';
mydiv = '<div class="dataadd"><fieldset><legend>Test: '+add+'</legend><b>Test Name :</b> <input type="text" id="ct'+add+'" name="cname" value="" style="width:250px" />'+
' <button class="test" id="test" style="float:left;">TEST</button>'+
'<br>'+
'</fieldset></div>';
//$(".dataadd").clone().appendTo('#registerForm');
$('#registerForm').append(mydiv);
}
$.fn.addclients(count);
$(document).on('click','#btn',function(){
++count;
$.fn.addclients(count);
return false;
});
$(document).on('click','.test',function(){
alert("test");
return false;
});
.zend_form{
font-weight:bold;
font-size:10px;
width:358px;
float: left;
}
.dataadd{
font-weight:bold;
font-size:10px;
width:358px;
//border: 1px solid;
margin-top: 15px;
margin-bottom: 15px;
//padding: 5px;
//float:left;
}
.selectbox{
margin-top: 15px;
width:155px;
height:100px;
}
.buttonc{
background-color: #fff;
width:145px;
height:45px;
}
.selection_area{
font-weight:bold;
font-size:10px;
}
input {
width: 200px;
}
dt {
width:50%; /* adjust the width; make sure the total of both is 100% */
}
dd {
width:80%; /* adjust the width; make sure the total of both is 100% */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="registerForm" enctype="application/x-www-form-urlencoded" method="post" action=""><dl class="zend_form">
<dt id="firstname-label"><label for="firstname" class="required">First Name:</label></dt>
<dd id="firstname-element">
<input type="text" name="firstname" id="firstname" value="" style="width:200px; float:left;" /></dd>
<dt id="middlename-label"><label for="middlename" class="optional">Last Name</label></dt>
<dd id="middlename-element">
<input type="text" name="middlename" id="middlename" value="" style="width:200px" /></dd>
</form>
<div style='display:table;background-color:#ccc;width:99%;padding:5px;'>
<button class='buttonc' name='btn_sub' id='btn' style='float:left;'>CLICK TO ADD ANOTHER FIELD</button>
</div>
You write:
$('#btn').click(function(){ ... });
but this will only bind the event handler to elements currently on the page when running this code. So elements added later will not be covered by this code.
But first tip: do not use a HTML ID (#btn) if you want to repeat it. So instead use a class (.btn), to capture all elements.
And then the best way is to write something like:
$(document).on('click', '.btn', function() { ... } )
This will capture any click event on the document (you could use a container div instead --just easier to show now), and only run the callback if it matches the given selector (.btn).
all elements created after body load must use delegation to work
$("body").on("click",".test",function(){
alert("test");
return false;
});
This way, the event is attached to the body, witch always exists, but only triggers when the matched elements appear, no matter when they're created (before or after js is loaded)
I wish there was a CSS selector that could do this, because I'm a complete noob when it comes to javascript.
The HTML is basically this:
<div class="searchmenu">
<form id="search">
<fieldset>
<input type="text" class="inputbox search"/>
</fieldset>
</form>
</div>
The CSS is this:
.searchmenu form {
display:none;
}
searchmenu:hover form {
display:block;
}
The form is already displayed when the div is hovered, now I also want it to keep it displayed while the input text is on focus.
I tried searching for other cases, but they either don't work for my case or I don't know how to implement them D:
DEMO
You can use jQuery focus & blur event.
Like this:
$('.inputbox').focus(function(){
$('.searchmenu').addClass('is_focused');
});
$('.inputbox').blur(function(){
$('.searchmenu').removeClass('is_focused');
});
CSS:
.searchmenu form {
display:none;
}
.searchmenu:hover form,
.searchmenu.is_focused form{
display:block;
}
.searchmenu{
background: #eee;
padding: 10px;
}
bind the input field to jquery event
For example
$(".inputbox .search").bind("focus keyup",function(){
$(".searchmenu").css("display","block");
});
I hope this would be helpful to you
Newbie jQuery questions. Say I have a label on a web page. I want the effect of sliding out an input box when hovering the mouse over the label. Any hint on how to assemble some existing jQuery support to achieve it?
Example at jsFiddle.
HTML:
<div class="HasHiddenInput">
<div>My label</div>
<div class="HiddenInput">
<input .../>
</div>
</div>
Javascript:
$(function(){
$('.HasHiddenInput').hover(
function(){
$(this).find('.HiddenInput').stop(true,true).slideDown();
},
function(){
$(this).find('.HiddenInput').stop(true,true).slideUp();
}
);
});
Optional CSS:
.HiddenInput{
display:none; /*Initially hidden*/
}
.HasHiddenInput{
padding: 5px;
border: solid 1px #ccc;
}
On hover animate a div to show the input:
$("#YourLabel").hover(function(){
$("#DivWrappingInput").animate({
width: 100,
}, 500);
});
Without seeing any code or CSS, it's hard to say but something like this should work:
Assumign your HTML is like this:
<div>
<div>
<label>Label 1</label>
<input />
</div>
</div>
$(document).ready(function(){
$('label').hover(function(){
//Animate width to show the input box
$(this).siblings('input').animate({'width':200 + 'px'});
}, function(){
//Animate width to hide input box
$(this).siblings('input').animate({'width':0 + 'px'});
}
});
You'll need to add a position of relative to the input box. You can animate the width of the input box if required as well. It depends on the context of use of the input box and label.