Highlight an element within the target element of an anchor? - javascript

I'm currently using the following to attempt to highlight an element (div.box) that is inside the targeted element of an anchor (example, section#help). The anchor is used to scroll to #help, but I only need to highlight the div.box that is in the #help.
$(document).ready(function() {
$(".box").removeClass("highlightTarget");
var myLocation = document.location.hash.replace("#","");
if (myLocation) {
document.getElementById(myLocation).className = "highlightTarget";
}
$("a").click(function () {
$(".box").removeClass("highlightTarget");
var clickedLink = this.href.split("#");
if (clickedLink.length > 1) {
document.getElementById(clickedLink[1]).className = "highlightTarget";
}
});
});
Together with the css:
.highlightTarget {background:red}
Currently, my code changes the background of the section#help red. What am I doing wrong?
Any assistance is much appreciated.

what you for is the .box element inside the target element, so you need to use .find() inside the target element to find the .box element.
$("a").click(function () {
$(".box").removeClass("highlightTarget");
var clickedLink = this.href.split("#");
if (clickedLink.length > 1) {
$('#' + clickedLink[1]).find('.box').addClass("highlightTarget")
}
});

$(".box").removeClass("highlightTarget");
var myLocation = document.location.hash.replace("#","");
if (myLocation) {
document.getElementById(myLocation).className = "highlightTarget";
}
$("a").click(function () {
$(".box").removeClass("highlightTarget");
var clickedLink = this.href.split("#");
if (clickedLink.length > 1) {
$('#' + clickedLink[1]).find('.box').addClass('highlightTarget');
}
});

Related

how to exchange the attribute values simultaneously on single click event using jQuery

I want to replace #cardvieo_localstream with #cardvideo_remotestream at the first click, again I click the same element, I want to change #cardvideo_remotestream back #cardvieo_localstream, I'm not sharp at jQuery yet, but I'm trying to learn. I appreciate all help I can get.
I've try this code but working on first click. but not working on second click
$('.video-list .videoWrap').on('click', function() {
var $thisVideoWrap = $(this).find('.video-list .videoWrap');
var $mainVideoWrap = $('.mainVideoWrap');
if ($(this).attr('id') === '#cardvideo_localStream') {
$(this).attr('id', '#cardvideo_remotestream');
}
else if($(this).attr('id') == '#cardvideo_localStream') {
$(this).attr('id', '#cardvideo_local');
$mainVideoWrap.attr('id', 'cardvideo_remotestream');
}
});
Don't change An Id Attribute because of id is a unique value Only use the Classname, I swap the elements successfully
// using jQuery
var initVideoSwapping = function () {
// check if there is an element first
if ($('.video-list .videoWrap').length > 0) {
$('.video-list .videoWrap').on('click', function () {
var $thisVideo = $(this).find('video')[0];
var $mainVideo = $('.mainVideoWrap').find('video')[0];
swapNodes($thisVideo, $mainVideo)
});
}
}
function swapNodes(a, b) {
var aparent = a.parentNode;
var asibling = a.nextSibling === b ? a : a.nextSibling;
b.parentNode.insertBefore(a, b);
aparent.insertBefore(b, asibling);
}
$(function () {
initVideoSwapping();
});

Insert value into last textarea where cursor was

Basically this question is pretty similar to:
Insert value into TEXTAREA where cursor was
JSFiddle: http://jsfiddle.net/rQXrJ/1/
The thing is, I can't get it to work for multiple textareas.
I've tried multiple combinations of things but still no success:
1)
$("#foo-1").click(function () {
$textBox = $(this);
$textBox.focusout(saveSelection);
});
$("#foo-2").click(function () {
$textBox = $(this);
$textBox.focusout(saveSelection);
});
2)
function changeTextBox(newID) {
var fullID = "#" + newID;
$textBox = $(newID);
$textBox.focusout(saveSelection);
}
$(".txt").click(function () {
var id = $(this).attr("id");
changeTextBox(id);
});
Here's my jsFiddle: https://jsfiddle.net/yneco5ft/
You need to give the same class to your textareas and set $textBox to that class.
Example : http://jsfiddle.net/rQXrJ/283/

JQuery Navigation set Class

I want that my Navigation is loaded without loading the page..all works. But the navigation element <li> nav </li>should get an class with another style..the "active". I tried this, but doesn't work, you cann see what happens at my page
Code:
$('#content').children('section').not('#home').hide();
$(".a").hasClass('navigation-element').parent().removeClass('active');
$(".a").click(function(e){
e.preventDefault();
if ($(this).hasClass('navigation-element')){
var $target = $('#' + $(this).attr('href')).stop(true, true);
var $secs = $('#content > section').not($target).stop(true, true).filter(':visible');
if ($secs.length) {
$secs.fadeOut(function () {
$target.fadeIn();
$(this).parent().addClass('active');
});
} else {
$target.fadeIn();
}
} else if ($(this).hasClass('hide')){
$(this).parent().fadeOut();
}
});
The Errors are in Line 2 and 12.
Line 2: hasClass returns a boolean value, you need to use class filters
Line 12: here this does not refer to the clicked li element, you need to use a closure variable refer to the clicked element
//initial setup
$('#content').children('section').not('#home').hide();
$('.active:has(a.anavigation-element)').removeClass('active');
$('.navigation-element[href="home"]').parent().addClass('active');
$('.navigation-element').click(function (e) {
var $this = $(this);
e.preventDefault();
var $target = $('#' + $(this).attr('href')).stop(true, true);
var $secs = $('#content > section').not($target).stop(true, true).filter(':visible');
if ($secs.length) {
//remove existing active from the prev element
$('.active:has(a.navigation-element)').removeClass('active');
$secs.fadeOut(function () {
$target.fadeIn();
$this.parent().addClass('active');
});
} else {
$target.fadeIn();
$this.parent().addClass('active');
}
});

