jQuery if div contains text, toggle button - javascript

I'm trying to get a button to be toggled if a div contains a string of text. Something like:
$(document).ready(function(){
$(function() {
if ('$div#trackingnumber:contains('Hello')');') {
$("dinput#submitam").toggle()});
}
});
Does anybody know how to do this?

You are on the right way. I only see some syntax errors. Try this
$(document).ready(function(){
if ($("#trackingnumber:contains('Hello')").length != 0)
{
$("dinput#submitam").toggle();
}
});
Checkout this jsFiddle too.

Just do like this
$(document).ready(function(){
if ($("div#trackingnumber:contains('Hello')").length > 0)
$("dinput#submitam").toggle();
});

$(document).ready(function() {
if ( $("#trackingnumber:contains('Hello')").length > 0 ) {
$("#submitam").toggle();
}
});

Related

Using jQuery to show/hide an element if some value is found in document

I'm trying to hide an element if some specific value of input is not found on the site.
I can hide an element by:
$(document).ready(function() {
$("#someid").hide();
});
But how to show it, if the value is found? I'm trying to do something like this:
$(document).ready(function() {
$("#someid").hide();
$("input[value$='somevaluetobefound']").ready(function() {
$("#someid").show();
});
});
What am I doing wrong?
Try this:
$(document).ready(function() {
$("#someid").hide();
$('#inputID').on('input', function() {
if ( $('input').val() === 'test') {
$("#someid").show();
}
else $("#someid").hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Type 'test' to show DIV<br>
<input id="inputID" type="text">
<div id="someid">DIV</div>
I had not fully understood what you where trying to acomplish:
$( document ).ready(function() {
if (!$('input[value="somevaluetobefound"]'))
$("#someid").hide();
$(':input').on('keyup', function(){
if ($(this).val() == 'somevaluetobefound')
{
$("#someid").show();
} else {
$("#someid").hide();
}
});
});
I have updated the code here
EDIT: Based on new info provided by OP
$( document ).ready(function() {
if ($(':radio[value="somevaluetobefound"]').length !== 0)
$("#someid").show();
else
$("#someid").hide();
});
Sample here
<script type="text/javascript">
$(document).ready(function () {
$("input[value=somevaluetobefound]").closest('#someid').hide();
});
</script>
you can try this :
$(document).ready(function() {
$("#someid").hide();
if($("#someid").val() !=''){
$("#someid").show();
}
});
Improvising on #Arkej's answer:
$(document).ready(function() {
$("#someDiv").hide();
$(':input').on('input', function() {
if ( $('input').val() === 'somevalue') {
$("#someDiv").show();
}
else $("#someDiv").hide();
});
});
Here I am using :input to find all input boxes on the page. Since you need to either have an ID the input field you want or just have all input text boxes be used to show or hide your div depending on what the value you are looking for.
Also refer to this for guidance on getting val from inputs:
Get the value in an input text box
Cheers

Removing text with links with JavaScript, new at this

How do I allow the X inside the "li" tags to be the only clickable part of the text, but still delete the whole line? Thank you in advance. This is my third day working with JS.
$("button#hello").click(function() {
$("ul#user").prepend("<li>Hi X</li>");
$("ul#webpage").prepend("<li>Hello X</li>");
$("ul#user").children("li").first().click(function() {
$(this).remove();
});
$("ul#webpage").children("li").first().click(function() {
$(this).remove();
});
});
Try something like this:
$("button#hello").click(function() {
var x = $('<span>X</span>').click(function() {
$(this).parent().remove();
});
$("<li>Hi </li>").append(x).prependTo("ul#user");
$("<li>Hello </li>").append(x.clone(true)).prependTo("ul#webpage");
});
JsFiddle:
http://jsfiddle.net/KHUbf/1/

Javascript toggle menu collapsed issue

I have created a Javascript toggle menu:
$(document).ready(function() {
$('.toggle').click(function () {
if ($(this).hasClass("expanded")) {
$(this).next().slideUp("fast");
} else {
$('.toggle').next().slideUp("fast").removeClass("expanded");
$(this).next().slideDown("fast");
$(this).removeClass("collapsed");
$(this).addClass("expanded");
}
});
});
When I click on another item in the menu, the class "expanded" is not removed from the other elements. I've tried many different things but can't get my head around it. Any help would be appreciated.
$(document).ready(function() {
$('.toggle').click(function () {
if ($(this).hasClass("expanded")) {
$(this).next().slideUp("fast");
$(this).addClass('collapsed');
$(this).removeClass('expanded');
} else {
var $expandedItems = $('.expanded');
$expandedItems.next().slideUp("fast")
$expandedItems.addClass('collapsed');
$expandedItems.removeClass('expanded');
$(this).next().slideDown("fast");
$(this).removeClass("collapsed");
$(this).addClass("expanded");
}
});
});
Based on your comments I think you are after something like this.
$(document).ready(function() {
$('.toggle').click(function () {
if ($(this).hasClass("expanded")) {
$(this).next().slideUp("fast");
} else {
$('.expanded').removeClass('expanded');//here is your problem
$(this).next().slideDown("fast");
$(this).removeClass("collapsed");
$(this).addClass("expanded");
}
});
});
This should be remove expanded class from your jquery code
Note Tested although please tell me if its not working
updated
Demo
And for jquery i think you are missing too much information here check demo here Demo

jQuery hide dropdown when clicked anywhere but menu

I'm trying to make it so that my dropdown menu shows when you click a button, and hides when you click anywhere except the dropdown menu.
I have some code working, as far as not closing when you click the menu, however when you click the document when the menu is closed, it shows the menu, so it continuously toggles no matter where you click.
$(document).click(function(event) {
if ($(event.target).parents().index($('.notification-container')) == -1) {
if ($('.notification-container').is(":visible")) {
$('.notification-container').animate({
"margin-top": "-15px"
}, 75, function() {
$(this).fadeOut(75)
});
} else {
//This should only show when you click: ".notification-button" not document
$('.notification-container').show().animate({
"margin-top": "0px"
}, 75);
}
}
});
jQuery's closest() function can be used to see if the click is not within the menu:
$('body').click(function(e) {
if ($(e.target).closest('.notification-container').length === 0) {
// close/animate your div
}
});
you can do something like this if your item is not clicked then hide its dropping list in case of drop down
$(':not(#country)').click(function() {
$('#countrylist').hide();
});
I am using a very simple code for this as :-
$(document).click(function(e){
if($(e.target).closest('#dropdownID').length != 0) return false;
$('#dropdownID').hide();
});
Hope it will useful.
Thanks!!
I usually do like this:
$('.drop-down').click(function () {
// The code to open the dropdown
$('body').click(function () {
// The code to close the dropdown
});
});
So put your body (elsewhere) click function inside the drop-down open click function.
This might not be a complete solution but I´ve created a demo to help you out. Let me know it´s not working as you´d expect.
$(document).click(function(e) {
var isModalBox = (e.target.className == 'modal-box');
if (!isModalBox) {
$('.modal-box:visible').animate({
"margin-top": "-15px"
}, 75, function() {
$(this).fadeOut(75);
});
}
});
$('a').click(function(e) {
e.stopPropagation(); // Important if you´d like other links to work as usual.
});
$('#temp-button').click(function(e) {
e.preventDefault();
$('.modal-box').show().animate({
"margin-top": "0px"
}, 75);
});
Try this :
// The code to close the dropdown
$(document).click(function() {
...
});
// The code to open the dropdown
$(".drop-down").click(function() {
...
return false;
});
try something like:
$(document).click(function(event) {
if($(event.target).parents().index($('.notification-container')) == -1) {
if($('.notification-container').is(":visible")) {
$('.notification-container').animate({"margin-top":"-15px"}, 75, function({$(this).fadeOut(75)});
}
}
});
$(".notification-button").click(function(event){
event.stopPropagation();
$('.notification-container').show().animate({"margin-top":"0px"}, 75);
});
This is what I've decided to use, it's a nice little jQuery plugin that works with little code.
Here's the plugin:
http://benalman.com/projects/jquery-outside-events-plugin/
This is the code that makes my above code in my question work.
$(document).ready(function(){
$(".notification-button").click(function(){
$('.notification-container').toggle().animate({"margin-top":"0px"}, 75);
});
$('.notification-wrapper').bind('clickoutside', function (event) {
$('.notification-container').animate({"margin-top":"-15px"}, 75, function(){$(this).fadeOut(75)});
});
});

Small JavaScript/jQuery mouseleave question

I got this small JavaScript using jQuery that slides down a ul when an image is clicked:
$(document).ready(function () {
$('img.menu_class').click(function() {
$('ul.the_menu').slideToggle('medium');
});
});
I was wondering if I could modify it to recognize when the mouse leaves the ul/image and make it slide back instead of having the user click on the image again. If I use something else than click() it would (naturally) only apply to the image and won't recognize the ul as an object. Any suggestions?
you can use jquery mouseout()
Try this
$('img.menu_class').bind('mouseleave',function() {
$('ul.the_menu').slideToggle('medium');
});
or
$('img.menu_class').bind('hover',function() {
$('ul.the_menu').slideToggle('medium');
});
Use this code.
This is my updated code
Use this code to slidedown ur list once mouse hover on image and remains open
$(document).ready(function () {
$('img.menu_class').bind('hover mouseleave',function() {
$('ul.the_menu').slideDown('medium');
});
//to close ul
$('#id_of_close_element').bind('click',function() {
$('ul.the_menu').slideUp('medium');
});
});
This is the whole code (added some image swapping to the whole thing), working at all major (updated) browsers at the moment. Not very clean and probably could be done easier but it works:
$(document).ready(function() {
$('ul.menu_body').hide();
if ($.browser.msie && $.browser.version < 8) {
$('.dropdown').click(function() {
if ($('ul.menu_body').is(':hidden')) {
$('ul.menu_body').fadeIn('medium');
$('.menu_head').attr("src", "layout/buttonhover.png");
$('.menu_body').css("font-weight","normal");
} else if ($('ul.menu_body').is(':visible')) {
$('ul.menu_body').fadeOut('medium');
$('.menu_head').attr("src", "layout/servbtn.png");
}
});
} else {
$('.dropdown').click(function() {
if ($('ul.menu_body').is(':hidden')) {
$('ul.menu_body').fadeIn('medium');
$('.menu_head').attr("src", "layout/buttonhover.png");
} else if ($('ul.menu_body').is(':visible')) {
$('ul.menu_body').fadeOut('medium');
$('.menu_head').attr("src", "layout/servbtn.png");
}
});
$('.dropdown').mouseleave(function() {
if ($('ul.menu_body').is(':visible')) {
$('ul.menu_body').fadeOut('medium');
$('.menu_head').attr("src", "layout/servbtn.png");
}
});
}
});

Categories

Resources