We Keep Coding

How to block a link if its href contains a hash?

if condition working but else condition not working.
(function($){
$(".single-product a").on("click", function(e){
var link = $(".single-product a").attr("href");
if(link == "#"){
e.preventDefault();
}else{
return true;
}
});
}(jQuery));

have you tried this? using prop on the attr it might be your jquery library is higher
$(document).on("click",".single-product a", function(e){
var link = $.trim($(this).prop("href"));
(link == "#") ? e.preventDefault() : '';
});

With the attribute contains selector [name*=”value”]:
$('.single-product a[href*="#"]').on('click', function (e) {
e.preventDefault();
});
<div class="single-product">
With #
</div>
<div class="single-product">
Without #
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

How to determine CSS attribute is set on the element?

I have two <div> like these:
<div class='test' style='visibility: visible;'> div1 </div>
<div class='test'> div2 </div>
Now I want to show me an alert when I click on div1, because it has visibility property. In other word:
$(".test").click(function(e) {
if (this has visibility property){
alert('it has');
}
});
Now I want to know how can I define a condition in the above code using jquery?
Here is my try: (but none of them does not work)
if($(this).css('visibility').length != 0) {}
if($(this).css('visibility') == 'visible') {}
if($(this).hasClass('visibility-set')) {}
So, there is any solution?

