I want to make the whole staff-container linked to the first href inside of it. (The one in staff-picture). How do I write this with jQuery? I'm pretty confused with attr() and I know that I have to use it.
In the following HTML, the jQuery should make staff-container linked to google.com.
<div class="staff-container">
<div class="staff">
<div class="staff-picture">
<img src="img/people/teachers/ahmed.png" />
</div>
<p><span class="bold">Mr. Ahmed</span><br />
Ext. 13417<br />
Room 417/323<br />
email#wcskids.net</p>
</div>
</div>
EDIT: Thanks to the answers I used this jQuery:
$('.staff-container').click(function() {
window.location.href = $(this).find('a').attr('href');
});
If there is no link inside staff-picture I do NOT want it to link the email. If jQuery can't find the link in staff-picture, I want the click to do nothing.
Try like this
$('.staff-container').click(function(e) {
if($(this).find('a').attr('href'))
window.location.href = $(this).find('a').attr('href');
e.preventDafault();
});
like this..??If you want specifically first anchor tag then you can give like
window.location.href = $(this).find('a').eq(0).attr('href');
Try this:
$('.staff-container').click(function() {
var $first_link = $(this).find('a').first();
window.location.href = $first_link.attr('href');
});
Pure JS version: should be a bit faster than jQuery
<script>
function link(loc){
var href=loc.getElementsByTagName('a')[0].href;
console.log(this);
console.log(href);
loc.setAttribute("onclick","window.location.href='"+href+"'");
loc.removeAttribute("onmouseover","");
}
</script>
<div class="staff-container" onmouseover="link(this)">
<div class="staff">
<div class="staff-picture">
<img src="img/people/teachers/ahmed.png" />
</div>
<p><span class="bold">Mr. Ahmed</span><br />
Ext. 13417<br />
Room 417/323<br />
email#wcskids.net</p>
</div>
</div>
Working tested
Related
Sorry if this is already asked, but i could not find my exact error. I want the image to change as i mouse over and change back as i mouse off. For some reason i get the alert messages, but the actual images do not change.
This is my J script
function altimage(){
alert("hi");
document.getelementbyid("header").innerhtml="This is good";
document.getelementbyid("homeicon").src="homelogoalt.jpg";
}
function normimage(){
alert("bye");
document.getelementbyid("homeicon").src="Homelogo.jpg";
}
and this is my div that hold the image i would like to change:
<div class="search" onmouseenter="altimage()" onmouseout="normimage()" style="width:30px;z-index:4;">
<img src="homelogo.jpg" alt="Home" class="menu" style="width:30px;height:30px;" id="homeicon">
</div>
Javascript is case-sensitive so:
document.getelementbyid = document.getElementById
innerhtml = innerHTML
Make you JS as follows:
function altimage(){
//alert("hi");
document.getElementById("header").innerHTML="This is good";
document.getElementById("homeicon").src="homelogoalt.jpg";
}
function normimage(){
//alert("bye");
document.getElementById("homeicon").src="Homelogo.jpg";
}
And you HTML should be like the following:
<div class="search" onmouseover="altimage()" onmouseout="normimage()" style="width:30px;z-index:4;">
<img src="homelogo.jpg" alt="Home" class="menu" style="width:30px;height:30px;" id="homeicon">
</div>
Hope it helps!
Thanks
http://jsfiddle.net/AHd34/2/
$(document).ready(function(){
var a = document.createTextNode('AAA');
$jA = $(a);
$('#listContainer').append(jA);
});
<body>
<div id="content">
<div id="newLists" style="border:none;">
<!-- I'm going to need to reorganize this css so the above line does not need to happen -->
<p id="newListTitle"><span id="newListSpan">Here is a list </span></p>
<div id="listContainer">
</div>
</div>
</div>
I've never used jsfiddle before and it seems to just not be working at all. Probably something very simple and silly.
2 things:
first: in the console you can see that createTextElement doesn't exist
second: you declare a variable $jA and then append a variable jA (without the $).
Here's the working code:
http://jsfiddle.net/AHd34/3/
$(document).ready(function(){
var a = document.createTextNode('AAA');
$jA = $(a);
$('#listContainer').append($jA);
});
Try this
$(document).ready(function(){
var a =document.createElement("a");
a.innerHTML="AAA";
$('#listContainer').append(a);
});
http://jsfiddle.net/AHd34/7/
Sorry if this is a silly question, but I've been trying to use AJAX to display my javascript variables in 'real time' with little luck. I'm definitely a beginner though so this could be the problem haha- When I see the AJAX code, it always seems to require an additional url that it refreshes, but I just want to refresh the javascript variables on click.
http://jsfiddle.net/bagelpirate/m9Pm2/
<script>
var one = 0;
var two = 0;
var three = 0;
</script>
<body>
<div id="div_1">
One: <script>document.write(one)</script> |
Two: <script>document.write(two)</script> |
Three: <script>document.write(three)</script>
</div>
<div id="div_2">
<img id="mine" src="https://si0.twimg.com/profile_images/3170725828/ac1d6621fc3c3ecaa541d8073d4421cc.jpeg" onclick="one++;" />
<img id="forest" src="http://blogs.dallasobserver.com/sportatorium/No.%202.png" onclick="two++;" />
<img id="farm" src="https://si0.twimg.com/profile_images/3732261215/bd041d1f0948b6ea0493f90507d67ef2.png" onclick="three++;" />
</div>
</body>
As you can see in the above code, when a user clicks one of the images, I want to increment the count and display it at the top of the page. I found the HTML5 output tag, and was wondering if it's possible to use this to display the javascript variable in real time? Everything I've read seems to imply it can't be done because the output tag only works on forms? Anyway, I figured it couldn't hurt to ask!
Thanks for your time!
You shouldn't use document.write to write to the DOM after it's finished loading. You have tagged your question with jQuery, so I'll assume you can use that to update things. Instead, update the DOM from within your script block. Here is an example that might help you get started.
http://jsfiddle.net/prxBb/
<script type="text/javascript">
$(function() {
var one = 0;
var two = 0;
var three = 0;
$('img#mine').click(function() {
one++;
$('span#one').html(one);
});
$('img#forest').click(function() {
two++;
$('span#two').html(two);
});
$('img#farm').click(function() {
three++;
$('span#three').html(three);
});
});
</script>
<body>
<div id="div_1">
One: <span id="one"></span> |
Two: <span id="two"></span> |
Three: <span id="three"></span>
</div>
<div id="div_2">
<img id="mine" src="https://si0.twimg.com/profile_images/3170725828/ac1d6621fc3c3ecaa541d8073d4421cc.jpeg" />
<img id="forest" src="http://blogs.dallasobserver.com/sportatorium/No.%202.png" />
<img id="farm" src="https://si0.twimg.com/profile_images/3732261215/bd041d1f0948b6ea0493f90507d67ef2.png" />
</div>
</body>
Maybe you should try putting all your variables inside a named object, iterating through it at predefined interval and displaying the values.
var varContainer = {
one:0,
two:0,
three:0
};
jQuery("#div_2 img").on('click',function(){
jQuery.each(varContainer,function(key,value){
//Add key + value to the DOM
if(jQuery("."+key+value).length<1)
jQuery("#div_2").append("<div class='"+key+value+"'></div>");
var newHtmlVal= "<p><span>Var name: "+key+"</span><br><span>Value: "+value+"</span>";
jQuery("."+key+value).html();
});
});
HTML
<div id="div_2">
</div>
Of course the script could be upgraded to look through each variable recursivley in case of nested objects/arrays...
Hope this helps!
In html I am having the following tags:
<span id=M26>2011-2012</span>
<div id=c26 STYLE="display:none">
<span id=M27>2012-2013</span>
<div id=c26 STYLE="display:none">
On Clicking on 2011-2012 or on 2012-2013 I want to set display property of div tag.
I am using the following Javascript code for this and I am calling the Javascript function in body tag. The output is showing style and display is not an object or property.
<script language="javascript">
function clickHnadler()
{
var xid= document.getElementsByTagName("span");
var xsp= xid[0].id;
alert("Span id is "+xsp);
if(xsp.charAt(0)=="M")
{
var oC = document.all("C"& xsp.substring(1,2));
if(oC.STYLE.display == "none")
{
oC.Style.Display = "";
}
else{
oC.Style.Display = "none";
}
}
}
</script>
use jquery:
you can pass in the function the element or the Id:
ex:
<span id=M26>2011-2012</span>
function clickHnadler(element)
{
var id = $(element > span).attr(id);
id[0] = 'c'; //not the nicest way, maybe use a replace or something like that
$(id).show(); //or $(id).css('display','list');
}
You may use clickHandler has following way,
function clickHandler(e) {
window.document.links[0].handleEvent(e);
}
You need to bind event spacifically to elements you want to handle click for. for more information please refer following link,
http://docs.oracle.com/cd/E19957-01/816-6409-10/evnt.htm#1009606
Based on what i understand from your question, I come up with this.
<script type="text/javascript" src="jquery1.8.js"></script>
<span id=M26>2011-2012</span>
<div id=c26 STYLE="display:none">
2011-2012 details</div>
<br />
<span id=M27>2012-2013</span>
<div id=c26 STYLE="display:none">
2012-2013 details
</div>
I am trying this JS code in jquery capty plugin . However the plugin needs an image to works, like:
<img id="default1" src="img/1.jpg" name="#content-target1" width="208" height="143" class="latest_img" />
Well, when i add this image the JS below didn't works. Basically what i want is just click in span and show an alert message with the content.
$('.tag_content').live('click', function(event){
var span_val = $(this).parent().children("span").html();
alert(span_val);
});
html code
<div class="images">
<img id="default1" src="img/1.jpg" name="#content-target1" width="208" height="143" class="latest_img" />
<div id="content-target1">
<span class="tag_content">Design</span>
</div>
</div>
Any idea ? thanks
The following code seems to work for me. You can try it out on jsFiddle: http://jsfiddle.net/fZSGt/4/
$('#default1').capty();
$('.tag_content').click(function() {
//var span_val = $(this).parent().children("span").html();
var span_val = $(this).html();
alert(span_val);
});
I also changed $(this).parent().children("span").html() to $(this).html() because it seems to be unnecessary for your code.