I'm trying to check if the content in #textd is not empty and that it contains more than 150 chars. If so, I send its content to another web page, if not I display an error message relative to the context. I'm doing this with these codes:
jsFiddle
HTML code:
<span>AFD</span>
<div class="ooo" hidden>
<h4 id="titled">FOPJG?</h4>
</div>
<div>
<p id="textd"></p>
</div>
<button id="submitd">Submit</button>
</div>
Javascript/jQuery code:
$("#r").click(function () {
$(".ooo").prop("hidden", false);
});
$("#submitd").click(function () {
if (!$("#textd").empty() && $("#textd").length() < 150) {
var str = $("#textd").text();
window.location.replace("foo?d="+str);
} else {
if (!$("#textd").empty() && $("#textd").length() > 150) {
$("#titled").html("FOPJG?<small style='color:red;'>not under 150 chars.</small>");
} else {
$("#titled").html("FOPJG?<small style='color:red;'>ABVQS.</small>");
}
}
});
The issue here, is that when I click on that submit button, the .ooo is not displayed. I've also another question, does this implementation work correctly relative to the above algorithm's description?
Couple things:
You should use style="display:none;" instead of the hiddenattribute. It's just more standard. Further, you should use an external style sheets instead for all of the styles, but that's another battle.
Your if/else logic is a bit faulty: .empty() removes everything from the element - it will not return true/false the way you're expecting. Use .text().length instead.
You will likely also want to use return false; (or e.preventDefault();) so the links don't go anywhere.
So, here goes:
HTML
<span>AFD</span>
<div class="ooo" style="display:none;">
<h4 id="titled">FOPJG?</h4>
</div>
<div>
<p id="textd">[ ... ]</p>
</div>
<button id="submitd">Submit</button>
jQuery
$("#r").click(function () {
$(".ooo").show();
return false;
});
$("#submitd").click(function () {
if ($("#textd").text().length == 0) {
$("#titled").html("FOPJG?<small style='color:red;'> It's Empty</small>");
} else if ($("#textd").text().length < 150) {
$("#titled").html("FOPJG?<small style='color:red;'> Length is under 150 chars.</small>");
} else if ($("#textd").text().length) {
$("#titled").html("FOPJG?<small style='color:red;'> Length is over or exactly 150 chars.</small>");
}
return false;
});
jsFiddle
You should use visibility: hidden instead of html hidden tag so you can change its property easily in js
Related
I've written my own jQuery clicking function, but for an unkown reason, it doesn't work. I get error on line 4.
for (var i = 1;i<=3;i++){
$("#Block"+i).click(function(){
$(this).effect("shake", function(){
if (this == "#Block3"){
window.open('contact.html','blank');//open link link in a new page
}
});
});
}
Could you please help me?
Explanation
this on line 4 returns (or is) an object, it is a DOM element (such as <div> or something like that) You can't compare object this and string "#Block3".
These two things are very different. It is like comparing pears and apples.
Take a look at JavaScript Data Types I think, it could help you.
Documentation
See the documentation of this object.
Getting ID of an element How can I get the ID of an element using jQuery?
Edit of your code
You have to get the ID of the object (this) and then compare it with the string "Block3"
for (var i = 1; i <= 3; i++) {
$("#Block" + i).click(function() {
$(this).effect("shake", function() {
if (this.id == "Block3") {
window.open('contact.html', 'blank'); //open link link in a new page
}
});
});
}
Edit of your code 2
jQuery is here to help you to do less of code. Take a while to look at some tutorials.
Your code could be shortened to something like this
$('.blocks-container').on('click', '.block', function() {
$(this).effect('shake', function() {
if (this.id == 'Block3')
window.open('contact.html', 'blank'); //open link link in a new page
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="blocks-container">
<div id="Block1" class="block">Block1</div>
<div id="Block2" class="block">Block2</div>
<div id="Block3" class="block">Block3</div>
<div id="Block4" class="block">Block4</div>
<div id="Block5" class="block">Block5</div>
</div>
With unlimited number of "Blocks". See Rory's answer!
.click vs .on
Also please learn to use
$('.blocks-container').on('click', '.block', function() {});
Instead of
$('.block').click(function() {});
Explanation here I think, that you will understand later.
Edit of your code 3
Or you can base your function on "Block" div index (= number of place under the parent element) instead of index. So you don't have to use ID for each of blocks.
$('.blocks-container').on('click', '.block', function() {
$(this).effect('shake', function() {
if ($(this).index('.block') == 2)
window.open('contact.html', 'blank'); //open link link in a new page
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="blocks-container">
<div class="block">Block1</div>
<div class="block">Block2</div>
<div class="block">Block3</div>
<div class="block">Block4</div>
<div class="block">Block5</div>
</div>
Love jQuery. Peace!
this in your code is a DOMElement. When coerced to a string it will never match #Block3, hence your if condition never hits.
Assuming you're trying to match the id of a specific element, then you just need to compare against the id property of this:
(var i = 1; i <= 3; i++){
$("#Block" + i).click(function(){
$(this).effect("shake", function(){
if (this.id === "Block3") {
window.open('contact.html', 'blank');
}
});
});
}
Also note that it would be much better practice to put a common class on all the #BlockX elements and use a single event handler on all of them:
$('.block').click(function() {
$(this).effect("shake", function(){
if (this.id === 'Block3')
alert('you clicked block3!');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div id="Block1" class="block">Block1</div>
<div id="Block2" class="block">Block2</div>
<div id="Block3" class="block">Block3</div>
<div id="Block4" class="block">Block4</div>
<div id="Block5" class="block">Block5</div>
I have a couple of span elements inside a container and I want to match the exact word of one of the spans to insert a banner. I cant figure out how to do this.
First i tried this script:
$(document).ready(function(){
if ($('.head.titlebox span').text().trim() === "match" ){
$('<span class="myAwesomeBanner4"></span>').insertAfter(".productbox em.price.product-card-price")
}
else if ($('.head.titlebox span').text().trim() === "matchother" ){
$('<span class="myAwesomeBanner5"></span>').insertAfter(".productbox em.price.product-card-price")
}
});
This doesnt work - unless I remove the string it should match: === "". So the script seems kike it kinda works. I cant match it to the words though - looks like its correct to me, so not sure why it's not working.
Then I tried this script which works - but I cant figure out how to convert it to use if statement and to create my div to insert in the DOM like above:
$('.head.titlebox span').filter(function(index) {
return $(this).text() === "match";}).css("background", "black");
My HTML for targeting the string:
<div class="head titlebox">
<span id="artid">text</span><h1 id="prod-title">text</h1>
<span>text</span><span>text</span>
<span>match</span>
</div>
So why is the first not working - and how do I combine it with the working filter function of the second script?
You need to loop through all the span tags,
$('.head.titlebox span').each(function() {
if ($(this).text() == "match") {
//insert your html.
}
})
try this:
$(".head").on("click", function() {
var spanList = $(".head span");
$.each(spanList,function(span){
console.log($(spanList[span]).text());
if($(spanList[span]).text() === "match"){
console.log("Matched")
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="head titlebox">
<span id="artid">text</span>
<h1 id="prod-title">text</h1>
<span>text</span><span>text</span>
<span>match</span>
</div>
I want to check if following code is dynamically created or not :
<div id="js_contact_error_message" style="display: block;">
<div class="error_message"> <!-- For this div only I want to apply the above written inline css-->
Please enter full name
</div>
How should I check this in jQuery? If it's present execute the if condition.
Thanks.
The condition that <div class="error_message">...</div> is present within <div id="js_contact_error_message" style="display: block;">...</div> must get checked.
I tried below code but it didn't work for me:
if ($("#js_contact_error_message").find("div.error_message").length != 0) {
alert("Bestow");
}
You can do this:
var hasDiv = $("#js_contact_error_message div").length > 0 ? true : false;
$("#js_contact_error_message").toggle(hasDiv);
Note:
You need to place this line of code where you have done your js validations.
or you may try with this:
$(document).on('DOMSubTreeModified propertychange',function(){
var hasDiv = $("#js_contact_error_message div").length > 0 ? true : false;
$("#js_contact_error_message").toggle(hasDiv);
});
Try,
For using if-else condition.
if($("#js_contact_error_message").find(".error_message").length > 0)
{
alert("div present");
}
else
{
alert("div not present");
}
But as you stated in your question, you want to apply specific inline css. Make a class for the style what you have and you can use the ollowin code.
$("#js_contact_error_message").find(".error_message").addClass("your_style_class");
This code will apply your css class only for those divs which match the condition.
EDIT:
If you want to add your style to the div, you can try defining it in your page, which will apply as soon as the div is added dynamically.
<style>
#js_contact_error_message .error_message
{
/*your inline style*/
}
</style>
if($("#js_contact_error_message .error_message").length > 0)
{
alert("div is present");
}
else
{
alert("div is not present");
}
Demo
You can check it in many ways.. few of them are :
Use $("#js_contact_error_message").has('div') function of jquery to get the specific element Has in JQuery
If the error message div is the only div to be inside the main div then you can check it as :
Check the element $("#js_contact_error_message").html() is blank or use $("#js_contact_error_message").children() (Children in JQuery) to check if it has any childrens.
Hope this helps :)
make sure your html composition is correct , opening and closing. Then try this code.
if($("#js_contact_error_message").length > 0)
{
$("#js_contact_error_message").find(".error_message").addClass("style_class");
}
I'm having some trouble getting my code to do what I want. I have multiple sections that I have set to toggle show/hide, and it functions correctly. However, I'm now trying to switch the images to where instead of always being static with "More," I'd like it to switch to "Less" when it's expanded.
It does work... but only for the first one. If I press the buttons on any of the others, it only changes just the first one. You can see the page here:
http://jfaq.us
I've tried several different solutions with variables, but I can't seem to get it to work.
Help? Thanks in advance!
function changeImage() {
if (document.getElementById("moreorless").src == "http://jfaq.us/more.png")
{
document.getElementById("moreorless").src = "http://jfaq.us/less.png";
}
else
{
document.getElementById("moreorless").src = "http://jfaq.us/more.png";
}
}
function toggleMe(a){
var e=document.getElementById(a);
if(!e)return true;
if(e.style.display=="none")
{
e.style.display="block"
}
else{
e.style.display="none"
}
return true;
}
<div>
Guestbook
<div>
<input type="image" src="http://jfaq.us/more.png" id="moreorless" onclick="changeImage();return toggleMe('para3')" >
</div>
<div id="para3" style="display:none">
This is normally hidden, but shows up upon expanding.
This is normally hidden, but shows up upon expanding.
</div>
About
<div>
<input type="image" src="http://jfaq.us/more.png" id="moreorless" onclick="changeImage();return toggleMe('para2')" >
</div>
<div id="para2" style="display:none">
This is normally hidden, but shows up upon expanding.
This is normally hidden, but shows up upon expanding.
</div>
</div>
The id attribute must be unique. That's why it's not working. Also, it's not a good idea to use inline event handlers like you are doing, you should register event handlers using addEventListener instead.
Without changing all your code, one thing you can do is pass a reference to the currently clicked element to the changeImage function.
function changeImage(el) {
var moreUrl = 'http://jfaq.us/more.png';
el.src = el.src === moreUrl? 'http://jfaq.us/less.png' : moreUrl;
}
Then change the inline handler for onclick="changeImage(this);"
You are using same Id for all inputs. This is causing the problem.
Give every element a unique Id.
If you want to perform grp operation use jquery class.
That's because you use the same id for the both images, and getElementById apparently takes the first one.
Here is the updated code:
html:
<input type="image" src="http://jfaq.us/more.png" id="moreorless" onclick="changeImage.call(this);return toggleMe('para3')" >
script:
// inside the event handler 'this' refers to the element clicked
function changeImage() {
if (this.src == "http://jfaq.us/more.png") {
this.src = "http://jfaq.us/less.png";
} else {
this.src = "http://jfaq.us/more.png";
}
}
check this
http://jsfiddle.net/Asb5A/3/
function changeImage(ele) {
if (ele.src == "http://jfaq.us/more.png")
{
ele.src = "http://jfaq.us/less.png";
}
else
{
ele.src = "http://jfaq.us/more.png";
}
}
<input type="image" src="http://jfaq.us/more.png" onclick="changeImage(this);return toggleMe('para3')" >
How would I check if all the div's with class test are hidden. And if they are all hidden set wrap1 to hidden. Thanks.
<div id='wrap1'>
<div class="header">Header 1</div>
<div class='test'>Test 1</div>
<div class='test'>Test 2</div>
<div class='test'>Test 3</div>
</div>
UPDATE:
Thanks everyone for the really quick answers, I got it working. They were all very helpful.
You can do the check as by using selector as suggested above and to it like this:
if ( $("div.test:visible").length === 0)
$("#wrap1").hide( );
This snippet will loop all <div id="wrap#"> and hide them if the test are hidden.
$("div[id^='wrap']").each(function() {
var wrap = $(this);
if(wrap.children("div[class^='test']:visible").length == 0) {
wrap.hide();
} else {
wrap.show();
}
});
If you still want to keep your <div id="wrap#"> visible if there are no test at all (as in none in the markup), you can use the following modified snippet:
$("div[id^='wrap']").each(function() {
var wrap = $(this);
if(wrap.children("div[class^='test']").length > 0 &&
wrap.children("div[class^='test']:visible").length == 0) {
wrap.hide();
} else {
wrap.show();
}
});
There is no compelling reason to number classes (other than in edge cases). Your numbering complicates the above code as well as your CSS. It would be easier just to remove the numbering from test. (You don't need it as you can always select a subset of them using :lt(index), :gt(index), :eq(index), :first and :last.
As for numbering ids, that's fine since each id must be unique.
Better way to see if they are all visible is the count for visibility the same as the total count.
$("#wrap1 div:visible").length == $("#wrap1 div").length
jQuery("#wrap1").find("div").each(function()
{
if ($(this).is(':hidden'))
{
}
}
);