change link with javascript - javascript

I am trying to change a link programmatically.
Example:
I want to call a dialog and change an image buttons url link based upon the call it gets.
so:
<a href="javascript:myHref('http://www.google.com')" onclick="$('.hiddendiv').dialog('open');" > Edit Address </a>
the function myHref would change a link within the div (let's call it myAnchor) to http://www.google.com.
Thoughts on how to go about this?
I've seen methods for changing a designated link, but not in this manner.

I think this code might be what you are looking for:
var linkattributes=document.getElementById("link-id").attributes;
linkattributes.getNamedItem("href").value = 'http://www.google.com';

Related

Facebook share button with diverse links

I am trying to use the regular Facebook share button, but instead of giving it a specific link. I wan't the link to be diverse, by this I mean, I wan't the link to change depending on a certain function of which happens inside of a php script.
The only issue is the fact, that I can't seem to make it work.
Underneath here I have attached my code, along with a short break down of what I have done so far.
First off I have a div with the id "passToJ", inside this div I have a php code of which gets a post value and then uses "echo" to write and show it on my page. This part is working, as the exact value, which needs to be showed, is showed.
Second part is a javascript of which gets the value inside the "passToJ" div. After that it then adds that value to a link, to make a larger link, with an added variable. It then takes this link and implements in the Facebook href link, of which is necessary. This is a little complicated, but it is a bunch of numbers, which according to the Facebook docs page needs to be there and then inside I have added my own real link by the javascript.
The Javascript then adds those links(href and data-href) to the actual Facebook button of which is written below the javascript function. This is where I guess the issue is. In the "data-href" field it has to include the "complLink" variable value and in the regular "href" it has to include the "complLinkDos".
The value is showing on the page, so far so good. But the actual function of getting the link values to the Facebook, isn't working.
An important note, might be the fact that when trying to use the "share" button. It does work, it just isn't using the right link, it is just using the link of the actual page it is on. Which it isn't supposed to.
<div id="passToJ">
<?php
$linkAffId = $_POST['hiddenAffIDH'];
echo htmlspecialchars($linkAffId);
?>
</div>
<script type="text/javascript">
var div = document.getElementById("passToJ");
var linkToSha = div.textContent;
var complLink = "https://example.com/" + linkToSha;
var complLinkDos = "https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%example.com"+"%2F"+linkToSha+"&src=sdkpreparse";
document.getElementById("fbSBut").data-href=complLink;
document.getElementById("fbLinking").href=complLinkDos;
</script>
<div class="fb-share-button" id="fbSBut" data-href="" data-layout="button" data-size="large" data-mobile-iframe="true"><a class="fb-xfbml-parse-ignore" id="fbLinking" target="_blank" href="">Share</a></div>

append once with javascript href link

I know it has been posted before on how to append only once, but my situation is a little unique because I'm attempting to call the function from an href link. I have my code posted on jsfiddle, but it's not working for some reason. The same code on my site works. Can someone help me get this working so that clicking the href link will append a given string to the #services div only one time. The code thats on my actual site appends the "details" over and over again every time I click the link, but I only want it to do it once.
<div id="services">SERVICES</div>
More Details
var details = '<p>Just some additional details</p>';
function moreDetails(){
$('#services').append(details);
}
http://jsfiddle.net/7g59yb5r/1/
I'd use .one() and do it like:
var details = '<p>Just some additional details</p>';
$('a').one('click',function () {
$('#services').append(details);
})
jsFiddle example
I'd strongly recommend you to follow a data attribute based approach for adding such kind of behavior. Otherwise you'll end up with a huge pile of spaghetti code. I recently prepared a small presentation about what I like to call data driven behavior.
Assuming that for your case it would also be fine to show / hide the details with a toggle button you could add such re-usable behavior with a few simple lines of code:
$('[data-toggle-show]').each(function() {
var $element = $(this),
$target = $($element.data('toggleShow'));
$target.hide();
$element.on('click', function() {
$target.toggle();
});
});
Then you can use this functionality anywhere in your markup using a data attribute:
<p>Welcome to the article. Do you want to read more?</p>
<button data-toggle-show="#article-more">read more</button>
<p id="article-more">Here you go! Some more to read...</p>
You can view the example on jsbin
Also, in my opinion, the correct HTML semantics for such behavior is to use a button instead of a link. I've also used a link in the past until I read an interesting debate on where to use a link and where to use a button. Actually the bottom line is that a link should be used where a user can right click to bookmark the URL and a button should be used where you could also decide to disable the possibility to execute the behavior.
Simply do:
<div id="services">SERVICES</div>
More Details
var details = '<p>Just some additional details</p>';
function moreDetails(obj){
obj.setAttribute("href", "")
$('#services').append(details);
}

Jquery toggleClass loses the class once links is clicked or page is refreshed

When the link is not pointing to anywhere (href="#") my toggleClass works as it is suppose to. But as soon as I fill in the "href" with an URL it doesnt work anymore. I suspect it is because the page is refreshed? But I'm quite new to JS. If this is the problem how can I work around it? and if it's not, then what have I done wrong?
So this is my current javascript using jquery:
$(document).ready(function()
{
$('.button').click(function()
{
$('.buttonselected').removeClass('buttonselected');
$(this).toggleClass('buttonselected');
});
});
And this is my HTML code:
<nav>
<ul>
<li>
<a class="button" href="?page=frontpage"> HOME </a>
</li>
</ul>
</nav>
There are more links in the list, but that is irrelevant for this question.
Yes, I'm using PHP include.
Also, how can I set a link to "toggleClass" when the page loads so that it gets that class when someone first enters the website.
Thank you for the help!
You are right. The class goes away because the page is reloaded. If you need a specific link to have a specific class when the page loads, you'll need to hard code something to that link. Either manually put the class on the link with php or distinguish it in some other way so that JavaScript can find it.
If the link that should have the class is different based on which link you clicked previously, you will have to use a cookie or the localStorage object to retain that information.
Better yet, you should try to figure out a way to pass this information around that doesn't involve reloading the page. That would be ideal as, in most cases, users don't like to have a page reload on them when they're not expecting it.
EDIT:
The answer by #pszaba is great if you don't need to utilize query string variables.
You can use event.preventDefault()
$('.button').click(function( event )
{
event.preventDefault(); // default action of the event will not be triggered.
$('.buttonselected').removeClass('buttonselected');
$(this).toggleClass('buttonselected');
});
EDIT:
If you want to load your frontpage (as in your link) and give it a "buttonselected" class
than you need to use PHP.
Something like this
if( isset($_POST['page']) ){
$selectedPage = $_POST['page'];
}
View
<a class="button <?php echo ($selectedPage=='frontpage')?' buttonselected':'' ?>" href="?page=frontpage"> HOME </a>

How do I open a link in the same window and tab using the onclick event?

I have a page that has multiple divs. I want to get some information from my database to display in some of those divs and I also want it to be displayed as I click on a link to the home div.
I also need the page to be refreshed or reopened in the same window (not in a new page or tab). Last of all, I need the page to be in the home div.
I tried the code below and it didn't work:
<a href="#home" onclick="window.open('index.jsp#home')" >home</a>
home
home
I used this and it worked
منوی اصلی
change your :
onclick="window.open('index.jsp#home')" >home</a>
to
onclick="parent.location='index.jsp#home'">home</a>
no need to reload.
like this?
<input id="but1" type="button" value="click"></div>
function loadIndex() {
window.location.href = "http://jsfiddle.net/Xotic750/u5nmt/";
}
document.getElementById("but1").addEventListener("click", loadIndex, false);
on jsfiddle
remember jsfiddle is in frames
The problem with changing location.href to the current URL with a hash value is that the page won't reload but jump to the given ID.
If you really want to jump to the home div then you can just jump with location.href='index.jsp' and edit your index file
to set location.href = '#home' on load.
If you want to be able to pass information across to the newly loaded page (to provide a specific id) you could use the query string instead, e.g. to jump page use location.href = 'index.jsp?loaddiv=foo
Then once the page loads read the query string and use the value to jump to the requested div, e.g.
location.search = '#foo'
For details on extracting values from the query string see this question.

How to implement go-to javascript links? (plus highlight)

Is there a standard way for making all the links in a site, with the form href=#something, become 'go-to' links? (does this kind of links have a name?)
Let me describe these links further: When you click them, #something is added to the url. And if you go directly to that url from your browser, it takes you to that page, and then it scrolls down to that link.
Take this link as example: http://en.wikipedia.org/wiki/Universe#cite_note-Craig-45
Edit: As you can see, the div gets highlighted. How to make that happen automatically?
You're referring to anchor tags. Here's an example of a JavaScript-less internal link:
Go to my div!
<div id="myDiv">
This is content
</div>
If you want to send someone to myDiv using JavaScript, then you could do it this way:
<span onclick="window.location.hash = '#myDiv'">Go to my div!</span>
<div id="myDiv">
This is content
</div>
Here's a jsFiddle that demonstrates both the HTML and JavaScript methods.
You can also use a similar method to allow the use to navigate to page and then scroll them to the appropriate element on the page. Simply add the hash (#) plus the ID of the element to the URL. For example:
Go to my page and then div!
Or, with JavaScript
Go to my page and then div!
Use the id attribute of the a tag. Place the following at the location you would like to link to:
<a id="example"></a>
You can then link to that using:
Go to example
If you want to link to a specific anchor on a different page, simply use the # character after the URL:
Go to different page example
Here's an example.
The thing after the # is called an anchor, and is defined using the a-tag: <a id="something">.
If you just have #something as a link, like <a href="#something">, it will resolve relatively to the current page. So if your page is at http://myurl/mypage.html then it will open http://myurl/mypage.html#something.

Categories

Resources