jQuery if url hash, click event/activate javascript - javascript

So from the home page, i have a link that goes to a products listing page.
The product page has expand/collapse divs.
I need the appropriate div to expand depending on what the url# is.
So the link on the homepage is
healthy snacks
when i click the link above, i am trying to activate this, on the product page:
Healthy Snacks
I've tried some of the other codes that i found that trigger click by checking for hash tag and none of them were working properly, i think it's because of the ReverseDisplay js.
Please any insight would help.
thanks

You can make the following changes in the document ready function of your product page:
Simple fix: Since the jQuery id-selector is #elementId, you can simply use the window.location.hash value as your id selector, and use it to target the desired element.
if ( window.location.hash ) {
$(window.location.hash).click(); //clicks on element specified by hash
}
Better: In addition to the above, take the js out of your markup.
$('#healthysnacks').click(function(e) {
e.preventDefault();
ReverseDisplay('products4');
});
Then, after doing this, use the $(window.location.hash).click() code from above.
Also, change your link to:
Healthy Snacks

You can use the hash property of the Location object, try the following:
$(document).ready(function(){
var id = window.location.hash;
$(id).trigger('click')
})
As you are using jQuery instead of using javascript: protocol, you can use the jQuery click method:
$('#healthysnacks').click(function() {
// do something here
})

The answers suggested here are valid, but...
Be extremely careful when using the window.location.hash as it is in a jQuery selector because this could lead to a XSS vulnerability. $() can also create an HTML element and with a carefully constructed hash value, someone could execute arbitrary JavaScript code.
For example
http://my-website.com/about#'><img src=x onerror=alert(/XSSed/)>
If my-websites.com/about page uses the window.location.hash inside a jQuery selector, that onerror code would end up getting executed.

Related

checking if the user clicked on href after a JQuery modify

I am trying to check if a user clicked on a kind of a href in a specific class.
I am appending the class in jquery because I need to put a different link every time
$("#list-dir").append("<a href='' class='add-href'><il class='dir-items'> " + dir_items[i] + " <br> </il></a>")
$(".add-href").eq(i).attr("href", href_element);
and it works as it should I can see the class and the correct link in the HTML file. But when I try to check if the user clicks it nothing works for some reason like the class isn't there
This ^ was how the webpage looks after I modified it with JQuery.
I already tried putting this code:
$(document).ready(function(){
$(".add-href").on("click", function(e){
console.log("d")
});
});
as most of the answers suggest but it didn't work.
Thanks to CBore for giving me the answer. I had to use event delegation. after I did it worked perfectly fine. in addition like Aslan Kayardi said I could of also create another element like the data-href and enter the link in the value

How to use Javascript to change href and html text?

