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")
Related
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;
}
I have a span whose content (a record #, eg: 'record12345') is generated via javascript. I want to include that record # in an href.
My goal is :
Link
If I just call the span like so, I get the record # as expected:
<span id="exampleId"></span>
But I can't get it to work inside an href. Here are some things I've tried:
<a href='<?php echo "user/<span id='exampleId'></span>" ; ?>'>Link</a>
<a href='user/<?php echo "<span id='exampleId'></span>" ; ?>'>Link</a>
</span>" ;?>">Link
Link
You don't need all that PHP nonsense.
Put this Javascript somewhere
document.onload = function(){
// Get the inner stuff from the span
var url = document.getElementById('exampleId').innerHTML;
var link = document.getElementById('myLink');
link.setAttribute("href",url);
}
Then assuming your span has the link inside of it, and the <a> tag has an id='myLink' this will work.
Here's a JSFIDDLE...
Using jQuery
$('span').click(function() {
window.location.href="user/"+$(this).attr('id');
});
what you are attempting to do above is inject client side code back into the server script
I have a div with another div inside it containing an element i - a font awesome icon.
<div id="my-div-thispageme">
<a href="/anotherpage" class="div-menu" title="Edit">
<div>
<img style="vertical-align:middle;" src="/images/icon_pngs/icon.png" height="40px" width="40px">
Page Title <i id="settingsico" class="fa fa-cog fa-lg"></i>
</div>
</a>
</div>
I have had no luck adding a class 'fa-spin' to the i element (with id settingsico) with jQuery.
I have tried variants of both:
$("#my-div-thispageme").mouseover(function() {
$("#my-div-thispageme a div i").addClass("fa-spin");
});
and
$("#my-div-thispageme").mouseover(function() {
$("#settingsico").addClass("fa-spin");
});
but always get an error of
"Cannot read property 'addClass' of null"
Here is a JSFiddle - though I can't get the font-awesome icon to render!
It looks like your top-level div element is this: <div id="my-div">
However, you are using the selector #my-div-thispageme.
Do you mean to use the selector #my-div?
If so, it should be as simple as:
$("#my-div").mouseover(function() {
$("#settingsico").addClass("fa-spin");
});
UPDATE
Due to the error you're getting, it appears that your code thinks the DOM element doesn't exist. This leads me to think that maybe you are calling your code before the DOM has loaded, or that you have created some element dynamically.
If it is the first case, make sure that you either wrap all your jQuery code inside this:
$(function() {
// your code here
});
Or, make sure all your code is at the end of the body.
This first is equivalent to $(document).ready(), and the second waits until the DOM tree has been created for executing any code.
I have a drop down user menu that contains child links that I cannot get to redirect properly. I unfortunately did not code the front-end, so I'm just trying to get it to link to dynamic PHP urls. I'm also working within the CodeIgniter framework, by the way. There are two clicks in the user's process (similar to Google's user icon). 1. You click the user image and drop down arrow, 2. You see profile, settings, logout.
With the following script, clicking the drop-down arrow redirects to the first link, profile, without even doing the drop-down animation. Any thoughts?
Here's the PHP file:
<div class="user css3">
<img src="images/user.jpg" alt="user" class="css3" />
<div class="child css3">
<ul class="user_links">
<li>Profile</li>
<li>Settings</li>
<li>Logout</li>
</ul>
</div>
</div>
Here's the JavaScript for drop-down arrow button:
$('div.user').click(function() {
$('div.user div.child').slideToggle("fast");
$('div.live div.action div.category div.child, div.live div.action div.sort div.child').slideUp();
return false;
});
Here's the JavaScript that I came up with for the <ul> (I'm not much of a JS dev. haha):
$('ul.user_links li a').click(function() {
document.location($(this).attr("href"));
});
Any thoughts are greatly appreciated!
I said in the comments:
Remove the js for the <ul>, and then return false from the other block, and it should work.
Here is why: when you click an anchor, the event starts propagating upwards through the document structure (the DOM). When it reaches another element wired to catch the click event, it runs this element's event handler.
When you click the anchor, the click handler on div.user runs. The last statement there, return false, means "stop the event propagation, and prevent the default behavior". On an anchor, the default behavior would be to follow the link. Your code told the browser not to do it.
Not sure if this is the root cause, but anyways use:
window.location = $(this).attr("href");
Instead of
document.location($(this).attr("href"));
try adding an onclick event to the drop down that returns false, thus stopping the default action for links.
<img src="images/user.jpg" alt="user" class="css3" />
Or changing it so it's just a 'span' tag instead of a 'a' tag. You'd have to change the JQuery selector that causes the drop down as well so that it looks for 'span' instead of 'a'
I'm not sure why you need change the default behaviour of the links 3 links though, they would redirect to the href location anyway surely?
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();
}
});