Try this.style.visibility as it will return the value of inline-css or empty string '' if specified style does not exist!
$(".test").click(function(e) {
if (this.style.visibility) {
alert('It\'s set!');
} else {
alert('Not set!');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='test' style='visibility: visible;'>div1</div>
<div class='test'>div2</div>

For the sake of completeness and because you asked for a jQuery way. Here a solution using the jQuery prop() function.
$(".test").click(function(e) {
if ($(this).prop('style')['visibility']) {
alert('It\'s set!');
} else {
alert('Not set!');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='test' style='visibility: visible; display: block;'>div1</div>
<div class='test'>div2</div>

you can try this one:
$('.test').click( function() { alert('It\'s set!'); });
$('.test1').click( function() { alert('not set!'); });
DEMO FIDDLE

Matching text within a parent element

I am attempting to check if 2 divs contain the same text, and if they do then add a style to the parent div.
I have this working fine with the below code, but my problem is that the divs are all looking for a match and not just the divs that are in the parent? if you look at the below
<div class="infobox">
<div class="date">8</div>
<div class="secdate">8</div>
</div>
<div class="infobox">
<div class="date">1</div>
<div class="secdate">11</div>
</div>
<div class="infobox">
<div class="date">8</div>
<div class="secdate">11</div>
</div>
and the jQuery
jQuery(function ($) {
$('.date').each(function () {
var myhtml = $(this).html().split(' ')[0];
var ele = $(this);
$('.secdate').each(function () {
myhtml == $(this).html().split(' ')[0] ? $(ele).parent().css('background', '#ffff00') : ""
})
})
});
Fiddle
the third div is having the style applied, which it shouldn't as the 2 divs within don't match?

This seems much simpler:
$('.infobox').each(function () {
if ($(this).find('.date').text() == $(this).find('.secdate').text()) $(this).css('background', '#ffff00')
})
jsFiddle example
Loop over the parent (infobox) and just compare the text of the date child to the secdate child.

Seems like it should be simpler:
jQuery(function ($) {
$('.date').each(function () {
var dateText = $(this).text();
var secdateText = $(this).next('.secdate').text();
if (dateText == secdateText) {
$(this).parent().css('background', '#ffff00');
}
});
});
Fiddle

I changed things a little bit:
$(document).ready(function(){
$('.infobox').each(function () {
if( $(this).children('.date').html() == $(this).children('.secdate').html() )
$(this).css('background', '#ffff00');
});
});
This way you don't even need a loop.
I tested here and it works like charm :)
Hope it helps

smooth transition with show/hide jquery functions on hover?

I'm using an image map and when certain part of image is hovered it show div..(like in this website http://jquery-image-map.ssdtutorials.com/) I want the div to appear with smooth transitions... here is my js code
var mapObject = {
hover : function(area, event) {
var id = area.attr('name');
if (event.type == 'mouseover') {
$('.' + id).show();
$('#'+ id).siblings().each(function() {
if ($(this).is(':visible')) {
$(this).hide();
}
});
$('#'+ id).show();
} else {
$('.' + id).hide();
$('#'+ id).hide();
$('#room-0').show();
}
}
};
$(function() {
$('area').live('mouseover mouseout', function(event) {
mapObject.hover($(this), event);
});
});
Can anyone please suggest me the changes for smooth transitions...
thanks in advance! :)

So first of all, an unrelated tip - it would be a good idea to update jQuery a bit (if there isn't anything that depends on the old version you are using). live won't be available, instead you'll need to replace it with .on, but otherwise it's a good idea.
Secondly, sounds like all you're looking for is to give hide and show some transition. You can simply replace them with fadeIn() and fadeOut(). You can also use toggle which does it all at once (though might misbehave when used with a hover, because it will flip like crazy).
Here's a small snippet that shows you how they work:
$(document).ready(function() {
var img = $('img');
$('#show').on('click', function() {
img.fadeIn();
});
$('#hide').on('click', function() {
img.fadeOut();
});
$('#toggle').on('click', function() {
img.fadeToggle();
});
});
* { font-family: sans-serif; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="show"> Show me! </button>
<button id="hide"> Hide me! </button>
<button id="toggle"> Toggle me! </button>
<br>
<br>
<img src="http://www.randomwebsite.com/images/head.jpg" />
Of course, those are just shortcut functions that use the .animate functionality, which is quite flexible on its own. Here's a link where you can read more about effects and animations in jQuery and how you can use them

Echoing what yuvi said, the 'live' function is deprecated.
I'm not sure why you have your hover function inside an object, but you could also do it like this, using fadeTo:
var mapObject = {
hover : function(area, event) {
var id = area.attr('name');
if (event.type == 'mouseover') {
$('#'+ id).fadeTo(1000, 1.0);
} else {
$('#'+ id).fadeTo(1000, 0);
}
}
};
$(function() {
$('.area').bind('mouseover mouseout', function(event){
mapObject.hover($(this), event);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="area" name="div1" style="width:20px;height:20px;background-color:#CCC;margin:5px;"></div>
<div class="area" name="div2" style="width:20px;height:20px;background-color:#CCC;margin:5px;"></div>
<div id="div1" style="width:150px;height:100px;background-color:#0F0;display:none;margin:5px;">Image Stand-in One</div>
<div id="div2" style="width:150px;height:100px;background-color:#0F0;display:none;margin:5px;">Image Stand-in Two</div>

function smooth(){
if($("#show").is(":visible")){
$("#show").hide("1000");
}
else{
$("#show").show("1000");
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Click me<br><br>
<h1 id = "show">Shown!</h1>

Toggle element's class by ID

I’m trying to change the class of an element when it is clicked on from one value A to value B and then from value B back to value A when it is clicked a second time. I found some code on here that allowed me to change it once, but not a second time. (See original here).
Here is the original code:
<script type="text/javascript">
function changeClass() {
document.getElementById("MyElement").className += " MyClass";
document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace(/(?:^|\s)MyClass(?!\S)/g, '')
}
</script>
And here is my code:
<script type="text/javascript">
function changeClass() {
if (document.getElementByID("arrow").className == "arrowdown") {
document.getElementById("arrow").className.replace(/(?:^|\s)arrowdown(?!\S)/g, 'arrowup')
}
elseif(document.getElementByID("arrow").className == "arrowup") {
document.getElementById("arrow").className.replace(/(?:^|\s)arrowup(?!\S)/g, 'arrowdown')
}
}
</script>

$('#arrow').toggleClass('arrowup arrowdown');

Why not simply use jQuery toggleClass instead along with a id selector?
$('#arrow').toggleClass('arrowup');
$('#arrow').toggleClass('arrowdown');
And save yourself debugging and a few lines of code!

Check this FIDDLE
Its far easier with JQuery..
$(function() {
var i = 0;
$('div').on('click', function() {
i++;
if( i % 2 == 0){
$(this).addClass('arrowup').removeClass('arrowdown');
}
else{
$(this).addClass('arrowdown').removeClass('arrowup');
}
});
});​

just use jquery addClass() and removeClass() or even better the toggleClass inside your click event
<div id="elemID" class="class1">
</div>
function changeClass()
{
$("#elemID").toggleClass("class1");
$("#elemID").toggleClass("class2");
}
REF's
http://api.jquery.com/addClass/
http://api.jquery.com/removeClass/
http://api.jquery.com/toggleClass/
Cheers

I faced something similar to this today. In my code for each feature the user would express his opinion by pressing thumbs up or thumbs down. The selected thumb icon would have a brighter color, so when the user would click the thumbs up icon, the thumbs up icon would turn green and the thumbs down icon (if it were green) would turn black.
I solved it using jQuery:
$(document).ready(function () {
$('#vote-yes-#(Model.ProductReviewId)').click(function () {
setProductReviewHelpfulness#(Model.ProductReviewId)('true');
$('#1vote-yes-#(Model.ProductReviewId)').toggleClass('green');
$('#1vote-no-#(Model.ProductReviewId)').removeClass('green').addClass('black');
});
$('#vote-no-#(Model.ProductReviewId)').click(function () {
setProductReviewHelpfulness#(Model.ProductReviewId)('false');
$('#1vote-no-#(Model.ProductReviewId)').toggleClass('green');
$('#1vote-yes-#(Model.ProductReviewId)').removeClass('green').addClass('black');
});
});