Develop Reference

Group of script calls for buttons in a .js using wheelzoom

I have 12 buttons each with an ID, i'm using this script for the action.
$(document).ready(function() {
$("#WEyear18000").click(function() {
$("#WEtextarea").load("Files/Docs/y18000.txt");
$('#WEimage_view').html('<img src="Files/Image/treesimages/PalaeoGlaciolMaps.jpg" >');
$('#WEee244f5837 .PullZone').click();
wheelzoom(document.querySelectorAll('img'));
});
});
WEyear18000, is the id of button, WEtextarea, is the id of the div where txt is displayed on button click, WEimage_view, is the id of the div where new image displayed on same button click, WEee24f5837, is the id to close a collapsible panel where buttons are located.
There are 12 of these script statements in a .js file.
It all works but it causes some strange effects after the 2nd or another button is clicked, all the images on the page disappear but the one on the button click. Page is here, page with issue
Any suggestion on how to stream line script wanted. I a newbe to scripting but managed to hodgepodge this to work but has and adverse affect on the rest of the pages images. Suggestion and samples to jsfiddle. Thanks in advance.
<div id="wrapper">
<div id="WEtextarea"> </div>
<div id="WEimage_view"></div>
</div>
CSS controls size and all aspects of div.

I tried all your menu items... And did not notice such a bug.
So, while your're here... I have a suggestion to reduce your long script made of a small chunk repeated 12 times.
I would define the maps as objects, like this:
var maps = [
{
buttonId: "WEyear18000",
text: "Files/Docs/y18000.txt",
image: "Files/Image/treesimages/PalaeoGlaciolMaps.jpg"
},
{
// other 11 objects using the same structure...
}
];
And I would just add a class to each items, in the HTML, like this:
<div id="WEyear18000" class="BaseDiv RBoth OEWELinkButton OESK_WELinkButton_Default OECenterAH clickHandlerClass" style="z-index:1">
Then, I would use a shorter function like this one:
$(document).ready(function() {
$(".clickHandlerClass").click(function(){
// Get the id of the clicked menu item
var thisId = $(this).attr("id");
// Find its related object
var mapIndex = -1;
for(i=0;i<maps.length;i++){
if( maps[i].buttonId == thisId ){
mapIndex = i;
}
}
if(mapIndex != -1){
// Use the object infos in the page elements.
$("#WEtextarea").load(maps[mapIndex].text);
$('#WEimage_view').html('<img src="'+maps[mapIndex].image+'" >');
$('#WEee244f5837 .PullZone').click();
wheelzoom(document.querySelectorAll('img'));
}else{
console.log("Undefined map or id error...");
}
});
});
The array of objects is way easier to maintain... And an additional button easier to add.
You can use another class name than "clickHandlerClass".
;)

