Develop Reference

Check the image dimensions/size before upload

How I can check the dimensions of a image using this function? I just want to check before the upload...
$("#LINK_UPLOAD_PHOTO").submit(function () {
var form = $(this);
form.ajaxSubmit({
url: SITE_URL + 'functions/_app/execute/link_upload_photo.php',
dataType: 'html',
beforeSubmit: function () {
//CHECK DE IMAGE DIMENSIONS, SIZE, AND SHOW ERRORS
},
uploadProgress: function (event, position, total, complete) {
$(".j_progressbar").fadeIn();
$(".j_progressbar .bar").width(complete + "%");
},
success: function (data) {
$("#PHOTO_UPLOADED").css("background-image","url("+window.URL.createObjectURL(document.getElementById('ADD_FIGURE').files[0])+")");
$("#PHOTO_UPLOADED").css("background-size","462px");
$("#UPLOAD_STATUS").css("opacity", "0.5");
$("#UPLOAD_STATUS").css("-moz-opacity", "0.5");
$("#UPLOAD_STATUS").css("filter", "alpha(opacity=50)");
$(".j_progressbar").hide();
$(".ADD_FIGURE").attr("rel",data);
}
});
return false;
});
Thank you for everything.

Refer the docs for the use of .naturalWidth & .naturalWidth read-only properties of the HTMLImageElement.
var x = document.getElementById("myImg").naturalWidth;
function myFunc() {
var x = document.getElementById("myImg").naturalWidth;
var y = document.getElementById("myImg").naturalHeight;
alert(x + "X" + y);
}
<img id="myImg" src="http://www.w3schools.com/jsref/compman.gif" style="width:500px;height:98px;">
<button onclick=myFunc()>GET DETAILS</button>

Prevent drag and drop on captions

the hosting company loads a script on all their sites that is allowing for the tabs to be dragged/dropped , however it is also causing the caption images within the same body_home page to be drag/drop , i have requested this be fixed but i don't think they are concerned.
I am permitted to load my own jquery, javascript , html ,css onto the site to do changes , but i can not stop the host from loading this js file , so how can i reverse this ? Here is a snippet of the portion of the js file i think that is causing this problem .
I am permitted to load my own footer and header messages , so is there anyway i can remove what they are doing here , or reverse the effect on the captions ?
i cant find a way for the listener to be removed from outside.
They have used an anonymous function on the event 'domready' .
Does javascript have a feature to remove the listener from outside the anonymous method
window.onload=function() {
if (document.getElementById("body_home")) {
set_up_double_click_events();
if (document.getElementById("homepagetabs") && document.getElementById("tab2")) {
new Sortables($('homepagetabs'), {
onComplete: function() {
var parent = this.element.parentNode;
var saveIt = false;
if (typeof currentTabOrder == "undefined") {
currentTabOrder = new Array();
for (var i = 0; i < parent.getChildren().length; i++) {
currentTabOrder[i] = i;
}
}
for (var i = 0; i < parent.getChildren().length; i++) {
var seqno = parent.getChildren()[i].id.substr("tab".length);
if (currentTabOrder[i] != seqno) {
saveIt = true;
currentTabOrder[i] = seqno;
}
}
if (saveIt) {
var url = window.location.protocol + "//" + window.location.host + "/" + year + "/save_setting?L=" + league_id + "&TITLE=TABORDER&VALUE=" + currentTabOrder.join();
makeHttpRequest(url);
}
}
});
}
window.addEvent('domready', function() {
new Sortables('.homepagemodule CAPTION', {
clone: true,
revert: true,
opacity: 0.7,
onStart: function() {
dndMovingModule = this.element.parentNode.parentNode.id.toUpperCase();
},
onComplete: function() {
dndDroppedOntoModule = this.element.parentNode.parentNode.id.toUpperCase();
if (typeof dndMovingModule != "undefined" && typeof dndDroppedOntoModule != "undefined" && dndMovingModule != dndDroppedOntoModule) {
var url = window.location.protocol + "//" + window.location.host + "/" + year + "/save_setting?L=" + league_id + "&TITLE=MODULE&VALUE=" + dndMovingModule + "," + dndDroppedOntoModule;
// alert("calling: " + url);
makeHttpRequest(url);
setTimeout("window.location.reload();", 250);
}
}
});
});
}
}

