I am using javascript to search through a group of divs while I type. It displays the divs if their title matches what is being typed in the search box and hides any that don't match.
I want to also make the displayed divs have a position of 'initial' instead of 'absolute' so that they move to the top of the page if they are being shown.
I have tried the code below (the line: $('.cbp-item').position='initial';) but it doesn't add the attribute.
I don't seem to get any js errors in the console either.
$( document ).ready(function() {
$('#societies_search').on('keyup',function(){
var valThis = $(this).val().toLowerCase();
if(valThis == ""){
$('.cbp-item').show();
$('.cbp-item').position='initial';
}
else {
$('.cbp-item').each(function(i,item){
var text = $(item).text().toLowerCase();
console.log($(item).find('a').text());
if(text.indexOf(valThis) >= 0) {
$(item).show();
$(item).position='initial';
}
else{
$(item).hide();
}
});
}
});
});
You can use .css() for this
$(item).css('position','initial');
Related
I've three icons on my page. Each icon clicked, ajax called and contented fetched and appended to another div respectively. The problem I face now, if an icon fired multiple time continuously, it fires ajax for the no of time it's clicked.
Noticing this problem, I check, if the request pass in property called sweep. If it does I would empty the div and append the content; this is to avoid duplicate data being appended. But now when the icons pressed multiple times, it appends more than once the same data.I can't find what causing this to happen. For some reason, I had to use append and not html to put in the content.
I thought can overcome this by event.stopPropagation and event.stopImmediatePropagation but they're of no use. Please check my code below and help me to fix it...thanks..
screen cast of the problem:
demo
code:
//links in the footer clicked
$('body').off('click.footer').on('click.footer', '[data-footer] ul li a', function(event){
event.stopImmediatePropagation();
event.preventDefault();
event.stopPropagation();
var layout = $(this).data('ck-tab');
$(this).trigger('ck.chat.layout', [{'layout':layout}]);
if(layout == 'list'){
ckit.render({"layout":'getConversations', "sweep": 1, "limit":localStorage.getItem("cListlimit"), "userId": localStorage.getItem("ckuser")});
}else if(layout == 'contact'){
ckit.render({"layout":'getContacts', "sweep": 1, "limit":localStorage.getItem("cntlimit"), "userId": localStorage.getItem("ckuser")});
}else if(layout == 'setting'){
//ckit.render({"layout":'getSettings', "sweep": 1});
ckit.setting();
}
});
I check if data already appended to the div this way. But even this shows the data multiple times..
if($.inArray(data[i].id, temp)<0) {
//add to array
temp.push(data[i].id);
}
function to display content:
function display(value, arg){
var wrapper = $('[data-body-content]');
if(arg[0]['sweep'] == 1){
temp = [];
wrapper.empty();
}
setTimeout(function(){
for(var i=0; i < counter;i++){
if($.inArray(data[i].id, temp)<0) {
//add to array
temp.push(data[i].id);
}
}//end for
console.debug(temp);
wrapper.append(temp);
}, 300);
}
I have a simple form (text field and submit button). I am trying to have the user submit a number, and the resulting number will display one div (from a set of divs).
I tried using this example as a base (when the user clicks a link, it shows a div, but hides others).
My test is below:
var divState = {};
function showhide(oFrm) {
var dividnum = oFrm.Inputed.value;
var prepar = "para";
var divid = prepar + theInput; /* should result in something like "para52" */
divState[divid] = (divState[divid]) ? false : true;
//close others
for (var div in divState){
if (divState[div] && div != divid){
document.getElementById(div).style.display = 'none';
divState[div] = false;
}
}
divid.style.display = (divid.style.display == 'block' ? 'none' : 'block');
}
http://jsfiddle.net/LfzYc/431/
Note: I am NOT proficient in JavaScript at all, which is why I am having difficulty.
Also, I'd like to add a function ... if the number entered is not between 1-4, show a different div, maybe with the id paraEnd.
Please look at the jsFiddle based on your one. I hope I've done what you want. I changed the showhide function and your HTML (fixed div's IDs and added one more div#paraEnd). I'd suggest you refactoring your code.
You should use jQuery to have an easy way to manipulate the DOM.
Using jQuery I made an example for you, just change your JS and paste mine:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
(function ($) {
// get the paragraphs
var paragraphs = $('.paragraph');
// form submit
$('#paragraphform').submit(function (e) {
// prevent the event to flow
e.preventDefault();
// get the input value
var value = $('#Inputed').val() - 1;
// reset all divs removing active css class
paragraphs.removeClass('active');
$('.error').removeClass('active');
// verify if the value doens't exist
if(value < 0 || value > paragraphs.length - 1) {
$('.error').addClass('active');
return;
}
// show the active div
paragraphs.eq(value).addClass('active');
});
})(jQuery);
</script>
Is that what you need?
If you not familiar with jQuery, this is the jquery Learn Center:
https://learn.jquery.com/
And this is a nice tutorial for beginners:
http://www.tutorialspoint.com/jquery/
So, I need a div to slide up when another slides down.
Example:
When Home button is clicked a div, we'll call it box_Home, slides down. When Games button is clicked, box_Home should slide up and then box_Games should slide down. What's happening is that they are overlapping instead of swapping out.
http://jsfiddle.net/M8UgQ/15/
var open = $('.open'),
a = $('ul').find('a');
console.log(a.hasClass('active'));
open.click(function(e) {
e.preventDefault();
var $this = $(this),
speed = 500;
var link_id = $this.attr('id');
var box_id = '#box_' + link_id;
console.log(box_id);
if($this.hasClass('active') === true) {
$this.removeClass('active');
$(box_id).slideUp(speed);
} else if(a.hasClass('active') === false) {
$this.addClass('active');
$(box_id).slideDown(speed);
} else {
a.removeClass('active')
$(box_id).slideUp(speed);
$this.addClass('active');
$(box_id).delay(speed).slideDown(speed);
}
});
take a look at this
http://jsfiddle.net/rWrJ9/1/
the main idea is...
if the element clicked is active, remove it, otherwise: 1. find (if any) already active elements (using $('.active')) and use jQuery.map() to make them inactive and slide them up, and 2. make the element clicked active.
I also removed the unneeded variable a
IMPORTANT: the this inside the map() function is different from the this (or rather, $this as you called it) outside the map() function
I think you're saying you have two buttons id="Home" class="open" and id="Game" class="open", and two divs id="box_Home" and id="box_Game". If so, you add class="box" to box_Home and box_Game and do something like this:
$('.open').click(function(e) {
e.preventDefault();
var $this = $(this);
var link_id = $this.attr('id');
var box_id = '#box_' + link_id;
$('.box').slideUp();
$(box_id).slideDown();
});
Hi check this fiddle i hope you need thing to implement
jsfiddle
in the if else statement you are doing a mistake
else if(a.hasClass('active') === false) {
replace it with
else if($this.hasClass('active') === false) {
I have a function that loops through all of the inputs of my form and checks if they are filled or not. If the field is blank, it makes that specific input pink and returns false.
I'm trying to add a "Field Required" message underneath the inputs that are not filled. So i coded an extra table row after each one, with a div that holds the error message. The css for the div is set to "display:none" on page load.
Right now my function is showing "required" for every input and not just the ones that are blank, but the pink coloring is still working correctly.
How do I get the "required" div to show and hide correctly like the pink coloring does?
checkinputs = function (blockOne,blockTwo) {
inputGood = true;
blOne = $(blockOne);
blTwo = $(blockTwo);
blInput = [blOne,blTwo];
for (x = 0; x < 2; x++) {
var validators = blInput[x].find(" [id$='RequiredIndicator']").parent().parent('tr').find(':input:not(:hidden)');
var notAllFilled = validators.filter(function(){
var myInput = $(this); //.parent().parent('tr').find(':input');
var filledVal = myInput.val();
var isFilled = $.trim(filledVal).length;
if (isFilled) {
$(this).css('background-color', 'white');
$(this).closest('div').find('.required').hide();
$(this).parent('td').prev('td').find('span').text('*');
}
else {
$(this).css('background-color', 'pink');
$(this).closest('div').find('.required').show();
$(this).parent('td').prev('td').find('span').text('*');
inputGood = false;
}
return isFilled;
}).length;
var inputCount = validators.length;
};
if( !inputGood ){
$('#errorAlert').append('<span style="font-weight:bold;">"Some required information is missing. Please complete the missing fields below."</span>' + '<br><br>');
$('#errorAlertTwo').append('<span style="font-weight:bold;">"Some required credit card information is missing. Please complete the missing fields below."</span>' + '<br><br>');
}
return inputGood;
};
HERE IS A FIDDLE OF THE ISSUE:
http://jsfiddle.net/RNMM7/
Your issue is almost definitely your line to show the div:
$(this).closest('div').find('.required').show();
What this line does is:
Starting at your $(this), it finds the nearest ancestor [including $(this)] that is a div, going up the DOM tree
Finds all elements with class 'required' under that div, and shows them.
Without seeing how your HTML is structured, my guess is that the nearest div element up the DOM tree encompasses all your .required elements. You'd need to replace the 'div' in that statement with an element lower in the DOM tree that would only encompass your $(this) and the one .required element you want to show.
I'm having trouble limiting a list to only add unique items this is what I have so far
function addTab(tabName)
{
var tabList=$("#pageContent ul").find("li").text();
if($("#pageContent ul li:contains('"+tabList+"')").length<1)
{
$("#pageContent ul").append("<li>"+tabName+"</li>");
}
else
{
}
}
but it doesn't work I'm not sure what's wrong and from what I can tell this should be the best way to do it.
I was going to use jQuery UI tabs but my layout uses floats and messes with the tabs widget
You are getting text content of all li elements and then try to select li elements that contain that specific text, this doesn't make sense, you don't even use tabName in your filtering logic, try the following using filter method.
function addTab(tabName) {
var $e = $("#pageContent ul");
var n = $e.find("li").filter(function(){
var t = this.textContent || this.innerText;
return t === tabName
}).length;
if (n === 0) {
$e.append("<li>"+tabName+"</li>");
} else {
// ...
}
}