We Keep Coding

Trying to use jQuery to trigger an anchor click after the page loads

So this has been asked a number of times on here, and while I've read all of the threads I can find, this still isn't working for me.
A little background: I'm working on a Wordpress site with a grid plugin, and I'm trying to trigger a filter when the page loads, depending on a url parameter. For the purpose of this thread I've just hardcoded a url parameter (the category variable) as an example because that functionality is working fine.
The anchor tag I'm trying to trigger:
Tarps and Covers
The broken code I'm trying to use to trigger the click event:
<script type="text/javascript">
$(document).ready(function() {
var hash = window.location.hash;
var category = '55';
var anchor = $("[data-category=" + category + "]");
anchor.click();
});
</script>
A console log returning the anchor variable confirms that I'm selecting the correct jQuery object, and I've also tried anchor[0].click() to trigger it with no success. Does anyone see any problems that I'm overlooking?

I tried it :
$(document).ready(function() {
var hash = window.location.hash;
var category = '55';
var anchor = $("[data-category=" + category + "]");
anchor.click();
anchor.on('click',()=>{
alert();
})
});
Everything is working

Anchor Tag for sharing URL on Facebook, Twitter etc

I am trying to find a way (JQuery etc.) of auto updating the URL for sharing on Facebook, Twitter etc.
For example:
<img src="../img/facebook.png">
Except I want to replace "http//xxxxxxxxx.co.uk" with something so that if the URL of that page were to change, it would grab that URL and insert it into the tag, without me having to update it manually?

Do you just mean that you want to dynamically build this href from the current page's URL? Something like this?:
document.getElementById('yourAnchorElement').href =
'https://www.facebook.com/sharer/sharer.php?u=' +
encodeURIComponent(window.location.href);
It just gets the current URL, URL-encodes it to be used as a query string parameter, appends it to the known base URL, and sets it to the href of the element.
You don't need to use document.getElementById(), any method you use to identify the target element is fine.

Here is a small function to generate share buttons with jQuery.
HTML
<div id="fb"></div>
jQuery
var fblink = "https://www.facebook.com/sharer/sharer.php?u={{link}}";
$(document).ready(function () {
generateLink('fb','http://www.google.com');
generateLink('fb','http://www.stackoverflow.com');
});
function generateLink(id,link) {
$('#' + id).append('Share');
}
JSFiddle
I replaced you image with "Share" for completeness in JSFiddle without access to your image, but that can be replaced to suit your needs.

Using jQuery you can do something like this on document.ready:
Here is a jsFiddle demo
$(function () {
var fbShare = 'https://www.facebook.com/sharer/sharer.php?u='
// grab url of the page:
var url = window.location;
// loop through all elements with class 'button--facebook' and update href:
$('.button--facebook').each(function () {
$(this).attr('href', fbShare + url);
});
});

Remove text in 'a' but not in 'href'

please take a look at my website: moskah.nl
As you can see there is a pre-filled input. Click 'save' and you will see the url is being saved with a favicon next to it. Do this a couple of times to create a list.
If you refresh the page you will see the part that says 'http://' is being removed because of a function:
function replace() {
$("a").text(function(i, h){
return h.replace('http://', "");
});
}
Now the problem is that if you then click on a list item (NOT the href) you will see the item is being removed. Now if you refresh agian you will see all the favicons are gone. I think this is because somehow the function 'replace' is also removing the 'href' part which is strange because I explicitly stated it should remove 'text'. So how do I remove an item list without its favicon? (Basically keeping its url(href) intact)
ps. I cant give you a demo on jsfiddle because it doesnt work there.

jQuery('a[href^="http://"]', this).each(function () {
// ...
}
You add the favicon inside this function; this means that if your a tag's href attribute doesn't start with http:// it won't have a favicon.
When you populate the list with the jquery cookie:
if (cookie){
var values = $.parseJSON(cookie);
var li;
for (var v in values) {
li = $('<li>' + values[v] + '</li>');
$('.jq-text').append(li).show();
}
// ...
}
the attribute href is set the same as the a tag's text:
li = $('<li>' + values[v] + '</li>');
You have to save the href attribute inside the cookie too or to manually add http:// when you load from the jquery cookie.
PS: sorry for my bad english; I wish that it's understandable what I've written.

JQuery Colorbox Future Element Append

I have an html that has a link:
<a id="myLink" href="/aa.html" title="New Bangoo" class="bangoo">Bangoo</a>
and I include a js file that has this lines:
$("#myLink").live('click', function() {
var typi = 'Ginga';
$("#typeList").append('<option>' + typi + '</option>');
});
aa.html has that:
<label for="typeList">Type</label>
<div>
<select id="typeList"></select>
</div>
aa.html opens on a colorbox. Everything is OK but I can not append types to select list. It has no elements when it finishes to open. It used to work but now not working. It may be because of js file tries to append to list before html loads?
Any ideas?
EDIT:
When I do that it works:
$("#myLink").live('click', function() {
alert('Wait Here!');
var typi = 'Ginga';
$("#typeList").append('<option>' + typi + '</option>');
});
When I alert anything it waits and at this time it has enough time to append to select list. How can I sure that external link has loaded so I can start to append?
PS: My problem is that I am trying to append an HTML element that I load it after I click myLink. aa.html doesn't place at dom at the beginning, I load it from an external source.
After external page loads at screen it has no elements at select list. When I try to run same code from Firebug it adds options to select list and works. It means that code works but there is a timing and asynchronism problem that I want to append elements to a select list before it locates at dom tree. I should wait loading it and after that run my code.

try this
$("#myLink").live('click', function(e) {
e.preventDefault();
var typi = 'Ginga';
$("#typeList").append($('<option></option>').val(typi ).html(typi )) ;
});

I solved my problem. colorbox plugin has a function onComplete so I used that function to be sure page loaded.

try
$("#myLink").live('click', function(e) {
e.preventDefault();
var typi = 'Ginga';
$("<option/>",{text:typi,value:typi}).appendTo("#typeList");
});
DEMO

Is it possible to create a div element with jquery onclick of a link

I have a navigation list. The effect I am looking for is when the user clicks on a link, an accordion style div is built and displayed by jQuery. Then if the user clicks the same screen, the is deleted from the screen.

Here's some cod that will create an DIV if it is not already there, load it with some HTML from the URL contained in a link's HREF attribute, then turn it into an accordion. If the DIV already exists, it removes it.
$('.navLink').click( function() {
var accordion_id = 'accordion_' + this.id;
var accordion = $('#' + accordion_id);
if (accordion.length > 0) {
accodion.remove();
}
else {
$('<div id="' + accordion_id + '"></div>')
.appendTo('#someDiv')
.load( $(this).attr('href') )
.accordion();
}
return false; // cancel default action of link
});

Yes, I'm quite sure that this is possible. It looks like there may be plugins and third-party tools out there that can help you with this task. This one looks promising: http://jqueryui.com/demos/accordion/