Check for empty href atribute in JQuery - javascript

I have an idea I'd like to implement to a site I'm working on. I've got an idea of how it would work but I'm not entirely sure how to piece the bits together.
So!! I'd like to check the domain and generate an alert box if it's necessary to do so.
Say we have 2 domains:
test.domain.com & domain.com
IF we're on test.domain.com and there's no content inside the href (Missing Link), I'd like an alert box to pop up saying "MISSING LINK". And if there is content inside the href, just ignore it (Not Missing Link).
Missing Link
Not Missing Link
Then, if we were on domain.com I'd like the jQuery to still be present in the code, but it to do nothing if a Missing Link was clicked. As it will just redirect to the home page - Not the best journey, but much better than an intrusive popup box.
This way I could use a tiny bit of code to check missing links at the test stage, but not have to remove it every time it gets sent to the actual domain.
If any of this doesn't make sense, please ask!
Thanks a million, really appreciate the help!

$(document).on("click", 'a[href=""]', function(evt) {
if(window.location.hostname.indexOf("test")!==-1) {
alert("broken");
} else {
window.location.href = "foo.html";
}
evt.preventDefault();
});
Personally if I were making a page on test to determine if a link is broken, I would do something so they would stand out when the page is open. Instead of clicking to find out.
if(window.location.hostname.indexOf("test")!==-1) {
$('a[href=""]').css("background-color", "red");
}

Here is some code to get you started. It feels to me as though whatever it is you’re trying, we’re taking completely the wrong approach.
if (location.host === 'test.domain.com' && !$('a[href=""]').length) {
alert('MISSING LINK');
}

Hows this?
$(document).ready(function() {
$('a').click(function(e) {
var a = $(this);
e.preventDefault();
if($.trim(a.prop('href')) == "")
{
alert("No link")
}
else
{
window.location = $.trim(a.prop('href'));
}
});
});

Related

Hide and Show a div when a tab is active ( selected )

I have this tabs built.
When I click on Round Trip, I want to make disappear that Flight 2 form.
But since that is needed on multi-city, I want it to show back on
multi-city.
I used this
jQuery('#rdbOneWay').attr("class","onewaybuttonchecked");
jQuery('#rdbRoundTrip').attr("class","roundwaybuttonchecked");
jQuery('#rdbMultiCity').attr("class","multiwaybuttonchecked");
jQuery('.ret_date_block').attr("id","noreturndate");
$("#noreturndate").hide();
$(".onewaybuttonchecked").on("click", function(){
$("#noreturndate").hide();
});
$(".roundwaybuttonchecked").on("click", function(){
$("#noreturndate").show();
});
$(".multiwaybuttonchecked").on("click", function(){
$("#noreturndate").show();
});
});
I used this to hide something on the One Way tab.
If:
$(".roundwaybuttonchecked").on("click", function(){
$("#noreturndate").show();
});
If I use here the correct id of Flights 2 to hide it on the Round-Trip, it does its job but when I switch between One-Way and Round-Trip it shows nothing.
This line get's in action when I go from Multi City to Round-Trip.
Any ideas?
You definitely need a conditional in here.
In your JQuery function, try something like this:
function radioButton() {
if (document.getElementById('htmlElement1').checked) {
document.getElementById('htmlElement2').style.visibility = 'visible';
} else {
document.getElementById('htmlElement').style.visibility = 'hidden';
}
Please note that since I cannot view your HTML - I am not sure what elements you are using so where i say htmlElement 1 (or 2) please fill that in with the appropriate elements.
Let me know you results!
Never mind.
I used same code as above
jQuery('#rdbOneWay').attr("class","onewaybuttonchecked");
jQuery('#rdbRoundTrip').attr("class","roundwaybuttonchecked");
jQuery('#rdbMultiCity').attr("class","multiwaybuttonchecked");
jQuery('.pnlFlight2').attr("id","pnlFlight2");
$("#pnlFlight2").hide();
$(".onewaybuttonchecked").on("click", function(){
$("#pnlFlight2").hide();
});
$(".roundwaybuttonchecked").on("click", function(){
$("#pnlFlight2").hide();
});
$(".multiwaybuttonchecked").on("click", function(){
$("#pnlFlight2").show();
});
and it did the trick, I don't know why it didn't work earlier but glad it did now.

On new page, scrolling down to a specific div automatically

Quite simple,
I would like on click, to arrive to a specific section on a new page.
Usually www.mydomain.com/page1/#section should work, #section being the ID of the section.
However, the menu I'm using is breaking this. Si I'm trying to see if it's possible to do this by Jquery, using Hash. ( When url have this hash example www.myd0main.com/page/#contact - do this)
SO far I tried the following:
<script>
jQuery(document).ready(function() {
if (window.location.hash.split('-')[0] == '#contact') {
$('#contact').addClass('hashed');
}
});
</script>
Withotu any sucess.
Do you guys have any turnaround / idea to make this work ?
It will be lovely !
Thank you !
Perhaps
if (window.location.hash == '#contact') {
// Scroll to #contact
$(document).scrollTop($("#contact").offset().top);
}

How to add a "pin it" button dynamically?

I'm trying to optimize my Wordpress install - and one of the culprits I'm seeing, is the "Pin It" button widget for Pinterest. I'm now trying to find a way to dynamically load the JS code (when they initially hover over the button), and then apply it to the page. So far I've only managed to get this far:
jQuery(document).on("mouseenter click",'.pinItSidebar', function() {
jQuery.getScript("http://assets.pinterest.com/js/pinit_main.js", function() {
// do something here?
});
});
I can't seem to find a function that I can call (as a callback, after the JS is loaded). Obviously I will only do this once per page load (the above is just a very basic version at the moment)
Does anyone have any suggestions on how I can achieve this? The end game of how I want it to function, is with:
Working solution:
Here is a working solution I've now got, which will allow you to load the pinterest stuff ONLY when they click the button (and then trigger the opener as well). The idea behind this, is that it saves a ton of Pinterest JS/CSS / onload calls, which were slowing the page down.
jQuery(document).on("click",'.pinItSidebar', function() {
if (typeof PinUtils == "undefined") {
jQuery.getScript("http://assets.pinterest.com/js/pinit_main.js", function() {
PinUtils.build();
PinUtils.pinAny();
});
} else {
PinUtils.pinAny();
}
});
...and just call with:
foo
Hopefully this helps save someone else some time :)
Extra tweak: I'm just playing around, to see if I can make this even more awesome :) Basically, I want to be able to decide which images are pinnable. Below this will do that for you:
jQuery("img").each(function() {
if (jQuery(this).data('pin-do')) {
// its ok, lets pin
} else {
jQuery(this).attr('nopin',"1");
}
});
All you need to do to make an image pinnable, is have the data-pin-do="1" param set the images you want to allow them to share :)