The wheelzoom looked like the only possible source of error to me. So I looked for its source, and found:
Wheelzoom replaces an img's background-image with its src. Then the src is set to a transparent image.
So, on the first wheelzoom, you get src transeparent, and on the second, you get a transparent background-image as well.
You can fix this by calling wheelzoom only on your new image:
$(document).ready(function() {
$("#WEyear18000").click(function() {
$("#WEtextarea").load("Files/Docs/y18000.txt");
$('#WEimage_view').html('<img src="Files/Image/treesimages/PalaeoGlaciolMaps.jpg" >');
$('#WEee244f5837 .PullZone').click();
//wheelzoom(document.querySelectorAll('img'));
wheelzoom(document.querySelectorAll('#WEimage_view img'));
});

to fix your bug you need to replace:
wheelzoom(document.querySelectorAll('img'));
with:
wheelzoom(document.querySelectorAll('#WEimage_view img'))
So only the images in the #WEimage_view will be affected by wheelzoom

Diagram: Div hover then Displays Image

ANSWERED: Updated Fiddle
I have a Diagram (a .png image) that is placed in a 350x350px square positioned in the centre of the window.
I then have 5 div boxes in a fixed position all around the window.
What I am trying to achieve is: the original Diagram will be visible, until the mouse hovers over a div box of written content to which will replace the original Diagram with a new Diagram in the exact same position as the original Diagram in the 350x350px square.
EDITED: What I am trying to achieve is: the original Diagram will be visible, until the mouse hovers over a div box of written content to which will replace the original Diagram with a new Diagram in the exact same position as the original Diagram in the 350x350px square.
Then once the mouse has left that Div box of written content the original Diagram is shown.
Would I just need to create an if statement reverting the display proptery back to none?
I have created this FIDDLE for a basic skeleton.
I thought I was on the right track using the jquery below, but I can not seem to get it to work?
Any input would be greatly appreciated.
JS
$(document).ready(function(){
var $diagram1 = $('.p1'),
$diagram2 = $('.p2'),
$diagram3 = $('.p3'),
$diagram4 = $('.p4'),
$diagram5 = $('.p5');
$('.content-1').hover(function(){
$diagram1.css(['display':'block']);
});
$('.content-2').hover(function(){
$diagram2.css(['display':'block']);
});
$('.content-3').hover(function(){
$diagram3.css(['display':'block']);
});
$('.content-4').hover(function(){
$diagram4.css(['display':'block']);
});
$('.content-5').hover(function(){
$diagram5.css(['display':'block']);
});
});

JS
$(document).ready(function(){
var $diagram1 = $('.p1'),
$diagram2 = $('.p2'),
$diagram3 = $('.p3'),
$diagram4 = $('.p4'),
$diagram5 = $('.p5'),
$image=$('.image_container img');
$('.content-1').mouseover(function(){
$diagram1.css('display','block');
}).mouseout(function() {
$diagram1.css('display','none');
});
$('.content-2').mouseover(function(){
$diagram2.css('display','block');
}).mouseout(function() {
$diagram2.css('display','none');
});
$('.content-3').mouseover(function(){
$diagram3.css('display','block');
}).mouseout(function() {
$diagram3.css('display','none');
});
$('.content-4').mouseover(function(){
$diagram4.css('display','block');
}).mouseout(function() {
$diagram4.css('display','none');
});
$('.content-5').mouseover(function(){
$diagram5.css('display','block');
}).mouseout(function() {
$diagram5.css('display','none');
});
});
The .css() api syntax was wrong it should be .css('display','block'); and not .css(['display':'block']);
You could use mouseover and mouseenter to have easy way of fullfilling your task instead of hover
JSFiddle-DEMO

you need to make other images invisible when you are hovering over a certain div. image 1, 2, 3, 4, 5. all are overlapping each other. if you take your mouse over image 2 then you need to make image 1,3,4,5 invisible. you can add the visibility: hidden in the jquery you made.
$('.content-1').hover(function(){
$diagram5.css(['display':'block']);
//get visibility code here
});
Hope this answers your question

First you have to change the css syntax then you have to hide all the other images before showing the correct one.
$(document).ready(function(){
var $diagram1 = $('.p1'),
$diagram2 = $('.p2'),
$diagram3 = $('.p3'),
$diagram4 = $('.p4'),
$diagram5 = $('.p5');
$('.content-1').hover(function(){
hide();
$diagram1.css('display','block');
});
$('.content-2').hover(function(){
hide();
$diagram2.css('display','block');
});
$('.content-3').hover(function(){
hide();
$diagram3.css('display','block');
});
$('.content-4').hover(function(){
hide();
$diagram4.css('display','block');
});
$('.content-5').hover(function(){
hide();
$diagram5.css('display','block');
});
function hide()
{
$(".p1,.p2,.p3,.p4,.p5").css("display","none");
}
});
DEMO

on
$diagram5.css(['display':'block']);
maybe it should be like this
$diagram5.css('display','block');
answered fiddle: http://jsfiddle.net/aswzen/4o6mn3pm/6/
and then to make it reversible you have to put the original state display on each block again, like a lamp switches. But if you do this using the display property, probably you're doing it wrong.
Full working filddle as you wish: http://jsfiddle.net/aswzen/4o6mn3pm/11/
but not recommended

The Change display to block using jquery has some problem.
Simply change
$diagram1.css(['display':'block']);
to
$diagram1.css("display", "block");
/**Working fiddle**/
Working fiddle here

To Set a CSS Property
$("p").css("background-color", "yellow");
To Set Multiple CSS Properties
To set multiple CSS properties, use the following syntax:
css({"propertyname":"value","propertyname":"value",...});
Detail
replace [] to {} like
$('.content-5').hover(function(){
$diagram5.css({'display':'block'});
});

Javascript onclick event firing for id but not for class

I'm fairly new to Javascript, and am trying to get an 'on click enlarge' kind of effect, where clicking on the enlarged image reduces it again. The enlarging happens by replacing the thumbnail by the original image. I also want to get a slideshow using images from my database later on.
In order to do that, I made a test where I replace the id which indicates enlarging is possible by a class and I also use a global variable so that I can keep a track of the url I'm using. Not sure this is the best practice but I haven't found a better solution.
The first part works fine, my image gets changed no problem, values are also updated according to the 'alert' statement. However, the second part, the one with the class never triggers.
What am I doing wrong (apart from the very likely numerous bad practices) ?
If instead of changing the class I change the id directly (replacing .image_enlarged by #image_enlarged, etc.), it seems to call the first function, the one with the id, yet outputs the updated id, which is rather confusing.
var old_url = "";
$(function(){
$('#imageid').on('click', function ()
{
if($(this).attr('class')!='image_enlarged'){
old_url = $(this).attr('src');
var new_url = removeURLPart($(this).attr('src'));
$(this).attr('src',new_url); //image does enlarge
$(this).attr('class',"image_enlarged");
$(this).attr('id',"");
alert($(this).attr('class')); //returns updated class
}
});
$('.image_enlarged').on('click', function (){
alert(1); //never triggered
$(this).attr('src',old_url);
$(this).attr('class',"");
$(this).attr('id',"imageid");
});
});
function removeURLPart(e){
var tmp = e;
var tmp1 = tmp.replace('thumbnails/thumbnails_small/','');
var tmp2 = tmp1.replace('thumbnails/thumbnails_medium/','');
var tmp3 = tmp2.replace('thumbnails/thumbnails_large/','');
return tmp3;
}
As for the html, it's really simple :
<figure>
<img src = "http://localhost/Project/test/thumbnails/thumbnails_small/image.jpg" id="imageid" />
<figcaption>Test + Price thing</figcaption>
</figure>
<script>
document.write('<script src="js/jquery-1.11.1.min.js"><\/script>');
</script>
<script type="text/javascript" src="http://localhost/Project/js/onclickenlarge.js"></script>

From the API: http://api.jquery.com/on/
The .on() method attaches event handlers to the currently selected
set of elements in the jQuery object.
When you do $('.image_enlarged').on(...) there is no element with that class. Therefore, the function is not registered in any element.
If you want to do so, then you have to register the event after changing the class.
Here's an example based on your code: http://jsfiddle.net/8401mLf4/
But this registers the event multiple times (every time you click) and it would be wrong. So I would do something like:
$('#imageid').on('click', function () {
if (!$(this).hasClass('image_enlarged')) {
/* enlarge */
} else {
/* restore */
}
}
JSfiddle: http://jsfiddle.net/8401mLf4/2/

Try using:
addClass('image-enlarged')
instead of:
.attr('class',"image_enlarged");
the best way to do this would be to have a small-image class and a large image class that would contain the desired css for both and then use addClass() and removeClass depending on which you wanted to show.

Click function on dynamic created elements that shows content of clicked element

I have created a search page that has on top and bottom page navigation. This is a simplified version just to show my problem:
$(function(){
$("select").on("click" , function(){
if ($(this).val() == 10){
var total_pages = 3;
}
else{
var total_pages = 5;
}
var pages = "";
for (var i = 1; i <= total_pages; i++) {
var pages = pages + "<span class='page'>" + i + "</span>";
}
$(".pagination").html(pages);
});
$("select").click();
$(".page").on("click" , function(){
alert($(this).text());
});
});
And you can try it yourself here:
JSFiddle
In this example you have 5 pages when you select 10 items per page and 3 pages for 20 results per page. But when you select an other value per page the alert function doesn't show up anymore. It seems that changes, after the document is loaded, are not being noticed by the document.ready function.
I searched and saw a lot of familiar questions and their solutions. I can imagine also some alternatives but not the one who can satisfy me. Because unfortunately I don't know now a simple solution without a lot of extra code with id's, classes, data-attributes etc. Who can contribute me some knowledge for a good solution?

That's because when you do this:
$(".pagination").html(pages);
You remove old DOM elements and it's "click" functions and replace it with new HTML.
Add this:
$(".page").on("click" , function(){
alert($(this).text());
});
right after first line I mentioned

Event delegation is a good practice when you deal with dynamic content. In your case, you can attach the click event to the parent.
I just tweaked one line in your original code:
$(".pagination").on("click" , ".page" , function(){
alert($(this).text());
});
Live demo: http://jsfiddle.net/zkDF4/6/

I have three "a" class's that change color when selected, but I need one to be default on load of page

I'm working on this project and I need to add this functionality where we have three products listed.
they started out as div's but changed them to ahref class's to link the entire area.
The box has to change color when hovered - which I have done.
The box needs to change to another color when clicked on - which I have also done.
The one thing I can't figure out is how to make the 2nd box default as selected but then have the color turn off when another one is selected
This is the javascript I have for the page.
var highlightLink = function () {
var active = null, colour = '#f6efa2';
if (this.attachEvent) this.attachEvent('onunload', function () {
active = null;
});
return function (element) {
if ((active != element) && element.style) {
if (active) active.style.backgroundColor = '';
element.style.backgroundColor = colour;
active = element;
}
};
}();
here is one of the boxs
<a class="productBox1" href="#" border="0" onclick="highlightLink(this);">
I'm thinking I need an onload function in the body tag but I don't know what code is needed and I also need it to become unselected when another box is selected.
Any help would be greatly appreciated.

If every link has it's own class anyway, use it as ID instead:
<a id="productBox1" href="#" border="0" onclick="highlightLink(this);">
Use classes for common properties. For identifying single elements, use IDs.
Then you can add this to the bottom of your page (above the closing <body> tag):
<script type="text/javascript">
highlightLink(document.getElementById('productBox1'));
</script>
or set
window.onload = function() {
highlightLink(document.getElementById('productBox1'));
}
in the <head>.

Sounds like you're making this more complicated than it really is. Try this (I'm assuming all your a tags have class productBox1):
$('.productBox1').click(function() {
$('.highlighted').removeClass('highlighted');
$(this).addClass('highlighted');
});
Then have a css class called highlighted which has background-color: #f6efa2.
You need jQuery in order to make this work properly.