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>
Related
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;
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.
What I want to happen is... when the image 'x' is clicked i want it to change image then when it is clicked again i want it to change back so on and so fourth, however I only want this to happen on the second click.
So X is clicked & nothing happens,
Then when it is clicked again it changes images,
and then back after another click, and then it alternates back and forth after that,
until the page resets, then i want it to reset as well.
this is my code so far:
document.getElementById('x').onclick = function() {
var ClickedOnce = 0;
if (this.src == 'Media/Images/Other/SwitchUP.jpg') {
ClickedOnce + 1
}
if (this.src == 'Media/Images/Other/SwitchUP.jpg' && ClickedOnce > 1) {
this.src = 'Media/Images/Other/SwitchDOWN.jpg';
} else if ('Media/Images/Other/SwitchDOWN.jpg') {
this.src = 'Media/Images/Other/SwitchUP.jpg';
}
}
It looks like the reason this isn't working is because you are declaring the var ClickedOnce inside of a function. This means that it is a local variable inside that function that will be set to 0 every time that function is called. Therefore, the same thing will happen every time it is clicked.
Try declaring some variable outside of the function.
You can try something like this:
var wasClicked = false;
document.getElementById('x').onclick = function() {
if (!wasClicked) {
wasClicked = true;
return;
}
if (this.getAttribute("src") == 'Media/Images/Other/SwitchUP.jpg') {
this.setAttribute("src", 'Media/Images/Other/SwitchDOWN.jpg');
} else {
this.setAttribute("src", 'Media/Images/Other/SwitchUP.jpg');
}
}
Additionally, since you tagged this question with jQuery, here is a jQuery approach to it:
var wasClicked = false;
$(document).ready(function() {
$("#x").click(function() {
if (!wasClicked) {
wasClicked = true;
return;
}
if ($(this).attr("src") == "path/to/some/image") {
$(this).attr("src", "path/to/other/image");
} else {
$(this).attr("src", "path/to/some/image");
}
});
});
I make navigation with pages but this code not work, what's the problem ?
<script>
$(document).ready(function() {
$("body").keydown(function(event) {
if(event.keyCode == 37) { // left
window.location.replace("http://newsii.abudayah.com/photo/2)"; }
else if(event.keyCode == 39) { // right
window.location.replace("http://newsii.abudayah.com/photo/31)"; }
});
});
</script>
Don't use .replace() for this, just assign the value directly.
Example
$("body").keydown(function(event) {
if(event.keyCode == 37) { // left
window.location = "http://newsii.abudayah.com/photo/2";
}
else if(event.keyCode == 39) { // right
window.location = "http://newsii.abudayah.com/photo/31";
}
});
Your code has a syntax error. Your end parenthesis is inside the quote not outside...
Try:
<script>
$(document).ready(function() {
$("body").keydown(function(event) {
if(event.keyCode == 37) { // left
window.location.replace("http://newsii.abudayah.com/photo/2"); }
else if(event.keyCode == 39) { // right
window.location.replace("http://newsii.abudayah.com/photo/31"); }
});
});
</script>
window.location.replace is not supported in all browsers. Assigning the location value is always supported. However, the reason to use replace rather than assigning the location value is you don't want the current url to appear in the history, or to show-up when using the back button. Since this is not always possible, you just need to settle for what is possible:
<script>
$(document).ready(function() {
$("body").keydown(function(event) {
if(event.keyCode == 37) { // left
try { window.location.replace("http://newsii.abudayah.com/photo/2"); }
catch(e) { window.location = "http://newsii.abudayah.com/photo/2"; }
}
else if(event.keyCode == 39) { // right
try { window.location.replace("http://newsii.abudayah.com/photo/31"); }
catch(e) { window.location = "http://newsii.abudayah.com/photo/31"; }
}
});
});
</script>
I was having trouble with this in Chrome. I was trying to load another page from the same domain, but was using an absolute URL (e.g.www.example.com/newurl). I changed it to a relative URL (/newurl) and it works now.
My thought is that this is a security feature to prevent the user from being redirected to a malicious site through some javascript ad.
I had an issue with it not working when reloading same page in Chrome. Doing the following worked:
window.location.replace("/mypage1.aspx?type=abc"); //redirect to fake page
window.location.replace("/mypage.aspx?type=abc"); //redirect to same page
It is a bit of a hack, but this seems to be the only thing that forces a reload on the same page in Chrome. IE and FF work without the redirect to a fake page.
I used this and it's work
$(document).ready(function () {
$(document).keydown(function(e) {
var url = false;
if (e.which == 37) { // Left arrow key code
url = $('.prev').attr('href');
}
else if (e.which == 39) { // Right arrow key code
url = $('.next').attr('href');
}
if (url) {
window.location = url;
}
});
});
Use this way:
window.history.pushState("", "", "new url");
window.location.reload();
Basically, is it possible to do something like....
Click me!
<script>
function clicked() {
if(myVar == 1) {
link="http://stackoverflow.com"
}
else if (myVar == 2) {
link="http://google.com"
}
}
</script>
This example is probably impossible due to it firing at the same time...
But is it at all possible to use variables there?
Basically, I need a link that'll bring you to two different places depending on a variable.
I suppose I could have two links, and just hide/show each one respectively depending on the variable, but I was wondering if it's possible another way?
I'm working with HTML, CSS, JavaScript, and JQuery...
Thank you!
You could do...
$('a').click(function(event) {
if (condition) {
event.preventDefault();
window.location = 'http://different-url.com';
}
});
If the condition is met, then it will take you to a different URL.
Otherwise, the link will work as expected.
If you didn't want to use jQuery, that'd be...
var anchors = document.getElementsByTagName('a');
for (var i = 0, anchorsLength; i < anchorsLength; i++) {
anchors[i].onclick = function(event) {
if (condition) {
event.preventDefault();
window.location = 'http://different-url.com';
}
}
}
You could simply use Javascript to do a redirect:
<script>
function clicked() {
if(myVar == 1) {
window.location = "http://url1.com";
}
else if (myVar == 2) {
window.location = "http://url2.com";
}
}
</script>
No it's not possible to do it the way you want.
Why don't you do this instead -
Click me!
<script>
function clicked()
{
if(myVar == 1)
{
window.location.href = "www.stackoverflow.com";
}
else if (myVar == 2)
{
window.location.href = "www.google.com";
}
}
Take a look at Mozilla Developer Center for further references about the window.location object.
you could do this:
<script> function clicked() {
if(myVar == 1) {
window.location="http://stackoverflow.com"
}
else if (myVar == 2) {
window.location="http://google.com"
} }
</script>
Try this out
Click me!
<script>
function clicked() {
if(myVar == 1) {
location.replace("http://stackoverflow.com");
}
else if (myVar == 2) {
location.replace("http://google.com");
}
}
</script>
Cheers. This will take you to the desired place based on the myVar values!
function clicked() {
var dest = "";
if(myVar)
dest = "http://stackoverflow.com";
else
dest = "http://google.com"
window.navigate(dest);
But I see everyone said about the same. Just check which of the methods works on most browsers