$(document).ready(function() {
$('#DIVID').on('mousedown', function(e) {
return false;
});
});

I would put an HTML class attribute on all of your images that are producing the problem. Obviously, jQuery uses CSS style selectors. See the following example.
$(function(){
$('.ElementClass').mousedown(function(){
return false;
});
});
When you return false; onmousedown it prevents the default behavior in most Browsers, which is to grab the image so the Client can drop and drag the image into into a new tab or window to view it with their Browser.

Refresh slidejs

I'm using slidejs from http://www.slidesjs.com/ and I wanted to refresh the list of images, because I need to add and remove images on the fly.
Is there any way to do this? I've tried to use the delete $.fn.pluginName but no luck.
Thanks

I've come up with a (rather funky) solution. It might not be the best way since heavy DOM manipulations/starting the plugin is used, but I hope you get the idea. The result can be found on this JSFiddle.
HTML
<input type="button" id="add" value="Add slide!" />
<div id="slides">
<img src="http://placehold.it/100x100" />
<img src="http://placehold.it/120x120" />
<img src="http://placehold.it/140x140" />
<img src="http://placehold.it/160x160" />
<img src="http://placehold.it/180x180" />
</div>
JavaScript
// Create a clone of the images array
var $originalClone = $("#slides").children().clone();
// Remove the parent (we'll create it dynamically)
$("#slides").remove();
// Create the new slides, add the children & add it to the DOM
var $newSlides = $("<div />")
.append($originalClone)
.appendTo($("body"));
// Execute the slide plugin
$newSlides.slidesjs({
width: 940,
height: 528
});
$("#add").on("click", function() {
// Remove the old slider
$newSlides.remove();
// Create a new slider, add the children & add it to the DOM
var $newSlides2 = $("<div />")
.append($originalClone)
.appendTo($("body"));
// Add the new image to the newly created slider
$("<img />")
.attr("src", "http://placehold.it/200x200")
.appendTo($newSlides2);
// Execute the slide plugin
$newSlides2.slidesjs({
width: 940,
height: 528
});
// In this demo, the button "add slide" can be clicked once
$("#add").remove();
});
I hope this solution gives you a hint in the good direction!

