Develop Reference

jQuery function does not work on mouseover and click state

Building a new site and trying to reuse a JavaScript from the current site that change image on hover. I have a hard time to understand JavaScript so I hope someone can help me to see what I'm missing or doing wrong.
The current site (where I copied from) has many more script running and I don't know if some other script is missing. I have tried to change the initializing part of the script to fit the new site. Please have a look at the puzzlepiece on the current page. http://www.collyfiltreringsteknik.se.
I have got the script running to a point where it adds the four "quad" divs but the mouseover and click function does not work.
This is the html code
<div id="companyvalues" class="clearfix">
<div class="valueimage"></div>
</div>
The jQuery part
(function($){
$.fn.extend({
companyvalues: function(kwargs) {
var defaults = {
static_base:''
};
var options = $.extend(defaults, kwargs);
return this.each(function() {
var obj = $(this);
var div = $('div', obj);
var topleft = $('<div class="quad topleft" data-image="i0000" data-href="/grundpelare/tillganglighet/"></div>');
var topright = $('<div class="quad topright" data-image="i0003" data-href="/grundpelare/konkurrenskraft/"></div>');
var bottomleft = $('<div class="quad bottomleft" data-image="i0002" data-href="/grundpelare/miljoforbattring/"></div>');
var bottomright = $('<div class="quad bottomright" data-image="i0001" data-href="/grundpelare/kostnadsreducering/"></div>');
obj.prepend(bottomright);
obj.prepend(bottomleft);
obj.prepend(topright);
obj.prepend(topleft);
var divs = $('div.quad', obj);
$([ '/uploads/pages/varden_0000_yellow.png',
'/uploads/pages/varden_0001_red.png',
'/uploads/pages/varden_0002_green.png',
'/uploads/pages/varden_0003_blue.png'
]).preload({base_url:options.static_base});
divs.mouseover(function(event) {
var item = $(this);
var data_image = item.attr('data-image');
div.addClass(data_image);
event.preventDefault();
event.stopPropagation();
});
divs.mouseout(function(event) {
var item = $(this);
div.removeClass('i0000');
div.removeClass('i0001');
div.removeClass('i0002');
div.removeClass('i0003');
event.preventDefault();
event.stopPropagation();
});
divs.click(function(event) {
var item = $(this);
var href = item.attr('data-href')
document.location.href=href;
event.preventDefault();
event.stopPropagation();
});
});
}
});
})(jQuery);
Initializing the script.
$(document).ready(function() {
$('#companyvalues').companyvalues();
});

How to make a thumbnail created by a function clickable in html?

I am trying to make clickable thumbnails in my html code but I cannot figure out how to do it. I know <a href = ""> won't work. How can I make each thumbnail clickable so that it directs to another page?
Here are the functions I used to get data from the database and to create the thumbnail
`
<script>
$(function(){
$.ajax({
url: '/getMovies',
type: 'GET',
success:function(response) {
console.log(response);
var data = JSON.parse(response);
var itemsPerRow = 0;
var div = $('<div>').attr('class','row');
for(var i=0;i<data.length;i++){
console.log(data[i].Title);
if(itemsPerRow<3){
console.log(i);
if(i==data.length-1){
div.append(CreateThumb(data[i].Id,data[i].Name,data[i].Type,data[i].Copies));
$('.well').append(div);
}
else{
div.append(CreateThumb(data[i].Id,data[i].Name,data[i].Type,data[i].Copies));
itemsPerRow++;
}
}
else{
$('.well').append(div);
div = $('<div>').attr('class','row');
div.append(CreateThumb(data[i].Id,data[i].Name,data[i].Type,data[i].Copies));
if(i==data.length-1){
$('.well').append(div);
}
itemsPerRow = 1;
}
}
},
error:function(error){
console.log(error);
}
});
});
})
function CreateThumb(id,name,type,copies){
var mainDiv = $('<div>').attr('class','col-sm-4 col-md-4');
var thumbNail = $('<div>').attr('class','thumbnail');
var caption = $('<div>').attr('class','caption');
var title = $('<h3>').text(name);
var title = $('<h5>').text(type);
var title = $('<h4>').text(copies);
var p = $('<p>');
caption.append(name);
caption.append(p);
caption.append(type);
thumbNail.append(caption);
mainDiv.append(thumbNail);
return mainDiv;
}
</script>
`.

