We Keep Coding

How to make my .selected class stay on the correct a(href) after the reload in a list of hrefs

I have a sidebar of links that loads everytime you click on a link, however when I load the next page, the .selected class moves back to "all" instead of the selected link.
I know this is explained with tabs on here but I could not make it work using the methods I found with my list instead of tabs
I am using javascript to compile the list of links, jade for display.
Jade Code(Kinda, I deleted the unnecessary stuff)
ul.new.category
li.selected
div
a.anm_det_pop(href='/popular')
strong All
each i in list
li
div
a.anm_det_pop(href='/page/#{i}')
strong #{i.toUpperCase()}
My Script
script.
$(function(){
$('.category > li').click(function(){
$('.category > li').removeClass('selected');
$(this).addClass('selected');
});
});
The script works to the point where I click it I briefly see the class switch before the reload, after the reload the .selected class goes back to all.
What I would like to accomplish is the .selected class staying on the active link.
Any help would be greatly appreciated. Thanks!

Given I'm not entirely sure how the page is working, I think you need to prevent the default click event. Hope this doesn't break the application.
$(function(){
$('.category > li').click(function(e){
$('.category > li').removeClass('selected');
$(this).addClass('selected');
e.preventDefault();
});
});

Figured it out, for those with the same question, I moved the whole function into a mixin, I had already made the function in js with sequilize to include the current page as well as the list for my href list so it was relatively simple.
mixin List(List,currentPage)
ul.new.category
li(class=!currentPage ? 'selected' : '')
div
a.anm_det_pop(href='/popular')
strong All
each i in list
li(class=currentPage === i.page ? 'selected' : '')
div
a.anm_det_pop(href='/genre/#{i.page}')
strong #{toTitleCase(i)}
Than in the Jade you just add the mixin and than add the list as a param
+List(List,currentPage)
The mixin reads the current page and compares it to the list, than makes that selection in the list have the class .selection.
Perfect for what I needed.
Hope this helps someone else out as I spent a day tryin to figure out something that took me 15 minutes to do

Access class with specific text content and display:none

I have a large Joomla CMS Website I'm working on.
Problem: I need to hide a menu tab globally across the entire site. The menu item I need to have does not have a unique ID or class; but instead shares the same class as the other tabs I need to keep on the page. 70% of the tab I need to remove shows in 4th order so I started with the below.
.tabs:nth-of-type(4)
{
display:none !important;
}
But! Seeing as how the rest is in different order, this wont work. The tab in question I need to remove looks like the below across the mark-up.
Update: This is what I currently have via the suggestions below but it isn't working:
$(document).ready(function() {
$('.djaccTitle:contains("Location").css( "display: none;" )')
});
<span class="tabs">Location</span>
Is there a way to write an if statement or similar lightweight solution that can sniff out text content within the class, so if it says Location, then hide?
I would like to find a solution like this, as opposed to going through 1000 files of mark-up removing manually. Cheers for any pointers
Update: This is what I have via the current suggestions below but it isn't working!
$(document).ready(function() {
$('.tabs:contains("Location").css( "display: none;" )')
});

I do not believe what you are asking for exists with pure CSS at this time.
What I would do is use jQuery's :contains() selector:
$('span.tabs:contains("Location")')
or even better:
$('#idOfTabsContainer span.tabs:contains("Location")')
And of course, don't forget to put this in a document.ready to ensure that your DOM element has been loaded successfully:
$(document).ready(function() {
$('#idOfTabsContainer span.tabs:contains("Location")')
});

Jquery :contains() Selector should work. I think you have an error in .css() function syntax.
Please try with:
jQuery(document).ready(function(){
$( '.tabs:contains("Location")' ).css( 'display', 'none' );
});
Hope this helps

There used to be a :contains selector that they were going to add to CSS.
But alas, you may have to resort to some JS, as addressed already here
jQuery's got your back though:
$('.tabs:contains("Location")')

Problem: I need to hide a menu tab globally across the entire site.
Solution 1: Disable the menu item. Boom, it is gone from your menus, site wide.
Solution 2: Hide the menu item with css by adding a unique class to the menu item itself and then hiding it with css.
.hide-me-with-css {display: none;}

Clicking a div changes another div's content

I'd like the content inside <div class="tcw-content"> to change, when another div is clicked, however I have never used Ajax (maybe it doesn't have to be done in Ajax, but I can't think of a JS/CSS way, examples appreciated :) ), would anyone have any examples for me please? For example, the user will click onto <li id="tab-tab_700964" class="grp"><a>Group A</a></li> and as soon as the hotspot is clicked, the content inside the above mentioned div will change.
How can I achieve this?

You can use jQuery, example:
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#tab-tab_700964 a').on('click', function(){
$('.tcw-content').html('hey');
});
});
</script>
<li id="tab-tab_700964" class="grp"><a>Group A</a></li>
<div class="tcw-content">
hello
</div>

Go take a look at jQuery. It makes this pretty easy. Your example would look like this:
$('.grp a').click(function(e) {
e.preventDefault();
$('.tcw-content').html('new content goes here');
});
To explain, $ is the jQuery object. When you use it as a function with a string, it finds all elements matching that selector, almost exactly the same way CSS selectors work. Then, there are a variety of functions you can call on these matched elements. In this case, we call click() and pass it a function that will be run when the link is clicked on. Inside of that function, we find the div using $('.tcw-content') and update its contents by using the html() function.
jQuery's documentation is quite good. Start playing with it, maybe using jsFiddle as a sandbox.

