Can you store a clicked img as a variable? - javascript

For my website I make the visitor choose between two different images. Is it possible to store the image that they chose as a variable? I then need to use that variable in an if conditional. Also is it possible to name each image as if it were a class?
Thanks!
Jenise

Best to use Javascript + jQuery:
var my_images = [];
$('img').click(function(){
my_images.push(this);
});
This will store the HTML DOM elements in an array for use later.
Highly recommend getting to grips with Javascript and then using jQuery (a Javascript library) for anything DOM related.
http://jquery.com/

Related

use XML loaded number as a function variable

I need to use a variable from the code below in a link ID to load an overlay iframe. I'm loading numbers from an XML file that I'm using for each generated link parameter, I could use them as an ID too. Below is the javascript:
$(function(){
$('#b1').frameWarp();
});
Instead of using ID="b1", am I able to create variables based on the loaded XML numbers?
I cannot use class instead of ID.
Can you use:
$('#' + varName).frameWarp();
Apologies if this isn't what you're looking for. I'm having trouble understanding your question.

How to select this element using JQuery?

I'm implementing some third-party web software for my company. It returns some html which I can't directly change. I'd like to make some minor updates using jQuery but am not familiar with this syntax.
<div c:id="container"> </div>
How do I find this div in the dom using jQuery? What is "c:id" anyway? I've never seen that syntax before.
Thanks.
c:id is just an html attribute like any other. You can access it in jQuery using the attribute selectors:
var container = $('[c\\:id="container"]');
Could you post the entire XML ?
It probably is an XML namespace define with xmlns:c={url}
You can;
var el = $('div[c\\:id="container"]');
(unescaped : being a pseudo-class)

jQuery/Javascript Plugin best practice

I'm not particular familiar with using jQuery/Javascript so I don't know what the best way to do what I'm asking, it works but I don't know how efficient it is.
Basically I have a plugin called TipTip to create tooltips. It either takes the info from the "title" attribute of what you want the tip to appear over or you can use an option in the script to include HTML, like so:
<script type="text/javascript">
$(function(){
$(".someClass").tipTip({content:"<strong>What you want in the tooltip</strong>"; })
});
</script>
I want to generate a lot of different tooltips on my page but they all fit a similar style and really only need a changeable variable (they are an achievement progress bar so I only need to pass a single value for the % progress).
So is it alright to simply have a lot of script tags and duplicate the code above or can I pass a variable into it somehow and only keep the one piece of tooltip code at the top?
Or is this a question for suited to the devs of TipTip? Thanks in advance.
Assuming HTML5 is ok to use in this scenario, I'd reccommend using the html data attributes to store your element specific tooltips... and then using it to populate the tiptip plugin...
$(function(){
$('.toolTipClass').each(function() {
var element = $(this);
element.tipTip({
content: "<strong>"+element.data("toolTip")+"</strong>"
});
});
Now just add the HTML5 attribute like so
<div class="toolTipClass" data-toolTip="This is the tool Tip">Div Content</div>

choose javascript variable based on element id from jquery

I feel like this is a simple question, but I am still relatively new to javascript and jquery.
I am developing a site for a touch interface that uses unordered lists and jquery .click functions to take input data. I have a section to input a m:ss time, with 3 divs, each containing a list of digits for time. I need to get the input for each column and set it as a variable. I originally designed the inputs to change form inputs, because I didn't understand javascript very much. It was easy to change the 3 hidden inputs by using div id's, but I can't figure out how to do it now with javascript variables.
Here is my original jquery code...
$("div#time>div>ul>li").click(function() {
var id = $(this).parents(".time").attr("name");
var number = $(this).html();
$("input#"+id).val(number); });
The last line sets one of 3 hidden inputs equal to whatever was clicked. I need to make it so separate variables take the inputs, then I can manipulate those variables however I want.
Here's a short snippet of the html, to have an idea of how jquery grabs it.
<div id="time">
<h1>Time</h1>
<div name="minute" class="time" id="t_minute">
M :
<ul>
The full time html is here: link text
Thanks everyone!
I've been using SO to answer many questions I've had, but I couldn't find something for this, so I figured I would join, since I'm sure I will have more questions along the way.
So I have tried adding the following, and I still can't get it to work right.
window.myValues[id] = number;
event[i].min = myValues["minute"];
event[i].sec = myValues["second"];
event[i].sin = myValues["single"];
event[i].time = String(event[i].min) + String(event[i].sec) + String(event[i].sin);
I tried it both with and without the quotation marks. I have not used window.* for anything, so I'm not very sure how to handle this.
First thing to mention here, don't be unnecessary specific. In your example
$('#time').find('li').click()
should be enough.
If I understand you well, you want to store the some data. You might want to use
jQuery's $.data method. Example:
$('#time').find('li').click(function(){
var $this = $(this);
var name = $this.closest('.time').attr('name');
$.data(document.body, name, $this.html());
});
This would store the html of the clicked li in a global Object, which can be accessed like
alert($.data(document.body, 'minute'));
you should be able to reference the variable from the window[] object, so something like window[id] should do the trick for referencing the variable.

HTML generation in JS code

I'd like to know your thoughts about HTML code generation in my JS code.
I just think that the html.push("<tag>" + something + "</tag>") style pretty annoying.
I've already tried something with templates inside my HTML file (and put some placeholders therein), and then used its content to a replace the placeholders to my real values.
But maybe you guys have other ideas, possibly one using jQuery.
jQuery is the way to go. You can do things like this:
// create some HTML
var mySpan = $("<span/>").append("Something").addClass("highlight");
it is cross-browser compatible,
it is an easy to use syntax
There is also a templating plugin.
You can use createelement, appendchild, and innerHTML to do this.
Here's an article from A List Apart that uses these functions in the process of generating a dropdown menu.
jQuery has javascript template plugins like jBind and jTemplate. I haven't used them myself but I do recommend jQuery whenever possible.
A note on html generation, it is not searchable by search engines in most cases.
I'm a big fan of how PrototypeJS handles templates.
First you create an instance of the Template class and pass it a string containing the template HTML.
var tpl = new Template('Here is a link to #{sitename}');
Then you pass it data containing the values to replace within the template.
$('someDiv').innerHTML = tpl.evaluate( {link: 'http://www.stackoverflow.com', sitename: 'StackOverflow'} );
In the above example, I have a div with id="someDiv" and I'm replacing the contents of the div with the result of the template evaluation.
Resig has a little blog entry on creating a very lightweight template system.
There are a bunch of JQuery function that support this. In particular, you should look at append(content), appendTo(content) prepend(content) prependTo(content), replaceWith(content), after(content), before(content), insertAfter(content), and insertBefore(content).

Categories

Resources