We Keep Coding

Numbered images selector

Good day!
First of all, I don't what is the right name or title for my question but that's what I think what I needed.
how can I make an image selector with numbered function like the image below? I am using html and jquery to select images but I don't know how to put and ordered numbers when selecting an images. My codes are like...
HTML:
<div class="photoList">
<label class="singlePhotoWrap relative">
<img src="images/previewDefaultImg.png" class="photo" alt="Image">
<img src="images/numberedIco.png" class="absolute numberedIcon" alt="Check Icon">
<span class="photoCounter">1</span>
<input type="checkbox" name="photoSelector" class="hidden" autocomplete="off">
</label>
...
Javascript:
$(document).ready(function(e){
$(".singlePhotoWrap").click(function() {
var current = document.getElementById("photoSelectedCounter").value;
if ($(this).find('input[name=photoSelector]:checked')){
var totalAdd = parseFloat(current) + .5;
$('#photoSelectedCounter').val(totalAdd);
$(this).find(".photoCounter").text(totalAdd);
}
if ($(this).find('input[name=photoSelector]:unchecked')) {
var totalAdd = parseFloat(current) - .5;
$('#photoSelectedCounter').val(totalAdd);
$(this).find(".photoCounter").text(totalAdd);
}
});
});
My javascript codes always returning as checked. It always adding to my span.
Here's the screenshot:
Numbered Image Selector Screenshot
How can I do that using javascript or jquery?

Javascript: Change background of all images inside div

I would like to change the background of all images inside a div with a JS function:
My div:
<div>
<div id="avatar_container">
<img src="a.png" onclick="myfunction()" />
<img src="b.png" onclick="myfunction()" />
</div>
</div>
My function:
function myfunction(){
//I tried this two methods
document.getElementById("avatar_container").getElementsByTagName('img').css({'background' : 'green'});
document.getElementById("avatar_container").getElementsByTagName('img').style.backgroundColor = "green";
}

that's solve your problem
<div id="avatar_container">
<img src="a.png" class="myClass1" />
<img src="b.png" class="myClass1" />
</div>
Js: (important Notice: use js code after html codes)
var elems = document.getElementsByClassName('myClass1'), i;
for (i in elems) {
elems[i].style.backgroundColor = "green";
}
}
but i suggestion you to use and learn Jquery ,
jquery is a Javascript Framework witch make everything's very easy for you with less coding
with Jquery You can do it simplest like this
$('#avatar_container .myClass1').css('backgroundcolor','green');
and if you wanna attach click event
$('#avatar_container .myClass1').click(function() {
$(this).css('backgroundcolor','green');
});

Want to make inactive hyperlink

I have problem in hide and show the div element.
In this scenario when user click on the year the respect content is shown.
Problem I want to inactive hyperlinking on respective year when it is opened.
The script and html is below;
for this I have tried .preventDefault(). but not got any success:
<script type="text/javascript" >
$(document).ready(function() {
$("div.new:gt(0)").hide();// to hide all div except for the first one
$("div[name=arrow]:eq(0)").hide();
// $("div.nhide:gt(0)").hide();
// $("a[name=new]").hide();
$("a[name=new]").hide();
$('#content a').click(function(selected) {
var getID = $(this).attr("id");
var value= $(this).html();
if( value == '<< Hide')
{
// $("#" + getID + "arrow").hide();
$("a[name=new]").hide();
$("#" + getID + "_info" ).slideUp('slow');
$("div[name=arrow]").show();
$("div.new").hide();
$(this).hide();
// var getOldId=getID;
// $("#" + getID ).html('<< Hide').hide();
}
if($("a[name=show]"))
{
// $("div.new:eq(0)").slideUp()
$("div.new").hide();
$("div[name=arrow]").show();
$("a[name=new]").hide();
$("#news" + getID + "arrow").hide();
$("#news" + getID + "_info" ).slideDown();
$("#news" + getID ).html('<< Hide').slideDown();
}
});
});
</script>
The html code is below:
<div id="content">
<div class="news_year">
<a href="#" name="show" id="2012">
<div style="float:left;" name="year" id="news2012year">**2012** </div>
<div style="float:left;" name="arrow" id="news2012arrow">>></div>
</a>
</div>
<div class="new" id="news2012_info">
<div class="news">
<div class="news_left">News for 2012</div>
</div>
<div class="nhide" ><< Hide </div>
</div>
<div id="content">
<div class="news_year">
<a href="#" name="show" id="2011">
<div style="float:left;" name="year" id="news2012year">2012 </div>
<div style="float:left;" name="arrow" id="news2012arrow">>></div>
</a>
</div>
<div class="new" id="news2011_info">
<div class="news">
<div class="news_left">News for 2011</div>
</div>
<div class="nhide" ><< Hide </div>
</div>
Fiddle