I recently had the same issue and manage to solve it by changing the plugin.
Here's my solution:
Add these following lines before Plugin.prototype.init = function() {:
Plugin.prototype.refresh = function (number){
var $element=$(this.element);
var _this = this;
this.data = $.data(this);
$(this.element).find(".slidesjs-pagination-item").remove();
$.data(this, "total", $(".slidesjs-control", $element).children().not(".slidesjs-navigation", $element).length);
$.each($(".slidesjs-control", $element).children(), function(i) {
var $slide;
$slide = $(this);
return $slide.attr("slidesjs-index", i);
});
$.each($(".slidesjs-control", $element).children(), function(i) {
var $slide;
$slide = $(this);
return $slide.attr("slidesjs-index", i);
});
if (this.data.touch) {
$(".slidesjs-control", $element).on("touchstart", function(e) {
return _this._touchstart(e);
});
$(".slidesjs-control", $element).on("touchmove", function(e) {
return _this._touchmove(e);
});
$(".slidesjs-control", $element).on("touchend", function(e) {
return _this._touchend(e);
});
}
$element.fadeIn(0);
this.update();
if (this.data.touch) {
this._setuptouch();
}
$(".slidesjs-control", $element).children(":eq(" + this.data.current + ")").eq(0).fadeIn(0, function() {
return $(this).css({
zIndex: 10
});
});
if (this.options.navigation.active) {
prevButton = $("<a>", {
"class": "slidesjs-previous slidesjs-navigation",
href: "#",
title: "Previous",
text: "Previous"
}).appendTo($element);
nextButton = $("<a>", {
"class": "slidesjs-next slidesjs-navigation",
href: "#",
title: "Next",
text: "Next"
}).appendTo($element);
}
$(".slidesjs-next", $element).click(function(e) {
e.preventDefault();
_this.stop(true);
return _this.next(_this.options.navigation.effect);
});
$(".slidesjs-previous", $element).click(function(e) {
e.preventDefault();
_this.stop(true);
return _this.previous(_this.options.navigation.effect);
});
if (this.options.play.active) {
playButton = $("<a>", {
"class": "slidesjs-play slidesjs-navigation",
href: "#",
title: "Play",
text: "Play"
}).appendTo($element);
stopButton = $("<a>", {
"class": "slidesjs-stop slidesjs-navigation",
href: "#",
title: "Stop",
text: "Stop"
}).appendTo($element);
playButton.click(function(e) {
e.preventDefault();
return _this.play(true);
});
stopButton.click(function(e) {
e.preventDefault();
return _this.stop(true);
});
if (this.options.play.swap) {
stopButton.css({
display: "none"
});
}
}
if (this.options.pagination.active) {
pagination = $("<ul>", {
"class": "slidesjs-pagination"
}).appendTo($element);
$.each(new Array(this.data.total), function(i) {
var paginationItem, paginationLink;
paginationItem = $("<li>", {
"class": "slidesjs-pagination-item"
}).appendTo(pagination);
paginationLink = $("<a>", {
href: "#",
"data-slidesjs-item": i,
html: i + 1
}).appendTo(paginationItem);
return paginationLink.click(function(e) {
e.preventDefault();
_this.stop(true);
return _this.goto(($(e.currentTarget).attr("data-slidesjs-item") * 1) + 1);
});
});
}
$(window).bind("resize", function() {
return _this.update();
});
this._setActive();
if (number){
this.goto(number+1);
} else {
this.goto(0);
}
};
Then, change the content of return $.fn[pluginName] = function(options,the_args) { to this:
return $.fn[pluginName] = function(options,the_args) {
var the_return=this.each(function() {
if (!$.data(this, "plugin_" + pluginName)) {
return $.data(this, "plugin_" + pluginName, new Plugin(this, options));
}
});
if (typeof options=="string"){
var element=this.get(0);
if (arguments.length>1){
var the_args=Array.prototype.slice.call(arguments);;
the_args.splice(0,1);
var plugin=$.data(element, "plugin_" + pluginName);
return plugin[options].apply(plugin,the_args);
} else {
return $.data(element, "plugin_" + pluginName)[options]();
}
}
return the_return;
};
This way, you could call other functions of the plugin like goto.
In the code, you just need to call the refresh function like this:
$("#id_of_container").slidesjs("refresh");
or, if you want to refresh and jump to another slide, call it like this:
$("#id_of_container").slidesjs("refresh",number_of_slide);
where number_of_slide is an int number starting at 0;

Here is my copy and paste solution. Removes single current tab.
$('#SLIDESID').slidesjs({
//...
});
// ... later somewhere else ... //
var currentIndex = $('#SLIDESID').data().plugin_slidesjs.data.current;
//remove active tab
$('#SLIDESID [slidesjs-index="' + currentIndex + '"]').remove();
$('#SLIDESID [data-slidesjs-item="' + currentIndex + '"]').parent().remove();
//reindex tabs
var tabs = $('#SLIDESID [slidesjs-index]');
tabs.each(function(idx, elem){
$(elem).attr('slidesjs-index', idx);
});
//reindex pagination
$('#SLIDESID [data-slidesjs-item]').each(function(idx, elem){
$(elem).attr('data-slidesjs-item', idx);
$(elem).text(idx+1);
});
//tweek plugin data
$('#SLIDESID').data().plugin_slidesjs.data.total = tabs.length;
$('#SLIDESID').data().plugin_slidesjs.data.current--;
//animate to new element by clicking on NEXT
$('#SLIDESID .slidesjs-next').click();

How do can I get links to act independent of each other?

My code currently allows any link clicked under citations to open a new page. I'm trying to exclude the "More..." links from performing this function since these are used to add more links to the current page. Is there a way to do this?
Here's the jsfiddle
Here's my javascript
$(document).ready(function ($) {
var url = 'https://www.sciencebase.gov/catalog/item/504216b6e4b04b508bfd333b?
format=jsonp&fields=relationships,title,body,contacts';
$.ajax({
type: 'GET',
url: url,
jsonpCallback: 'getSBJSON',
contentType: "application/json",
dataType: 'jsonp',
success: function (json) {
var citeCount = 0;
var piCount = 0;
$('#project').append('<li><b>' + json.title + ' - </b>' + json.body + '</li>');
$('#project a').on('click', function (e) {
e.preventDefault();
if (citeCount == 1) {
return;
}
$.ajax({
type: 'GET',
url: 'https://www.sciencebase.gov/catalog/itemLink
/504216b6e4b04b508bfd333b?format=jsonp',
jsonpCallback: 'getSBJSON',
contentType: "application/json",
dataType: 'jsonp',
success: function (json) {
// Loop function for each section (10 citations per section)
var loopSection = function (start, stop) {
// Http setup for all links
var linkBase = "http://www.sciencebase.gov/catalog/item/";
// Link for citation information
var link = "";
for (var j = start; j < stop; j++) {
// Create a link using the realtedItemId
link = linkBase + json[j].relatedItemId;
// Title links
var $anchor = $("<a>", {
href: link,
id: "id" + j,
text: json[j].title
});
// .parent() will get the <li> that was just created and append to
//the first citation element
$anchor.appendTo("<li>").parent().appendTo("#citations");
}
}
var itemCount = json.length;
var numSections = Math.floor((itemCount / 10));
var moreLinks = $('More...');
var loopCount = 1;
loopSection(0, 10);
$('#citations').append(moreLinks);
$(moreLinks).on('click', function (e) {
e.preventDefault();
if (numSections > 1) {
loopSection((loopCount * 10), ((loopCount + 1) * 10));
$('#citations').append(moreLinks);
numSections -= 1;
loopCount++;
} else if (numSections <= 1) {
$("#nextLink").closest('a').remove();
loopSection((loopCount * 10), json.length);
}
});
},
error: function (e) {
console.log(e.message);
}
}); // END Second .ajax call
$('#project').on('click', function (e) {
e.preventDefault();
if (piCount == 1) {
return;
}
for (var i = 1; i < json.contacts.length; i++) {
$('#piHeading').append('<ul>' + "Name: " + json.contacts[i].name + ', ' + "Email: " + json.contacts[i].email + ', ' + "Phone: " + json.contacts[i].phone + '</ul>');
}
piCount++;
});
citeCount++;
}); // END Project link click event
$('#citations').on('click', function (e) {
e.preventDefault();
window.open('CitationsInfo.html', '_self');
});
},
error: function (e) {
console.log(e.message);
}
}); // END First .ajax call
}); // END Doc.ready
and Here's my html,
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="MainPage4.js"></script>
<script src="Citations.js"></script>
</head>
<body>
<h2>Project</h2>
<div class='wrapper'>
<ul id='project'></ul>
</div>
<h3>Citations</h3>
<div class='wrapper'>
<ul id='citations'></ul>
</div>
<h3>Principal Investigators</h3>
<div class='wrapper'>
<ul id='piHeading'></ul>
</div>
</body>
</html>
Thanks for the help

If you change the part of your code that is handling the global click event for the #citations container to include logic to filter out clicks where the target is the #nextLink, it should do what you want.
$('#citations').on('click', function (e) {
e.preventDefault();
if (!$(e.target).is($('#nextLink'))) {
window.open('CitationsInfo.html', '_self');
}
});
Removing the above section entirely also allow the "More..." link to work correctly, while still maintaining functionality on the individual links. The citations click event is masking the other behaviors.
jsfiddle

jquery hover and selected issue

http://www.kars4kids.org/charity/v2/nirangahtml/program_pop/meet_animals.asp
above link,
when I select one of icon at below.
it's change to selected states, but problem is I need to restrict hover effect and further selecting for that Icon . ( since I am using Image changing).
below is the my complete, jquery code.
$(document).ready(function(){
$('#animal_content_text_horse').css("display", "block");
$('#animal_pic_horse_span').css("display", "block");
$('#page_animal_img_horse').css("display", "block");
$('.animal_thumb_link').each(function() {
$(this).click(function(e) {
e.preventDefault();
default_set($(this).attr('id'));
$(".animal_thumb_link").removeClass("thumbselected");
$(this).addClass("thumbselected");
$(".animal_thumb_link").find('img').addClass("imgHoverable");
$(this).find('img').removeClass("imgHoverable");
});
});
// Change the image of hoverable images
$(".imgHoverable").hover( function() {
var hoverImg = HoverImgOf($(this).attr("src"));
$(this).attr("src", hoverImg).hide().fadeIn(0);
}, function() {
var normalImg = NormalImgOf($(this).attr("src"));
$(this).attr("src", normalImg).show();
}
);
function HoverImgOf(filename)
{
var re = new RegExp("(.+)\\.(gif|png|jpg)", "g");
return filename.replace(re, "$1_r.$2");
}
function NormalImgOf(filename)
{
var re = new RegExp("(.+)_r\\.(gif|png|jpg)", "g");
return filename.replace(re, "$1.$2");
}
});
function default_set(obj12){
var arr = ["horse_content", "camel_content", "peacock_content", "goat_content", "donkey_content", "rooster_content", "sheep_content", "alpacas_content", "cynthia_content", "rabbit_content", "cow_content"];
var arr2 = ["../images/horse_thumb.gif", "../images/camel_thumb.gif", "../images/peacock_thumb.gif", "../images/goat_thumb.gif", "../images/donkey_thumb.gif", "../images/rooster_thumb.gif", "../images/sheep_thumb.gif", "../images/alpacas_thumb.gif", "../images/cynthia_thumb.gif", "../images/rabbit_thumb.gif", "../images/cow_thumb.gif"];
for ( var i = 0; i <= arr.length; i++ ) {
if ( arr[ i ] === obj12 ) {
old_url = $("#" + obj12).children('img').attr('src');
new_url = old_url.replace(/thumb/,'thumb_r');
$("#" + obj12).children('img').attr('src',new_url);
}else{
$('#' +arr[ i ]).children('img').attr('src',arr2[ i ]);
}
}
}
function load_page(obj1,obj2,obj3){
/* detect current div if so hide */
current_pagepharadiv = document.getElementById("pagepharadiv_hidden").value;
current_pageheadertext = document.getElementById("pageheadertext_hidden").value;
current_pageimage = document.getElementById("pageimage_hidden").value;
$('#' + current_pagepharadiv).css("display", "none");
$('#' + current_pageheadertext).css("display", "none");
$('#' + current_pageimage).css("display", "none");
image_hover(obj1);
image_hover(obj2);
$('#' + obj3).fadeIn("fast");
//image_hover(obj3);
//$('#' + obj1).fadeIn("fast");
//$('#' + obj2).fadeIn("fast");
document.getElementById("pagepharadiv_hidden").value = obj1;
document.getElementById("pageheadertext_hidden").value = obj2;
document.getElementById("pageimage_hidden").value = obj3;
}
can you please advice guys,
cheers!

It seems to me that you're really making things more complicated than they need to be. Here's how I would implement the page:
Bottom squares as divs, make the images transparent pngs
Change bottom square color using css :hover
Generate the entire top content on the server for each animal in a div: so you have 11 divs one after the other, instead of having to hide/show things in 3 places. In my code example below I assume they have the class animal-content
Add the id of each top div as a html5 data attribute to the corresponding thumb link
This way all you need to do in jQuery is:
$(".animal_thumb_link").click(function() {
var topId = $(this).data("topId");
$(".animal_thumb_link").removeClass("thumbselected");
$(this).addClass("thumbselected");
$(".animal-content").toggle(function() { return this.id === topId; });
});