So I've got this little piece of HTML that I have zero access to, and I need to change the URL of where it's linking, to somewhere else.
Now I've looked around, and I've tried different approaches and non seem to work so I must be doing something wrong.
the Html code:
<div class="manageable-content" data-container="edit_register_ind_container">
<a class="entry-text-link secondary-step step-button" id="register_ind_container" href="oldurl">Register</a>
</div>
First I wanted to try something that seemed easier, which was to change the displayed text "Register" to "Start a Fundraiser"
This is what I have got for that part:
// url manipulation
$(document).ready(function(){
$("#register_ind_container").click(function(){
$("#manageable-content a").text('Start a Fundraiser');
});
$("#register_ind_container").attr("href", "http://google.ca");
});
No luck so far for any of it.
a little background information:
I am using a platform called Luminate/Blackbaud, its a CMS with a weird set up. header tags and stuff like that go in a different place than the html body and the css is somewhere else as well (but I'm just using ftp to reference it in the header).
How I'm referencing the javascript code.
<script type="text/javascript" src="../mResonsive/js/urlmanipulation.js"></script>
My css works so I'm certain this should to, but I just don't know why it isn't.
All suggestions welcome (except for asking for the html access because I have, 3 weeks ago lol)
Thank you for your time!
I saw your both code :
$("#register_ind_container").attr("href", "http://google.ca");
This line will execute on page load so href should be changed on load
$("#register_ind_container").click(function(){
But when you performing this click on Id
it wont work because at that instance this id associated with an hyperlink
so hyperlink having the default subset rules
for Overriding this you can try
$("#register_ind_container").click(function(e){
// custom handling here
e.preventDefault();
$(this).text('Start a Fundraiser');
});
But this is also not a Good Practice. Hope this helps !
$(document).ready(function(){
$("#register_ind_container").click(function(){
$(this).text('Start a Fundraiser');
$(this).attr("href", "http://google.ca");
});
});
You are changing the URL outside the click event.. Wrap it inside the click event.. Also make use of $(this)
// url manipulation
$(document).ready(function(){
$("#register_ind_container").click(function(){
$(this).text('Start a Fundraiser').attr("href", "http://google.ca");
});
});

jquery - significance of .hash in this function

I borrowed someone's jquery function and adapted it for my own use, but I do not understand exactly how it works. Specifically the line var content = this.hash.replace('/', '');
Could someone please explain .hash in this context?
The full jsFiddle is here: http://jsfiddle.net/bsapaka/KjcnL/3/
$(document).ready(function () {
var tabs = $(".tabs-group li a");
tabs.click(function () {
var content = this.hash.replace('/', '');
tabs.removeClass("active");
$(this).addClass("active");
$("#panel > div").hide();
$(content).fadeIn(700);
$(this).delay( 800 );
});
});
That gets the part of the href after (and including) the #.
An <a> element has several such properties, like:
hash
host
href
hostname
pathname
protocol
search
In that context, they're using the hash as an id to fetch another element. Because the # is present, it's a valid id selector.
If you look at the way the following anchor tag is set up:
<li>Health & Fitness
The hash value is the part of the href attribute after and including the hashtag: #
In this case, the code stores the ID of the element to be shown when the anchor tag is clicked in the hash, then a few lines below, the value of the hash is used as a JQuery selector to show the specified element (note that the hashtag is also the ID selector in JQuery):
var content = this.hash.replace('/', ''); // returns '#hnf' for the <a> tag above
[...]
$(content).fadeIn(700); // '#hnf' is the ID of an image on your page to display
Beware though, because using hash navigation in this way may cause unexpected results when a user tries to use the back button. Hashtag navigation is usually used to create entries in a browser's history upon displaying new data without actually navigating to a different HTML page. You should research hash navigation further for ways to prevent some of the pitfalls. The following SO post may be a good place to start if you find the back button behavior is undesired:
How to make the browser back button disregard hash tags?
I believe that hash is found on elements that contain an href attribute or property
the bolded text is the hash.
http://www.example.com/page.html#stuff

workaround to using ID in <a> to call function

I'm using an XML file that has a number for each section. The page loads a link for each section of the XML and puts the article number in the URL parameter (page.html?aid=###). When the link is clicked an overlay iframe pops up the with more information about that article. is calling the overlay iframe popup but I can't use more than one of the same ID for a page.
$(function(){
$('#b1').frameWarp();
});
Instead of using ID="b1", am I able to use each article number for the id? I cannot use class instead of ID.
Would there be another way to do this?
You could use $('a[id^="b"]'), but that's hugely inefficient and will probably match more than what you want it to. Alternatively, you could filter on a regex:
$('a').filter(function(){
var re = /^b[0-9]+$/;
return re.test($(this).attr('id'));
}).frameWarp();
It's not much more efficient, if at all, but at least it would rule out false positives.
Here is the answer courtesy of benalpert on reddit:
$('.b1').each(function() { $(this).frameWarp(); })
This allows the class to be used instead of ID without error.
Thanks to everyone for the help.

Jquery extension BeautyTips doesn't work with dynamic ajaxPath option

I'm using the BeautyTips jQuery extension, but I'm not having any luck passing dynamic URLs as the ajaxPath. In the documentation, they suggest:
$('#example18').bt({
ajaxPath: ["$(this).attr('href')", 'div#content']
});
I have
$( '.username' ).bt({
ajaxPath: ["$(this).attr('title')"]
});
However, when I hover over the username element, instead of bringing up the URL stored in the title attribute within the Beautytip, it attempts to send the whole browser to another page (or refresh; it's hard to tell because the browser address doesn't change, but the page goes blank, and a View Source shows an entirely different page.)
I have verified that the title in the element in question is correct and is being addressed correctly. If I statically pass the path, it works, but I'd rather not write a new version of this function for every item on the page that needs a Beautytip.
Is there a syntax issue here? Any help would be much appreciated.
My HTML is like:
<span class="username" title="http://degree3.com/popup/baloon/member-summary?id=53">Username</span>
Okay, I had to dig through the extension, but I figured this one out.
The plugin author (for reasons I did not spend the time to decipher) kills the "title" attribute of the element that BeautyTips operates on and moves its value to an attribute called "bt-xtitle" instead. I guess this is why his sample used the "href" attribute instead of the title attribute, and it was my dumb luck to attempt this maneuver on the wrong attribute.
Anyway, this works:
$( '.username' ).bt({
ajaxPath: ["$(this).attr('bt-xtitle')"]
});

Categories