We Keep Coding

Jquery toggle img attribute

I am trying to toggle images from the thumbnail to the feature image when the thumb nail is clicked. Currently when its clicked the images will swap but I cant get them to swap back with the thumb nail is clicked on again. I've tried using toggle but when the thumb nail is clicked on it would remove the image completely and I couldnt get any image to return. Currently this will switch the images but not switch or toggle them back on click.
$(".browseTable").on('click', 'td', function () {
var thumbNail = $(this).parent('tr').find('img').attr('src');
var feature = $('#featureImg img').attr('src');
$('#featureImg img').fadeOut(400, function () {
$(this).fadeIn(400)[0].src = thumbNail;
});
});

You can use data for store source string and toggling images
preview on : https://jsfiddle.net/5kxf65Lx/
<img src="source1.jpg" data-srcfirst="source1.jpg" data-srcsecond="source2.jpg" />
<script type="text/javascript">
$('img').click(function(){
var loaded = $(this).attr('src')
var first = $(this).data('srcfirst')
var second = $(this).data('srcsecond')
if(loaded == first){
$(this).attr('src' , second)
} else {
$(this).attr('src' , first)
}
})

Try this. When the parent is clicked we toggle both children. The large version starts off hidden.
<div class="toggle js-toggle">
<img src="http://www.placehold.it/100x100" alt="" class="toggle__thumb js-toggle-image"/>
<img src="http://www.placehold.it/500x500" alt="" class="toggle__active js-toggle-image" style="display: none" />
</div>
The jQuery
$('.js-toggle').on('click', function() {
$(this).find('.js-toggle-image').toggle();
});
https://jsfiddle.net/uoLv2nkh/1/
Or an only CSS way if you only care about when the user is clicking.
https://jsfiddle.net/uoLv2nkh/

You can achieve your target via setting src of image in css.
.imageOne{
content:url(YOUR SOURCE);
}
.imageTwo{
content:url(YOUR SOURCE);
}
add class to your image element in start
check if element exist by either class if exist toggle() to another, this will change the image back to another.
And use toggle() like following example
$(".browseTable").on('click', 'td', function () {
//var thumbNail = $(this).parent('tr').find('img').attr('src');
//var feature = $('#featureImg img').attr('src');
//$('#featureImg img').fadeOut(400, function () {
// $(this).fadeIn(400)[0].src = thumbNail;
//});
$('#featureImg img').find('.imageOne, .imageTwo').toggle();
});
I am able to use toggle simply to change one element to another. etc. hope it will help you.
Is it possible to set the equivalent of a src attribute of an img tag in CSS?

How to make an image popup on click?

So my incremental has come a long way, I got assistance here to make the original popup and it works great, now i really want to make the popup an image?
so far i have:
$("#coffeeButton").click(function(e) {
var obj = $("#clone").clone();
$("body").append(obj);
obj.html("+"+ cookRate);
coffee += cookRate;
totalCoffee += cookRate;
document.getElementById("coffee").innerHTML = prettify(coffee);
document.getElementById("totalCoffee").innerHTML = prettify(totalCoffee);
obj.css('position','absolute');
obj.offset({left: e.pageX-10, top: e.pageY-25});
obj.animate({"top": "-=80px"}, 1000, "linear", function() {
$(this).remove();
});
});
and it works great and gives me a popup, but how the hell do i make it an image?
I have tried creating a div, putting an image inside that div and instead of calling "clone" calling on the div...
Am i on the right track?
Example of what i want from cookie clicker - http://orteil.dashnet.org/cookieclicker/
my game so far - retiredgamers.net/
jsfiddle - http://jsfiddle.net/edznycyy/6/

There are probably a lot of ways you could do this. To keep things as close to what you have now as possible here's what I would do...essentially just create 2 elements the first being your numbers and the second being the image, make sure the number is above the image using css's z-index, then animate them both in tandem:
Here's a working jsfiddle
HTML changes:
<img title = "" id="myImg" src="http://blog.beautyfix.com/wp-content/uploads/2012/09/Coffee_iStock_000006160362Medium.jpg" style="display:none" width="30" height="30">
Javascript changes:
$("#coffeeButton").click(function(e) {
var obj = $("#clone").clone(); //im guessing you chose to use clone here to make it easier to work with the object, so I did the same for the image
var img = $("#myImg").clone();
$("body").append(obj);
$("body").append(img);
obj.html("+"+ cookRate);
coffee += cookRate;
totalCoffee += cookRate;
document.getElementById("coffee").innerHTML = prettify(coffee);
document.getElementById("totalCoffee").innerHTML = prettify(totalCoffee);
obj.css('position','absolute');
obj.css('z-index', '2');
img.css('position','absolute');
img.show();
obj.offset({left: e.pageX-10, top: e.pageY-25});
img.offset({left: e.pageX-10, top: e.pageY-25});
obj.animate({"top": "-=80px"}, 1000, "linear", function() {
$(this).remove();
});
img.animate({"top": "-=80px"}, 1000, "linear", function() {
$(this).remove();
});
});

