Hide a div based on the URL - javascript

I am trying to hide a div whenever someone goes to a specific url.
Something like this:
var url = document.location.href;
if (url.indexOf('http://donorperfect.local/asp/loginfull.asp') >= 0) {
$('#hidebox').hide();
} else {
$('#hidebox').show();
}
write("<div id=\"hidebox\">\n");
write("<p>test</p>\n");
write("</div>\n");

Run your code after the page is loaded and the element to hide is available to jQuery. Also convert the url into lower case and compare in case user types in mixed cases.
$(function(){
var url = document.location.href;
if (url.toLowerCase().indexOf('http://donorperfect.local/asp/loginfull.asp') >= 0) {
$('#hidebox').hide();
} else {
$('#hidebox').show();
}
});

EDIT
Going off of the link that you provided as an example, there are several issues here.
Your SCRIPT tag should be in the HEAD block
You are using $() when it is not available (Firebug gives a clear error on this)
The file name does not match your indexOf() match
Fixing these issues, it works fine. See:
<head>
...
<script language='JavaScript' src='/js/jquery-1.4.1.js' type="text/javascript"></script>
...
<script type="text/javascript">
$(function(){
var url = window.location.href;
if (url.indexOf('donorperfect.html') > -1) {
$('#hidebox').show();
} else {
$('#hidebox').hide();
}
});
</script>
...
</head>
http://jfcoder.com/test/donorperfect.html
The following code works (setTimeout is for demonstration purposes):
document.write("<div id=\"hidebox\">\n");
document.write("<p>test</p>\n");
document.write("</div>\n");
$(document).ready(function(){
var url = 'http://donorperfect.local/asp/loginfull.asp';
if (url.indexOf('http://donorperfect.local/asp/loginfull.asp') > -1) {
setTimeout(function(){$('#hidebox').hide()},2000);
} else {
$('#hidebox').show();
}
});
http://jsfiddle.net/userdude/Qt8uH/
Although this is probably what I would recommend (for instance, what happens if it's HTTPS?):
document.write("<div id=\"hidebox\">\n");
document.write("<p>test</p>\n");
document.write("</div>\n");
$(document).ready(function(){
var url = 'http://donorperfect.local/asp/loginfull.asp';
if (url.toLowerCase().indexOf('loginfull.asp') > -1) {
setTimeout(function(){$('#hidebox').hide()},2000);
} else {
$('#hidebox').show();
}
});
http://jsfiddle.net/userdude/Qt8uH/1/

You can try changing document.location.href to window.location.pathname;
So your code now says
var url = window.location.pathname;
if (url.indexOf('http://donorperfect.local/asp/loginfull.asp') >= 0) {
$('#hidebox').hide();
} else {
$('#hidebox').show();
}

This will help you!!! Try this. it grabs the URL from the address bar.
var url = window.location.href;
if(url == "http://www.promilitarybusinessnetwork.com/continueSearch.asp?categoryID=108") {
$('#website').html('<p>This is the Apartments Category page</p>');
} else {
$('#website').hide();
}});
if not .hide();. try .empty();

Related

How can I redirect to homepage window.location= 'URL'?

