How to hide an element only if it matches specific hash? - javascript

I'm trying to hide a form only if it's on the root site, or on the specific hash https://www.example.com/#uno. My code below is causing the form is not show on all the subpages (/#dos, /#tres, etc). Can someone help me understand what is happening?
$(function(){
if (location.hash == "" || location.hash == "#uno"){
$("#form").hide();
} else {
$("#form").show();
};
}());

This is because you hide the form once, but you don't make it reappear until you reload the page. (You only check the hash once, when loading the entire page, not when the hash changes.
function showHideForm() {
if (location.hash == "" || location.hash == "#uno"){
$("#form").hide();
} else {
$("#form").show();
};
}
window.onhashchange = showHideForm;

Related

How do i change an element based on cookie value set in jQuery without reloading the page?

Ok so i am really basic with jQuery and the code i've written is no doubt inefficient but it works to a point.
I have a form where a customer selects either "Business" or "Personal" and on submission a cookie is set... I want to trigger images to change if the user has selected "Business" however for the changes to take effect the page needs reloading. How do i trigger this on selection of the option?
$(document).ready(function(){
$("#thankyoumessage").css("display","none");
$(".storagetype").click(function(){
if ($('input[name=customertype]:checked').val() == "Personal" ) {
$("#thankyoumessage").slideDown("fast"); //Slide Down Effect
$.cookie('customerIs', 'personal_cust', { path: '/', domain: 'storebox.co.uk'});
if ("ga" in window) {
tracker = ga.getAll()[0];
if (tracker)
tracker.send("event", "customer_type", "Personal");
};
} else if ($('input[name=customertype]:checked').val() == "Business" ) {
$("#thankyoumessage").slideDown("fast"); //Slide Down Effect
$.cookie('customerIs', 'business_cust', { path: '/', domain: 'storebox.co.uk'});
if ("ga" in window) {
tracker = ga.getAll()[0];
if (tracker)
tracker.send("event", "customer_type", "Business");
};
} else {
$("#thankyoumessage").slideUp("fast"); //Slide Up Effect
}
});
var customerIs = $.cookie('customerIs');
if (customerIs == 'personal_cust' || customerIs == 'business_cust') {
$("#customerTypeForm").css("display","none");
};
var customerIs = $.cookie('customerIs');
if (customerIs == 'business_cust') {
$('li.unit:nth-of-type(1) .unit__img-wrap img').attr('src', 'https://www.storebox.co.uk/wp-content/uploads/2021/06/unit-small-trade.png');
$('li.unit:nth-of-type(2) .unit__img-wrap img').attr('src', 'https://www.storebox.co.uk/wp-content/uploads/2021/06/unit-medium-trade.png');
$('li.unit:nth-of-type(3) .unit__img-wrap img').attr('src', 'https://www.storebox.co.uk/wp-content/uploads/2021/06/unit-large-trade.png');
};
});
Thanks in advance
Answering what I have in comments so you can mark question as resolved ;)
You can copy paste the "src" changes that you have at the end of your
code inside " else if ($('input[name=customertype]:checked').val() ==
"Business" ) "
Keep both parts, and once you are on the page for the first time it
changes it with the first part and on all the following times it will
be changed based on the cookie.

Javascript _self not loading next page

Im working on a project for school where I need to make a small system that requires 2 default login "accounts" and only that.
The way I do this is with an html form which is linked to a script.
For some reason when I use window.open('right.html'); it will put me through to the next page on a different tab once you fill in the right details.
But when I use window.open('right.html', '_self'); it will clear the field and not go to the next page.
Here is my script:
function checkform() {
if (document.login.name.value == "Thea" && document.login.pass.value == "1234") {
window.open('right.html');
} else {
if (document.login.name.value == "Theo" && document.login.pass.value == "4321") {
window.open('right2.html', "_self");
} else {
return false;
}
}
}

How to decrease number of links in this Script by assing a single Variable

