We Keep Coding

jQuery Issue cannot retrieve or set attributes, 'undefined'

I have an img element. That image element, on mouse hover, will display a detailed tool tip.
I'm trying to make the img element default start empty null, and feed it the image information from the tooltip on load.
I can't retrieve or assign attributes though using $('idName').attr(a,b);
html and js below:
<div class="col-sm-6 text-left">
<h1>Member Equipment</h1>
<p>-Show member equipment-</p>
<table class="table">
<tbody>
<tr>
<td><img id="primary" class="img-responsive" src="" alt="Primary"
onmouseover="document.getElementById('primary_tool_tip').style='display:block'"
onmouseleave="document.getElementById('primary_tool_tip').style='display:none'">
<div id="primary_tool_tip" class="bottom" style="display:none">
<img id="tooltip_img" src="../images/sword01.jpg" />
<div id="tooltip_name">Bronze Sword</div>
<div id="tooltip_equipslots">Primary, Secondary</div>
<div id="tooltip_attributes">STR+2 DEX+2</div>
<div id="tooltip_elements">Fire+5</div>
</div>
</td>
<td id="secondary"><img class="img-responsive" src="" alt="Secondary"></td>
<td id="ranged"><img class="img-responsive" src="" alt="Ranged"></td>
<td id="ammo"><img class="img-responsive" src="" alt="Ammo"></td>
JS
alert($("tooltip_img").attr("src"));
function initialize(){
$('primary').prop('src', $('tooltip_img').attr('src') );
}
window.addEventListener("load", initialize, false );

Place all of your JavaScript in a JQuery document.ready() function so that it doesn't execute until after the DOM has been loaded and is ready to be interacted with.
Then, make sure that you are using correct selectors.
Tag Name gets elements by the element name.
Prepending # gets elements by ID
Prepending . gets elements by class name
So all together:
// The contents of an anonymous function that is passed to JQuery
// won't run until the DOM is parsed and ready to be interacted with.
// This is also known as a "document.ready()" function.
$(function(){
alert($("#tooltip_img").attr("src"));
function initialize(){
$('#primary').prop('src', $('#tooltip_img').attr('src') );
}
window.addEventListener("load", initialize, false );
});

You need to $("#primary") to target element by id.
in your case : $("primary") will try to find an HTML element named <primary>

I fiddled around with what Scott gave me made some minor adjustments and everything works now =).
My img is now instantiated from information contained inside my tooltip's bundle of information. Which will eventually be supplied itself from js, and js will supply it through xml externally if things go accordingly.
Thanks for help Scott and company, final refined code below:
Final code
HTML
<div class="col-sm-6 text-left">
<h1>Member Equipment</h1>
<p>-Show member equipment-</p>
<table class="table">
<tbody>
<tr>
<td>
<img id="primaryIcon" class="img-responsive" src="" alt="Primary"
onmouseover="document.getElementById('tooltip_primary').style='display:block'"
onmouseleave="document.getElementById('tooltip_primary').style='display:none'">
<div id="tooltip_primary" class="standardtooltip">
<img id="tooltip_primary_img" src="../images/sword01.jpg" />
<div id="tooltip_primary_name">Bronze Sword</div>
<div id="tooltip_primary_equipslots">Primary, Secondary</div>
<div id="tooltip_primary_attributes">STR+2 DEX+2</div>
<div id="tooltip_primary_elements">Fire+5</div>
</div>
</td>
<!--
<td>
<img id="secondaryIcon" class="img-responsive" src="../images/sword01.jpg" alt="Secondary"
onmouseover="document.getElementById('tooltip_secondary').style='display:block'"
onmouseleave="document.getElementById('tooltip_secondary').style='display:none'">
<div id="tooltip_secondary" class="tooltip" style="display:none">
<img id="tooltip_secondary_img" src="../images/sword01.jpg" />
<div id="tooltip_secondary_name">Bronze Sword</div>
<div id="tooltip_secondary_equipslots">Primary, Secondary</div>
<div id="tooltip_secondary_attributes">STR+2 DEX+2</div>
<div id="tooltip_secondary_elements">Fire+5</div>
</div>
</td>
-->
<td id="ranged"><img class="img-responsive" src="" alt="Ranged"></td>
<td id="ammo"><img class="img-responsive" src="" alt="Ammo"></td>
JS
$(function(){
initialize();
});
function initialize(){
document.getElementById("primaryIcon")
.setAttribute("src", $("#tooltip_primary_img").attr("src"));
alert('working as intended!');
}

Change the order of images by clicking buttom [duplicate]

