Hide div if URL contains word - javascript

I need to hide a div if the url of the page contains a certain word. Thanks to this site I have been able to successfully find if the url contains the word. This code works:
<script type="text/javascript">
if (window.location.href.indexOf("Bar-Ends") != -1) {
alert("your url contains bar ends");
}
</script>
but for some reason it will not work to hide a div, like this:
<script type="text/javascript">
if (window.location.href.indexOf("Bar-Ends") != -1) {
$("#notBarEnds").hide();
}
</script>
<div id="notBarEnds">this is not bar ends</div>
Anyone have any idea what is wrong with this code?
Any help is greatly appreciated
Thanks

Notice the reorder:
<div id="notBarEnds">this is not bar ends</div>
<script type="text/javascript">
if (window.location.href.indexOf("Bar-Ends") != -1) {
$("#notBarEnds").hide();
}
</script>
Or
<script type="text/javascript">
$(document).ready(function () {
if (window.location.href.indexOf("Bar-Ends") != -1) {
$("#notBarEnds").hide();
}
}
</script>
Waiting for the entire document to be "ready"

Try:
$(document).ready(function () {
if (window.location.href.indexOf("Bar-Ends") != -1) {
$("#notBarEnds").hide();
}
});
Your div hasn't necessarily loaded yet when the script runs.

You're running an inline script as the HTML is being constructed, there isn't a div named #notBarEnds at the time that the script runs, you need to run it as a function after the document has loaded.

i write it without checking it, if doesn't work change de regex :D
$(document).on('ready', function()
{
if(window.location.href.match(/Bar\-Ends/i))
$("#notBarEnds").hide();
});

Related

Execute Javascript only on specific URL with # appended

I have to execute JS on a certain page with hashtags in the URL. I need to execute the JS only on #product2 and then hide on others.
My URL pattern is /about#product1, /about#product2, /about#product3, etc and the JS code:
<script type="text/javascript">
if( window.location.href.indexOf('/about#product2') !== -1 ) {
alert('Hello');
}
</script>
How do I go about this?
For those of you looking for the answer:
<script type="text/javascript">
if (window.location.href.match(/\#product2/))
{
alert('hello');
}
</script>

Loading a navigation menu, and then selecting the active class with JQuery, but it's not working

I have a file, header.html, with my navigation menu. I have the following code:
<head>
<script>
$(function(){
$("#header").load("header.html");
console.log("loaded");
});
</script>
</head>
<body>
<div id="header"></div>
...
</body>
And then I have the following code to add the class "active" to the current tab:
function selectActive()
{
var pgurl = window.location.href.substr(window.location.href.lastIndexOf("/")+1);
$(".inactive").each(function(){
if($($(this).children("a")[0]).attr("href") == pgurl || $($(this).children("a")[0]).attr("href") == '' )
{
$(this).addClass("active");
}
});
};
I've tried to run selectActive() several ways, including $(window).load and $(window).ready and neither seems to work. There is a function call to selectActive(), but neither makes the change. (I've tried selectActive() from the console and it works as expected).
So you just need that function to run on load? use $(document).ready() as mentioned in comments. :)
$(document).ready(function selectActive() {
var pgurl = window.location.href.substr(window.location.href.lastIndexOf("/") + 1);
$(".inactive").foreach(function () {
if ($(this).children("a")[0].attr("href") === pgurl ||
$(this).children("a")[0].attr("href") === '')
{
$(this).addClass("active");
}
});
});
If you have already tried this with no success, make sure you are referencing JQuery somewhere, as that is required for this to work.

How to call window load event on specific page

I want to call windows.load event on specific page. I am doing like this ..
$(window).load(function(){
if(document.URL == "/car-driving.html")
{
overlay.show();
overlay.appendTo(document.body);
$('.popup').show();
return false;
}
});
Here I am trying to show overlay based on page load, but its not working. If I remove if condition then overlay is showing in every page. How to make it specific to only my car-driving.html page so that if anyone visit car-driving.html page, then it will show overlay ?
Try
if (window.location.href.match('car-driving.html') != null) {
overlay.show();
overlay.appendTo(document.body);
$('.popup').show();
return false;
}
Hope It Helps
document.URL returns the whole url ex: "h t t p : / / stackoverflow.com/questions/17970734/how-to-call-window-load-event-on-specific-page"
You'll have to use a regex match or indexOf
edit or better yet
document.location.pathname ==
Try displaying the value of the href in an alert and you will see what you need to match:
$(document).ready(function(){
alert(window.location.href);
});
Hello i Use this and working well for me
<script>
$(window).load(function() {
setTimeout(function() {
$('#onload').modal('show');
}, 10000);
}
function delayer() {
window.location = 'Your Desired URL';
}
);
</script>
Here .model is my popup div class

jquery.min.js Conflicts

When I add the below script ,it effecting other functionality of the project(Spring Application)
<script type="text/javascript" src="${ctx}/js/jquery-1.3.2.min.js"></script>
My Code
<script type="text/javascript" src="${ctx}/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="${ctx}/js/easy.notification.js"></script>
<script type="text/javascript">
$.noConflict();
$(function() {
$("input[type='text']").blur(function() {
if (this.value === '') {
$.easyNotificationEmpty('Warning : You left this field empty !');
} else {
$.easyNotification('Saved Successfully !');
}
})
});
</script>
I suspect that it because of the conflict of jquery-1.3.2.min.js
I have tried $.noConflict();, but am not getting desired results.
Please help me to resolve this problem,
Thanks in advance.
Try this,
jQuery(function($) {
$("input[type='text']").blur(function() {
if (this.value === '') {
$.easyNotificationEmpty('Warning : You left this field empty !');
} else {
$.easyNotification('Saved Successfully !');
}
})
});
Use $.noConflict(); before you include new jquery plugin like below,
//your old plugin here
<script type="text/javascript">
$.noConflict();
</script>
// new plugin here
//new script here
Try implementing jQuery.noConflict on the alias you'll be using on the script that causes other scripts to break.
var someAlias = $.noConflict();
And use someAlias instead of $ on the script that causes the problem.
You could test that and see if this makes any difference:
(function ($) {
$(function() {
$("input[type='text']").blur(function() {
if (this.value === '') {
$.easyNotificationEmpty('Warning : You left this field empty !');
} else {
$.easyNotification('Saved Successfully !');
}
})
});
})(jQuery.noConflict(true))
For example:
http://jsfiddle.net/6zXXJ/
I use with TRUE,... this work!:
//your old plugin here
<script type="text/javascript">
$.noConflict(true);
</script>
// new plugin here

Creating a same-page event with JQuery

I am trying to make jquery trigger an event when an anchor link has the same URL as the current page. Eventually this will add a class to the anchor link and let me style it differently with CSS but for now I just want it to show an alert box. Code below doesn't seem to work:
<script type="text/javascript">
$(document).ready(function() {
var buildurl = window.location.href;
if($('a').attr('href') = buildurl){
alert("Done");
}
});
</script>
Can anybody shine a light on why this isn't working? Or a best practice for similar using JQuery?
Link is: http://www.otahboy.com/shop/index.php?route=information/information&information_id=4
Cheers,
Jack
<script type="text/javascript">
$(document).ready(function() {
var buildurl = window.location.href;
if($('a').attr('href') == buildurl){
alert("Done");
}
});
</script>
use equality operator ==
if($('a').attr('href') == buildurl){
alert("Done");
$('a').attr("color","Red");
}
You have an assignment in your if condition. You need to add one = to it.
<script type="text/javascript">
$(document).ready(function() {
var buildurl = window.location.href;
if($('a').attr('href') == buildurl){
alert("Done");
}
});
</script>

Categories

Resources