I am working on a web-site project now. I have 3 div's. if you click on any 1 of those it will take 80% space in width, the thing works but for some reason 1 of them isn't working until i change oneclose to oneopen in 3d script row, which is not right as far as i see, it does not make any sense.
The scheme it is working is next: i have different markup for *open and *close ids, when i click on one of div it changes as you can see below. does anyone knows what's going on here?
<script>
$('#twoclose').click(function() {
$('#twoclose').prop('id', 'twoopen');
$('#oneopen').prop('id', 'oneclose');
$('#threeopen').prop('id', 'threeclose');
});
</script>
<script>
$('#threeс').click(function() {
$('#threeс').prop('id', 'threeopen');
$('#oneopen').prop('id', 'oneclose');
$('#twoopen').prop('id', 'twoclose');
});
</script>
<script>
$('#oneclose').click(function() {
$('#oneclose').prop('id', 'oneopen');
$('#threeopen').prop('id', 'threeclose');
$('#twoopen').prop('id', 'twoclose');
});
</script>
When you bind an event, it is bound to that element. When you change the id, the events do not automatically change. Use classes to change the styles, not ids.
Simplify your code so you do not have to hardcode ids.
$(".box").on("click", function () {
$(".box.active").removeClass("active");
$(this).addClass("active");
});
.box {display: inline-block; width: 100px; height:100px; border: 1px solid black;}
.box.active { background-color: green; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
Related
I have a block which has some data attributes:
<div class="my-div" data-color="#ff4b4b" data-hover="#000">
Text
</div>
Now I want to use javascript for changing text color on mouseenter and mouseover using my data attributes.
So I have:
$(".my-div").each(function() {
$(this).mouseenter(function() {
$(this).css('color', this.dataset.hover);
});
$(this).mouseleave(function() {
$(this).css('color', this.dataset.color);
});
});
If I have one div, it's working fine, but if I have another divs with the same class, and I mouseenter and mouseover one div, another divs react too.
What should I do to make it working right, maybe add an index, I don't know.
Can you help me, please?
Thanks in advance. Sorry for my English.
P.S. Don't advise css, for this I must use javascript.
Your code should work by itself but you don't need to loop through each div to check if the mouse has entered or left each div element - it's extremely inefficient.
So remove:
$(".my-div").each(function() {});
Your new code should look like the following:
$(".my-div").mouseenter(function() {
$(this).css('color', this.dataset.hover);
});
$(".my-div").mouseleave(function() {
$(this).css('color', this.dataset.color);
});
.my-div {
position: relative;
display: inline-block;
width: 100px;
height: 100px;
color: #ff4b4b;
border: 1px solid #000000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="my-div" data-color="#ff4b4b" data-hover="#000">
Text
</div>
<div class="my-div" data-color="#ff4b4b" data-hover="#000">
Text
</div>
<div class="my-div" data-color="#ff4b4b" data-hover="#000">
Text
</div>
Obviously the CSS isn't necessary but I have added it to prove that it works correctly.
Get the target element of the event passed into each handler using $(this):
$(".my-div").each(function() {
$(this).mouseenter(function(e) {
$(this).css('color', this.dataset.hover);
});
$(this).mouseleave(function(e) {
$(this).css('color', this.dataset.color);
});
});
.my-div{
font-size: 20px;
line-height: 25px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="my-div" data-color="black" data-hover="red">
Text 1
</div>
<div class="my-div" data-color="black" data-hover="green">
Text 2
</div>
<div class="my-div" data-color="black" data-hover="blue">
Text 3
</div>
For example :
<div id="parent">
<div id="child">Click here</div>
</div>
when i click on child, both div will disappear or hidden
You can do by using jquery on() and hide() function. Once you html properly render or loaded then following code will be ready to execute, this is beacuse of $(document).ready(function() {...Execute Once HTML Render...});
So the following code will be functional only click event as you see i am using on('click',function(){...});
$(document).ready(function() {
$( "#child" ).on('click',function(){
$(this).parent().hide();
});
});
Here is an example
Try this using jQuery
$("#child").on('click',function(){
$(this).parent().hide();
});
Link for reference
hope this helps...
Here you go with an working example https://jsfiddle.net/fdaqsks2/
$("#child").click(function(){
$(this).parent().hide();
})
#parent{
padding: 20px;
background: red;
}
#child {
padding:5px;
background: blue;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
<div id="child">Click here</div>
</div>
I want to dynamically change the class of the element #sidePanel from .compact to .expanded, in this code:
<div id="sidePanel" class="compact"></div>
<div id="topbar">
<div id="buttonContainer">
<div id="button"></div>
</div>
</div>
I'm stuck here, I can't apply the class to the correct <div>, I can just add the class to the topbar:
$(document).ready(function(){
$("#button").mouseover(function(){
$("this").parent().eq(2).addClass(".expanded").removeClass(".compact");
});
});
I also tried this:
$(document).ready(function(){
$("#button").mouseover(function(){
$("#sidepanel").addClass(".expanded").removeClass(".compact");
});
});
Your second example was pretty close. When you $.addClass() and $.removeClass(), or are referring to classnames outside of using a selector to target something, just reference the class name (no need for the leading .). Also JS (and CSS) are case-sensitive, so $('#sidepanel') won't target #sidePanel - the cases need to match.
$("#button").mouseover(function() {
$("#sidePanel").addClass("expanded").removeClass("compact");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>.expanded {color: red;}</style>
<div id="sidePanel" class="compact">sidepanel</div>
<div id="topbar">
<div id="buttonContainer">
<div id="button">button</div>
</div>
</div>
In your first example, $(this) is how you reference this in jQuery. If you put this in quotes, the word this is treated as a string literal instead. And since to use $.parent() you would need to go up 2 levels, you should use $.parents() with the ID of the parent you want to target, then use $.prev() to select the previous element, which is #sidePanel. So to traverse the DOM like that, this is how I would do it.
$("#button").mouseover(function() {
$(this).parents('#topbar').prev().removeClass('compact').addClass('expanded');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>.expanded {color: red;}</style>
<div id="sidePanel" class="compact">sidepanel</div>
<div id="topbar">
<div id="buttonContainer">
<div id="button">button</div>
</div>
</div>
Your problem is you used $("#sidepanel") instead of $("#sidePanel")
Here's a working example after the change is made:
$(document).ready(function(){
$("#button").on('mouseover', function(){
$("#sidePanel").addClass("expanded").removeClass("compact");
});
});
#topbar > div {
width: 100px;
height: 30px;
background: #ccc;
margin-top: 20px;
}
#sidePanel {
width: 100%;
height: 40px;
background: #ccc;
}
#sidePanel.expanded {
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sidePanel" class="compact"></div>
<div id="topbar">
<div id="buttonContainer"></div>
<div id="button"></div>
</div>
first: the solution
$(document).ready(function()
{
$("#button").mouseover(function()
{
// class names - without the dot
$("#sidepanel").addClass("expanded").removeClass("compact");
});
});
then: why you were really close on your first attempt
$(document).ready(function()
{
$("#button").mouseover(function()
{
// $(this) selector uses the `this` keyword (not as a string)
$(this).parent().eq(2).addClass(".expanded").removeClass(".compact");
});
});
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 some containers with ids="container1", "container2", "container3"...
They can have one of two types of tags inside: tables or canvas.
I want to hide one of them depending on the device orientation.
I have tried with this
$('[id^=container]:has(canvas)').hide();
or
$('[id^=container]:has(table)').hide();
but both hide all the containers, don't filtering their inside tags.
You can do
var x = $('[id^=container]').find("table").length;
// Will be 0 if no table inside it
if(x==0) { .. }
else { .. }
You can use classes on your containers instead of ids. Here's a JSFiddle demo.
For better performance in modern browsers, use $( "your-pure-css-selector" ).has( selector/DOMElement ) instead.
Source: https://api.jquery.com/has-selector/
Basically I made a 3 containers. One with a table, one with a canvas and one with nothing.
<div class="container green">
<table></table>
</div>
<div class="container blue">
<canvas></canvas>
</div>
<div class="container red"></div>
And a quick CSS to have the divs visible.
div.container{
display: inline-block;
height: 50px;
margin: 10px;
width: 50px;
}
div.green{
background-color: green;
}
div.blue{
background-color: blue;
}
div.red{
background-color: red;
}
And to complete it, a jQuery that executes when the document is ready.
$(document).ready(function(){
$('div.container').has('canvas').hide();
});
If you know the element by which you want to grab the container is not nested within additional tags, you can use the parentNode property of an HTML element to climb up the DOM tree and hide the parent.
document.querySelector("[id^=container] > table").parentNode.style.display= "none";
Example that demos the concept:
document.getElementById("input").addEventListener("change", function() {
document.getElementById("container1").style.display = "block";
document.getElementById("container2").style.display = "block";
document.querySelector("[id^=container] > " + this.value).parentNode.style.display = "none";
});
#container1 {
border: 1px solid red;
}
#container2 {
border: 1px solid blue;
}
<select id="input">
<options>
<option value="table">Hide the table</option>
<option value="canvas">Hide the canvas</option>
</options>
</select>
<div id="container1">Table
<table></table>
</div>
<div id="container2">Canvas
<canvas></canvas>
</div>
I didn't realized I had a global container with id= "container*".
What a silly mistake. Sorry for stealing your time, and thank you everyone!