if you don't want to the trouble of doing it your self, you can use a jquery plugin that does it quite easily. I am sure there is a lot more in the,
Here is what i found!
Here is the demo page for full-screan popup plugin
....
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="jquery.fullscreen-popup.js"></script>
....
<a class="open-popup" href="#popup">Open popup</a>
...
<div id="popup" style="display: none; width: 640px">
...
</div>
<script>
$(function() {
$(".open-popup").fullScreenPopup({
// Options
});
});
</script>
Example is from here and you can download the plugin from here and a list that contains many more

Open Expanding List from Href

I'm trying to modify this pen I found on CodePen. I'd like to be able to open a specific list on the page from another page. Clicking the link should open the corresponding section on the next page on page load.
I'm a bit of a newbie when it comes to jQuery, so I appreciate any help I can get. I've tried searching around and have an idea of what I need to target, but I haven't been able to make it happen. Here is my code:
HTML:
<!--Link on Previous Page-->
Click Here
<!--Target List-->
<div class="integration-list">
<ul>
<li class="integration">
<a class="expand" id="list">
<div class="expand_intro"><h3 class="teal_bold">Click Here</h3></div>
<div class="right-arrow">▼</div>
</a>
<div class="detail">
<div><p>Lorem Ipsum Dolor...</p></div>
</div>
</li>
</ul>
</div>
JS:
$(function() {
$(".expand").on( "click", function() {
$(this).next().slideToggle(100);
$expand = $(this).find(">:nth-child(2)");
if($expand.text() == "▼") {
$expand.text("▲");
} else {
$expand.text("▼");
}
var hash = window.location.hash;
var thash = hash.substring(hash.lastIndexOf('#'), hash.length);
$('.expand').find('a[href*='+ thash + ']').trigger('click');
});
});

Few things that I did to get it to work:
The trigger event is probably firing before the handler is actually attached. You can use setTimeout as a way around this.
Also, even with setTimeout around $('.expand').find('a[href*='+ thash + ']').trigger('click'); it didn't work for me. I changed that to simply $(thash).click();.
The complete code of the "expand.js" file:
$(function() {
var hash = window.location.hash;
var thash = hash.substring(hash.lastIndexOf('#'), hash.length);
setTimeout(function() {
$(thash).click();
}, 10);
$(".expand").on( "click", function() {
$(this).next().slideToggle(100);
$expand = $(this).find(">:nth-child(2)");
if($expand.text() == "â–¼") { //If you copy/paste, make sure to fix these arrows
$expand.text("â–²");
} else {
$expand.text("â–¼");
}
});
});
Apparently the arrows don't display properly here, so watch that if you copy/paste this.

I try to make it blink, but it won't work

I'm trying to create notifications system in my company's ERP, similar to Facebook one. For now, after few hours of work, it looks like this:
Each menu item is a lielement. Each element can have one of classes that will modify it's background color:
selected is blue, shown on a picture
restricted is red
Now, what I'm trying to achieve is to make li background blink on some events (when new message comes in and list is not opened (and also selectedclass is not present)).
The problem is: it won't blink. :(
here's snap of my html (excluding messagebox)
<li class="notifications-topmenu-button selected">
<a href="#">
<div class="notifications-topmenu-button-wrapper">
<div class="notifications-topmenu-button-icon">
<img class="transparent" width="13" height="13" align="absmiddle" src="/images/icons/notifications.png" title="Powiadomienia" alt="Powiadomienia">
</div>
<div class="notifications-topmenu-button-counter" style="display: block;">3</div>
</div>
</a>
<span class="divider"> : </span>
</li>
<li class="selected">
Strona główna
<span class="divider"> : </span>
</li>
Also, there's some JavaScript initiating object (don't mind comments):
function notificationsObject(){
var nl = new Object();
//atrybuty klasy
nl.liElement = $('.notifications-topmenu-button');
nl.menuButton = $('.notifications-topmenu-button-wrapper');
nl.menuButtonCounter = nl.menuButton.find('.notifications-topmenu-button-counter');
nl.notificationsCount = jQuery.trim(nl.menuButtonCounter.text());
nl.notificationsList = $('.notifications-list-wrapper');
nl.blinkingInterval = null;
nl.startBlinking = function(){
nl.blinkingInterval = setInterval(function(){
if(nl.liElement.hasClass('restricted') == false){
console.debug(nl.liElement.addClass('restricted'));
}
else {
nl.liElement.removeClass('restricted');
}
}, 1000);
}
nl.stopBlinking = function(){
if(nl.blinkingInterval != null) nl.blinkingInterval = null;
}
(more 'class' functions)
return nl;
}
Now to test it, I simply call
$(document).ready(function(){
var notifications = notificationsObject();
notifications.startBlinking();
});
Of course I call it after function declaration.
funny fact is that when I change nl.startBlinking function setInterval internals to only add restrictedclass, it works. I'm pretty sure it must be some typo or stupid error, but I can't find it.
Please, help!

