I am using 2 functions to hide and show all different divs in my html. I'm trying to pass a parameter into the function and use if condition to hide or show different div.
Here is my Jquery Hide function
function HideDivs(content){
if(content==="list"){
$("div#temp_block").hide();
}else if(content==="midbtn"){
$(".search_midbtns").hide();
}else if(content==="result"){
$(".search_result").hide();
}else if(content==="edit"){
$("#edit_data").hide();
}
}
and i am using it inside the document ready function
HideDivs("result");
HideDivs("midbtns");
but i can't hide these divs. Is there a way to do this ? I am having so many div to hide and show. Hope this would be a better way to view the js code.
Check your strings "midbtns" !== "midbtn" also check that your class names match.
Related
I have the following HTML on a webpage multiple times which is generated by PHP.
generate<div class="selectArea selectBox"></div>
Now I use this code to give each div their own individual classes
$(document).ready(function() {
$(".selectArea").each(function(i) {
$(this).addClass("selectBox" + (i+1));
});
});
But now I need to change this:
$(".selectBox").html($select);
which is inside a click function
$(document).on('click', '.generate', function () {
So that it also works with (i+1).
what i try to achieve
The above code is part of a entire project. In this project I got a selectbox with options generated from several inputs. In the .html I add this selectbox to the div. But right now it is added to all the divs on the page instead of just one.
if the .generate element is right before .selectBox div, then instead of:
$(".selectBox").html($select);
use jQuery's .next():
$(this).next('.selectArea').html($select);
I think that each div is being given the same class so all divs will be affected.
Declare i outside of your function so it is global. Also give it a better name.
Something like this
var select_box_count = 0;
$(document).ready(function() {
$(".selectArea").each(function() {
select_box_count ++;
$(this).addClass("selectBox" + (select_box_count+1));
});
});
You can reference that with an id
In the div that you only want that
$('#id').html($select);
Or just using a selector like
$('.selectBox:first-child').html($select);
Or just
$(".selectBox")[number element].html($select);
I am working with a list in SharePoint 2013 that creates an unordered list dynamically on mouseover (the List item ECB for those familiar with SharePoint).
The class name that is given has spaces added after at, 1 additional space for each menu item. I'm not sure if this affects the class property value in jquery so that is why I'm using the begins with notation.
I am needing to hide several menu items and I'm not getting alerts in my debug so I'm thinking my syntax is off.
I'm using this:
if($('ul[class^="ms-core-menu-list"] li[text="View Item"]') ! == null) {
alert('F');
} else {
alert('no F');
}
I do not get alerts so either my syntax is wrong and I need assistance with that or the menu item isn't created when this code executes, in which case I'm wondering how it is possible to get at these menu items using jquery as I'm unable to deploy code in my environment.
I've looked at a number of blogs over the past few days but nothing recommended comes close to working for me.
Thank you
If you're trying to find out if the page contains any li tags that with the text "View Item" that are children of ul tags with the class "ms-core-menu-list" you can use this selector:
$('li:contains("View Item")', $('ul.ms-core-menu-list')).length;
In the context of your example:
if($('li:contains("View Item")', $('ul.ms-core-menu-list')).length) {
alert('F');
} else {
alert('no F');
}
Use this :
if($('ul.ms-core-menu-list li[text="View Item"]').length==0)
...
Note that JQuery always returns a JQuery object which is not null.
The thing to remember about jQuery selectors is that they will always return an object. Even if you don't find anything, you are still given the jQuery API to call things like .hide(), .show(), etc. You won't get an error if you haven't selected anything when calling a jQuery method, you just won't have anything selected for the calls to act upon.
What you can do to infer if any elements are selected is by treating it like the psuedo-array that it is -- you can use .length.
In your case,
if ($('ul.ms-core-menu-list li[text="View Item"]').length > 0) {
alert('F');
} else {
alert('no F');
}
I'm making a Jquery Mobile app and have a page with 15 or so divs with class', I'm trying to make a filtering system so that when you press a button some of these divs disappear depending on the class. There are 3 groups and they all have an "all" class to display everything making 4 classes total.
Unfortunately most of the js I use never works even if I set up a jsfiddle for jquery mobile when I put it into my app it doesn't seem to work.
I wanted to use
function show(target) {
document.getElementsByClassName(target).style.display = 'block';
}
function hide(target) {
document.getElementsByClassName(target).style.display = 'none';
}
But that doesn't work whereas document.getElementById seems to work fine. However obviously I can only hide/show 1 div per button..
I was wondering if there was a work around for this or something completely different I should try?
Here's a jsfiddle of what I have: http://jsfiddle.net/tzcx7gky/
It's completely broken in jsfiddle but it works fine in my code, which is odd..
You don't need seperate hide - show functions. The following would take care of all.
$('a').on("click",function()
{
$("#scroll_content div").hide(); // initially hide all divs inside the element with id = scroll_content
var target = $(this).text().toLowerCase(); // find the class you wish to show using the text of the a tag clicked ( I would prefer using data-attr in this case but I'll leave the choice upto you.
$("." + target).show(); // show the element with the class target.
});
Working example : http://jsfiddle.net/tzcx7gky/2/
getElementsByClassName returns an array of elements. So you would have to itterate over the array and then set the display property on each one. Since you are already using jQuery you can use it to do it for all the elements.
function show(target) {
/* jQuery uses CSS selectors to grab elements
so we have to prefix the target with "."
Alternativley we could pass in the whole selector in the
function so we don't have to prefix it e.g.
show('.all')
$(target).show();
*/
$("."+target).show();
}
function hide(target) {
$("."+target).hide();
}
Here is the same implementation in the vanilla js framework
function show(target) {
var elements = document.getElementsByClassName(target);
elements.forEach(function(element){element.style.display = 'block';});
}
function hide(target) {
var elements = document.getElementsByClassName(target);
elements.forEach(function(element){element.style.display = 'none';});
}
note that getElementById returns a single element since id's are unique and there should only be one element with one id on the page. That is why it was working for you.
On my page I'm trying to do smth like that: Lets say, when we click on some link with id min_reg it animates div with idftr_form_cntr, and shows another div tcr_form_cntr within.
There are 3-4 links that does same function but shows another div within ftr_form_cntr. Well if user clicked one of this links for the first time then there is no problem. But if user already clicked (I mean if ftr_form_cntr already opened) I want to just fadeOut all existing divs nested to ftr_form_cntr and fade in one another div (or swap existing div with another one).
Take a look at this line tcr_form_cntr.fadeIn(1000). What do I need to do before this line to fadeOut all nested divs?
My function look like this:
$(min_reg).click(function () {
if($(ftr_form_cntr).hasClass('opened')){
$(ftr_form_cntr)...<fadeOut all nested divs>
tcr_form_cntr.fadeIn(1000);
return;
}
ftr_form_cntr.show().stop(true, true).animate({
height:"170"
},1000).addClass('opened');
tcr_form_cntr.fadeIn(1000);
});
Assuming that ftr_form_cntr is a string variable holding the jQuery selector for your container element, you can select all the div elements inside and fade them like this:
$(ftr_form_cntr + " div").fadeOut();
Have a look at the jQuery doco on selectors, specifically the "descendant selector".
If ftr_form_cntr is not a string variable but is actually, say, a reference to a DOM element or something then another way to select certain nested elements is using the .find() method, which gets descendants of the elements in your existing jQuery object according to another selector you provide:
$(ftr_form_cntr).find("div").fadeOut();
Your function could look like this:
$(min_reg).click(function () {
var animated_div = $(ftr_form_cntr);
if(animated_div.hasClass('opened')){
animated_div.find('div').fadeOut();
tcr_form_cntr.fadeIn(1000);
return;
}
animated_div.show().stop(true, true).animate({
height:"170"
},1000).addClass('opened');
tcr_form_cntr.fadeIn(1000);
});
What I did is:
I cached the element you work on ($(ftr_form_cntr)),
used .find() jQuery method to get all the divs you want to fade out,
Did it help? Please make sure that both ftr_form_cntr and tcr_form_cntr are defined and first is eg. selector, but the second must be jQuery object.
I have some DIVs that I am using JQuery to hide and show using the toggle() function. This has been working fine.
But I just recognized some relationships between some of these DIVs that would allow me to group some of them into a class.
I was hoping that this would allow me to toggle the DIV class instead of each of the DIV ids.
So I want to do this:
$("#myDIVId1").click(function ()
{
$("myDIVClass").hide();
$("#myToggle1").toggle();
});
Instead of this:
$("#myDIVId1").click(function ()
{
$("#myToggle2").hide();
$("#myToggle3").hide();
$("#myToggle4").hide();
$("#myToggle5").hide();
$("#myToggle1").toggle();
});
But only this verbose ID access seems to work. Any ideas why?
When you select the class, you need to put a '.'
$(".myDIVClass").hide();