Changing colour of borderBottom on top location address - javascript

I'm making a very basic menu for my site and I have used the border-bottom property to underline the items. What I want is to highlight the underline pink if you're on a certain page. I've used custom "url" elements and "link" attributes. I would like it so if the user is on page1 the page1 item would underline pink. Here's what I've tried so far:
<script>
function col(){if(top.location.href==document.getElementsByTagName("url")[1].link){this.style.borderBottom="solid #F05";};}
</script>
^ That was completely wrong, I was testing with a bit of code from W3Schools.
I also tried:
<script>
function menuCol(url){if(top.location == url){this.style.borderBottom="solid #F05";};}
</script>
^ This one worked but I had to include "[PAGE NO]" on every page so the script could match the IDs of the page and URL element.
Does anyone know how I can actually make this work without having to put in pageID tags in?
----- Edit -----
Sorry, I'm not exactly sure how to put the problem into words but here's the page and source code (currently):
http://3659905.webs.com/ExternalPages/Desktop/Menubar_test.htm
<head>
<title>Menu</title>
<noframes></noframes><noscript></noscript><!-- --><script type="text/javascript" src="http://www.freewebs.com/p.js"></script><script></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script language="JavaScript" src="http://images.freewebs.com/JS/Freebar/bar_sidegrey.js"></script>
<script>
$(document).ready(function(){
$("url").click(function(){
top.location.href="http://"+$(this).attr("link")
});
});
</script>
<script>
function col(){if(top.location.href==document.getElementsByTagName("url")[1].link){this.style.borderBottom="solid #F05";};}
</script>
<style>
url{text-decoration:none;font-size:15px;padding:3px;border-bottom:solid #AAA;}
url:hover{cursor:pointer;border-bottom:solid #FFF}
body{background:black;color:white;font-family:arial;cursor:default;}
</style>
</head>
<body onselectstart="return false;" oncontextmenu="return false;" onload="col();">
<center>
<url link="3s.uk.to">Home</url>
<url link="3apps.uk.to">App Store</url>
<url link="3659905.webs.com/ExternalPages/Desktop/Menubar_test.htm">Menu Test</url>
</center>
</body>

The best guess I could make, given the sparsity of information in the question, is this:
// in real life, use:
// var url = window.location;
var url = "http://some.domain.com/index.html";
function markActive(elem) {
if (url.indexOf(elem.href.split('/').pop()) > -1) {
return 'active'
}
}
var as = document.getElementsByTagName('a');
for (var i=0,len=as.length; i<len; i++){
as[i].className = markActive(as[i]);
}​
JS Fiddle demo.
This, in its current incarnation, works only for the name of the page, so if you had multiple index.html pages, albeit in different directories, they would all assign the active class (if you were currently in www.example.com/index.html).

As they said, we need more code.
But if you want to take the current "pagename" and get the links containing that page you could do this:
//get current adress
var URL = window.location.pathname;
//get the filename with extension
var PageName = URL.substring(URL.lastIndexOf('/') + 1);
//use jquery to find links pointing to the file
$('#YOURMENU a[href='+PageName+']').css("border-bottom-color", "#F05");

Related

JavaScript isn't loaded when using link element

Im trying to make a website with JavaScript popups. Basically, when you click a link an alert or prompt comes up saying "You are now entering the [enter webpage name here] section."
For some reason, when I click the link, it will open the page but ignore any JavaScript! Here is the basic code:
HTML:
<html>
<head><link rel="text/javascript" href="effects.js" /></head>
<body>
Click here
</body>
</html>
JavaScript (effects.js):
function common_lang() {
var enterCommon = prompt("You are now entering the Common Languages section.");
}
I don't get why this won't work! Does anyone have any ideas? Also, is there a way to make this more efficient? And I need the file in the same window so I can't use any window.open jazz. But efficiency isn't a priority, remember!
You should use the script tag instead of link
<script type="text/javascript" src="effects.js">
First you need to change the link tag to script like:
<script type="text/javascript" src="effects.js"></script>
Second, this is because you are using the href attribute so the link just redirects you to common_code.html
if you want to navigate to the link based on user prompt selection you can do it like:
Click here
function common_lang() {
var enterCommon = prompt("You are now entering the Common Languages section.");
if(enterCommon) {
var a = document.createElement('a');
a.href = "common_code.html";
a.dispatchEvent(new Event('click'));
}
}

jQuery DOM manipulation won't get the href attribute

Using this code, I am trying to get the href attribute of a link and make a new link of that attribute. Why my link does not work, I don't know. It shows something like this:
404 - The page cannot be found
Sorry, we cannot find the page.
It might have been removed, had its name changed, or is temporarily
unavailable.
Please check that the Web site address is spelled correctly.
Or go to our home page, and use the menus to navigate to a specific
section.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
text ="";
text +=$("#w3s").attr("href");
document.getElementById("demo").innerHTML="<a href=\'text\'>W3Schools.com</a>";
});
});
</script>
</head>
<body>
<p>W3Schools.com</p>
<button>Show href Value</button>
<p id="demo"></p>
</body>
</html>
If I use:
document.getElementById("demo").innerHTML = text;
It shows http://www.w3schools.com. Why doesn't the link go to this site?
If you're going to use jQuery to traverse and manipulate the DOM, use jQuery. If you're going to use vanilla javascript... do that. Just try not mix them! Makes things easier in the long run. Anyway, you could do something like this to set the href attribute;
$('#demo').attr('href', text);
or
document.getElementById('demo').href = text;
btw this
"<a href=\'text\'>W3Schools.com</a>"
Is totally not how you do string concatenation in javascript. Should be
'W3Schools.com'