jQuery show icon with toggle event

I have create custom toogle script to show/hide content.
Currently when you click first and then second text, icon mechanism working perfect. but when you click first text and again click first icon mechanism not working.
My JS Code:
$(document).ready(function() {
$('.togglelink').on('click', function(e) {
e.preventDefault();
var elem = $(this).next('.toggle');
$('.toggle').not(elem).hide('fast');
elem.slideToggle('fast');
if (elem.is(':visible')) {
var openslide = $(this).attr("id");
if (openslide == 'slideNavToggle') {
$("#where-slide-down").hide();
$("#where-slide-up").show();
$("#inspiration-slide-down").show();
$("#inspiration-slide-up").hide();
$("#need-slide-down").show();
$("#need-slide-up").hide();
}
if (openslide == 'slideInspToggle') {
$("#inspiration-slide-down").hide();
$("#inspiration-slide-up").show();
$("#where-slide-down").show();
$("#where-slide-up").hide();
$("#need-slide-down").show();
$("#need-slide-up").hide();
}
if (openslide == 'slideToggle') {
$("#need-slide-down").hide();
$("#need-slide-up").show();
$("#where-slide-down").show();
$("#where-slide-up").hide();
$("#inspiration-slide-down").show();
$("#inspiration-slide-up").hide();
}
}
});
$('.toggle').hide('fast');
});
My Fiddle: Sample
Any ideas or suggestions? Thanks.
Here you go:
You just have to change from show/hide to toggle. Fiddle
$('.togglelink').on('click', function (e) {
e.preventDefault();
var elem = $(this).next('.toggle');
$('.toggle').not(elem).hide('fast');
elem.slideToggle('fast');
if (elem.is(':visible')) {
var openslide = $(this).attr("id");
if (openslide == 'slideNavToggle') {
$("#where-slide-down").toggle();
$("#where-slide-up").toggle();
$("#inspiration-slide-down").show();
$("#inspiration-slide-up").hide();
$("#need-slide-down").show();
$("#need-slide-up").hide();
}
if (openslide == 'slideInspToggle') {
$("#inspiration-slide-down").toggle();
$("#inspiration-slide-up").toggle();
$("#where-slide-down").show();
$("#where-slide-up").hide();
$("#need-slide-down").show();
$("#need-slide-up").hide();
}
if (openslide == 'slideToggle') {
$("#need-slide-down").toggle();
$("#need-slide-up").toggle();
$("#where-slide-down").show();
$("#where-slide-up").hide();
$("#inspiration-slide-down").show();
$("#inspiration-slide-up").hide();
}
}
});
$('.toggle').hide('fast');

select the last element in a div

I have the following mark-up:
$(document).ready(function () {
$('.lalala').bind('blur', function (e) {
CheckFirstInput($(this));
});
});
<div id="divContainer">
<input type="text" class="lalala" />
<p id="img1"></p>
</div>
And the following script
function CheckFirstInput(element) {
var txtLength = element.val();
var parent;
var lastElement;
if (txtLength.length < 1) {
parent = element.parent();
lastElement = parent.last();
lastElement.text('prazno e');
}
else {
//element.parent().lastChild().text('4884384f384r34rf');
parent = element.parent();
lastElement = parent.last();
lastElement.text('ne e prazno');
}
}
If the input field is not empty I want to select the last element of the wrapping div (<p>) and change its text. How do I do that?
Thanks in advance!!
You needed to select the children() of the element's parent. You were selecting the last parent. (Which is the parent.)
The following is working. I also cleaned up the code a bit.
$('.lalala').blur( function () {
CheckFirstInput($(this));
});
function CheckFirstInput(element) {
if (element.val().length < 1) {
element.siblings(':last').html('prazno e');
}
else {
element.siblings(':last').html('ne e prazno ');
}
}
Working Fiddle
http://jsfiddle.net/CRccw/2/
If i got it right you could check $(element).is(":empty") and use parent.siblings(":last-child")
Your question has been answered, but here is another way to do it:
$('.lalala').bind('blur', function (e) {
CheckFirstInput($(this));
});
function CheckFirstInput($el) {
var $last = $el.siblings().filter(':last');
var html = ($el.val() == '') ? 'prazno e' : 'ne e prazno';
$last.html(html);
}
DEMO

Categories