Try to use the toggleClass function instead of checking classes yourself like:
setInterval(function(){
nl.liElement.toggleClass('restricted');
}, 1000);
jQuery reference: http://api.jquery.com/toggleClass/

I put all your code into a Fiddle here and it worked. Not sure what the problem is.
added css
.restricted{
visibility:hidden;
}
Also removed (more 'class' functions) line. But I assume you just added that to the post and it's not part of your code.

Ok, problem solved.
the thing was that this function
nl.startBlinking = function(){
nl.blinkingInterval = setInterval(function(){
if(nl.liElement.hasClass('restricted') == false){
console.debug(nl.liElement.addClass('restricted'));
}
else {
nl.liElement.removeClass('restricted');
}
}, 1000);
}
started executing on declaration.
so when I called
$(document).ready(function(){
var notifications = notificationsObject();
notifications.startBlinking();
});
I had not one, but two intervals working at the same time.

Add and remove the 2 classes in stead of only restricted
if(nl.liElement.hasClass('restricted') == false){
nl.liElement.addClass('restricted');
nl.liElement.removeClass('selected');
}
else {
nl.liElement.removeClass('restricted');
nl.liElement.addClass('selected');
}

jquery mouseenter fires continuosly

I have a mousenter/mouseleave function that swaps out content when the element is being hovered over. however instead of it firing only on mouseenter it seems to keep continuously firing. I have created a jsfiddle here so hopefully it will be easier to understand.

Inside your rotate_start() and rotate_reset() functions you are triggering a hover event via this line:
jq('.product-image-container',super_prod).attr('hover','true');
Per JQuery docs, hover() method binds handlers for both mouseenter and mouseleave events. You're basically applying recursion unintentionally, as hover is fired as the mouse moves.
A simple fix for this is to replace .attr('hover','true'); with .data('hover',true);
Here is a scalable solution which should accomplish your objective:
HTML:
<div class="item">
<ul>
<li>
Main product photo
</li>
<li>
Alternate product photo 1
</li>
<li>
Alternate product photo 2
</li>
<li>
Alternate product photo 3
</li>
</ul>
</div>
CSS:
.item {
width:200px;
height:200px;
background-color:#F0F0F0;
border:1px solid #666;
}
.item ul li {
display:none;
}
JQuery:
var jq = jQuery.noConflict();
var timers = [];
var interval_seconds = 2;
jq('.item').mouseenter(function() {
// Scope this
var _this = jq(this);
// Self-executing function
(function cycle() {
// Recursive setTimeout accommodates for animation time - setInterval wont
timers['item'] = setTimeout(function() {
// Grab the currently visible photo, and the next photo
var _this_li = _this.find('li:visible');
var _next_li = _this_li.next();
// If there is no next photo, cycle back to first photo
if (_next_li.length == 0) {
_next_li = _this.find('li:first-child');
}
// Animate the rotation
_this_li.fadeOut('slow', function() {
_next_li.fadeIn('slow', function() {
// Recursion
cycle();
});
});
}, interval_seconds * 1000);
})();
});
jq('.item').mouseleave(function() {
// Stop the recursive setTimeout
clearTimeout(timers['item']);
// Scope this
var _this = jq(this);
// Grab the first photo in the list
var _first_li = _this.find('li:first-child');
// If the first photo in the list is not the currently visible photo, make it so.
if (_first_li.not(':visible')) {
_this.find('li:visible').fadeOut('slow', function() {
_first_li.fadeIn('slow');
});
}
});
jq(function() {
// Show the first photo on load
jq('.item').find('li:first-child').fadeIn('slow');
});
Demo: http://jsfiddle.net/AlienWebguy/EY8mM/1/