I have this code
<a class ="hi" href='uselesslinkhere.php?page=page1&action=add&id=myid'>Add??</a>
Whenever a person clicks on this button, the link will act as if its a href=#.
Will using jQuery help? and if so, how does it work?
Thank guys!
Add a onclick event on anchor tag and stop page from following the href. Then change the content on your page through jQuery as you like and add the desired url through history.
<a class ="hi" onclick="loadPage(event,'uselesslinkhere.php?page=page1&action=add&id=myid')" href='uselesslinkhere.php?page=page1&action=add&id=myid'>Add??</a>
var loadPage = function(event,pageUrl){
event.preventDefault();
if(history && history.pushState)
{
history.pushState(null,null,pageUrl);
}
return false;
}
Related
I am trying to make a dropbox-like custom context menu. What I need is that when the user right-clicks an element, the options such as "Edit" and "Delete" that pop up in the context menu link to "edit" and "delete" for that specific element. The context menu:
<div class="screenlock-transparent">
<div class="context-menu-wrapper">
<ul class="context-menu">
<li><i class="icon-edit" style="margin-right: 10px;"></i>Edit</li>
<li><i class="icon-trash" style="margin-right: 10px;"></i>Delete</li>
</ul>
</div>
</div>
The way I have gone about this is to user jQuery to fire an event when the user right-clicks an element:
<script type="text/javascript">
$(document).ready(function(){
// Launch on-right-click on element
$(".custom-context-menu").mousedown(function(){
if(event.which == 3) {
if ($(this).hasClass("ul-all-years-faculty")) { // If on the general faculty ul
// Load external php here to build url string specific to the element
// Replace current href value with the url string produced by the external php script
} else if ($(this).hasClass("ul-year-specific-faculty")) {
} else if ($(this).hasClass("ul-semester")) {
} else if ($(this).hasClass("ul-subject")) {
}
}
});
});
</script>
Where you see the quotes if the if statement is where I am trying to write the code that will call my external php script and replace the href of the, for example, "Edit" link in the context menu with an href of a url containing variables specific to the element that was right-clicked.
I know how to use .load() for a div - $("#ID").load(...) will load in the echoed content inside that div. However, what about loading inside the href of a link (a) ?
Thank you so much. I greatly appreciate your help.
If I understand you correctly, and you want to change the href of an a tag, you want to use the .attr() function
http://api.jquery.com/attr/
so it would look something like this
$("a").attr("href", "http://newlink.com")
I have jQuery site here. I have 4 links with in ul tag. Within this link, I need to inactive a link but have to show. See below:
<div class="over hide" id="waterSecondOver">
Overview
Local Area
Floor Plans
<a href="javascript:void(0);" id="chancingallery" >Gallery</a>
</div>
I have a click function on the above links (except the 4th one i.e gallery). See the code
JQR('#waterSecondOver a').click(function() {
// my code
});
Here I need to show the gallery link, but nothing happens when click on the gallery (i.e must be inactive link or what I say it's functionality is only show the link as "gallery ")
I think it's clear . Please help me
JQR('#waterSecondOver a').click(function(event) {
event.preventDefault();
});
Don't set hrefs in the anchor tags to javascript:void(0); - this is messy because it's needless repetition. With jQuery, it's possible to use return false; in your event callback to avoid the default click event taking you to a new page or the current one. While this is the easiest method, it's not always the best. See this article for more info:
http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/
But you definitely don't want to be setting href manually.
I would simply change the class of the anchor(lets say class="active") and everytime onclick check for that "active" class. If the class is "active" do nothing else DO SOMETHING.
You can do this way for simplicity...
JQR('#waterSecondOver a').click(function(event) {
if(JQR(this).attr('id') == "chancingallery"){
// inactive all links except the one you dont want
}else{
// whatever you need....
}
});
I don't know which tag or event to use. But I would like some way to make jQuery do a click function or "click" a link when the page is loaded. The script is getting a specific data from the URL. If the url sais: www.domain.com/index.php?a=1&b=1234 then I would like something like this in the beginning:
<?php$a = $_GET['a'];$b = $_GET['b'];if ($a == '1') {//echo jQuery script that automatically clicks the <a> tag}?>
and then the HTML script is like this:
jQuery Click
Please help me
You'll need the .trigger method.
$('a#YOUR_ID').click();
or
$('a#YOUR_ID').trigger('click');
or
$('a.YOUR_CLASS').click();
or using href
$('a[href^="page2.php"]').click();
First one is preferred. You should make selector with your ID of CLASS belongs to that a.
NOTE: a[href="page2.php"] means a tag which href beginning exactly with page2.php
If none of above works then try:
window.location = document.location.hostname + '/' + $('a[href^="page2.php"]').attr('href');
Two open a popup try this:
var urlToOpen = document.location.hostname + '/' + $('a[href^="page2.php"]').attr('href');
window.open (urlToOpen,"mywindow","menubar=1,resizable=1,width=350,height=250");
Detail about window.open()
Do this :
$("a[href='page2.php']").click();
or prefferably use an ID
$("a#myID").click();
You can get more information in the jQuery documentation or perhaps a tutorial at jQuery.
To answer your specific question, I believe you are looking for something similar to:
$(document).ready(function() {
$('#autoclick').click();
});
My recommendation would be to apply an id in the corresponding html:
<a id="autoclick" href="/somewhere-else">This is a link</a>
Hope that helps you get started.
Note: The click() has this as a specific shortcut for trigger("click") since v1.0. Ref: jQuery click
So I'm experiencing problem - I got a function, when someone clicks a menu, it will show a div tag. See here -
$("a#cat").click(function() {
$("div#categoryBox").show();
return false;
});
So far everything works great, the div content shows up excellent, but the problem is that inside div content there are buttons (a tags), delete and edit, when I click one of these buttons, the div tag hides. The button links are -
<a href="?action=edit&id=<?php echo $id; ?>"> and <a href="?action=delete&id=<?php echo $id; ?>">
If I press one of these links, the div content automatically hides, and I need to press again the a button with id #cat. Is there any way to make it stay, unless I press different menu link or refresh page?
If you need any additional information, please ask.
May be the page is reloaded when you click on edit/delete links, so you think the div gets hidden. If you are doing any client side implementation on edit and delete click then you should make sure to prevent the default behavior or those links. Try this.
$('#categoryBox a').click(function(e){
e.preventDefault();
});
There are several ways to do this. Perhaps the easiest is to re-show the div when the page loads if certain conditions are met.
If you want to display the div every time the url is ?action=edit or ?action=delete, use this:
$(function () {
if (/\baction=(edit|delete)\b/.test(location.search)) {
$("div#categoryBox").show();
}
});
Or, you could append a hash parameter when you want to show the div:
edit
delete
$(function () {
if (location.hash === "#showCategoryBox") {
$("div#categoryBox").show();
}
});
My blog has its posts links. What I need is code that will do this: when a user clicks on a post link, a parameter will be added to the link which I'll use with a get function on the other page.
This is my link - link which is visible and indexed by google:
my post link
When a user clicks on it, I need a way to add ?car=type to the link, http://www.mysite.com/post1/?car=type.
I'd like to do this with jQuery.
P.S.
I can't just add my car variable to the links in normal html, becouse Google will index them badly, the variables change every day and I'd get pages not found all over the serps.
Any idee?
Ty!
Well...
$(document).ready(function() {
$("a").click(function() {
this.href += "?car=type";
});
});
Live test case: http://jsfiddle.net/y6PrF/
If you mark the desingated links in a way such as a class (say addType):
<a href="http://www.mysite.com/post1/" class="addType" >my post link</a>
you can do something like this on document load, no need to wait for click to do it:
$(function() {
$("a.addType").attr("href",function() {return this + "?car=type";});
});
Here's a jsfiddle example: http://jsfiddle.net/nbKPu/