I need to hide a div if another div has a class.
I've created a very basic example HERE
I need the div on the bottom to hide when the word "click" is.. well.. clicked. It adds a class to the middle div just fine, but it seems hasClass() doesn't want to work?
NOTE: The structure needs to be like this. If "click" is clicked, modify the middle div (add class?), and manipulate the bottom div based on the middle div. With this setup - I can't just do "if CLICK is clicked, slideUp() the bottom div".
Also, once "ok" or "cancel" is clicked, it will revert, because the middle div will no longer have the class. Provided that's the method I can get working here, haha.
your if statement is outside of any function, so there is no reason for it to be called after the script is loaded.
See this fiddle, I think that's what you want.
On a side note, another variation to check if there's a class is:
if ( $('body.className').length ) {
Still recommend hasClass though. Just nice to see variation sometimes.
This is only getting called once, when the script loads. You need to have make sure it gets called in your .click(...) handler.
if($('#timestampdiv').hasClass('hidepub')) {
$('#major-publishing-actions').slideUp('slow');
}
As mentioned by others, you don't have a call to if on all click event handlers. Create a custom function with statement inside if and call it on all click handler.
Check this fiddle
After you append the class to the DOM element, this should properly hide the element.
$('.element').click(function()
{
$('.thisElement').addClass('hidepub');
if($('.thisElement').hasClass('hidepub')) {
$('.thisElement').hide();
}
});
You can combine them all into one function - And you want that check to be inside the click functions
You can reduce the addclass removeclass by using toggleClass and passing in a condition
$('a.edit-timestamp,a.save-timestamp,a.cancel-timestamp').click(function() {
var $tsdiv = $("#timestampdiv");
// add class showpub if edit is clicked
$tsdiv.toggleClass('showpub',$(this).hasClass('edit-timestamp'));
// add class hidepub only if it wasn't edit that was clicked
$tsdiv.toggleClass('hidepub',!$(this).hasClass('edit-timestamp'));
// then do your toggle
if ($tsdiv.hasClass('hidepub')) {
$('#major-publishing-actions').slideUp('slow');
}else{
$('#major-publishing-actions').slideDown('slow');
}
});
http://jsfiddle.net/JPcge/
You can reverse it by swapping the logic passed into the toggleClass() methods
Related
In my example here:
Example
JS
$('button').on('click', showHide);
$('.overlay').on('click', showHide);
function showHide(){
$('.scroll-container').toggleClass('show');
$('.content-container').toggleClass('no-scroll');
$('.overlay').toggleClass('opacity');
}
you have a basic body with text. A clickable element (in this case a 'button') causes a scrollable container to appear and 'hover' over the original body, which can be hidden again by clicking outside of this container.
I'm not very good at JavaScript and with this example I was helped by a friend. The thing I'm struggling with now is that I need multiple different clickable elements, displaying a similar scrolling container, but with different content.
I'm doing this for a portfolio website, so imagine a bunch of photos on a page, which when clicked result in a body hovering over the original content, further elaborating the clicked project.
Do I create multiple id's for each project, together with multiple scrolling container id's, and just copy the JavaScript a couple of times?
I hope this makes sense and I hope someone is capable of explaining to me how I'm able to create the proposed effect.
First of all, you have to make a connection between buttons and containers that should be opened. One way is to use their indexes, so that when first button is clicked, first container would open. You can use this reference of the clicked object inside your function, in order to get its index. Like this:
$(this).index()
Then, you have to select all the elements with scroll_container class $('.scroll-container') and reduce the set of matched elements to the one by passing index of the clicked element to .eq() method .eq($(this).index()). Finally, you have to add show class to it addClass('show').
And because the logic is changed, you have to separate actions done on button and .overlay click events. They do not make a reverse action now, so they are not "togglers" anymore.
http://codepen.io/anon/pen/LpWwJL
$('button').on('click', show);
$('.overlay').on('click', hide);
function show(){
$('.scroll-container').eq($(this).index()).addClass('show');
$('.content-container').addClass('no-scroll');
$('.overlay').addClass('opacity');
}
function hide() {
$('.scroll-container').removeClass('show');
$('.content-container').removeClass('no-scroll');
$('.overlay').removeClass('opacity');
}
UPDATE
One thing you should keep in mind regarding $(this).index() method.
As it is written here:
If no argument is passed to the .index() method, the return value is an integer indicating the position of the first element within the jQuery object relative to its sibling elements.
That means that trigger elements should have common parent in order to maintain our logic.
In cases like this: https://stackoverflow.com/posts/32946956/edit, elements that are triggering scroll_container appearance, have different parent nodes (they are placed in 3 different divs). So, if we will call index() method for each of them, it will return '0' because they are the first and the only elements in their parent nodes.
Actually it means that you have to get the order of their parent elements, not theirs own. This can be achieved by using parent() method before index():
$(this).parent().index()
Here is updated codepen.
If I were you, I would implement a generic function to display a different content using the same function based in the button. So for that we will need something to relational the click with the content for that we can set a value in out button:
<button data-id="1">Click me 1!</button>
<button data-id="2">Click me 2!</button>
so out when we click the button we should get the value to send it to our function:
$('button').on('click', function(){
var dataButtonValue = $(this).data('id');
});
Then we can match it with the content using for example data-content-id
<div class="content" data-content-id="1">your wording</div>
<div class="content" data-content-id="2">your wording</div>
With all that we can manage what content we want to show depends on the click.
function showHide(id){
$('.content[data-content-id="' + id + '"]').toggleClass('show');
}
DEMO
I hope it's helps.
so i implemented a bit of jQuery that basically toggles content via a slider that was activated by an <a> tag. now thinking about it id rather have the DIV thats holding the link be the link its self.
the jQuery that i am using is sitting in my head looks like this:
<script type="text/javascript">
function slideonlyone(thechosenone) {
$('.systems_detail').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).slideDown(200);
}
else {
$(this).slideUp(600);
}
});
}
</script>
i was using this as a index type box so there are several products when you click on the <a> tag that used to be an image* it would render a bit of content beneath it describing the products details:
<div class="system_box">
<h2>BEE Scorecard database</h2>
<p>________________</p>
</div>
the products details are wrapped in this div.
<div class="systems_detail" id="sms_box">
</div>
so when you click on what used to be a image* it would run the slideonlyone('div_id_name') function. the function above then first closes all the other divs with the class name 'system details' and then opens/slides the div with the id that was passed into the slideonlyone function. that way you can toggle products details and not have them all showing at once.
note i only kept the <a> tag to show you what was in there i will be getting rid of it.
note: i had an idea of just wrapping the whole div in an <a> tag but is that good practice?
So now what i am wondering is since you need JavaScript to run onclick on a div tag how do you write it so that it still runs my slideonlyone function?
Using obtrusive JavaScript (i.e. inline code) as in your example, you can attach the click event handler to the div element with the onclick attribute like so:
<div id="some-id" class="some-class" onclick="slideonlyone('sms_box');">
...
</div>
However, the best practice is unobtrusive JavaScript which you can easily achieve by using jQuery's on() method or its shorthand click(). For example:
$(document).ready( function() {
$('.some-class').on('click', slideonlyone('sms_box'));
// OR //
$('.some-class').click(slideonlyone('sms_box'));
});
Inside your handler function (e.g. slideonlyone() in this case) you can reference the element that triggered the event (e.g. the div in this case) with the $(this) object. For example, if you need its ID, you can access it with $(this).attr('id').
EDIT
After reading your comment to #fmsf below, I see you also need to dynamically reference the target element to be toggled. As #fmsf suggests, you can add this information to the div with a data-attribute like so:
<div id="some-id" class="some-class" data-target="sms_box">
...
</div>
To access the element's data-attribute you can use the attr() method as in #fmsf's example, but the best practice is to use jQuery's data() method like so:
function slideonlyone() {
var trigger_id = $(this).attr('id'); // This would be 'some-id' in our example
var target_id = $(this).data('target'); // This would be 'sms_box'
...
}
Note how data-target is accessed with data('target'), without the data- prefix. Using data-attributes you can attach all sorts of information to an element and jQuery would automatically add them to the element's data object.
Why do you need to attach it to the HTML? Just bind the function with hover
$("div.system_box").hover(function(){ mousin },
function() { mouseout });
If you do insist to have JS references inside the html, which is usualy a bad idea you can use:
onmouseover="yourJavaScriptCode()"
after topic edit:
<div class="system_box" data-target="sms_box">
...
$("div.system_box").click(function(){ slideonlyone($(this).attr("data-target")); });
You can bind the mouseenter and mouseleave events and jQuery will emulate those where they are not native.
$("div.system_box").on('mouseenter', function(){
//enter
})
.on('mouseleave', function(){
//leave
});
fiddle
note: do not use hover as that is deprecated
There's several things you can improve upon here. To start, there's no reason to use an <a> (anchor) tag since you don't have a link.
Every element can be bound to click and hover events... divs, spans, labels, inputs, etc.
I can't really identify what it is you're trying to do, though. You're mixing the goal with your own implementation and, from what I've seen so far, you're not really sure how to do it. Could you better illustrate what it is you're trying to accomplish?
== EDIT ==
The requirements are still very vague. I've implemented a very quick version of what I'm imagining you're saying ... or something close that illustrates how you might be able to do it. Left me know if I'm on the right track.
http://jsfiddle.net/THEtheChad/j9Ump/
I have two custom dropdown lists that have the same markup. I need to have only one show at a time. Right now, I'm able to open both at the same time. Both should also close when I click off the list.
The same markup for both lists is required, so I can't use unique ID's or additional classes to make this happen.
Here is a link to my fiddle example: http://jsfiddle.net/dg7Lc/29/
Any help would be greatly appreciated, thanks!
-D
Consider adding a data attribute such as 'active' via jquery when you click on one of them, then hide all those that have that attribute.
$('.custom-select').eq(0).hide() will hide the first one.
Use .show() instead of .hide() to show (obviously) and change the index to (1) to get the second one.
First thought would be if you could wrap a span or div around either or both and use that to get around the "same markup" limitation. Other than that, though, I'd suggest using order in page - use .next() and .prev() to get between them, and something like
$("div.custom-select").get(0)
or
$("div.custom-select").get(1)
to select them from outside.
edit: if you can run them off of something like an onmouseover, onchange, or whatnot, it's even easier - the one that's changing will be passed into the function as the "this" parameter. Just hide both, and show this, or show both and hide this.
edit2: similarly, once you have one of them hidden properly - well, that one will be hidden, and respond to the ":hidden" selector. Use that to distinguish between them (and save the distinction as a jquery variable) before you go showing or hiding anything else
Hide the first:
$('.custom-select').first().hide();
Hide the second:
$('.custom-select').last().hide();
And then put these lines of code where needed.
http://jsfiddle.net/dg7Lc/31/
Basically, closing the others:
$('.custom-select').not(this).find('ul').slideUp('fast');
And for closing when clicking outside the box, I used this piece of code but it's a bit dirty:
$("body").click(function(e) {
var should = true;
for($e = $(e.target); should && $e.length; $e = $e.parent()) {
should = !$e.is(".custom-select");
}
if(should) {
$('.custom-select').find('ul').slideUp('fast');
}
});
You can bind a click to the document, that looks to see if they clicked on the custom-select or the document outside it and hides any open lists as it should:
$(document).click(function(ev){
if(!$(ev.target).is('.custom-select span')){ $('.custom-select').find('ul').slideUp('fast'); }
});
Updated JSFiddle
I have the following code which when used in a link goes forward to the next link ... so I'm basically using it to do the function of a next button.
What I need to do is to create a reverse version so I can use it as a Back button.
Here is the code:
<script>
$("a.mytrigger").click(function(e){
var index = $(this).attr("href").substr(5);
$('#navigation li:nth-child('+parseInt(index)+') a').click();
e.preventDefault();
});
</script>
UPDATE:
Please see the link below for further details:
Javascript JQuery Script click link by code (Sliding Form Script)
I think your problem can be solved more easily, with less HTML.
have a look at my fiddle.
A little explanation :
I am creating links onload usig $(function()) method. I find all the "li" items, and I am adding "next","prev" links on them. At the end I remove the "prev" link from the first item and the "next" link from the last item. This way I don't need to constantly create HTML elements on my own.
Each link I add, I identify with a class "next" or "prev".
I bind with "live" ( you might need to use "on" instead . the syntax might be a bit different)
with the "live" method I attach "click" event on each link. the handler operates on each link according to its "next"/"prev" class I attached from before.
For the "next" class, I use the "next" function in JQuery to get the next "li" element.
For the "prev" class, I use the "prev" function in JQuery to get the previous "li" element.
Please note that before I invoke "prev" or "next" functions, I make sure I reference the "li" object which is wrapping the link. For that I use the "closest('li')" call on $(this)
Let me know if there's anything more you need.
I want to add a slide up affect with jQuery to a DIV when a link inside of the DIV is clicked, but the problem i am running into is the class of the DIV's are defined by a loop. So, i can't define the DIV class in the jQuery line, because each DIV class is different and i cannot determine ahead of time what they are. I am trying to use .parent and .child but I am not sure how to go about this. Is this making any sense?
Bind to the click of the element you want (in this case I just used a simple anchor element). Then find the first parent that is a div and perform the slideUp() effect.
$('a').click(function() {
$(this).parents('div:first').slideUp();
});
You can see it work here: http://jsfiddle.net/XNnSp/
Let me know if that's what you are looking for http://jsbin.com/ehoza3
$('a').click(function() {
$(this).parent().slideUp();
});
Two (most obvious) ways
FIRST
If your tree is always defined in terms of depth you could access your parent DIV doing just that:
$(this).parent().parent().parent().slideUp();
SECOND
Add an additional class that doesn't clash with dynamic ones and do this:
$(this).closest(".some-custom-class").slideUp();