This question already has answers here:
Changing the order of elements
(4 answers)
Closed 8 years ago.
Help me to solve this trivial problem.
I need to change an image order within button_Click. How can I do this?
Actualy I need the **simplest** way, **no jQuery**.
Will be very grateful for piece of working code with explanation - It's a headache for me
[Here][1] is my code
PS I already got some advises, but all them conneted to jQuery
No jQuery
<div id="one">
<input id="b1" value="Change the image order" onclick="change_order()" type="button"/>
<h1 style="font-size: 12"> Header HeaderHeaderHeader</h1>
<p style="font-size:8"> text text text </p>
</div>
<div id="picContainer">
<img id="pict_01" src="http://heaversfarm.files.wordpress.com/2013/01/i-love-maths.jpg" />
<img id="pict_02" src="http://www.uplandsoutreach.org/wp-content/uploads/2013/04/20maths1.jpg" />
<img id="pict_03" src="http://www.milldamschool.ik.org/img/d666f5fc-db14-11de-a689-0014220c8f46-5812526.jpg" />
<img src="http://www.birdsontheblog.co.uk/wp-content/uploads/2010/05/maths.jpg" />
</div>

Hope you find the below code working as per your requirement.
<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">Click me</button><br/>
<br/>
<img height="50" width="50" id="demo1" src="http://www.largeyellowbutton.com/largeyellowbutton.jpg"></img>
<br/>
<img height="50" width="50" id="demo2" src= "http://libn.com/wp-files/graphics/register-button_0.jpg"></img>
<br/>
<img height="50" width="50" id="demo3" src= "http://mygimptutorial.com/images/button-with-reflection/11.jpg"></img>
<script>
function myFunction() {
var temp=document.getElementById("demo1").src;
document.getElementById("demo1").src = document.getElementById("demo2").src;
document.getElementById("demo2").src = document.getElementById("demo3").src;
document.getElementById("demo3").src = temp;
}
</script>
</body>
</html>

Use the code which I have posted above in case you know the number of image inside your div. If your unsure about the number of images your going to add then use the below code.
<html>
<head>
<script>
function myFunction() {
var count=document.getElementById("picContainer").getElementsByTagName("img").length;
//below code captures the first image source before
//changing the image order. This is also used to assign as source to the
// last image tag.
var temp=document.getElementById("pict_01").src;
var i;
for(i=1;i<=count;i++)
{
//If value of i is equal to count then, assign the first image source
// captured in temp variable to the last image inside the div.
if(i==count){
document.getElementById("pict_0"+i).src=temp;
}
//below code assigns image in decreasing order.
document.getElementById("pict_0"+i).src = document.getElementById("pict_0"+(i+1)).src;
}
}
</script>
</head>
<body>
<input type="button" onclick="myFunction()" value=" Change an image order"></input>
<br/>
<div id="picContainer">
<img id="pict_01" src="http://heaversfarm.files.wordpress.com/2013/01/i-love-maths.jpg" />
<img id="pict_02" src="http://www.uplandsoutreach.org/wp-content/uploads/2013/04/20maths1.jpg" />
<img id="pict_03" src="http://www.milldamschool.ik.org/img/d666f5fc-db14-11de-a689-0014220c8f46-5812526.jpg" />
<img id="pict_04" src="http://www.birdsontheblog.co.uk/wp-content/uploads/2010/05/maths.jpg" />
</div>
</body>
</html>

Fade in and fade out my text using Jquery, and also display:none

I kind of have 2 questions.One... I wish to fade in and fade out my text when I click on the images I have on my site. I very fortunately got to get toggle working thanks to the community here, but now I'm curious as to how I can get fadeIn and fadeOut working.
Also I wish to have my text be hidden or not visible until the moment I actually click on the image. One click of the image should cause the text to fade in. If I click the image again, I would like the text to fade out.
Any suggestions?
Here's the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JOHN DOE Project</title>
<link rel="stylesheet" type="text/css" href="something_style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
</head>
<script>
$(document).ready(function () {
$(".clickToHideClass").click(function () {
// now toggle only the 'p' under 'this'
$('p', $(this)).toggle();
});
});
$(document).ready(function(){
$("p").hover(function(){
$("p").css("font-style","italic");
$("p").css("color", "pink");
$("p").css("font-weight", "bold");
},function(){
$("p").css("color","normal");
$("p").css("font-style", "normal");
$("p").css("font-weight", "normal");
});
});
</script>
<body>
<div id="wrapper">
<div id="outerWrapper">
<div id="header"><img src=" PUT SOMETHING HERE FOR IMAGE OF YOUR BANNER OR SOMETHING " alt="JohnDoe" width="366" height="66" />
</div>
<div id="topNavigation"></div>
</div>
</div>
<div id="wrapper">
<div id="outerWrapper">
<div id="contentWrapperhome">
<div class="clickToHideClass" id = 'col1'><a><img src="image/DSC04580.JPG" alt="JohnDoe" width="251" height="251" /></a>
<div id="text">
<h1><a>Language and the World</a></h1>
<p><a>An aspiration and dream of mine</a>
</p>
</div>
</div>
<div class="clickToHideClass" id = 'col1'><a><img src="image/DSC04580.JPG" alt="JohnDoe" width="251" height="251" />
</a>
<div id="text">
<h1><a>Music and Drama</a></h1>
<p><a>Keeps me pumping on every hour of the day!</a>
</p>
</div>
</div>
<div id="col1" class = "clickToHideClass"><a><img src="image/DSC04580.JPG" alt="JohnDoe" width="251" height="251">
</a><div id="text">
<h1><a>Friendship</a></h1>
<p><a> Without them I really wouldn't know Myself</a></a></p>
</div></div>
</div>
</div></div>
<div id="outerWrapper">
<div id="footer">Contact information | Website | Terms | Site by </div>
</div>
</div>
</body>
</html>
This is part of the CSS:
#text p a {
text-decoration: none;
}
In the css I want to enter, "display:none", but doing that will cause the toggle to not work.

