This is my JavaScript code:
Javascript
<script> $(document).ready(function(){
$("#showButton").click(function(){ $("#showContent").toggle("slow");
}); }); </script>
The question is how I can use same code for different <div>
Like using this code to open <div id=#showContent></div> and using same code but separately open <div id=#showContentSecond></div>
I have a lot of div elements and I don't want to code something everytime I want to manipulate an element.
The button will need to be related to the div in some way, if it isn't a child of the div, example:
<button class="mybutton" data-something="1">One</button>
<button class="mybutton" data-something="2">Two</button>
<div data-something="1">first</div>
<div data-something="2">second</div>
Javascript:
$(document).ready(function(){
$('button.mybutton').click(function(){
$('div[data-something=' + $(this).data('something') + ']').toggle();
});
});
Fiddle demo: http://jsfiddle.net/vcAtb/
You can use the document.getElementsByTagName element to get all divs.
document.getElementsByTagName("div")
Apply a CSS class to each element you want to have the same behavior
HTML
<div id="div1" class="toggleDiv"></div>
<div id="div2" class="toggleDiv"></div>
<div id="div3" class="toggleDiv"></div>
JavaScript
$(document).ready(function(){
$(".toggleDiv").click(function()
{
$(this).toggle("slow");
});
});
http://jsfiddle.net/gDG6n/
Related
I have a section in which contains two div, one div is created dynamically, now I would like to copy the other div which is not created dynamically into the div which is created dynamically
let adContainer = $('#adContainer').html();
adContainer.next().html(adContainer);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="adContainer">
</div>
<div style="width:100%; height:100%">
<video></video>
</div>
This is not working, what is wrong here?
You should use the clone() and appendTo() methods of jQuery:
$('#adContainer').clone().appendTo($('#adContainer').next());
read more here: https://api.jquery.com/clone/
Also next() should be called directly on the element, not the html() of the element.
Your code don't work because you try to use next() with html and not with div. so you must select div and html in two variable like:
let div =$('#adContainer');
let adContainer = div.html();
div.next().html(adContainer);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="adContainer">
<p>hello</p>
</div>
<div style="width:100%; height:100%">
<video></video>
</div>
How to close alert message parent div using javascript?
Problem is parent div is closing but i need to close above parent div.
Here is my code:
$(".msg-error .btn-close").click(function(){$(this).parent().hide();});
.msg-error {
background:#ff0000;
color:#fff;
padding:10px;
margin-bottom:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="mainalert">
<div class="msg-error">
<div class"container">
First error message <a class="btn-close">Close</a>
</div>
</div>
<div class="msg-error">
<div class"container">
Second error message <a class="btn-close">Close</a>
</div>
</div>
</div>
You can use .closest() to specify the closest parent you want to achieve by using a selector.
$(".msg-error .btn-close").click(function() {
$(this).closest('.msg-error').hide();
});
With this function you can even change your HTML structure without having to edit your JavaScript code to deal with multiple level of .parent() calls, provided that you continue using the same CSS class for the selector.
FIDDLE: http://jsfiddle.net/8b7zt1g7/5/
$(".msg-error .btn-close").click(function(){$(this).parent().parent().hide();});
http://jsfiddle.net/8b7zt1g7/4/
Or, little fancier:
$(".msg-error .btn-close").click(function(){$(this).closest('.msg-error').hide();});
You can chain .parent() calls together. Try:
$(".msg-error .btn-close").click(function(){$(this).parent().parent().hide();});
you can try this way, by searching for that main parent div
you can use closest() or parents(), first option will return first match and seconds will return all matches, your choice
$(".msg-error .btn-close").click(function() {
$(this).parents(".msg-error").hide();
});
or going the parent twice
$(".msg-error .btn-close").click(function() {
$(this).parent().parent().hide();
});
Remove parent div without jquery
<div class="msg-error">
<div class"container">
Second error message <a class="btn-close" onclick='Close()'>Close</a>
</div>
</div>
<script>
function Close(){
document.getElementsByClassName('msg-error').innerHtml='';
}
<script>
So, I have a simple code that I can't get it to work. I tried to find answers on the same topic here, but being new to jQuery all answers seem too complicated.
Anyways, what I want to do is have the same script run for different divs. After some reading here I managed to arrange the following code, but it doesn't seem to work.
<div id="mydiv1" onclick="handleClick(this)" style="position:relative; left:0px;">Div One</div>
<div id="mydiv1a" style="position:relative; left:0px;">Div One A</div>
<div id="mydiv2" onclick="handleClick(this)" style="position:relative; left:0px;">Div Two</div>
<div id="mydiv2a" style="position:relative; left:0px;">Div Two A</div>
<script>
$(document).ready(function(){
function handleClick(x) {
$(x.id + 'a').fadeToggle("slow");
}
}
</script>
What I want this to do is when I click #mydiv1, the function should run on #mydiv1a. And the same for #mydiv2. Thank you in advance for your help!
It's better to assign the handling within your script (not inline in html). Bonus for that is that you can use jQuery delegation, i.e. assign a click handler on the document body for a number of elements within the body. Furthermore, the styling should be in a css tag/css file where possible (why?). In this case both position and left are useless. The snippet shows all this:
$('body').on('click', '#mydiv1, #mydiv2', handleClick);
// ^ handler on body | |
// for elements |
// handler method
function handleClick(e) {
$('#'+this.id+'a').fadeToggle('slow');
}
#mydiv1, #mydiv2 {
cursor: pointer;
}
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div id="mydiv1">Div One</div>
<div id="mydiv1a">Div One A</div>
<div id="mydiv2">Div Two</div>
<div id="mydiv2a">Div Two A</div>
You need to use # which is how you select element with a specific id in jQuery or css for that matter
$('#' + x.id + 'a').fadeToggle("slow");
But you can simplify your code to the below
$('div').filter(function(){ return /\d+$/.test(this.id) }).click(function(){
$(this).next().fadeToggle("slow");
});
Try this
$(this).next().fadeToggle("slow");
This code creates a click event for both divs. The event will be aware of the specific div clicked.
$(function(){
$("#mydiv1, #mydiv2").click(function(){
$(this).fadeToggle("slow");
});
});
I have a div within a div. On page load, they should both be hidden, then when I trigger the slideDown() function on the outer div, I want the inner div to remain hidden. How can I achieve this?
<script>
$(function(){
$('.body').hide();
$('.display').click(function(){
$(this).closest('.wrapper').find('.body').slideDown();
});
});
</script>
<div class="wrapper">
<a class="display" href="#">Display Outer</a>
<div class="body">
Now displaying outer div
<div class="wrapper">
<a class="display" href="#">Display Inner</a>
<div class="body">
Now displaying inner div
</div>
</div>
</div>
</div>
Here is an example of it not working: http://jsfiddle.net/b7Tpt/
The reason it doesn't work is the use of find. find would traverse all levels to find the matches while the children would travel single level. So use find('.body:first') or children('.body')
$(function(){
$('.body').hide();
$('.display').click(function(){
$(this).closest('.wrapper').find('.body:first').slideDown();
});
});
Updated Example
OR
$(function(){
$('.body').hide();
$('.display').click(function(){
$(this).closest('.wrapper').children('.body').slideDown();
});
});
Updated Example
Try -
$('.display').click(function(){
$(this).siblings('.body').slideDown();
});
I think $(this).closest('.wrapper') was moving up the DOM tree and finding the top most wrapper div then opening all the body classes it found underneath. Using siblings should get the element with a body class that is directly beneath the clicked link.
Demo - http://jsfiddle.net/pMgVj/1/
try this: http://jsfiddle.net/Kf6gk/
I want to be able to append divs to my page such that they are appended after a div of a certain class and before teh divs that follow it i.e:
<div class="header">Header DIV</div>
<!-- Want to add using javascript some HTML right here-->
<div class="one-basic-div">...</div>
<div class="one-basic-div">...</div>
<div class="one-basic-div">...</div>
<div class="one-basic-div">...</div>
It is basically raw html I wish to add. How can I do it?
Use the Element.insert method:
document.observe("dom:loaded", function() {
$$(".header").first().insert({ after: "<p>Some html</p>" });
});
<script src="https://ajax.googleapis.com/ajax/libs/prototype/1/prototype.js"></script>
<div class="header">Header div</div>
<div class="one-basic-div">Other div</div>
Use insert:
$$('#header').insert({ 'after' : theHTML });
That should insert it as a sibling after the div with id header.
There are some helpful examples here, the documentation seems to be lacking, somewhat.