After you've added the thumbnails use:
$(".thumbnail").onclick(function(){
document.location.href = newUrl;
}

You can listen to clicks with jQuery by using:
// Change the selector used below
$('#some-id-here').click(function(){
// Your code here
});
There's also another way, using "on". This might be more useful to you, because it also triggers on items added dynamically to the page, which looks to be your case.
// Change the selector used below
$('#some-id-here').on('click', 'img', function(){
// Your code here.
});
Also, you can select the document with $(document) (instead of #some-id-here) to apply it globally on your page, so every img tag would trigger this function.

How to prevent Wordpress built-in “browse link” entering the data in wp-editor

Working with Wordpress Meta Box and I used the code of Dale Sattler from this How can I use the built in Wordpress “browse link” functionality? to create a custom field with wp browse link it works fine, but it inserted the data in wp-editor too.
I try to prevent the default event using code here Use WordPress link insert dialog in metabox? but doesn't work, I try that code too but it have a bug too.
here is my code
var _link_sideload = false; //used to track whether or not the link dialogue actually existed on this page, ie was wp_editor invoked.
var link_btn = (function($){
'use strict';
var _link_sideload = false; //used to track whether or not the link dialogue actually existed on this page, ie was wp_editor invoked.
var input_field = '';
/* PRIVATE METHODS
-------------------------------------------------------------- */
//add event listeners
function _init() {
$('body').on('click', '.link-btn', function(event) {
_addLinkListeners();
_link_sideload = false;
input_field = $(this).attr('href');
var link_val_container = $(input_field);
if ( typeof wpActiveEditor != 'undefined') {
wpLink.open();
wpLink.textarea = $(link_val_container);
} else {
window.wpActiveEditor = true;
_link_sideload = true;
wpLink.open();
wpLink.textarea = $(link_val_container);
}
return false;
});
}
/* LINK EDITOR EVENT HACKS
-------------------------------------------------------------- */
function _addLinkListeners() {
$('body').on('click', '#wp-link-submit', function(event) {
var linkAtts = wpLink.getAttrs();
console.log(linkAtts);
var link_val_container = $(input_field);
link_val_container.val(linkAtts.href);
_removeLinkListeners();
return false;
});
$('body').on('click', '#wp-link-cancel', function(event) {
_removeLinkListeners();
return false;
});
}
function _removeLinkListeners() {
if(_link_sideload){
if ( typeof wpActiveEditor != 'undefined') {
wpActiveEditor = undefined;
}
}
wpLink.close();
wpLink.textarea = $('html');//focus on document
$('body').off('click', '#wp-link-submit');
$('body').off('click', '#wp-link-cancel');
}
/* PUBLIC ACCESSOR METHODS
-------------------------------------------------------------- */
return {
init: _init,
};
})(jQuery);
please help, please ....

Ok I think I found a way to remove the link from the content. In your submit event you need to add:
$('body').on('click', '#wp-link-submit', function(event) {
var linkAtts = wpLink.getAttrs();
var link_val_container = $(input_field);
link_val_container.val(linkAtts.href);
var $frame = $('#content_ifr'),
$added_links = $frame.contents().find("a[data-mce-href]");
$added_links.each(function(){
if ($(this).attr('href') === linkAtts.href) {
$(this).remove();
}
});
_removeLinkListeners();
return false;
});
$('#content_ifr') is the iframe that loads tinymce editor with content inside. Since the iframe is loaded from the same domain you can mess around it (luckily). So you just go through its contents and you're looking for anchors that have data attribute called mce-href, and if the link that you've just added has the href value as the one you've added it removes them.
I re did this part of the code because I've noticed that all the links in my content had this attribute so you cannot just remove all anchors that have
data-mce-href attribute because that would remove all of them. And you only want to remove those you've added in your metabox.
This did the trick for me :)

How to toggle an animation upon clicking a button

I have the following j-query code (using the jquery plugin ajax/libs/jquery/1.10.1) to move a div element to the left upon clicking on a separate div element:
<script>
$(document).ready(function(){
$("#tab_box3").click(function(){
$.fx.speeds._default = 800;
$("#tab3").animate({left:"+=97%"});
});
});
</script>
What I want to happen is when the #tab_box3 div is clicked on a second time, the #tab3 div moves back to where it originally started.
I tried the following, using Toggle, but it does not seem to have worked:
<script>
$(document).ready(function(){
$("#tab_box3").click(function(){
$.fx.speeds._default = 800;
$("#tab3").animateToggle({left:"+=97%"});
});
});
</script>
Can anyone offer advice please?

You must doing something like this :
$(document).ready(function(){
$("#tab_box3").click(function(e){
var element = $(this),
clicked = parseInt(element.data('clicked')) || 0;
element.data('clicked', clicked + 1);
$("#tab3").stop();
if (clicked % 2 == 0)
{
$("#tab3").animate({left:"+=97%"}, 800);
}
else
{
$("#tab3").animate({left:"-=97%"}, 800);
}
e.preventDefault();
});
});
An example here :
http://jsfiddle.net/Q5HDu/

You will have to use -=97% to offset the previous animation change.
var $tab3 = $("#tab3");
if ($tab3.data("animated")) {
$tab3.animate({left: "-=97%").data("animated", false);
}
else {
$tab3.animate({left: "+=97%").data("animated", true);
}

Native Javascript Alert - style override remove new line functionality

I am using a simple jQuery plugin to style my javascript alerts. The problem being the usual methods for adding new lines does not appear to work. Here is the javascript for the plugin, any ideas?
(function($) {
$.fn.customAlert = function(options) {
var settings = {
'alertTitle' : 'Notice!',
'alertOk' : 'OK',
'alertClose' : 'x',
'draggable' : false
};
if (options) $.extend(settings, options);
if(document.getElementById) {
window.defaultAlert = window.alert;
window.alert = function(msgTxt) {
if ($('#modalDiv').length > 0) return; // Only ever show one alert
// The modal div to block out the rest of the document whilst the alert is shown
var modalDiv = $('<div></div>');
modalDiv.attr('id', 'modalDiv');
modalDiv.height($(document).height()); // Make overlay cover the whole window
// The alert container
var alertDiv = $('<div></div>');
alertDiv.attr('id', 'alertDiv');
// The alert title
var titleH1 = $('<h1></h1>');
titleH1.addClass('titleH1');
titleH1.text(settings.alertTitle);
// The alert text to display
var msgP = $('<p></p>');
msgP.text(msgTxt);
// OK button - will remove/close the alert on click
var okBtn = $('<a></a>');
okBtn.addClass('okBtn');
okBtn.text(settings.alertOk);
okBtn.attr('href', '#');
// X button - will remove/close the alert on click
var closeBtn = $('<span></span>');
closeBtn.addClass('alert-close');
closeBtn.text(settings.alertClose);
// Append elements to document body
alertDiv.append(titleH1);
alertDiv.append(msgP);
alertDiv.append(okBtn);
alertDiv.append(closeBtn);
$('body').append(modalDiv);
$('body').append(alertDiv);
// Center alert on page
$('#alertDiv').css('top', ($(window).height()/2) - ($('#alertDiv').height()/2)+'px');
$('#alertDiv').css('left', ($(window).width()/2) - ($('#alertDiv').width()/2)+'px');
// Make draggable
if (settings.draggable && $('#alertDiv').draggable) {
$('#alertDiv').draggable({
handle: 'h1',
opacity: 0.4
});
$('#alertDiv h1').css('cursor', 'move');
}
// Bind OK button to remove/close alert
$('#alertDiv .okBtn, #alertDiv .alert-close').bind('click', function(e) {
$('#alertDiv').remove();
$('#modalDiv').remove();
e.preventDefault();
});
};
}
};
})(jQuery);
I am guessing its a case of in this above finding /n and adding a <br> or </p><p>. I am unsure how to do that if even possible though.

Change this line:
msgP.text(msgTxt);
to
msgP.html(msgTxt);
and I think then you can use <br /> and other html tags.