Currently in the process of integrating bootstraps scrollspy on my website, while also working with a menu similar to this example:
At the moment, I am able to target the li in the navigation, but what I really want is to target the li a.
selector = this.selector
+ '[data-target="' + target + '"],'
+ this.selector + '[href="' + target + '"]'
active = $(selector)
.parent('li')
.addClass('active')
Any suggestions?
Maybe this approach can solve the issue:
active = $(selector)
.parent('li')
.find('a')
.addClass('active')
Consider this alternative method:
chosen = $(selector)
.closest('div')
.find('span')
.toggleClass('chosen');
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="../../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.MenuLList').find('a.Testing').hover(function () { $(this).addClass('Active'); }, function () { $(this).removeClass('Active'); });
});
</script>
<style type="text/css">
.MenuLList
{
list-style: none;
}
.MenuLList li
{
margin: 5px 0px;
}
.MenuLList li a
{
text-decoration: none;
}
.Inactive
{
color: Red;
width: 100px;
background-color: Yellow;
}
.Active
{
font-weight: bolder;
color: Green;
width: 300px;
background-color: Lime;
padding-left: 30px;
}
</style>
</head>
<body>
<ul class="MenuLList">
<li><a class="Inactive" href="#">Test One</a></li>
<li><a class="Testing Inactive" href="#">Test Two</a> </li>
<li><a class="Testing Inactive" href="#">Test Three</a> </li>
<li><a class="Testing Inactive" href="#">Test Four</a> </li>
</ul>
</body>
</html>
I am working on styling 2 textInput and 2 selectInput functions, one on a dark background sidebar and the other inside a white bsModal. I want to style them differently. Is there a way to keep the sidebar elements styled one way and change the font and bor ...
I'm in the process of updating my website and have come across an issue with the footer placement on one specific page. Typically, the footer stays at the bottom of all pages except for this particular page where it appears floated to the left instead ...
My simple border bottom animation is working fine with a basic input element, but it's not functioning properly when used with a textarea. (If using JavaScript is necessary for a solution, please provide guidance) How can I adjust the height of a te ...
After performing an action on my page using jQuery dialog, I want to notify the user if the action was unsuccessful by utilizing jGrowl's unobtrusive notification. Unfortunately, the jGrowl code does not execute after the dialog box closes. My imports ...
Here is an example code snippet: $(document).ready(function(){ $("button").click(function(e) { var value; switch ($("button").index(this)) { case 0 : value = $("div").data("blah"); break; case 1 : ...
There is a strange issue with my styling that I can't seem to figure out. I have a NavBar set to be 20vh in height and an image set to be 100% in width. However, whenever I refresh the page, the NavBar height decreases and the image width increases si ...
I've noticed a strange issue on my website where certain elements seem to be shifting slightly when navigating between different pages. Here's a quick video clip demonstrating the problem. It appears that these elements are not staying static as ...
I am still learning the ropes of javascript, CSS, HTML and programming in general. Despite being a beginner, I have managed to grasp the basics of simple HTML and CSS. I had successfully created a nested div structure before, but suddenly the inner div is ...
Struggling to integrate a Facebook wall feed using jQuery on my website's client side. Utilizing this URL for the Facebook request: Attempted approaches so far: 1. $.getJSON('http://www.facebook.com/feeds/page.php?format=json&id=407963083 ...
I have managed to figure out most aspects of these circles except for how to arrange them side by side. Currently, they are stacked on top of each other. I have successfully determined the colors, fonts, text positions, and other details with some assistan ...
Here is the code snippet in question: if ($('.course-chkbox:checked').length === 0) { alert('no course is selected'); } I'm having trouble getting this to work in certain browsers. Can someone confirm if this is the correct way t ...
I'm experimenting with AngularJS Material components and struggling with creating tabs. Every time I add a tab, the content inside the child md-content element automatically gets a fixed height with a vertical scrollbar instead of adjusting its heigh ...
Exploring performance optimization and non-blocking scripts in the header, my focus has been on asynchronously loading jQuery itself. In my search, I came across a jQuery Loader script that can async load jQuery and then handle and queue jQuery document r ...
My goal is to arrange numerous images in a row, with text displayed below each image. Each block of text may consist of multiple lines and should be centered. While the heights of the images may vary, their widths will remain consistent. It is important th ...
table: <input id="weekFilter" type="text" name="myInputSearches" placeholder="Week..." style="margin-top:4px"> <label class="noResults" align="right" style="display:none; color:red"><b><i>No Match Found</i></b></labe ...
Within my MVC application, I have utilized the datepicker class for all input boxes that require date fields. Initially, I was able to set up my datepicker with specific properties as shown below; $(".datePicker").datepicker({ showOn: 'both', ...
Upon entering the site, I am attempting to receive a JSON as an AJAX response. However, I am curious if there is a limit to the size of the object I can retrieve - whether through a GET or POST request? $http({ method: 'POST', url: &apos ...
Trying to achieve a unique sunflower effect on canvas with an arc, but my geometry skills are a bit rusty. To begin, I set the origin point in the middle of the canvas as (X1, Y1). Then I determine the Mouse Position as (Xm, Ym). If I draw an imaginary l ...
I have nearly completed my calendar app and I am looking to integrate the datetimepicker for updating events. You can find the datetimepicker that I am using at this link: Below is an example of how I have utilized it in HTML: <div class="dropdown" s ...
When using Flexbox to style elements, the width of the parent should be determined by the text inside child1. The image inside child2 should grow proportionately as the parent grows. However, it is important to ensure that the parent div does not exceed it ...