If I understand your problem correctly, try this:
$(".clickToHideClass img").click(function() {
$(this).find("#text").fadeToggle();
});

How do I attach a click event to all div's assigned to a certain class name?

I don't know anything about jquery so yeah. I just want so that when you click the "image-url" divs they set the "src: component to the img tag and have the image appear upon clicking. Really appreciate the help.
the HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CIS 230 Fall 2012</title>
<link rel="stylesheet" type="text/css" href="midterm.css" />
<script type="text/javascript" src="labs/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('div.image-url').click(function() {
$("#image").attr("src", $(this).attr("val"));
$("#image").attr("hidden", "false");
});
})();
function imageload(ls) {
document.getElementById("image").src = "../images/" + ls;
}
</script>
</head>
<body>
<div id="header"><div style="float:left; width:40%;"></div><div style="float:right;"></div><h1 class="title">CIS 230</h1>
</div>
<div id="content">
<div id="links">
<div id="link-holder">
<h3>Labs:</h3>
<div class="url">xhtml 1</div>
<div class="url" onmouseover="hover(this)" onmouseout="leave(this)">css lab 1</div>
<div class="url" onmouseover="hover(this)" onmouseout="leave(this)">css lab 2</div>
<div class="url">css lab 3</div>
<div class="url">css lab 4</div>
<div class="url">author page</div>
<div class="url">dog fish</div>
<div class="url">rounded corners</div>
<div class="url">div columns</div>
<h3>Images:</h3>
<div id="image-link-holder">
<div class="image-url" val="me.jpg">Beautiful Me</div> //so they click this
<div class="image-url" val="monster.jpg">Godzilla</div>
<div class="image-url" val="bandw.jpg">Black and White</div>
<div class="image-url" val="duocolor.jpg">DuoColor</div>
<div class="image-url" val="washed.jpg">"Washed" Look</div>
<div class="image-url" val="fade.jpg">Faded</div>
</div>
</div>
<div id="image-holder" style="min-width:400px; background-color:#000000;" hidden="true">
<img id="image" src="" alt="No Image Specified" /> //and my mug shot will appear hopefully
</div>
<div id="links-spacer1" style="min-width:400px; min-height:300px"></div>
</div>
<div id="about">
<h1>Web Design and Development:</h1>
<h2>We cover a lot of things:</h2>
<p>We first review basic HTML and cover CSS styles</p>
<p>Labs made:
<ul>
<li>css lab 1</li>
<li>css lab 2</li>
<li>css lab 3</li>
<li>css lab 4</li>
</ul>
</p>
<p>Once we have the basics down we can cover some more advanced styling. Especially using the &amp<div></div>& tags
</p>
<p>Labs made:
<ul>
<li>sunny.html</li>
<li>dogfish</li>
<li>columns</li>
</ul>
</p>
<p>Then We move onto the graphical component of web design, where we mess around with photoshop</p>
<p>Labs made:
<ul>
<li>monster.jpg</li>
<li>duocolor.jpg</li>
<li>other stuff...</li>
</ul>
</p>
</div>
</div>
<div id="footer">
<p id="disclaimer">This webpage is the work of a student. It is not associated with the SUNY Onondaga Community College. The author of this web page is Jason Dancks, and generated with Dreamweaver. If you think this asshole might have stolen your intellectual property, email him or contact his professor or call him at: (315) 498- 2326</p>
</div>
</body>
</html>

