I have some javascript that I am using for some audio on my website:
<script type="text/javascript">
$(function() {
var a = audiojs.createAll({
trackEnded: function() {
var next = $("ul li.cow").next();
if (!next.length) next = $("ul li").first();
next.addClass("cow").siblings().removeClass("cow");
audio.load($("a", next).attr("duck"));
audio.play();
}
});
var audio = a[0];
first = $("ul a").attr("duck");
$("ul li").first().addClass("cow");
audio.load(first);
$("ul li").click(function(e) {
e.preventDefault();
$(this).addClass("cow").siblings().removeClass("cow");
audio.load($('a', this).attr('duck'));
audio.play();
});
});
</script>
What I'd like to do is add ".mp3" after the attribute "duck"...how do I do that? *Attribute "duck" appears three times and I would like to add the extension ".mp3" after all three :)
Thanks,
Josh
To change their attributes:
$("ul a").each(function(){
$(this).attr("duck", $(this).attr("duck") + ".mp3");
});
To change the string only:
first = $("ul a").attr("duck") + ".mp3";
I guess you're asking about simple string addition? Then just add
+ ".mp3"
after each attr('duck')
Related
I have five anchor elements in my navigation. I want to get index of clicked element with jQuery. I tried this code.
$('.navigation ul li a').click(function(e) {
e.preventDefault();
var el = $(this).index();
console.log(el);
})
But every time I get zero in console.
https://jsfiddle.net/2hg2fkda/ fiddle is here.
Any help will be appreciated. Thanks,
try this:
$('.navigation ul li').click(function(e) {
e.preventDefault();
var el = $(this).index();
console.log(el);
})
Index can be fetched if its list .
Replace your code here -
var el = $(this).parent().index();
LIVE https://jsfiddle.net/mailmerohit5/hg0dqnxb/
you can try this one:
$('.navigation ul li ').click(function (e) {
alert($(this).index());
});
DEMO
you can also try this!!
var el = $(this).closest('li').index();
Demo
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
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/', ''));
});
I have a jquery function that when a li is clicked, the li expands. That part is working fine. Now, I want, when the li is clicked it toggles a background color. But it works, however when i have to click on the li item again to untoggle the background color. Can someone assist me in the right direction on how to achieve this.
$(function() {
$('.a').click(function() {
var name = $(this).attr("name");
var content = $('.content[name=' + name + ']');
$('.content').not(content).hide('fast');
$('.selected').css('background', 'yellow');
content.slideToggle('fast');
});
$("li").click(function() {
$(this).toggleClass("highlight");
});
});
On every click set your <li>-s to default color and highlight the current:
$("li").click(function() {
$("li").removeClass("highlight");
$(this).addClass("highlight");
});
...
UPDATE
http://jsfiddle.net/NXVhE/4/
$(function() {
$('.a').click(function() {
$(this).removeClass("highlight");
var name = $(this).attr("name");
var content = $('.content[name=' + name + ']');
$('.content').not(content).hide();
content.toggle();
});
$("a").click(function () {
$("a").removeClass("highlight");
if ( $(".content").is(":visible") ) {
$(this).addClass("highlight");
}
});
});
Assuming the <li>s are all siblings, it would be slightly more efficient to do something like this, and would allow for more than one list on the same page to function independently of one another (again, assuming that is the desired functionality)
$('li').click(function() {
$('this').addClass('highlight').siblings().removeClass('highlight').
});
I'm trying to do this in javascript but more optimized and with toggle function working !
My js code :
$(document).ready(function() {
$('a.details').click(function(e){
var id= '';
$('a.details').each(function() {
id = $(this).attr('href');
$('#'+id).hide();
});
$(this).addClass('active');
id = $(this).attr('href');
$('#'+id).toggle();
e.preventDefault();
});
});
Here is my take on this WITHOUT changing the html except for adding a t to the ID of the rows
http://jsfiddle.net/mplungjan/Rfn8z/
Comments welcome (especially if voting down)
$(document).ready(function() {
$('a.details').each(function() {
var tr = $("#t"+parseInt($(this).html()));
var link = this;
$(this).toggle(
function(e){tr.show(); $(this).addClass('active'); e.preventDefault();},
function(e){tr.hide(); $(this).removeClass('active');e.preventDefault();}
);
});
});
Terrible way of doing things. Instead take a look at this:
http://jsfiddle.net/xzpkq/
Maybe you will be inspired to produce better code