How can I dynamically add a URL into javascript, to get a second page's div to display on the first page?

Ok, so this what I have that works, for the starting code:
$(document).ready(function(){
$('.currentpagediv').load('http://theurl.com/page2/somethingsomewhere.html .secondpagedivclass');
});
What this does, is find the div on the current page, <div class="currentpagediv">, and add in the second page (http://theurl.com/page2/somethingsomewhere.html) div <div class="secondpagedivclass">
So for example, say I have a page like this:
<html>
<body>
<div class="currentpagediv">
</div>
</body>
</html>
then what my code above does is make this:
<html>
<body>
<div class="currentpagediv">
</div>
<div class="secondpagedivclass">
</div>
</body>
</html>
Which is just what I want it to do. So I have the functionality I need.
BUT, the problem is that I need the URL portion to be dynamic.
For example, the current page is always http://theurl.com/page1/[a path].html, and the new page that I need to fetch the div is always http://theurl.com/page2/[the same path].html
So basically, I need to get the URL, and change ONLY /page1/ to /page2/, while retaining this. That way I can run on all the pages of the domain and it will add the section from page2 into page1.
Like this:
Original page http://theurl.com/page1/365743668.html:
<html>
<body>
<div class="currentpagediv">
</div>
</body>
</html>
Second page http://theurl.com/page2/365743668.html:
<html>
<body>
<div class="secondpagedivclass">
</div>
</body>
</html>
NEW ORIGINAL PAGE THAT THE SCRIPT IS RUNNING ON (still http://theurl.com/page1/365743668.html):
<html>
<body>
<div class="currentpagediv">
</div>
<div class="secondpagedivclass">
[THE INFO FROM PAGE `http://theurl.com/page2/365743668.html`]
</div>
</body>
</html>
I've tried many things, but they did not work.
Here is my attempt which does not work:
function changeURL() {
var theURL = location.pathname.toString();
var newURL = theURL.replace("/page1/", "/page2/");
}
$(document).ready(function(){
$('.currentpagediv').load(changeURL() '.secondpagedivclass');
});
In the code above, I tried to:
fetch the url of current page
convert the url to a string, so I could
modify the url, and then
add the function changeURL() in place of where the URL went after .load('
Please note I want to make it work using jquery and this method (NOT ANOTHER METHOD) because I'm also trying to learn, and giving me something completely different is not going to help me learn how to do this method.
You're just missing the string concatenation operation, +.
$('.currentpagediv').load(changeURL() + ' .secondpagedivclass');
Don't forget the space before .secondpagedivclass.
The changeURL function needs to return the result:
function changeURL() {
var theURL = location.pathname;
var newURL = theURL.replace("/page1/", "/page2/");
return newURL;
}
You don't need to use .toString(), since the pathname is a string.

Function redirect if Div Id on my page won't work

I need to redirect page if div id found inside the page.
I have this script :
<script>
if (!document.getElementById("locationsHolder")) {
window.location.href = "logged.html";
}
</script>
On the same page I have this
<div class="locationsHolder" id="locationsHolder"></div>
Although I have everything right it loads logged.html page whatever id I put on getElementById. i.e. getElementById("notexist")
You should do if (document.getElementById("locationsHolder")) since you want to do something if the div is found. Also you should put the script at the end of document or use jQuery $(document).ready() to make sure the entire page is loaded prior to running the script.
Maybe this will do what you need:
<!-- Put the following somewhere in the head block: -->
<script type="text/javascript">
window.onload = function(){
if(document.getElementById("locationsHolder") == null){
// Do something here if the ID is NOT found on the page
}else{
// Do something here if the ID IS found on the page
document.location = "logged.html";
}
};
</script>
you probably tested for the existence of div id before even the page has been loaded.
I would suggest you to either place the script after the div id or invoke the call only after the onload event.
window.onload=function(){
// your code
}
you should ask if it is == null. try this in the developer tool.
!null --> true
!"" --> true
!document.getElementById("locationsHolder") is always true.
you should do something like
!document.getElementById("locationsHolder") == null
It was the '!' that I remove it and script was before div id. Now it's working.
I need it this because I want home page redirected if another page contain a div id. I have another script inside index file that looks for page2 if contain div id , and it worked until I made this script from this topic that checks if that div is present on the page.
So, this script is one home page and checks if div id found on page2 and loads it on home page :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
$('#result').load('Page2.html #intro');
});
</script>
</head>
<body>
<div id="result"></div>
Code from page2:
<div id="result"><div id="intro">Hi, this is the Intro!</div></div>
Now the script from this topic can't find div id "intro" , and actually it dosen't load as bellow script search for 'intro'(and jquery above stops working), but if I search for other div from the page is working Must be a conflict.
<script>
if (document.getElementById("intro")) {
window.location.href = "logged.html";
}
</script>
What is wrong?
Maybe there is another more simple way to trigger redirection if page.2 contain div id "intro" ?
I tried to trigger redirect directly from page1 with this script but won't work:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"> </script>
<script type="text/javascript">
if ('page2.html #intro').length === 0){
window.location.href = "logged.html";
}
</script>