I'm trying to redirect my users back to my homepage. I've written the following JavaScript code, but it isn't working. I'm not sure what I'm doing wrong.
var app = {
paused: 0,
init: function() {
// add full screen object
$('body').prepend('<div id="cover"></div>');
//if mouse moves hide object
$(document).mousemove(function(e) {
$('#cover').hide();
})
// check every 5 seconds to see if object has been hidden by mouse move
var int = setInterval(function() {
if ($('#cover').is(":hidden")) {
$('#cover').show();
app.paused = 0;
} else {
app.paused += 5;
}
//if mouse hasn't moved, go back to main page
if (app.paused >= 15) {
window.location = 'https://www.google.com/';
}
console.log(app.paused);
}, 5000);
}
}
$(document).ready(function() {
app.init();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
It will work fine as long as you are running the orignal and redirected pages on the same domain.
In above snippet, the iframe's src is https://stacksnippets.net which is different from google.com.
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options
Since you only want a redirect to your homepage->
if(app.paused >= 15){
window.location = '/';
}
if(app.paused >= 15){
window.location = '/';
}
This worked!
$(document).ready(function() {
// app.init();
});
app.init() was also commented out. Uncommented it and it works now.

prepend to url of page using javascript

I need all blog product pages to show in a popup. In order to show in the popup their url must be in the form https://expample.com?/modal-link=blog_page_url. (I'm using the plugin and this is the requirement)
I would like to write a code in javascript that checks the URL. If the URL of the page contains the word 'product' I would like prepend to the url: https://expample.com?/modal-link= inorder to enable it to be shown in a popup.
I'm using the code below:
if(window.location.href.indexOf("product") > -1) {
var url = window.location.href;
url_new = 'https://example.com/?modal-link=' + url
} else {
}
window.location.href = url_new;
The is creating a new URL but it is causing it to be added an infinite amount of time.
How should I be doing this?
Follow on question: (should I open a new question for this?)
I would like to adapt the code so the page does not reload during the redirect.
I know there are other posts about this eg How do I modify the URL without reloading the page? or https://stackoverflow.com/questions/3338642/updating-address-bar-with-new-url-without-hash-or-reloading-the-pagebut could someone please help me modify my javascript code for this specific case?
Would I need to use the lines below?
document.location.hash = 'afterhash';
history.pushState('data to be passed', 'Title of the page', '/test');
I'm at a loss which part of my code need to go where in the above lines.
Your recursion is missing a stop condition. For example, if "some_product" contains "product" and you prepend anything to it, it will still contain "product", as in "really_some_product", "really_really_some_product", etc. You can see where this is going, infinite recursion.
So, you need to tell it to stop at some point, which is when the new url already starts with what you intend to prepend to the original one.
Following this, since there's a case in which we don't change anything, we should also not redirect.
var url = window.location.href,
prepend_to_url = "https://example.com/?modal-link=",
url_new = false;
if (url.indexOf(prepend_to_url) == 0) {
// url starts with what we prepend
// so do nothing
} else if(url.indexOf("product") > -1) {
url_new = prepend_to_url + url;
}
if (url_new) { // don't redirect unless we've done something above
window.location.href = url_new;
}
A more concise version of the code above could look like this:
var url = window.location.href,
prepend_to_url = "https://example.com/?modal-link=",
url_new = false;
if (url.indexOf(prepend_to_url) == -1 // url doesn't start with what we prepend
&& url.indexOf("product") > -1 // and our condition is met
) {
url_new = prepend_to_url + url;
}
url_new && (window.location.href = url_new); // equivalent to an "if" statement
What you need is to get the query parameter part of the url by using substr with index of ? to the end of the url
var url_new;
if(window.location.href.indexOf("product") > -1) {
var url = window.location.href.substr(window.location.href.indexOf("?") +1, window.location.href.length);
var newValue = 10;
url_new = 'https://example.com/?modal-link=' + newValue + "&" + url
}
console.log(url_new);
You should initilize the url_new and change it for some condition:
let url_new = window.location.href
if(window.location.href.indexOf("product") > -1) {
url_new = 'https://example.com/?modal-link=' + window.location.href;
}
window.location.href = url_new;

Conditionally hide div on all posts but not category page

How do I hide a div on all posts except posts on category pages in WordPress?
I currently have the following jQuery but can't get it to work -
jQuery(function(){
if (window.location.pathname == "offonalim.com/category/fashion.html"||window.location.pathname == "offonalim.com/category/interior.html"||window.location.pathname == "offonalim.com/category/travel.html"||window.location.pathname == "offonalim.com/category/work.html") {
jQuery('.qodef-post-title').show();
jQuery('.qodef-post-info').show();
} else {
jQuery('.qodef-post-title').hide();
jQuery('.qodef-post-info').hide();
}
});
I can see that category pages of your website contains the keyword "Category" in each url,
so you can use this keyword to check if the url is having this particular keyword then show or hide divs accordingly
No need to specify full urls.
<script type="text/javascript">
function myFunction(){
val path=window.location.pathname;
if(window.location.href.indexOf("category") > -1) {
$('.qodef-post-title').show();
$('.qodef-post-info').show();
} else {
$('.qodef-post-title').hide();
$('.qodef-post-info').hide();
}
}
myFunction();
</script>
window.location.pathname yields the pathname, not the entire URL. So, your code is logically incorrect.
And instead of checking for each path individually, an ideal practice would be to create an array of possible paths and check the location's path in that array. Something like this should work fine:
var catPaths = [
"/category/fashion.html",
"/category/interior.html",
"/category/travel.html",
"/category/work.html"
];
jQuery(function() {
if (catPaths.includes(window.location.pathname)) {
jQuery('.qodef-post-title').show();
jQuery('.qodef-post-info').show();
} else {
jQuery('.qodef-post-title').hide();
jQuery('.qodef-post-info').hide();
}
});
You can further minimize the code by using toggle() and grouping the selectors:
jQuery(function() {
var includes = catPaths.includes(window.location.pathname);
jQuery('.qodef-post-title, .qodef-post-info').toggle(includes);
});

if attr url is not equal to a url redirect it

and really don't know much about jquery and I am already practicing, had some issue.
Question is that I have a url in the footer and I want if the url is not equal to hariskhan.com.pk then redirect it to something.com.
check my code:
$(document).ready(function(){
var check = $("a").attr('href');
var haris = "http://www.hariskhan.com.pk";
if (check == $("haris")) {
$("body").css("background", "green");
}
else {
$("body").css("background", "orange");
}
});
DOM:
<div class="footer"><a href="http://hariskhan.com.pk"/>
You are comparing a string to a jQuery object. So let's fix that first
$(document).ready(function(){
var check = $("a").attr('href');
var haris = "http://www.hariskhan.com.pk";
if (check == haris) {
...
}
});
Then you want to redirect the page
$(document).ready(function(){
var check = $("a").attr('href');
var haris = "http://www.hariskhan.com.pk";
if (check == haris) {
location.href = "//something.com";
}
else {
$("body").css("background", "orange");
}
});
well, first let's start by asking did you put the jquery code in a script tag??
did you create a proper html dom?
do you understand that you jquery code needs to select href from a tag?
you need to study html and understand a bit about how it integrates to javascripts before you start jquery

Execute jQuery only on homepage

I am trying to trigger a button click on pageload with the piece of jQuery below
<script>
jQuery(function(){
jQuery('#clickson').click();
});
</script>
It works perfectly but I have this button id on every page, how can I use it such that it only triggers on homepage and subdomain homepages.
For example it should only fire on example.com, subdomain1.example.com, subdomain2.example.com and NOT on any other pages like example.com/path, subdomain1.example.com/path, subdomain2.example.com/path
Try checking location.href for selected url
jQuery(function() {
var loc = location.href;
// if `location.href` is equal to
// "example.com","subdomain1.example.com", "subdomain2.example.com"
// call `.click()` on `#clickson`
if (loc === "example.com"
|| loc === "subdomain1.example.com"
|| loc === "subdomain2.example.com") {
jQuery("#clickson").click();
}
});
jQuery(function() {
if (location.href === "http://stacksnippets.net/js") {
jQuery("#clickson")[0].click();
}
});
#home {
display:block;
position:relative;
top:400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<a id="clickson" href="#home">click</a>
<div id="home">home</div>
Since you said you were against hardcoded string approaches, heres a simple bit of code that will accept an array of pages. location.pathname is the section of the url coming after the domain and before the query string. to my knowledge, it is implemented in every browser i have ever encountered.
var pages=['/','/home'];
for(var i=0;i<pages.length;i++)
{
if(location.pathname==pages[i])
{
//do stuff you want here
break; //terminates the loop on first match
}
}
Use regex to match currect URL:
var href = window.location.href;
var regex = /(example\.com)$/i; // find only example.com at the end of URL
if ( regex.test(href) ){
// if passed
// do jQuery stuff here
}

Categories

Resources