Any Javascript Expert There how help me in this script ?
Actually i am a template designer, i create free and premium templates, my free templates include non-removal footer links, which means user will have to keep the footer link for my template.
Come to main point.
here is my script:
<script>
window.onload = function() {
var e = document.getElementById("credits");
setInterval(function() { // check every 2 seconds
if (e == null) { // if div is removed then redirect
window.location.href = "http://www.example.com/"
}
// if div is hidden with css visibility then redirect
if ($(e).css('visibility') == 'hidden') {
document.location.href = "http://www.example.com";
}
// if div is display none then redirect
if ($(e).css('display') == 'none') {
document.location.href = "http://www.example.com";
}
// if div is hidden with css collapse then redirect
if ($(e).css('visibility') == 'collapse') {
document.location.href = "http://www.example.com";
}
}, 2000) // close time function
e.setAttribute("href", "http://www.example.com/");
e.setAttribute("ref", "dofollow");
e.setAttribute("title", "Blogger Templates");
e.innerHTML = "Example"
}
</script>
<a id="credits"></a>
Now, if you see the above script, you will observe that it uses 4 http://www.example.com links except e.setAttribute("href", "http://www.example.com/");. whilte i want to do some tricks with this JS so that i uses only one time the main link http://www.example.com by assign variable and use that instead of full link.
Like this:
<script>
window.onload = function() {
var e = document.getElementById("credits");
setInterval(function() { // check every 2 seconds
if (e == null) { // if div is removed then redirect
window.location.href = "e"
}
// if div is hidden with css visibility then redirect
if ($(e).css('visibility') == 'hidden') {
document.location.href = "e";
}
// if div is display none then redirect
if ($(e).css('display') == 'none') {
document.location.href = "e";
}
// if div is hidden with css collapse then redirect
if ($(e).css('visibility') == 'collapse') {
document.location.href = "e";
}
}, 2000) // close time function
e.setAttribute("href", "http://www.example.com/");
e.setAttribute("ref", "dofollow");
e.setAttribute("title", "Blogger Templates");
e.innerHTML = "Example"
}
</script>
As you see i added "e" variable instead of full link but it does not work, it is redirecting to example.com/e which is not valid. i gave you the idea. so make it possible
So, how to do this ? i already assign "e" variable to my main link.
Please share the full coding with me thanks.
Ok. First off, "e" is NOT a variable, it is a string literal. Which means you are literally assigning "e" to document.location.href. Additionally, you have previously created a variable named "e", and assigned it the value of a DOM element with the ID "credits."
I'm not 100% clear on what you're trying to do, but the following might help:
<script>
window.onload = function() {
var e = document.getElementById("credits");
var redirect = 'http://www.example.com';
// check every 2 seconds
setInterval(function() {
// if div is removed then redirect
if (e == null) {
window.location.href = redirect
}
// if div is hidden with css visibility then redirect
if ($(e).css('visibility') == 'hidden') {
document.location.href = redirect;
}
// if div is display none then redirect
if ($(e).css('display') == 'none') {
document.location.href = redirect;
}
// if div is hidden with css collapse then redirect
if ($(e).css('visibility') == 'collapse') {
document.location.href = redirect;
}
}, 2000) // close setInterval
e.setAttribute("href", redirect);
e.setAttribute("ref", "dofollow");
e.setAttribute("title", "Blogger Templates");
e.innerHTML = "Example"
}
</script>
The "e" you've added isn't a variable, it's a string. Setting it as the href attribute will just set href="e", which will link you to /e on the current domain.
You need to use either:
var siteName = "http://www.example.com";
// Wherever you need it:
document.location.href = siteName;
Or just use the OR operator, ||, to combine your if statements. You can repeat this for all cases.
if (e == null ||
$(e).css('visibility') == 'hidden') {
document.location.href = "http://www.example.com";
}
Other than that, what you're trying to do is really a bad practice. I'd advice against it.

window location with the same page(div id)

