I am trying to show a jQuery alert by hovering on different links with different ids.
I want to tailor the alert based on each link hovered over. These links are created dynamically from a table...
Each link has a different id attribute, so I was thinking to have alert for each without having to click on the link.
For example: a link might have index.php?id=1 So I want to show an alert on hover that says This is an alert for link 1, etc.
Edit 1:
The div:
echo '<div class="trigger">';
echo "<a class='trigger' href='".INDEX.'?categ='.$_GET['categ'].'&action='.$_GET['action'].'&subaction=viewlevels'.'&levelid='.$compi['Competence_ID']."'>";
echo '<img class="linkki" src="'.KUVAT.'paivita.gif" alt="'._("tiedot").'" title="'._("What is this?").'"/></a>';
echo '<div id="pop-up">';
echo" <h3>Pop-up div Successfully Displayed for".$_GET['levelid'].
"</p></div>";
Edit 2:
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript">
$('.trigger').mouseover(function() {
alert("You are hovering over " + $(this).attr('href').match(/id=([0-9]+)/)[1]);
});
</script>
But it always tells me that levelid is undefined..( of course because the form has not been sent)
Yes, you can use jQuery's mouseover() for this:
$('.trigger').mouseover(function() {
alert("This is an alert for link " + $(this).attr('href').match(/id=([0-9]+)/)[1]);
});
You should change from using ID's to using a common class.
to bind jquery function on a link over of container child element use below code
$(document).ready(function(){
jQuery("#container a").each(function() {
jQuery(this).mouseover(function() {
alert(jQuery(this).attr('href'));
});
});
});
$('#aid').mouseover(function(){alert('whatever you want'+this.id)});
documentation http://api.jquery.com/mouseover/
You can also use .hover and that has two callback one when hover-over and one for hover-out.
$('a').hover(function(){
alert($(this).attr('href'));
},function(){
alert('hover out');
});
If you are creating links dynamically, then associate attribute class (say sampleclass) and attribute id as (concatenate "link " and id value from database) with each link
Now
$(document).redy(function(){
$(".sampleclass").hover(function(){
alert("This is " + $(this).attr("id"));
});
});
Related
I am building a website in which left side is restaurant name and in right side there is anchor link button.All button are produced from a single link inside a while loop.
while($dt=mysqli_fetch_array($res,MYSQLI_ASSOC))
{
<a class='morebtn hvr-rectangle-in' href='#'>Menu!</a>
}
All anchor button is same so how to know which button is get selected so that I can display menu page for that restaurant.
Change your code to this
$i = 0;
while($dt=mysqli_fetch_array($res,MYSQLI_ASSOC))
{
echo "<a class='morebtn hvr-rectangle-in' id = 'a_'.$i href='#'>Menu!</a>";
$i++;
}
And then write javascript like this
<script type = "text/javascript">
$(document).ready(function(){
$('.morebtn hvr-rectangle-in').click(function(){
var myId = this.id;
//alert(myId);
});
});
</script>
then use that id.
I don't know if I understand your problem correctly.
Maybe you can do it in JS using scrollspy.
Example:
http://getbootstrap.com/javascript/#scrollspy
Here is what i want: I have multiple <h3> tags that are being uses as a link to reveal answers to FAQ's. Also I have added a form in case that the user did not see any question of interest on that page. The link for the form is at the bottom of the page. Now when the user click on the show form link I would like the window to scroll down to the bottom. I have done this, however when I click on any of the link the window also scrolls to the bottom. I want when the user clicks only on the show form link that the window scrolls.
here is what I have so far:
<body>
<?php
$array = array("link 1","link 2","link 3");
foreach($array as $link)
{
echo "<h3 class='link'>".$link."</h3>";
echo "<div>";
//information to be displayed
echo "</div>";
}
?>
<h3 class="forms">Show Form</h3>
//form information here
</body>
here is the javscript:
<script>
$(document).ready(function(){
$('h3').click('bind',function() {
$(this).toggleClass('open').next().slideToggle(500,function(){
var i = $(this).prop('class');
if(i == 'forms')
{
$("html, body").animate({scrollTop: $(document).height()}, "slow");
}
});
});
});
</script>
I have added an alert to verify my output and when I click on <h3 class="forms"> the alert is blank but when I click on the others the alert showed "link". Can someone help me figure out why the alert is showing blank when I click on the <h3 class="forms"> tag?
You are echoing your LI with the link class, instead of $link.
Also, use
if ($(this).hasClass("forms"))
.prop() should really only be used when accessing the DOM element's properties and not attributes (like class or style, width, etc.). If you want the class, use .attr('class') instead (or, as others have mentioned, you can use .hasClass() to test (with jQuery) if an element has a specific class aplied).
to follow-up on .prop vs .class:
Foo Bar link
var a = document.getElementById('foolink'),
$a = $(a);
$a.prop('href') // like directly calling a.href
$a.prop('id') // again, like directly calling a.id
$a.attr('class') // where as it's actually a.className
I was wondering how it would be possible to attach an HTML form's text box value to a link. For instance, I have 3 links and each link goes to a different PHP file, however, I need to pass a variable. Because of the design of my page, I cannot use buttons. So, I created a form with a text field. How do I send that Text Fields value with the links?
EG:
<form>
<input type="text" name="test1" id="test1"></input></form>
Link 1
Link 2
Link 3
I hope this makes sense as to what I am trying to do.
EDIT:
I tried to do this dynamically, but:
OK, I made a function like this:
<script>
function awardcode()
{ var awamount = document.getElementById("awardamount");
document.write('<?php $awardvar = ' + awamount.value + '; ?>');
};
</script>
Then, I made the link via PHP that looks like this:
echo '<a id=awlink3 name=awlink3 href="index.php?siteid=gmaward&type=xp&post=' . $posts_row['posts_id'] . '&handle=' . $posts_row['handle'] . '&varamount=' . $awardvar . '">Award XP</a>';
However, that didn't work. This is my input box code:
<form><input type=text name='awardamount' id='awardamount' onchange='awardcode()' style:'width:10px;'></form>
When I put the number and then tab, it loads an empty page.
How can I adjust that?
You'll need to dynamically change the link using JavaScript. Here's one approach:
$('a').on('click',function(e) {
e.preventDefault();
var url = $(this).attr('href').split('$')[0];
window.location = url + $('#test1').val();
});
But it might be better to add an onchange event to the textbox itself, so that the HREF changes instantly and the user can see the intended destination on mouseover:
$('#test1').on('change', function () {
var val = $(this).val();
$('a[href*=\\?id\\=]').each(function (i, el) {
$(el).attr('href', function (j, str) {
return str.split('?')[0] + "?id=" + val;
});
});
});
i am trying to put a pagination page into jquery. example.html?id=foo&get=23
i would like to pass the get= into the jquery script so that i can change the page within the div instead of sending the link to the having the user see example.html?id=foo&get=23, they should only see example.html?id=foo. the rest is done in jquery.
<script >
$(document).ready(function()
{
$("#data").load("page.php?ht=<?php print $id; ?>&p=1" );
$("#next").click(function(){
var pageNum = this.id;
$("#content").load("page.php?ht=<?php print $id; ?>&p=" + pageNum, Hide_Load());
});
});
<div id="data">
page1
</div>
Why not modify the anchor
$('#next').attr("href","example.html?id=45");
After every click on the page?
you need something like this:
$(document).ready(function(){
$("#next").click(function(){
$.post('your_script_to_get_values.php',
{ page: "1" },
function(data) {
$('#content').html(data);
});
});
});
Make sure you use a live click handler, and not just a click handler, because you are creating the #next element after the page loads.
$("#next").live('click', function(){ //etc.
Documentation for .live()
It matches the current selector now and in the future (i.e. if the elements are created dynamically).
The simplest way would be with a session variable.
In a PHP page i have several rows of one table like this
echo '<tr><td>Click</td></tr>';
The $id is dynamically generated from a database
So I want to define the function in jQuery but to pass the parameter to the jQuery function.
For each button I click there will be another parameter passed
Why not use the ID as an identifier for the link like this:
Click me
In jQuery you can bind to the onclick event like this:
// Execute on load
$(document).ready(function(){
// Bind to click
$('a.myjquerylink').click(function(){
// Get the id
var id = $(this).attr('id');
// Do something with the id.
doSomething(id);
});
});
What exactly do you want to do ?
Here's a sample function (it's not using jQuery!) to alert the user that the linked has been pressed and to stop propagating the event, so that it doesn't jump to another page on click
<script type="text/javascript">
function myFunction( param ) {
alert('The button with the id ' + param + ' has been pressed!');
return false;
}
</script>
Well in a dirty way you can assign your id's in rel tag like this:
echo '<tr><td>Click</td></tr>';
than you can search for mybutton class in jquery an add events to it:
$("a.mylink").click(function(){
alert($(this).attr('rel'));
});
So in this case $(this).attr('rel') should be your ID.
As other poster started saying, bind a function to an event. Say you assign a css class to your a tags to make it easier:
echo '<tr><td><a class="specialLinks" href="#" onclick="myFunction('.$id.')">Click</a></td></tr>';
Then you would bind to your class like this:
$('.specialLink').bind('click', function() {
this.preventDefault();
alert($(this.attr("id"));
});
you need to modify your html a bit:
echo '<tr><td><a class="someclass" href="#" id='".$id.'">Click</a></td></tr>';
then you can call it by it's class in JQuery and do what you want:
"$(this)" will be a reference to the clicked item.
$(".someclass").live('click',function(e){ e.preventDefault(); alert($(this).text())});