if i am understanding your problem,
event.preventDefault(); not works with all browser so if you are using other browser like IE
then use event.returnValue = false; instead of that.so you can detect your browser using javascript as
var appname = window.navigator.appName;

This is what I'm currently using in my projects to "disable" an anchor tag
Disabling the anchor:
Remove href attribute
Change the opacity for added effect
<script>
$(document).ready(function(){
$("a").click(function () {
$(this).fadeTo("fast", .5).removeAttr("href");
});
});
</script>
Enabling the anchor:
$(document).ready(function(){
$("a").click(function () {
$(this).fadeIn("fast").attr("href", "http://whatever.com/wherever.html");
});
});
Original code can be found here

Add a class called 'shown' to your wrapper element when expanding your element and remove it when hiding it. Use .hasClass('shown') to ensure the inappropriate conditional is never executed.

Surround the code inside of the click function with an if statement checking to see if a variable is true or false. If it is false, it won't run the code, meaning the link is effectively inactive. Try this..
var isActive = true;
if (isActive) {
// Your code here
}
// The place where you want to de-activate the link
isActive = false;
You could also consider changing the link colour to a grey to signify that it is inactive.
Edit
Just realised that you want to have multiple links being disabled.. the code above will disable all of them. Try the code below (put the if around the code in the click function)
if(!$(this).hasClass("disabled")) {
// Your code here
}
// The place where you want to de-activate the link
$("#linkid").addClass("disabled");
// To re-enable a link
$("#linkid").removeClass("disabled");
// You can even toggle the link from disabled and non-disabled!
$("#linkid").toggleClass("disabled");
Then in your CSS you could have a declaration like this:
.disabled:link {
color:#999;
}

if jQuery element hasClass() change different element link text

I am using a jQuery function to add/remove a class to the clicked element, which works just fine. However when that element is clicked, I am trying to change the text of an HTML link and I cannot seem to get it working. The HTML link is located within the <span> element further down the page.
When <button id="people"> hasClass('user_view_active') the HTML link should display "People" when <button id="jobs"> hasClass('user_view_active') the HTML link should display "Jobs".
<script type="text/javascript">
$(document).ready(function() {
$('button').click(function(){
$('button').each(function(){
$(this).removeClass('user_view_active');
});
$(this).addClass('user_view_active');
});
if ($('#people').hasClass('user_view_active')){
$('.title').find("a").attr("href").text(text.replace('People'));
}else{
$('.title').find("a").attr("href").text(text.replace('Jobs'));
}
});
</script>
</head>
<body>
<div id="container">
<header>
<img src="images/header-name.png" width="200px" style="display: inline; margin-bottom: -10px;"/>
<button id="jobs" class="user_view">Jobs</button>
<button id="people" class="user_view_active user_view">People</button>
<div class="header_search_wrapper">
<form action="" method="POST">
<textarea class="header_search" name="app_search" placeholder="Search people, jobs, or companies" style="width: 430px;"></textarea>
<input type="submit" class="share_btn" value="Search">
</form>
</div>
</header>
<div id="main" role="main">
<!--! begin app content -->
<div class="right_sidebar">
<span class="right_title">Connection Suggestions</title>
</div>
<span class="title">Recent Updates >> People</span>

To replace the text within a link you can use the jQuery .text() function. This function can also get the text value and also set the text value - as is shown in the example below -
if ($('#people').hasClass('user_view_active')){
$('.title').find("a").text('People');
}else{
$('.title').find("a").text('Jobs');
}
This code would have to be wrapped in the callback function of the click event to work -
$(document).ready(function() {
$('button').click(function(){
$('button').removeClass('user_view_active');
$(this).addClass('user_view_active');
if ($('#people').hasClass('user_view_active')){
$('.title').find("a").text('People');
}else{
$('.title').find("a").text('Jobs');
}
});
});
Now each time the button is clicked, you can check for the existence of the user_view_active class on the #people element.

Okeydokey ?
Are you sure those are the right tags ?
<span class="right_title">Connection Suggestions</title>
Are you sure an <a> element inside a <button> element is a good idea?
<button id="jobs" class="user_view">Jobs</button>
role="main" is'nt a valid attribute, but will probably work anyway.
This just seems easier:
$(document).ready(function() {
$('button').on('click', function(){
$('button').removeClass('user_view_active');;
$(this).addClass('user_view_active');
$("a", ".title").text(this.id);
});
});
FIDDLE

Try this way:
$('#people').toggleClass('user_view_active').html($('#people').hasClass('user_view_active')?'People':'Jobs');

Appending using jQuery

