We Keep Coding

Product Zoom Effect WooCommerce

Im trying to create a zoom effect like this http://jsfiddle.net/SWDhG/
But I'm trying to open the <a href="imglink"> link not the <img src=""> tag, so i need som help with jquery.
html:
<div class="images">
<a href="http://us.123rf.com/400wm/400/400/teddy2007b/teddy2007b0903/
teddy2007b0903‌​00008/4539531-cup-and-bouquet-of-flowers-decorative-floral-
background-for-banner-‌​vector.jpg" class="zoom" title="">
<img src="http://3.bp.blogspot.com/-BKBDFTVyTVs/TdmU9SuHU5I/AAAAAAAAASk/
e7oUIN34cc4/s‌​320/blue+salvia.jpg" class="attachment-shop_single wp-post-image"/>
</a>
</div>
This is the original code
$(function() {
$('li a').click(function() {
$('div img').attr('src', $(this).find('img').attr('src'));
$('div').show();
return false;
});
$('div').mousemove(function(e){
var h = $(this).find('img').height();
var vptHeight = $(document).height();
var y = -((h - vptHeight)/vptHeight) * e.pageY;
$('div img').css('top', y + "px");
});
$('div').click(function(){
$('div').hide();
});
});

http://jsfiddle.net/SWDhG/36/
Here's a fiddle that does what you want.
$(function() {
$('li a').click(function() {
//here's the change -->
$('div img').attr('src', $(this).attr('href'));
// we change the information we take from the element to the
// href attribute of the element, $(this), which is assigned
// to the element that caused the event, the anchor tag
$('div').show();
return false;
});
$('div').mousemove(function(e){
var h = $(this).find('img').height();
var vptHeight = $(document).height();
var y = -((h - vptHeight)/vptHeight) * e.pageY;
$('div img').css('top', y + "px");
});
$('div').click(function(){
$('div').hide();
});
});
I used my own demo image href attribute for the sake of brevity.

To get the hyperlink address:
$('li a').click(function() {
var link = $(this).attr('href');
// do something with it
return false;
});

Add class active when clicking the menu link with Jquery

I have HTML
<div id="top" class="shadow">
<ul class="gprc">
<li>Home</li>
<li>Text1</li>
<li>Text2</li>
<li>Text3</li>
<li>Text4</li>
</ul>
</div>
and JQUERY
$(function () {
var url = window.location.pathname,
urlRegExp = new RegExp(url.replace(/\/$/, '') + "$");
$('#top a').each(function () {
if (urlRegExp.test(this.href.replace(/\/$/, ''))) {
$(this).addClass('active');
}
});
});
The problem is that when i click on the Home link all tabs are getting active class and don't understand why. I need it for the first link to not get any active class.

I'm also looking for this solution and I have tested your code. On the first approach all links are highlighted and when I click other links it is working properly. The problem was on the home page because all links are highlighted because there is "no event been received" when the page is loaded, the code will work if you send a command or by clicking each links, theoretically. To stop this behavior, I found this code to one of the answers above, add this code and change the ".sibling()" to ".previousSibling()"
$(this).parent().sibling().find('a').removeClass('active');
".sibling()" will highlighted at the end of your links change it to ".previousSibling()" so it will go to first (Li)
$(this).parent().previoussibling().find('a').removeClass('active');
Your code will be like this:
$(function () {
var url = window.location.pathname,
urlRegExp = new RegExp(url.replace(/\/$/, '') + "$");
$('#top a').each(function () {
if (urlRegExp.test(this.href.replace(/\/$/, ''))) {
$(this).addClass('active');
$(this).parent().previoussibling().find('a').removeClass('active');
}
});
});

Check this , this will only activates clicked tab , remove active for all and then add for the one clicked
$("#top a").click(function() {
$('a').removeClass('active');
$(this).addClass("active");
});
Check this

You may try this out. It will help you:
<script type="text/javascript">
$(function () {
$('#sidebar li a').each(function () {
var path = window.location.pathname;
if (path.indexOf('?') > 0) {
var current = path.indexOf('?');
}
else {
var current = path;
}
var url = $(this).attr('href');
var currenturl = url.substring(url.lastIndexOf('.') + 1);
if (currenturl.toLowerCase() == current.toLowerCase()) {
$(this).addClass('active');
var par = $(this).parent();
par.addClass('open');
}
});
});
</script>

You're running a foreach loop on all <a> tags within your #top div. So of course it'll add the class active to all of them.
I think what you're trying to do is this: http://jsfiddle.net/rLddf/4/
I used the click event instead.
edit switched link to Kristof Feys example - more efficient.