Maybe you are looking for a content slider.
HTML Content Slider
:: Featured Content Slider v2.5
Examples
40 examples

do it with jquery. Include the jquery library, and then add a new javascript file with a document.ready event. Inside the document ready, just add something to listen for when your div is clicked. Read here:
http://www.w3schools.com/jquery/event_click.asp
http://api.jquery.com/click/

Trigger multiple jQuery scripts on current active element

I'm a bit new to jQuery and I have difficulties in achieving a function so I really hope somebody could guide me a bit. What I basically want to do is to highlight 2 elements simultaneously (via toggleClass).
Basically I have a repeating div (#post) which contains a title, thumb and description div. What I would like to do is once I hover on the title or the thumb div the elements to get a new additional class (xxxHover). So basically once the user hovers the mouse on the title/thumb div the title/thumb div (both of them) get a new class called (xxxHover where xxx stands for the div name - in this case titleHover/thumbHover).
I might not be the best in explaining so I've prepared a jsFiddle as well:
http://jsfiddle.net/yLqnd/12/
As you can see my problem is to restrict the scripts for the current element only (#post in our case). If it helps or matter I have to say that this will be integrated into a WordPress website (so the HTML structure is basically in the loop.php), that's why I would like to restrict the 2x highlight effect only per item (#post).
Thanks a mill in advance for any idea!

http://jsfiddle.net/oscarj24/yLqnd/13/

Here's an updated jsFiddle:
Instead of being so specific, any div's inside will now toggle the class
jsFiddle Link
Basically I pushed it all together:
$(".post div").mouseover(function(){
$(this).closest('.post').find('div').toggleClass('thumbHover');
}).mouseout(function(){
$(this).closest('.post').find('div').toggleClass('thumbHover');
});

I think you can get the effect you're looking for by using .siblings() in jQuery.
$(".title").mouseover(function(){
$(this).toggleClass("titleHover");
$(this).siblings(".thumb").toggleClass("thumbHover");
});
This will limit the toggleClass to only the .thumb that resides in the same .post.
http://api.jquery.com/siblings/

simples, just do it on the parent of both elements:
$(".post").mouseover(function(){
$(this).find('div').toggleClass('thumbHover');
}).mouseout(function(){
$(this).find('div').toggleClass('thumbHover');
});

How to connect this jquery code to this hover?

I'm trying to figure out how to connect this line of HTML (which activates a hover pop-up) code which is being used in a PHP file, to the following jquery code. I've gotten it to work for in a single hover instance, but I plan on having multiple hovers all across the page.
HTML Code:
<a class="que" href="http://www.google.com">okok</a>
<div class="launch">test</div>
jQuery Code:
$(document).ready(function() {
$("div.launch").css({'display':'block','opacity':'0'})
$("a.que").hover(
function () {
$(this).next('.launch').animate({
opacity: 1
}, 500);
},
function () {
$(this).sibling('div').stop().animate({
opacity: 0
}, 200);
}
)
});
Thanks a ton for any help... :)

Just change your jQuery selector to match all elements you want to have that hover effect. The jQuery selector is the part of the jQuery statement that tells you what items to, well, select.
$(selectorGoesHere).takeSomeAction;
The selector matches the same format you use for the CSS, so, for example, any element with class="someClass" will be selected in jQuery with $(".someClass"). The jQuery selector can refer to multiple matching items simultaneously, so the jQuery statement used a moment ago would select every element that has that class and perform whatever action you chose.
If, for example, you wanted to use jQuery to set every div to have a red background, you would use:
$("div").css("background-color","#FF0000");
Broken down, that statement finds every div element (as specified by the selector), then applies the CSS style background-color: #FF0000 to EVERY div in the document.
http://jsfiddle.net/joycse06/hzm5p/1/ is an example of having multiple hover-over effects using your code. Just follow that link for a sample how how your already written jQuery statements are applied to multiple HTML elements.
EDIT: Based on the code below, change your jQuery to match http://jsfiddle.net/hzm5p/5/
jQuery(document).ready(function() {
jQuery("div.launch").css({'display':'block','opacity':'0'})
jQuery("a.que").hover(
function () {
jQuery(this).parent().next('.launch').animate({
opacity: 1
}, 500);
},
function () {
jQuery(this).parent().next('.launch').stop().animate({
opacity: 0
}, 200);
}
)
});​
Simply add .parent() to get the the containing p element, then take the .next('.launch') element.
EDIT 2: For jQuery in Wordpress, you need to include the following line somewhere in your functions.php file:
wp_enqueue_script("jquery");
Also, it seems that the jQuery used by Wordpress is designed for "compatibility mode", which means the $ shortcut is by default unavailable. You'll need to use jQuery in place of $, unless you use some of the workarounds mentioned in http://digwp.com/2011/09/using-instead-of-jquery-in-wordpress/
EDIT 3: Test for jQuery loading with the following code:
if (jQuery) {
alert("jQuery loaded");
} else {
alert("jQuery not loaded");
}
If it's loaded, then I don't know what to tell you. If it isn't, you need to figure out why in Wordpress and get it loaded, or you'll need to re-write your code to use non-jQuery scripting.

You can just use class que to all <a> tags and launch class to all divs next to that <a> tags.