Okay, this is a really long post. I have a multiple DOM tree structure that I need to traverse through in order to insert an image. For the record, the image passes into PARAM fine. What I don't understand is why it's not posting. So, here is the code I am currently using.
function validateImage(event) {
var $input = $(this);
var width = 75;
var height = $input.closest('.logo-block').length > 0 ? 35: 75;
$input.animate({
'backgroundColor': '#999'
},
250);
$.get('/meta/thumbnail/' + $input.val() + '/' + height + '/' + width + '/',
function(result) {
$input.stop();
if (result != 'No Image Available') {
$input.css('background-color', '#55FF00');
var $block = $input.closest('div.thumb-image');
if ($block.closest('.center-callout-info').length > 0) {
// in center column, add image.
$input.val('');
$('<div class="thumb">' + result + '</div>').appendTo($block.closest('.image-container').not($block.closest('.more-images .image-container'))).find('img').addClass('selected');
$('.center-callout-info .block img.meta-thumb').click(bindImageSelection);
}
} else {
$input.css('background-color', '#FF0000');
$input.val('');
}
$input.animate({
backgroundColor: '#FCFCFD'
},
2000);
});
}
The HTML is as follows:
<fieldset class="collapsible collapsed">
<legend class="collapse">Image Management</legend>
<div class="fieldset-wrapper"><input type="button" value="Save Images" id="saveForm" class="submitButton" name="save" />
<div class="center-callout-info">
<div class="callout-images">
<div class="high-res block active-tab" id="46051">
<div class = "image-container">
<div class="thumb-image thumb selected" id="AVE_BOX_TOPS_EDUCATION_4C">
<img class="meta-thumb" height="" src="/thumbs/AVE_Box_Tops_Education_4C.png" title="AVE_BOX_TOPS_EDUCATION_4C" /></div>
<div class="thumb-image thumb selected" id="FEL_BANKERS_BOX_BLK">
<img class="meta-thumb" height="" src="/thumbs/FEL_BANKERS_BOX_BLK.png" title="FEL_BANKERS_BOX_BLK" /></div>
<div class="thumb-image thumb selected" id="FEL_BB_FOLDER_RAILS_BLK">
<img class="meta-thumb" height="" src="/thumbs/FEL_BB_Folder_Rails_BLK.png" title="FEL_BB_FOLDER_RAILS_BLK" /></div>
<div class="thumb-image thumb selected" id="FEL_SFI_BLK">
<img class="meta-thumb" height="" src="No Image Available" title="FEL_SFI_BLK" /></div>
<form action="/node/46051/edit" accept-charset="UTF-8" method="post" id="skuimage-get-more-form">
<div><div class="form-item" id="edit-new-high-res-wrapper">
<label for="edit-new-high-res">New: </label>
<input type="text" maxlength="128" name="new_high_res" id="edit-new-high-res" size="15" value="AVE_AVERY_BLK" class="form-text new-button" />
</div>
<input type="hidden" name="form_build_id" id="form-de9c77d3f4d32257a52dc609e6697769" value="form-de9c77d3f4d32257a52dc609e6697769" />
<input type="hidden" name="form_token" id="edit-skuimage-get-more-form-form-token" value="f7bb86ba8678fa2fb5b911f1df819bec" />
<input type="hidden" name="form_id" id="edit-skuimage-get-more-form" value="skuimage_get_more_form" />
</div></form>
</div></div></div></div></div></fieldset>
Now, I would like the <IMG> to appear with the other <IMG>'s, which are located inside of the div with class image-container.
I think I have everything in the message here. Any help would be great.
EDIT EDIT EDIT EDIT EDIT EDIT
Here is the answer:
Alright, here is what the answer was. Above you will see the following line of code:
var $block = $input.closest('div.thumb-image');
However, after traversing up the DOM Tree, I found out that I needed to set this to be the actual place I wanted to PUT the image. So, var $block actually is the following:
var $block = $input.closest('.image-container');
After that, I had to change the place where it put the image as well.
$('<div class="thumb">' + result + '</div>').appendTo($block).find('img').addClass('selected');

I am not very clear about your post. But if have understood a bit, it is about sending image and getting a response from the backend of the application.
I am sorry if I got it wrong, but if I am right. Then here is my answer --
You cannot upload file using ajax. That is you cannot send files in functions like $.ajax(), $.get(), $.post(), etc. as data.

6 years later, I'll answer my own question. LOL
Alright, here is what the answer was. Above you will see the following line of code:
var $block = $input.closest('div.thumb-image');
However, after traversing up the DOM Tree, I found out that I needed to set this to be the actual place I wanted to PUT the image. So, var $block actually is the following:
var $block = $input.closest('.image-container');
After that, I had to change the place where it put the image as well.
$('<div class="thumb">' + result + '</div>').appendTo($block).find('img').addClass('selected');