try this...
$(function() {
$('#yourMenu a').each(function(){
$current = location.href;
$target= $(this).attr('href');
if ( $target== $current)
{
$(this).addClass('active');
}
});
});

I came across the same issue and I found it easier to just add an additional if statement so that the function would fire on all pages except the home page which met my needs.
$(function(){
var url = window.location.pathname,
urlRegExp = new RegExp(url.replace(/\/$/,'') + "$");
$('#top a').each(function(){
if ( window.location.pathname != '/' ){
if(urlRegExp.test(this.href.replace(/\/$/,''))){
$(this).addClass('active');
}
}
});
});
You could also add in an else statement to show an active link on the homepage by targeting the link directly if required.

I think you need something like this:
$(function () {
$("#top a").click(function(e){
e.preventDefault();
$(this).addClass('active');
$(this).parent().siblings().find('a').removeClass('active');
});
});
Fiddle Demo

Add class to <li> when clicking on a link

That's the html of my menu:
<ul class="nav">
<li>A</li>
<li><a href="#b" >B</a></li>
<li><a href="#c" >C</a></li>
<li><a href="#d" >D</a></li>
</ul>
I want that, after I clicked on a link in the menu, the active class will be added to the clicked <li>.
Thanks in advance

Use jquery
$("li a").click(function() {
$('li a').not(this).removeClass('active');
$(this).toggleClass('active');
});
DEMO Updated

He is not asking for a jQuery solution. But that jQuery would be the ideal choice, here is how to do it with javascript, best practices, event delegation and modern. Perhaps someone learns something new from it as well.
http://jsfiddle.net/N9Hem/
window.onload = function(){
(function(){
var els = [];
var doc = document;
var get = function(id){return doc.getElementById(id);};
get('clickable').onclick = function(evt){
evt = evt || window.event;
var el = evt.target || evt.srcElement;
els = doc.querySelectorAll('#clickable a');
if(el.nodeName == "A"){
for(var i = els.length - 1; i >= 0; i -= 1){
els[i].className = '';
};
el.className = 'active';
};
};
})();
};

If you use jQuery then you could use code like this:
$(function () {
$(".nav a").click(function () {
$(".nav a").removeClass("active");
$(this).addClass("active");
});
});

Try this with jQuery
$('#nav li a').click(function(){
$('#nav li a').removeClass('active');
$(this).addClass('active');
});

Here is a prototype that doesn't use jquery as you didn't request it on your question.
It searches for the current element with the active class, remove it and add the class to the clicked one.
Javasript Function
function activeThis(element){
var current = document.getElementsByClassName("active")[0];
current.className = null;
element.className="active";
}
HTML code
<a href="#b" onclick="activeThis(this)">

I hope I got what you want... I add eventHandlers to <ul>. On click remove clicked from previous elem and set clicked-class (if current class is active??)
<ul class="nav">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
<script>
var clickedElem = null;
document.getElementsByClassName("nav")[0].addEventListener("click", function (e) {
if (clickedElem)
clickedElem.removeAttribute("class");
// check if e.srcElement.className is active?? that's what you want?
e.srcElement.className = "clicked";
clickedElem = e.srcElement;
});
</script>

This one should works for you
elems =document.getElementsByClassName("nav")[0].getElementsByTagName("a");
for (var i = 0; i < elems.length; i++) {
elems[i].addEventListener("click", function (e) {
for (var i = 0; i < elems.length; i++) {
elems[i].className="";
};
this.className = "active";
});
}

I guess this will work
var navlinks = document.getElementByClass('nav').getElementsByTagName('a');
for (var i = 0; i < navlinks.length; i++) {
if(navlinks[i].className == 'active'){
navlinks[i].parentNode.parentNode.parentNode.className = 'YOUR CLASS';
}
}

Check my fiddle
I hope this is what you want
http://jsfiddle.net/arunberti/ftZzs/
a:visited
{
color:green;
}
a:active {color:yellow;}
a:link {color:red;}

Try this:
$('.nav li').click(function(e) {
$(this).addClass('selected').siblings().removeClass('selected');
});
Alternatively, if you want to attach the click event to the a:
$('.nav a').click(function(e) {
e.preventDefault();
$('.nav a').removeClass('selected');
$(this).addClass('selected');
});
Example fiddle

thats quite easy
jQuery CODE:
$('.nav li a').on('click',function(){
$('.nav li').each(function() {
var anc=$(this).find('a');
if(anc.hasClass('active'))
{
$(anc).removeClass('active');
}
})
$(this).addClass('active');
})
Edited:
Code is refined
Happy Coding :)