How to make window.location go to the same page but with another different div tag(or through div id like this: href="#id").
if((mins == 0) && (secs == 0)) {
window.alert("Time is up.Your score is "+score); // change timeout message as required
window.location = "index.html" // redirects to specified page once timer ends and ok button is pressed
} else {
cd = setTimeout("redo()",1000);
}
any help would be appreciated.
thanks in advance.
You can use .scrollIntoView() on the targeted element.
document.getElementById("the_div_id").scrollIntoView(true);
MDN scrollIntoView()
Just add the hash as a string:
window.location + '#id';

Problems w/ window.location.hash

I have this content box on my site, that has different tabs on the side and when you click on one of the tabs, it uses JS to hide/show the according divs inside the content box.
I also have this in my head to give each div inside the content box it's own URL:
<script type="text/javascript">
function loadSmugInfo() {
if(window.location.hash == '#smuginfo')
document.getElementById('contentInfo').style.display = "block";
document.getElementById('contentSlideshow').style.display = "none"
}
</script>
<script type="text/javascript">
function loadFind() {
if(window.location.hash == '#find')
document.getElementById('contentMap').style.display = "block";
document.getElementById('contentSlideshow').style.display = "none"
}
</script>
<script type="text/javascript">
function loadSmugmug() {
if(window.location.hash == '#smugmug')
document.getElementById('contentSmugInfo').style.display = "block";
document.getElementById('contentSlideshow').style.display = "none"
}
</script>
<script type="text/javascript">
function loadMain() {
if(window.location.hash == '#')
document.getElementById('contentSlideshow').style.display = "block"
}
</script>
<script type="text/javascript">
function loadSlideshow() {
if(window.location.hash == '#slideshow')
document.getElementById('contentSlideshow').style.display = "block"
}
</script>
I also have it so when you a click a tab, it changes the hash.
Here is my problem.
When the page loads like normal (without a hash), the first and topmost div, is still not displaying (even though it's set to display: block in CSS).
I'm loading the functions you see above, using onLoad on an image above the content box.
Any help would be appreciated, I'm on a little bit of a tight schedule.
Let me know if you need any more information.
Thanks!
If you're doing what I understood you're doing, you'd have to use
if( (window.location.hash == '#') || (window.location.hash == '')
instead of
if(window.location.hash == '#')
since the hash is empty when the script is loading.
On a side note:
You only need one function for all of this:
function whatever()
{
if(window.location.hash == '#smuginfo')
{
case1
}
else if(window.location.hash == '#find')
{
case2
}
.
.
.
else
{
default for no hash
}
}
It would be shorter with a switch statement...
A couple of problems here.
First off, you dont show any way of calling these functions. You might want to start an interval timer to poll these functions and check them periodically. This will make sure they evaluate on page load, and each hash change.
You are also evaluating whether the hash == "#" which is the default, but will not show on initial page load. Maybe put an AND condiation to check if it == "" aswell.
Here is an example of some code i use for hash polling. Maybe it can help.
var start_hash = window.location.hash;
var recent_hash = '';
process_hash(start_hash); // Start the initial hash check
setInterval(poll_hash, 100); // Initialize our hash polling interval
function poll_hash() {
if (window.location.hash==recent_hash) { return; } // No change in URL hash
recent_hash = window.location.hash; // Set to check next time.
process_hash(recent_hash); // Changed hash, lets process
}
function process_hash(current_hash) {
// Check for defaults, then set to #home.
if(!current_hash || current_hash == '' || current_hash == '#')
{ current_hash='#home'; }
// Strip the # for the hash
var hash_id = current_hash.match(/[^#]+/g);
if(hash_id == 'home') { do something; }
}
Try this:
<script>
document.domain = 'facebook.com';
try {
try {
if (window.opener && window.opener.graphexplorer) {
window.opener.graphexplorer.authCallback(window.location.hash);
}
} catch(e) { }
} catch (e) { }
window.location.hash = '';
window.close();
</script>

Categories

Resources