I am making a script to make a submenu visible as a dropdown when the menu button is hovered (or onmouseover). I made the if condition refer to this.id="menutoggle1" and check if it's true or false.
If true, it should fire off a function with the statement
document.getElementById("submenu1").style.display="inherit";
It doesn't work, but I assume this has something to do with my if condition. I don't really understand conditions that well, but I hope someone can explain why this is wrong, and maybe even help me fix it.
This is my code;
function submenu_show()
{
if(this.id="menutoggle1" == true)
{
document.getElementById("submenu1").style.display="inherit";
}
}
I know another way that I can achieve the result I want, but then I need to write two functions to show and two functions to hide, for all the menu options that are supposed to have submenus, and it is just messy and ugh.
EDIT: I figured I couldn't make it work without dropping my idea completely, so I just went with the other alternative. I also realized that wasn't really that messy after all, when written properly (it is supposed to be used for several drop downs after all).
Here's the code I used eventally;
<div id="menubutton1" onmouseover="submenu1_show();" onmouseout="submenu1_hide();"></div>
<div id="submenu1" onmouseover="submenu1_show();" onmouseout="submenu1_hide();"></div>
function submenu1_show()
{document.getElementById("submenu1").style.display="inherit";}
function submenu1_hide()
{document.getElementById("submenu1").style.display="none";}
In the current code, this is merky. Its certainly not the element's ID. You could find the element in the function.
function fnName(){
var el = document.getElementById("...");
if(el.id === "something"){ ... }
}
If you want to get the function to do this for a particular ID, you could just add a param to the fnName function and pass that param do the doc.getElByID function.
why not use jQuery to do this for you? With a little bit of CSS and jQuery edits, you can utilize sliding effects and fading effects among other benefits. Look how easy a drop down is with jQuery:
$('nav ul li a').hover(
function() {
$('nav ul li ul').addClass('over');
},
function() {
$('nav ul li ul').removeClass('over');
}
);
Here is a working demo. I know it doesn't answer your question but I do hope this helps you out a little bit!
Related
Hi!
My problem is that I'm appending to an UL like that:
$("#tagek").append("<li><a>"+arr[0]+"</a><span class='ex'><a>X</a></span></li>");
So just shortly: I want to make a tag cloud. When someone types a comma, add the tag to the ul list. That works like charm, however I want to add an "X" to the li element so when someone clicks on it, it will be removed.
Something like that:
$(document).on('click','.ex',function(){
var li = $('.ex').closest("li");
li.remove();
});
So when I click on the ".ex" span its' li should disappear. This is working, but EVERY li is removed (logically), because every "X" has the same class.
Any ideas on this?
Maybe with .eq()?
Thank you.
You are experimenting that behaviour because you're removing the closest 'li' of every '.ex' element instead of the one clicked. Use the $(this) selector in the handler instead:
Try:
$(document).on('click','.ex',function(){
$(this).parent().remove();
});
i think u need this if you are using jquery .
$(document).on('click','.ex',function(){
var li = $(this).closest("li");
li.remove();
});
It's because you're re-selecting .ex (which gets all of them) inside the function handler instead of using the one that the event was triggered by.
Fix:
$(document).on('click', '.ex', function() {
$(this).closest('li').remove();
});
Edit: Not enough karma to comment, but alex030293's code should execute faster, but assumes that the element is a direct child as opposed to a descendant. If this is always the case, it's better to use his code. If there might be a situation where the .ex element is encapsulated in another tag, it's better to use mine.
I have a dropdown list where there are multiple items with class "dropdown" and "menu". On click event I want javascript to find the certain .dropdown that I clicked. Is it possible to implement "this" somewhere on my code and make it work?
$(".dropdown").click(function(e) {
e.preventDefault();
if ($(".menu").is(":visible")) {
$(".menu").slideUp();
$(this).find("li").children(".list").addClass("plus").removeClass("minus");
} else {
$(".menu").slideDown();
$(this).find("li").children(".list").removeClass("plus").addClass("minus");
}
});
Edited afterwards:
So this is my list (please don't pay attention to the fact that "a" is outside of "li"). So I need to find closest "menu" to "dropdown". Already tried closest, find etc. but nothing I tried did the trick. Any suggestions?
<a class="dropdown" href=""><li>Link 1 <div class="plus"></div></li></a>
<ul class="menu">
....
Within the event handling function, this will be set to the element that was clicked.
If that does not help, you should provide more information in your question.
jQuery uses CSS selectors so just do $(".dropdown > .menu") to select the first .menu following a .dropdown. or $(".dropdown .menu:first-child")
edit:
$(".dropdown").click(function()
{
var theNextMenu = $(this).next(".menu");
}
Would it be possible to add a certain class to a li that contains a certain string of text using JavaScript/jQuery?
UPDATE/NEW QUESTION:
Instead of detecting the content of the li, can I have it add the class if the li has another specified class?
Answering the fellow's extended question:
$('li.yourClass').addClass('anotherClass');
You're asking really basic questions. I'd recommend you just spend some time with the beginner jQuery tutorials on the site and you'll understand all of this stuff much better.
Edit: IGNORE MY OLD ANSWER. You learn something every day. Do this, not what I said:
//http://api.jquery.com/contains-selector/
$('li:contains('+ searchText +')').addClass('myClass');
Old answer:
$('li').each(function(){
var _this = $(this);
if( _this.text() === testString ){
_this.addClass('myClass');
}
});
In the if statement, you can change that to check the .html() of your li or even do a more advanced regex if you need that. But basically, you have to loop through the li's in one form or another to check their content against your testString.
$('li').filter(function () {
return $(this).text().indexOf('certain string') !== -1;
}).addClass('certainClass');
You can use the jQuery filter function.
The filter function can be passed a selector instead of a function:
$('li').filter('.specified-class').addClass('certainClass');
at which point you should probably just update the initial selector:
$('li.specified-class').addClass('certainClass');
I have got a jquery for an image slider which can be seen here: http://jsfiddle.net/S4LGr/42/
And I have a classical horizontal menu with -ul- and -li- of course.
But this jquery, effects my menu and when I click on menu it doesnt work but it does the work of jquery, and changes the big div like I am clicking the litte thumbs which you can see in example.
How can I solve this?
When you say $('li').click(fn) you are literally saying in code, "hey jQuery, go find all li elements and whenever I click them, run fn."
You probably wanted to limit this to li elements which are children of <div id="links">, which is accomplished by using instead $('#links li').click(fn) instead.
You might also consider using instead <ul id="links" class="horizontal_scroll_menu"> rather than the div-which-does-nothing that you have now. Try to cut down on needless divs on the Internet, please.
Add more detail to the selector. $("ul.horizontal_scroll_menu li") should do the trick. See the implementation: http://jsfiddle.net/S4LGr/43/
var container = $('#detail'),
bigimages = container.find( "div");
bigimages.first().fadeIn("slow");
$('.horizontal_scroll_menu li').each( function ( idx ) {
$(this).click( function ( e ) {
bigimages.stop(true,true).hide().eq( idx).fadeIn("slow");
})
});
try this?
I have a very novice question, so apologies if the answer to this is obvious.
I am using JQuery to toggle the contents of items based on whether the item has been clicked. I have been able to successfully implement the toggle feature.
I now need to have it load with the first two items set to show() with the rest set to hide(). I have given a unique class name to these first 2 items. I know that I can simply do a $('div.activeitem').show() and then hide thee rest, but I'd prefer to setup a condition.
I am a JQuery novice, so I don't know how to target these elements or their classes in a conditional statement. I've searched google but have been unsuccessful. I want a conditional that asks if the div "newsinfo" also has the class "jopen" then show(), else hide().
Thanks for your help. I have attached my code to help you understand the context of my question:
<script type="text/javascript">
$(document).ready(function(){
// Here is where I'd like to implement a conditional
$('div.newsinfo').hide(); // this would be part of my else
$('h5.newstoggle').click(function() {
$(this).next('div').slideToggle(200);
return false;
});
});
</script>
How about simply
$('div.newsinfo').each(function(){
if($(this).hasClass('jopen')){
$(this).show()
}else{
$(this).hide();
}
});
there is hasClass() function. Better way is using toggleClass().
For example:
$('div.blocks').click(function(){
$(this).toggleClass('class_name');
});
after first click class will be added, after second - removed... and so on ^^
JQuery has an .hasClass function.
i.e.
if($(".selectableItem").hasClass("selected")){
//remove selection
$(".selectableItem").removeClass("selected");
}else{
//remove the selected class from the currently selected one
$(".selectableItem .selected").removeClass("selected");
//add it to this one
$(".selectableItem").addClass("selected");
}
Why don't you add a default css to jopen class to display: block and the others to display: none ?
something like
.newsinfo {display: none}
.jopen {display:block!important}
Just use selectors. For example, if all divs with the class "newsinfo" are visible by default:
$("div.newsinfo:not(.jopen)").hide();
If they're all hidden by default:
$("div.newsinfo.jopen").show();