How can I add fade effect to this jQuery Image Swap Gallery

I was wondering how can I add a fade effect when hovering using this example http://www.designchemical.com/lab/jquery/demo/jquery_demo_image_swap_gallery.htm
I was wondering if its possible to achieve something like this www.bungie.net
Here's the code used in the example
$(document).ready(function() {
// Image swap on hover
$("#gallery li img").hover(function(){
$('#main-img').attr('src',$(this).attr('src').replace('thumb/', ''));
});
// Image preload
var imgSwap = [];
$("#gallery li img").each(function(){
imgUrl = this.src.replace('thumb/', '');
imgSwap.push(imgUrl);
});
$(imgSwap).preload();
});
$.fn.preload = function() {
this.each(function(){
$('<img/>')[0].src = this;
});
}

I used bruchowski's code which worked great for me. I did change .hover to .mouseover because I was getting a double fade effect when mousing out and I just wanted the last moused over image to stick.
I'm also very new to jquery and at first pasted it in the wrong place. Once I placed it directly before $(imgSwap).preload(); it worked.
And I slowed the fade down.
So my code is as follows:
<script type="text/JavaScript">
// prepare the form when the DOM is ready
$(document).ready(function() {
$("#gallery li img").hover(function(){
$('#main-img').attr('src',$(this).attr('src').replace('thumb/', ''));
});
var imgSwap = [];
$("#gallery li img").each(function(){
imgUrl = this.src.replace('thumb/', '');
imgSwap.push(imgUrl);
});
$("#gallery li img").mouseover(function(){
if ($("#main-img:animated").length){
$("#main-img:animated").stop();
}
$("#main-img").css("opacity", "0").animate({"opacity":"1"}, 1400);
}); $(imgSwap).preload();
});
$.fn.preload = function() {
this.each(function(){
$('<img/>')[0].src = this;
});
}
</script>
Thanks!!!

This is a quick solution (you would add this to their existing code, do not edit what they already have)
$("#gallery li img").hover(function(){
if ($("#main-img:animated").length){
$("#main-img:animated").stop();
}
$("#main-img").css("opacity", "0").animate({"opacity":"1"}, 300);
});

In this part of the code that is like this in their example
$("#gallery li img").hover(function(){
$('#main-img').attr('src',$(this).attr('src').replace('thumb/', ''));
});
Change to
$("#gallery li img").hover(function(){
$('#main-img').attr('src',$(this)
.fadeOut('fast')
.attr('src').replace('thumb/', ''));
});

jQuery toggling an animation (with an image too)

I want to toggle two separate properties on a click event:
1) An image within a div - toggling the src attribute
2) The absolute positioning of the div - toggling the animate("top":"0px") bit
Here's the HTML
<div id="emailme">
<a id="email" href="mailto:xxx#gmail.com">xxx#gmail.com</a>
<div id="emailmecopy">email me</div>
<img id="emaildown"src="images/downbutton.png">
</div>
Now I've sorted the src toggling, but can't work out how to toggle the animation bit:
$("#emailme img").on({
'click': function() {
var src = ($(this).attr('src') === 'images/downbutton.png')
? 'images/upbutton.png'
: 'images/downbutton.png';
$(this).attr('src', src); //THIS TOGGLES THE IMAGE SRC
//BUT WHAT DO I PUT HERE TO TOGGLE ANIMATE BETWEEN ("top":"0px") and
//("top":"-50px") IN THE SAME CLICK??
}
});
Any help much appreciated!

if($("#emailme img").css('top') == '0px'){
$("#emailme img").stop().animate({top:'-50px'},1000);
};
if($("#emailme img").css('top') == '-50px'){
$("#emailme img").stop().animate({top:'0px'},1000);
};
also check this out:
$('body').on('click', '#emailme img', function (e){
$(this).attr('src', $(this).attr('src')=='images/downbutton.png'?'images/upbutton.png':'images/downbutton.png');
if($(this).css('top') == '0px'){
$(this).stop().animate({top:'-50px'},1000);
};
if($(this).css('top') == '-50px'){
$(this).stop().animate({top:'0pg'},1000);
};
});

If you refactor your code a bit you can do it like this. I suppose this is what you were looking for...
$("#emailme img").on({
'click': function() {
var $this = $(this);
var src = $this.attr('src');
var isUp = src === 'images/upbutton.png';
var newSrc = 'images/'+ (isUp ? 'downbutton' : 'upbutton') +'.png';
$this.attr('src', newSrc)
.animate({ top: (isUp ? '-50' : '0') +'px' });
}
});