jquery toggle open all div s on one click - javascript

Please take a look at below codes, for whatever reason I am unable to open one div only when I click on the edit link, it opens all divs when I click the edit link.
jQuery
$(document).ready(function () {
$("input:button[name='uploadboy']").click(function () {
$(this).parent().children('.uploadboy').slideToggle(200, 'swing');
});
});
HTML
<div style="overflow:auto;" class="links-box ">
<p style="float:left; width:250px;" id="links">
<input type="button" name="uploadboy" id="uploadboy" value="Uploaded" title="Uploaded" style="text-decoration:none; color: white; text-shadow:none; background: #0692fe; float:left;" class="g-button">
</p>
</div>
<div class="uploadboy" width: 600px;min-height:50px;background-color: #F2FDD7;border-radius: 10px;border: 1px solid #8EBD43;">
<p>content</p>
</div>
<div style="overflow:auto;" class="links-box ">
<p style="float:left; width:250px;" id="links">
<input type="button" name="uploadboy" id="uploadboy" value="Uploaded" title="Uploaded" style="text-decoration:none; color: white; text-shadow:none; background: #0692fe; float:left;" class="g-button">
</p>
</div>
<div class="uploadboy" width: 600px;min-height:50px;background-color: #F2FDD7;border-radius: 10px;border: 1px solid #8EBD43;">
<p>content</p>
</div>
example in jsFiddle

Use the below script, .find method only searches for the descendants (http://api.jquery.com/find/).
$(document).ready(function () {
$("input:button[name='uploadboy']").click(function () {
$(this).parent().parent().next('.uploadboy').slideToggle(200, 'swing');
});
});

As I mentioned in my comment above, IDs must be unique. That said, try this:
$("input").click(function () {
$(this).slideToggle(200, 'swing');
});
jsFiddle example

What I initially see here that's an issue is that you have 2 input buttons with the same id. While this may not be the overall issue, you still can't have 2 elements with the same id. I also am not sure if this is just generic code you cleaned to ask a question, but your selectors seem pretty complicated. You attach the .click event to both input buttons, then you go to the buttons parent, which is the paragraph, then you go the child object which is the button. You are essentially going from point one spot, up a level, then back down a level. When the click handler is attached to the button, anytime you click a button, you can reference $(this) to refer to the button.
<input type="button" name="uploadboy" id="button1" />
<input type="button" name="uploadboy" id="button2" />
$(document).ready(function(){
$("input:button[name='uploadboy']").click(function () {
$(this).SlideToggle(200, 'swing');
});
});
If you look at the function that is ran when the input button is clicked, it simply refers to the $(this) object. This is a benefit of jquery and $(this) is the specific button that you clicked. Even if there are 20 buttons on the page, whatever button is clicked will be this. So in the above example, the button clicked will have the slide toggle occur. You could also navigate the dom off of this if you need to move around like before.

Related

Image tag inside a button makes the js stop working on chrome

I'm trying to make a button with an image that will toggle a div's class, however, when I use the tag image inside the button, the js won't work. This only happens on chrome, the same code works normally on firefox. Is there any solution to this?
codepen: https://codepen.io/luansergiomattos/pen/zydWyM
html:
<div class="bar" style="background-color: #474973; ">
<br />
<button id="searchButton">
<img
src="https://cdn1.iconfinder.com/data/icons/hawcons/32/698627-icon-111-search-512.png"
alt=""
style="width: 20px;"
/>
</button>
</div>
<div class="bar off but" id="search" style="background-color: #9CEAEF">
<form action="#">
<input
type="text"
placeholder="Search.."
name="search"
class="header__search"
/>
</form>
</div>
js:
var focused = document.querySelector('.header__search'), searchWrapper = document.querySelector('#search'),
searchInput = document.querySelector('#searchButton');
document.addEventListener('click', function (e) {
if (~e.target.className.indexOf('header__search')) {
searchWrapper.classList.remove('off');
focused.focus();
} else if (~e.target.id.indexOf('searchButton')) {
searchWrapper.classList.toggle('off');
focused.focus();
} else {
searchWrapper.classList.add('off');
}
});
edit: this is what the code is supossed to do: when i press the button, the js will toggle a class, the class named "off" has width: 0px; display: none etc. So the element will be hidden when i press the button, and it will show up again when i press the button. Sorry for any english mistak
The reason this happens is the image becomes the target in your click function – try disable pointer events and it will work again :)
button img { pointer-events: none; }

Anchor element onClick makes page jump to top of page