Certain hash in URL combaining with on-page click-event

I want to locate if there is a certain hash, eg. #nameofthehash, in the URL and then do stuff with my code. But it doesn't only need to check if the URL contains #nameofthehash, it also needs to check if one of the on-page buttons is clicked. If that's done it needs to run the code.
The code works without the second line. I just don't know how to implement the second line correctly.
$('a[href="#groeien"]').click(function(),
$(location.hash).contains("#groeien") {
$(".active").removeClass("active");
$(this).parent('.label').addClass("active");
$('#groeien').slideDown(1000);
$('#ontdekken').slideUp(1000);
$('#ondernemen').slideUp(1000);
$('#spelen').slideUp(1000);
});
Thanks in advance!
Update: I have created a jsfiddle to show the current situation, http://jsfiddle.net/qeDam/3/
Try to use:
$('a[href="#groeien"]').click(function () {
if(window.location.hash.indexOf("#groeien") > -1) {
$(".active").removeClass("active");
$(this).parent('.label').addClass("active");
$('#groeien').slideDown(1000);
$('#ontdekken').slideUp(1000);
$('#ondernemen').slideUp(1000);
$('#spelen').slideUp(1000);
}
});

Button hold down function for links

I need help: I'm trying to make a javascript (with not much luck so far).
There are buttons on the page I generate with php, they should work as follows:
If I click the button for less than whatever seconds the link opens like if the button has: onClick="self.location='url'".
Else the button is held down for more than whatever seconds the link should open in a new tab like if the button had: onclick="window.open('url');"
It would be great if it could work for links also.
It's probably easy to do, but I have no js knowledge at all and I'm flooded with other stuff I actually know how to do so that is why I ask for Your help. I have already missed my deadline. :(
My goal is to make a php function to create buttons:
like : createbutton($name,$link,$class,$delay, ... );
But don't worry about that, I can do that.
Thanks for your help.
An Example here
var counter= 0;
doCount=function(){
setTimeout(function(){
counter++;
},1000);
}
doFunc=function(){
if(counter>2){
//do something if delay is greater than 2 second
}
else{
//do something if delay is less than 2 second
}
}
document.getElementById('myBtn').mousedown = doCount;
document.getElementById('myBtn').mouseup = doFunc;
Try this code

Categories

Resources