Jquery issue on css - javascript

I'm using a jQuery function to add a class on li tag when it is clicked. The problem is that the class is added for a moment and after disappear. Maybe , 'cause I'm working into joomla there are another jquery function or another php script thet modify li tag after my jquery function?
This is my website,http://debatoversigt.dk/ and if you click on left menu you can see background color appear for an instant and after disappear.
This is my jQuery:
jQuery( document ).ready(function() {
jQuery(".art-block li").click(function(){
jQuery(".selected").removeClass("selected");
jQuery(this).addClass("selected");
});
and css:
.selected{
background-color:red!important;
}

The CSS is removed because the page refreshes. You will need to put code into your page that looks at the current page's URL and applies your selected CSS style to the appropriate menu item. Doing this will still let it function as a menu item but also remain selected on a page load.
One method to consider is to leave the code you have in place already and add this to the page:
jQuery( document ).ready(function() {
var windowloc = window.location.pathname;
jQuery(".art-block li").each(function() {
if(jQuery(this).attr("href")==windowloc) {
jquery(this).addClass("selected");
}
});
});
Another method to use (which is more work but also more robust) is to add a class to the body tag of the page so that it corresponds with a menu item. That would actually be a cleaner method as you can then highlight menu items for child pages and not just for the top level sections. You would need to incorporate a unique CSS class with each list item so that you can compare them on page load. I found a tutorial on adding body classes to Joomla that may be helpful for this approach.
You would use something like this JavaScript code to highlight the menu item once you had your CSS classes in place (both on the menu li items and the body class):
jQuery( document ).ready(function() {
jQuery( document ).ready(function() {
var bodyclass = jQuery("body").attr("class");
jQuery(".art-block li").each(function() {
if(jQuery(this).hasClass(bodyclass)) {
jQuery(this).addClass("selected");
}
});
});
});
Either of these methods would work on your current website, but pick what you feel makes the most sense for your website now and going forward.

In case you want to keep that page refresh, but have the proper menu item highlighted, you need to figure out a way to select the proper menu item. For example, you can compare the current url with each menu items' href attribute, and if they match highlight that item.
The other option is to use AJAX to update the content of the page. From your comments, I assume that's not what you want, but anyway, to do that, you need to prevent the default anchor behavior and load the content. That way you won't have to worry about the disappearing highlight and your code will work perfectly (but you'll run into other issues typical for one-page AJAX websites like URL states, browser history buttons, etc...).

Related

jQuery Panel Will Not Toggle Active Class/Collapse One at a Time

I have two divs - one panel div that controls what shows on the other div. The problem is I have to apply a 'selected' class when a panel is active and also when the sub items under the panel is active as well. Right now, it does not "toggle" the selected class when active. This is what I have so far...
jQuery
$('.options-display .options-list').hide();
$('#option-1').show(); // change to whatever is shown first on page
$('.collapse p').click(function(){
$(this).toggleClass('.selected');
var target = '#' + $(this).data('target');
$('.options-list').not(target).hide();
$(target).show();
});
jsfiddle
https://jsfiddle.net/peyton_fields98/48d8zut7/
It is working as written, perhaps not as intended. There are two aspects which may not be obvious that led to your confusion.
First, this is a common typo that I have made as well, when using a class name in the toggle (or addClass or removeClass) make sure you do not include the . for the selector
//$(this).toggleClass('.selected');
$(this).toggleClass('selected');//should be this
// ^no `.`
To note: using this approach still leaves the original "selected" class intact. Perhaps you should preface this line of code with
$('.collapse .selected').removeClass('selected');
Second, the this binding in the click callback is going to be the element clicked, and in your example when selecting a sub item, it is the <p> element. Perhaps the selected class should be on the parent div in those cases if you are wanting to style the entire section. It was hard to tell as you left out the styling for the selected class.

slideToggle opening all links on page?

I am new to Javascript and am having a few issues with my toggle menu:
1) I set the sub links to display:none; but they are still displaying anyway. I need them to be hidden on page load.
2) When clicking one of the main links, it toggles both main links instead of just the one clicked on. What do I need to add so that only the clicked link opens?
http://jsfiddle.net/musiclvr86/5otvoxho/
Bit of hack
$(document).ready(function(){
$('.sub').slideToggle(0);
$('.main').click(function(){
$(this).nextUntil(".main").slideToggle('fast');
});
});
and remove the line from your css
.dark-link.sub {display:none; }
http://jsfiddle.net/5otvoxho/4/
When you call it like this:
$('.sub').slideToggle('fast');
You're targeting every element that has a .sub class, so all of them will toggle. To fix it, you have to subject the selection to the elements relative to the clicked one using this. Since, by your structure they are siblings, not parent/children, you may use the .nextUntil() method from Jquery:
Updated Fiddle
$(this).nextUntil(".main").slideToggle('fast');
This will select every subsequent siblings, until it finds another .main

How can I move a dom element created after the page loads?

I am using a plugin named anchorific.js to create named anchors and corresponding menu on the fly from h3 tags.
To get it working in a .net page I had to move the div containing the menu so it was the last item on the page.
Now I want to move the div elsewhere, but running .append() after the anchorific code won't work. What can I do to move this element?
To make dom manipulations after the dom is loaded simply use $(document).ready(function() {}) or $(window).load(function() {}) in jQuery or if you prefer window.onload = function() {} in vanilla javascript.

JQuery not working on inserted/inject DOM element

I am still a bit new to JS & JQuery, so please excuse what may be a simple and stupid question.
Background:
I have a div on my page that holds several divs (#idle-variable). On click of the top level div, it basically shows the other divs (#addvariable). Nothing more than display: none; and .show(). Easy. On another action within that div (change of drop down), I essentially want to inject/insert that top level div (#idle-variable) underneath the first instance.
Issue:
Essentially, the .click function is not working on my newly inserted div. This may be because the two div's share the same ID, BUT I have a sneaky suspicion that it's not recognized in the DOM. A friend of mine said something about I have to "re-run" my jquery in order for it to be readable in the DOM.
Question:
How can i make this work properly? I want to be able to add a dynamic number of these idle-variables to the page and I need to make sure my .click function works for all added DIVS.
$(function(){
$('#idle-variable').click(function(event) {
$("#addvariable").show(400);
});
});
//create variable in db & show value entry
$("#variabletype").change(function() {
$("#varholder").css("display", "inline-block");
$.ajax({
type: "POST",
url: "/myphpfile.php",
data: {"variabletype": $("#variabletype").val()},
success: function(){
$( "#idle-variable" ).after("<div id="#idle-variable>content</div>");
}
});
});
Well to make the code work it would need to use on and ids are only supposed to be on one element. If it can be on the page multiple times you need to use classes.
$(document).on("click,'#idle-variable', function(event) {
$("#addvariable").show(400);
});
you should be using classes
$(document).on("click,'.idle-variable', function(event) {
//$("#addvariable").show(400); //not sure how this relates to the clicked element.
$(this).find(".addvariable").show(400); //if it is a child
});
You also have a typo in your code with quotes.
The ID based selector will be applied to the first element only.
See the example here http://jsfiddle.net/9GN2P/2/
If you are looking to bind same event handler to multiple elements, definitely go with the class based approach, instead of ID based approach.
And, you are expecting event handler to work with dynamically created elements as well. If you are using older versions of jquery, use the live method like
$('yourselector').live('click',function(){
});
Since live is deprecated and if you are in a new version, use the 'on' method
$('containerselector').on('click','yourselector',function(){
});
Editing to answer your comment:
To create dynamic element and append to DOM, you can follow the bellow pattern. Here, I will create a DIV with id "newID", class "newClass", content "NEW DIV!!" and a click event handler for it. And it will be pushed into another div with id 'containerID'
$('<div />',{
id:'newID',
'class':'newClass',
text:'NEW DIV!!',
click:function(){alert('hi');}
})
.appendTo('div#containerID');
This is just a demo.

How to use the same JQuery effect for different divs with same class

I'm not really into using javascript and jQuery so please add detailed answers.
I need to add a jQuery effect to different divs with the same class, so that when I click on a div 1 with class item, another div info will appear in a specific container.
Also, if I click on div 2 with the same class item, another div pics will appear in the same container as info while info will disappear.
I was going to use this:
$(document).ready(function(){
$("#box1").click(function(){
$("#box1").fadeOut(250);
});
$("#box1").click(function(){
$("#box2").fadeIn(500);
});
});
But this is not valid for using about 10 divs and another 10 displaying and hiding divs.
I would use many lines of code and I am not sure that it would work.
You could use the selector $(".item") to get all the divs you're interested in.
Class selector sounds like what you need: http://api.jquery.com/class-selector/
You can differentiate the ids once you're inside the click call and take a different action. but the class selector will let you use the click event handler on all of the divs you're interested in.
sample code below
$(document).ready(function(){
$(".item").click(function(e){
// output the id of the clicked item
console.log($(e.target).attr("id"));
if($(e.target).attr("id")=="box1"){
//do something for if the clicked item is box1.
$("#box1").fadeOut(250);
$("#box2").fadeIn(500);
}
});
});
Without your html, it's hard to say exactly. But, here's a starter point.
Your existing jQuery is like so, which is grabbing every div by ID.
$(document).ready(function(){
$("#box1").click(function(){
$("#box1").fadeOut(250);
});
$("#box1").click(function(){
$("#box2").fadeIn(500);
});
});
An improvement would be to use a class rather than an ID, and you could do something like so.
NOTE: The below assumes you assign either a different class, or an additional class of itempic to the div(s) you want to trigger the pics to be displayed:
$(document).ready(function(){
$(".item").click(function(){
$(".info").fadeOut(250);
});
$(".itempic").click(function(){
$(".pics").fadeIn(500);
});
});
If you have multiple divs that are going to have this same functionality (for example, you've got a bunch of products, each with an info box and a pic box), then you'll need to do something with "containing" the selectors to the given items. With some example HTML, I could provide an answer that takes that into account.
Structure you html similar to this
<div id="container">
<div id="info">info contents</div>
<div id="pic">pic contents</div>
</div>
<div class="item" data-related="#info">your contents</div>
<div class="item" data-related="#pic">your contents</div>
..etc.
and use
$(function(){
$('#container').children().hide(); // initial hiding
$('.item').click(function(){
var relatedId = $(this).data('related');
$(relatedId).show().siblings().hide();
});
});
Demo at http://jsfiddle.net/gaby/mTSZv/
When selecting with jQuery you need to use #id_name for IDs and .class_name for classes. When selecting div, tr, td, ... you need no special symbol before the name. So:
$('#id_name').click(); // click on every item of the ID 'id_name'
$('.class_name').hide(); // make all items invisible that have class 'class_name'
$('tr').addClass('class_name'); // adds the class 'class_name' to all tr items
IDs are unique. Classes can appear more than once.
Just read the examples on jQuery API
In order to get started with JS jQuery is very good. Very fast to do, but don't forget jQuery is a library that has to be loaded making these short commands possible. Pure javascript will be faster.
Don't forget, you can combine JS and jQuery, as jQuery is JS. Switching to pure JS will also make you see what your scripts exactly do.

Categories