I have a few buttons on my page and onclick they show or hide a few <div> elements.
The <div> elements are positioned towards the bottom of the page so scrolling to those <div> elements is necessary.
Whenever I click on a button, the page jumps to the top. So how do I create an anchor so that when the user clicks the button it will stay on that section of the page?
Here is one of the buttons:
<p class="text-center"><a id="Button-1" class="btn btn-default" href="#" role="button">View Details</a></p>
Here is the <div> that appears when the button above is clicked:
<div class="row">
<div id="Section-1" class="col-md-10">
<p>The section to appear.</p>
</div>
</div>
Here is the JavaScript:
$("#Button-1").click(function () {
$("#Section-2").hide();
$("#Section-3").hide();
$("#Section-1").toggle("show");
$("#Button-1").text(function(i, text) {
return text === "View Details" ? "Hide Details" : "View Details";
});
return false;
});
Here is my research:
Article 1
Any help would be appreciated.
UPDATE
<p class="text-center"><a id="Button-1" class="btn btn-default" href="javascript:void();" role="button">View Details</a></p>
When I click the button.. I scroll down to see the div that appeared.. then click on another button (that look the exact same as above) and the page returns to the top.
Firstly mention the element correctly in the title. Its a a not button.
Next: The # in your a tag will by default take you to the top of the page when you click on it.
Use a javascript:void() in the href attribute to overcome this.
Like <a href='javascript:void();'>something</a>
Example snippet
<div>
Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>
<a href='javascript:void();'>this</a>
</div>
This is because an href starting in "#" jumps to the element of that id. For example, href="#mydiv" jump to the element with an id of "mydiv" (nothing happens if that element doesn't exist, so this could be a solution). In the case where no id is provided (ie. Your case; href="#"), it jumps to the top of the page. My go-to solution is adding a preventDefault to the click handler, which "negates" existing behaviors. It can be done like so:
$('.button').click(function() {
$('#lastclicked').text(this.textContent);
});
$('.button-x').click(function(e) { // Passes the event to the function to allow the prevent default function.
e.preventDefault();
$('#lastclicked').text(this.textContent);
});
// Click each of the buttons and notice how the first two jumps to either the div of the top, but the third button ("button-x") doesn't move anything.
body {
height: 5000px;
padding: 50px;
}
.buttons {
position: fixed;
bottom: 0;
}
.button, .button-x {
display: inline-block;
padding: 20px;
background: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="buttons">
Link with href="#"
Link with href="#mydiv"
Link with href="#", but a preventDefault.
</div>
<div id="mydiv">
Last clicked: <span id="lastclicked"></span>
</div>
The important part is the e.preventDefault(), which is the function that blocks the initial behavior of the anchor tag. All you have to do is put that somewhere in your click handler. Make sure to pass "e" as a parameter.
General fix
Don't use <a>-Tags for your buttons. Convert the <a>-Tags to <button>-Tags or something else (span, p, etc.)
Explanation
That is pretty simple. Your <a>-Tags (namely the buttons) link to '#' which is the so called fragment part of an URI.
Usually fragments are HTML tags which are identified by a name (pre-HTML5)
<a name="top">This is the top section</a>
Jump to top
or an id (HTML5)
<div id="my-section">Coming soon</div>
Jump to my-section
Because you didn't specify the fragment or didn't use correct one the browser will scroll to the top of the page.
Have you tried this solution from http://stackoverflow.com/questions/11815295/javascript-inline-onclick-goto-local-anchor
You can use this function on your anchor:
function goToAnchor(anchor) {
var loc = document.location.toString().split('#')[0];
document.location = loc + '#' + anchor;
return false;
}
Usage:
Anchor
Note that the anchor needs to be enclosed in quotes, without the hash prefix.
update href property of a tag to javascript:void();
<p class="text-center"><a id="Button-1" class="btn btn-default" href="javascript:void();" role="button">View Details</a></p>
Demo
javascript:void(); It'll not let link to navigate anywhere.
I suggest you a different approach more generic. Easiest to use and maintain.
Use only one class for each button to detect the click. And store in data property the element that you want to show.
$(".btn-section").click(function(){
var classToShow = $(this).data("class-show");
$(".section").hide();
$("." + classToShow).show();
});
.section{
display:none;
}
.content{
width:100%;
height:2000px;
background-color:#ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">Lot of content</div>
<button class="btn-section" data-class-show="section1">Section 1</button>
<button class="btn-section" data-class-show="section2">Section 1</button>
<button class="btn-section" data-class-show="section3">Section 1</button>
<div class="section section1">Section 1</div>
<div class="section section2">Section 2</div>
<div class="section section3">Section 3</div>
This resolve your problem too.

How can I hide my div using jQuery, and then showing it again by pressing a different div?

What I want to do is:
Make my div hidden when the page loads, and then when you click a different div it will show. My limited knowledge doesn't really allow me to make this happen. What am I doing wrong?
jQuery:
$(document).ready(function(){
$('#trojkat2').click(function(){
$('#login').hide();
});
});
</script>
"trojkat2" is the div I want to click to make "login" appear.
HTML:
<div class="kwadrat2">
<div class="trojkat2">
<div class="trojkat_bg2"></div>
</div>
</div>
<div class="login">
<img style="height: 550px; width: 280px; border-radius: 10px;" src="buymenu.jpg">
</div>
What have I done wrong?
First, hide your #login div when document ready by .hide() function, after click $(.trojkat2), use show() to make #login appear, by the way class selector is . instead of #
$(document).ready(function(){
$('.login').hide();
$('.trojkat2').click(function(){
$('.login').show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="kwadrat2">
<div class="trojkat2">click here
<div class="trojkat_bg2"></div>
</div>
</div>
<div class="login">
<img style="height: 550px; width: 280px; border-radius: 10px;" src="buymenu.jpg">
</div>
Try this:
$('.trojkat2').click(function() {
$('.login').show();
});
Your example doesn't have an element with id = trojkat2 so your selector $("#trojkat2") won't work. Same is for #login. Instead you need to change it to a class selector :
$('.trojkat2').click(function(){
$('.login').hide();
});
Example : http://jsfiddle.net/DinoMyte/nrNX8/529/
In your HTML code, you created classes called login and trojkat2. However, in your jQuery, you are telling it to call the IDs called login and trojkat2. Classes are preceded with a "." and IDs are preceded with a "#". Instead, try the following code in your jQuery:
$(document).ready(function(){
$('.trojkat2').click(function(){
$('.login').hide();
});
});

click event on button prevented for some reason

I'm trying to modify the css properties of a div by triggering a click event. For some reason, this isn't happening and it's driving me crazy. Do you know why this happens?
The event looks like this:
$("#colButton3").on("click", function() {
unCollapse('#CarouselSpace','#CarouselBody');
});
The unCollapse function is this:
var unCollapse = function(headerElement, bodyElement) {
$(headerElement).css('margin-top', '1500px');
$(bodyElement).css('min-height', '820px');
};
And the button itself is generated with jquery, but its html is:
<button class="btn btn-success" href="#" id="colButton3" style="display: inline-block;">Learn More</button>
The target divs are these:
<div id="CarouselSpace" class="row"><h1 id="CarouselHeader"></h1></div>
<div id="CarouselBody" class="row"></div>
What am I doing wrong?
Thank you guys.
Dynamic elements needs to have the bind on the document not the element itself as the element is loaded after the document loads
$(document).ready(function() {
$(document).on("click", "#colButton3", function() {
unCollapse('#CarouselSpace', '#CarouselBody');
});
});
var unCollapse = function(headerElement, bodyElement) {
$(headerElement).css('margin-top', '1500px');
$(bodyElement).css('min-height', '820px');
};
#CarouselBody,
#CarouselSpace {
border: 1px solid #ff6600;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="CarouselSpace" class="row">
<h1 id="CarouselHeader">Header</h1>
</div>
<div id="CarouselBody" class="row">Body</div>
<button id=colButton3>button
</button>
The code should work, you are probably trying to bind click event before you create the button. Try using $.live or bind after creating the button.

Creating a targeted onclick event with element

I implemented a javascript code which converts a div into a canvas. Below is the code:
JS
$(window).load(function(){
$(function() {
$(".btnSave").click(function() {
onrendered: function(canvas) {
thyCanvas = cnvs;
document.body.appendUncle(cnvs);
cnvs.toWall(function(Wall) {
saveAss(Wall, "xprf.png");
});
}
});
});
});
});
When the user clicks the button (.btnSave), they convert the div called #widget into a canvas element. There are multiple divs(all different) and I've placed the button beside each div.
<input type="button" class="btnSave" value="Conver this box"/>
<div id="widget" style="width:10px; height:10px; background:red">
</div>
<input type="button" class="btnSave" value="Conver this box"/>
<div id="widget2" style="width:10px; height:10px; background:blue">
</div>
<input type="button" class="btnSave" value="Conver this box"/>
<div id="widget3" style="width:10px; height:10px; background:green">
</div>
The problem is that I'd like for my users to be able to click any of the buttons beside each div and when they do so, the div beside the button will be converted into a canvas.
TL;DR I'm trying to get my button to work for the div that it's beside so users can convert any of the divs into a canvas.
jQuery has the .next() method that allows you to select the next sibling of an element. In your case, it will be the next element from the current clicked button:
$(".btnSave").click(function() {
html2canvas($(this).next(), {

Categories