I have tried finding a simialr example and using that to answer my problem, but I can't seem to get it to work, so apologies if this sounds similar to other problems.
Basically, I am using Terminal Four's Site Manager CMS system to build my websites. This tool allows you to generate navigation elements to use through out your site.
I need to add a custom bit of JS to append to these links an anchor.
The links generated are similar to this:
<ul id="tab-menu">
<li>test link, can i rewrite and add an anchor!!!</li>
</ul>
I can edit the css properties of the link, but I can't figure out how to add an anchor.
The JQuery I am using is as follows:
<script type="text/javascript" src="http://jquery.com/src/jquery-latest.pack.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// everything goes here
$("#tab-menu").children("li").each(function() {
$(this).children("a").css({color:"red"});
});
});
</script>
Thanks in advance for any help.
Paddy
sort of duplicate of this:
How to change the href for a hyperlink using jQuery
just copy the old href and add anchor to it and paste that back
var link = $(this).children("a").attr("href");
$(this).children("a").attr("href", link+ "your own stuff");
A nice jQuery-based method is to use the .get(index) method to access the raw DOM element within your each() function. This then gives you access to the JavaScript link object, which has a property called 'hash' that represents the anchor part of a url. So amending your code slightly:
<script type="text/javascript">
$(document).ready(function(){
// everything goes here
$("#tab-menu").children("li").children("a").each(function() {
$(this).css({color:"red"}).get(0).hash = "boom";
});
});
Would change all the links in "#tab_menu li" to red, and attach "#boom" to the end.
Hope this helps!
I can now target the html by using the following:
$(this).children("a").html("it works");
I assumed that:
$(this).children("a").href("something");
would edit the href but I am wrong.
Paddy
I am not sure for the answer, I dint try
$("#tab-menu").children("li").children("a").each(function() {
// $(this).css({color:"red"}).get(0).hash = "boom";
var temp_url = $(this).href +'#an_anchor';//or var temp_url = $(this).attr('href');
$(this).attr('href', temp_url);
});
Related
I am developing a website with many html files and just recently i started using seperated header and footer html files in order to save time by implementing them using javascript to my pages. The problem is now all the header and footer looks the same, while before using this handy technique i had the pages highlighted depending on the page you were on(this was done by manually adding class to different <a> tags depending on what the page(html file) it is), but now i can't find a way to target a specific <a>that would be targeted only on specific html to change it's css. The code looks something like this:
HTML home.html:
<div id="header"></div>
HTML header.html:
<ul>
<li id="LI_56">
Home
</li>
</ul>
Javascript looks like this:
$(function(){
$("#header").load("header.html");
$("#footer").load("footer.html");
});
css looks like this:
.home{
background-color:red;
}
and what I tried to do is:
<script>
$( document ).ready(function() {
document.getElementById('A_57').className = 'home';
});
</script>
But i get error:"TypeError: document.getElementById(...) is null" . When the header is already in my home.html and not implemented by javascript everything works fine, but that's no an option. Hoping anyone knows a solution. Using diffrent css files for each html is also clearly not an option - it should be as straight forward and developer friendly(smart & lazy) as possible! :) Thanks in advance!
Set the class name in a "complete" callback, this callback is executed after post-processing and HTML insertion has been performed:
$(function(){
$("#header").load("header.html", function() {
document.getElementById('A_57').className = 'home';
});
$("#footer").load("footer.html");
});
This is because the element doesn't yet exist. Add the class after the html has been loaded.
$(function(){
$("#header").load("header.html", function() {
var $homeLink = $('#header').find('a').filter(function() {
return $.trim($(this).text()) === 'Home'
});
$homeLink.addClass('home');
});
$("#footer").load("footer.html");
});
I need to add extra word in all my blog link.
I am using blogger.
For example.
The Url is : http://wwww.example.com/post1.html then it will automatic change to http://wwww.example.com/post1.html?extraword
means i need to add in all link ?extraword after my original link.
I have referred .htaccess add an extra word to add all my URLs but it about htaccess, but blogger doesn't have htaccess.
so please suggest me a code with javascript, with add some extra word in all my url.
one simple way (using jQuery) is this:
var word='?extraword';
$('a').each(function(){
var link=$(this).attr('href');
$(this).attr('href',link+word);
});
just include this little script at the beginning of your jQuery script and it's done.
UPDATE:
if the links are added dynamically you must change their href attribute after the page is completely loaded:
$(window).load(function(){
var word='?extraword';
$('a').each(function(){
var link=$(this).attr('href');
$(this).attr('href',link+word);
});
});
also looking at your blog's code I suggest that you put this script at the end of your html code right before the closing body tag.
UPDATE2:
<script>
$(window).load(function(){
var word='?extraword';
$('a').each(function(){
var thelink=$(this).attr('href');
$(this).attr('href',thelink+word);
});
});
</script>
UPDATE3:
<script>
$(window).load(function(){
var word='?extraword';
$('a').each(function(){
var thelink=$(this).attr('href');
$(this).attr('href',thelink+word);
});
if(window.location.indexOf(word)<0){
window.location=window.location+word;
}
});
</script>
In java script you can use concat() to join two strings together.
http://www.w3schools.com/jsref/jsref_concat_string.asp
I'm quite new at using jquery but learning a bit everyday. I have solved many problems searching this web but I can't seem to find any solution for this one:
The web I'm workign at the moment use quite a lot of page anchors.
I have localscroll and scrollto as jquery libraries.
I animated the transition with this little script:
<script type="text/javascript">
$(document).ready(function () {
$('.scrolllento').localScroll({ duration: 1000 });
});
</script>
and it works fine whatever I add the class "scrolllento" to the cointainer of my links.
Now the problem I have is when a link jumps to an anchor of inside different page. my client has asked me if it's possible to load the page first then move to the anchor with same web transition.
I have been working on it with my little knowdlege and this is what I have atm:
<script type="text/javascript">
$(document).ready(function () {
var nosalto = $(location).attr('href');
if (nosalto.indexOf("HistoriaBMG") > 0) {
$.fn.gotoAnchor = function (anchor) {
location.href = this.selector;
}
$('#historia').gotoAnchor();
}
});
</script>
"HistoriaBMG" is the new page and "#historia" is the anchor I want to go inside that page.
and it seems again that it works...
the problem is I have no idea how to implement now the transition as the class "scrolllento" in the container of the link going to ../HistoriaBMG is ignored.
could anyone help me? thanks so much in advance and excuse my english, hope this question is clear enough.
According to the localScroll docs:
The plugin also adds a function, $.localScroll.hash() , that checks the URL in the address bar, and if there's a hash(#an_id), it will scroll to the element. It accepts a hash of settings, just like $.localScroll. You will likely call it on document ready. Check the regular example to see it in action.
So you simply need to call $.localScroll.hash()on $(document).ready()
I've just attempted to make a simple script to use ajax to load a new part of a page. The class remove/add to change the relevant text colour works fine. However, the new html does not seem to appear. I have a feeling this is to do with my general js syntax but I can't work it out.
Javascript:
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#page_menu a").click(function() {
$("#page_menu p").removeClass("current");
$(this).children().addClass("current");
var project = $(this).attr("name");
var loadUrl = project + ".html";
$("#project_image").load(loadUrl);
return false;
});
});
</script>
An example of an anchor tag in the html would be:
<a name=example href="#">Example</a>
The html file I'm looking to load would be called "example.html" and the code in it:
<h1>Hello</h1>
I'm sure it's pretty straight-forward but I'm just not seeing it!
Cheers,
Rich
I would use the href of the anchor directly:
Example
<div id="project_image"></div>
And then AJAXify it:
$(function() {
$('#page_menu a').click(function() {
$('#page_menu p').removeClass('current');
$(this).children().addClass('current');
$('#project_image').load(this.href);
return false;
});
});
Anchor's most certainly do have a name attribute, so that part would be okay.. but to make things cleaner, change your anchor to:
Example
For length sake you can use shorthand syntax for $(document).ready, and also do the class changes in one chain. Then just load the page specified in the href and to see if the request actually worked, add a callback, like so:
$(function() {
$("#page_menu a").click(function(e) {
$("#page_menu p").removeClass("current").filter(this).addClass("current");
$("#project_image").load(this.href, function(res) {
// This will allow you to see the response from the server without having to dig through requests
// If you don't have a console for some reason, just change this to alert()
console.log(res);
});
e.preventDefault();
});
});
Is there an easy way to modify this code so that the target URL opens in the SAME window?
click here``
<script type="text/javascript">
window.open ('YourNewPage.htm','_self',false)
</script>
see reference:
http://www.w3schools.com/jsref/met_win_open.asp
The second parameter of window.open() is a string representing the name of the target window.
Set it to: "_self".
click here
Sidenote:
The following question gives an overview of an arguably better way to bind event handlers to HTML links.
What's the best way to replace links with js functions?
Go;
try this it worked for me in ie 7 and ie 8
$(this).click(function (j) {
var href = ($(this).attr('href'));
window.location = href;
return true;
Here's what worked for me:
<button name="redirect" onClick="redirect()">button name</button>
<script type="text/javascript">
function redirect(){
var url = "http://www.google.com";
window.open(url, '_top');
}
</script>
I'd take that a slightly different way if I were you. Change the text link when the page loads, not on the click. I'll give the example in jQuery, but it could easily be done in vanilla javascript (though, jQuery is nicer)
$(function() {
$('a[href$="url="]') // all links whose href ends in "url="
.each(function(i, el) {
this.href += escape(document.location.href);
})
;
});
and write your HTML like this:
...
the benefits of this are that people can see what they're clicking on (the href is already set), and it removes the javascript from your HTML.
All this said, it looks like you're using PHP... why not add it in server-side?
So by adding the URL at the the end of the href, Each link will open in the same window? You could also probably use _BLANK within the HTML to do the same thing.
try
<a href="#"
onclick="location='http://example.com/submit.php?url='+escape(location)"
>click here</a>