$('.image-url').on('click', function() {...});
You should read up on jQuery selectors.
Edit
Your example already has a valid selector in it. Is it not working? Perhaps it cannot find your jQuery library?

You want to take the value of attribute "val" for the image you click, and replace the 'src' attribute of the img tag with class "image" with the value: here's how you do that.
$('.image-url').on('click', function(){
var img_url = $(this).attr('val');
$('#image').attr('src', '/images/' + img_url).parent().attribute('hidden', false);
});
Happy coding! :)

Using easySlider1.7, Hindering another JavaScript Function

I am using easyslider1.7 jquery plugin to produce the scrollable slider effect. Below is my HTML in which I am using the plugin to produce the effect.
<html>
<head>
<link rel="stylesheet" type="text/css" href="/NotificationLayout/css/CSS1.css"/>
<link rel="stylesheet" type="text/css" href="/NotificationLayout/css/screen.css"/>
<script type="text/javascript" src="../JS/Base.js"></script>
<script type="text/javascript" src="../JS/jquery.js"></script>
<script type="text/javascript" src="../JS/easySlider1.7.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#slider").easySlider({
continuous: true
});
});
</script>
<title>Realtime Notification Panel</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body class="bodycustom1">
<iframe id="NotificationIframe" name="NotificationIframe" src="Notifications.html" seamless>
</iframe>
<br>
<div id="content">
<div id="slider">
<ul>
<li> <font onclick="changeIframeSrc('Notifications.html')">All</font>  
<img src="../icons/Alfresco.png" id="Alfresco" alt="Alfresco" onclick="changeIframeSrc('AlfrescoNotificationDeck.html')"/>  
<img src="../icons/GoogleCalendar.png" id="GoogleCalendar" alt="GoogleCalendar" onclick="changeIframeSrc('GCalNotificationDeck.html')"/>  
<img src="../icons/Linkedin.png" id="Linkedin" alt="LinkedIn" onclick="changeIframeSrc('LinkedInNotificationDeck.html')"/>  
<img src="../icons/Rss.png" id="Rss" alt="RSS" onclick="changeIframeSrc('RSSNotificationDeck.html')"/>
<br>
   
<img src="../icons/On.png" alt="On" id="one" onclick="toggleType('Alfresco','one');"/>  
<img src="../icons/On.png" alt="On" id="two" onclick="toggleType('GoogleCalendar','two');"/>  
<img src="../icons/On.png" alt="On" id="three" onclick="toggleType('Linkedin','three');"/>  
<img src="../icons/On.png" alt="On" id="four" onclick="toggleType('Rss','four');"/>
</li>
<li >
<img src="../icons/Salesforce.png" id="Salesforce" alt="Salesforce" onclick="changeIframeSrc('SFNotificationDeck.html')"/>  
<img src="../icons/Sharepoint.png" id="Sharepoint" alt="Sharepoint" onclick="changeIframeSrc('SPNotificationDeck.html')"/>  
<img src="../icons/Connections.png" id="Connections" alt="IBM Connections" onclick="changeIframeSrc('IBMConnNotificationDeck.html')"/>
<br>
<img src="../icons/On.png" alt="On" id="five" onclick="toggleType('Salesforce','five');"/>  
<img src="../icons/On.png" alt="On" id="six" onclick="toggleType('Sharepoint','six');"/>  
<img src="../icons/On.png" alt="On" id="seven" onclick="toggleType('Connections','seven');"/>
</li>
</ul>
</div>
</div>
</body>
I have written a javascript method to toggle the images from on to off and vice versa, and also changing the image of particular notification type. By clicking on the On button in the above HTML, two changes should happen On button should change to Off button. And the border of image above it should changes to a red border image. VIce Versa for Off button.
function toggleType(channelType,button){
var type=document.getElementById(channelType);
var polarity=document.getElementById(button);
var situation=polarity.alt;
if(situation=="On"){
type.src="../icons/"+channelType+"RB.png";
type.style.cursor="auto";
polarity.src="../icons/Off.png";
polarity.alt="Off";
}else if(situation=="Off"){
type.src="../icons/"+channelType+".png";
type.style.cursor="pointer";
polarity.src="../icons/On.png";
polarity.alt="On";
}
}
The problem is my javascript function produce desirable results for the first 4 images that are in first li element. But when I slide to the next set of images in the other li element, my javascript function stops working. It does not changes image and toggles on and off button.
Please help me with it. I am new to jquery.

The problem is with the elements in the last <li> element. I commented the line given below from easySlider1.7.js and the problem vanished.
$("ul", obj).prepend($("ul li:last-child", obj).clone().css("margin-left","-"+ w +"px"));
I don't know the exact reason why it happened though.