add javascript into a html page with jquery

I want to add a javascript google ad but I can't insert the javascript into the div using jquery. I try to simulate my problem with this test, which is using some advice I found on stackoverflow , but it does not work.
I want <script type='text/javascript'>document.write('hello world');</script> to be inserted in the div, and "hello world" be displayed between the tag_1 and tag_2.
Here is the code :
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var str="<script type='text/javascript'>document.write('hello world');";
str+="<";
str+="/script>";
$('#insert_here').append(str);
});
</script>
</head>
<body>
tag_1<br/>
<div id="insert_here">
</div>
tag_2<br/>
</body>
</html>
Tanks for your answers,
Lucas
See my answer to Are dynamically inserted <script> tags meant to work? for why you can't use innerHTML, which jQuery's functions map to when passed a HTML string, to insert a script element. document.write will also fail when used after the document has been fully parsed.
To work around this, you will have to use DOM functions to insert an element into the div. Google ads are iframes, so it's usually a case of finding the iframe code and appending that instead.
To correctly insert a script element, you need to use DOM functions, for instance:
var txt = 'alert("Hello");';
var scr = document.createElement("script");
scr.type= "text/javascript";
// We have to use .text for IE, .textContent for standards compliance.
if ("textContent" in scr)
scr.textContent = txt;
else
scr.text = txt;
// Finally, insert the script element into the div
document.getElementById("insert_here").appendChild(scr);
I figured out a great solution:
Insert your Google Adsense code anywhere on your page - e.g. if your CMS only allows you to put this on the right hand side then stick it there.
Wrap a div around it with display:none style
Add some jquery code to move the div to the location you desire.
Since the javascript has already run there is no problem then with moving the block of script to wherever you'd like it to be.
e.g. if you wish to put 2 blocks of google adverts interspersed throughout your blog (say after paragraph 1 and after paragraph 4) then this is perfect.
Here's some example code:
<div id="advert1" style="display:none">
<div class="advertbox advertfont">
<div style="float:right;">
<script type="text/javascript"><!--
google_ad_client = "pub-xxxxxxxxxxxxxxxxx";
/* Video box */
google_ad_slot = "xxxxxxxxxxxxxxxxx"
google_ad_width = 300;
google_ad_height = 250;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$('#advert1').appendTo("#content p:eq(1)");
$('#advert1').css("display", "block");
});
</script>
p.s. #content happens to be where the content starts on my CMS (Squarespace) so you can replace that with whatever you have in your CMS. This works a treat and doesn't break Google ToS.
You cannot use document.write after the page has finished loading. Instead, simply insert the contents that you want to be written in.
<script type="text/javascript">
$(function() { // This is equivalent to document.ready
var str="hello world";
$('#insert_here').append(str);
});
</script>

Categories

Resources