I'm just going to build a nice hover menu.
There are various divs to be displayed when the user moves the mouse over the menu.
Here is my HTML Code:
<ul class="menue">
<li>Startseite</li>
<li id="1">Menü1</li>
<li id="2">Menü2</li>
</ul>
<div class="subMenue" id="2">Test-Menue1</div>
<div class="subMenue" id="2">Test-Menue2</div>
And here is the JS:
$(document).ready(function() {
$(".menue li").mouseover(function(){
if($(this).attr('id')){
$(".subMenue #" + $(this).attr('id')).css("display", "block");
}
}).mouseout(function(){
$(".subMenue #" + $(this).attr('id')).css("display", "none");
});
});
How can I get now is that if I go over the <li> with id 1, the <div> with the id 1 rises?
With the possibility of mine described above it is not unfortunately.
You have issues like:
Duplicate ID being used. Your selector will end up having issues apart from having invalid html.
Selector incorrect .subMenue #1 should be .subMenue#1.
You can use a custom data-target attribute on li's to provide the target's selector (to avoid any string concatenation for calculating the target's id and flexibility of having any kind of selector with any nesting) instead of ids and just do $(".subMenue" + $(this).data('target')) to select the respective elements. This is kind of pattern framworks like bootstrap follows.
Try this way:
Html
<ul class="menue">
<li>Startseite</li>
<li data-target="#1">Menü1</li>
<li data-target="#2">Menü2</li>
</ul>
<div class="subMenue" id="1">Test-Menue1</div>
<div class="subMenue" id="2">Test-Menue2</div>
Script
$(document).ready(function() {
$(".menue li").mouseover(function(){
$(".subMenue" + $(this).data('target')).css("display", "block");
}).mouseout(function(){
$(".subMenue" + $(this).data('target')).css("display", "none");
});
});
Fiddle
As a shortcut you can even use a one liner using .toggle()
$(document).ready(function() {
$(".menue li").hover(function(){
$(".subMenue" + $(this).data('target')).toggle();
});
});
If you are not having the URL's point anywhere, I would recommend changing your structure slightly.
<ul class="menue">
<li>Startseite</li>
<li>Menü1</li>
<li>Menü2</li>
</ul>
<div class="subMenue initial" id="submenu-1"><a name="submenu-1"></a>Test-Menue1</div>
<div class="subMenue" id="submenu-2"><a name="submenu-2"></a>Test-Menue2</div>
It may be useful to add in a few more features, such as hiding your elements with Javascript in case someone tries to visit without Javascript enabled, then the links will point to the named anchors.
$(document).ready(function() {
$(".subMenue").not(".initial").css("display", "none");//hide all but the initial div
$(".menue li").hover(function(){
$("#"+$(this).attr("href")).css("display", "block");
},
function(){
$("#"+$(this).attr("href")).css("display", "none");
});
});
html
<ul class="menue">
<li>Startseite</li>
<li class="menu" data-id="sub1">Menü1</li>
<li class="menu" data-id="sub2">Menü2</li>
</ul>
<div class="subMenue" id="sub1">Test-Menue1</div>
<div class="subMenue" id="sub2">Test-Menue2</div>
js
$(document).ready(function() {
$('.menue > li.menu').mouseenter(function(){
$('#' + $(this).data('id')).css('display', 'block');
}).mouseleave(function(){
$('#' + $(this).data('id')).css('display', 'none');
});
});
Related
I have lots of repeated Jquery code with small differences. I wonder if its possible to merge the following Jquery code into one:
$(".dropdown-menu-attributes li a").click(function(){
$("#modal-button-attributes:first-child").text($(this).text());
});
$(".dropdown-menu-operators li a").click(function(){
$("#modal-button-operators:first-child").text($(this).text());
});
$(".dropdown-menu-and-or li a").click(function(){
$("#modal-button-and-or:first-child").text($(this).text());
});
I tried this but doesn't work for the second and third classes.
$(".dropdown-menu-attributes .dropdown-menu-and-or .dropdown-menu-operators li a").click(function(){
$("#modal-button-attributes:first-child #modal-button-operators:first-child #modal-button-and-or:first-child").text($(this).text());
});
You want to use the , (Multiple Selector) selector:
$(".dropdown-menu-attributes,.dropdown-menu-and-or,.dropdown-menu-operators")
to first find those three elements, and then on the result set you would do another search to find the li a. The final code would look that way:
$(".dropdown-menu-attributes,.dropdown-menu-and-or,.dropdown-menu-operators")
.find('li a')
.click(function(){
});
To get the correct id you would need to store that id somewhere. One way would be to add it to the corresponding element that holds those classes using the data-* attribute. And search for that using closest
$(".dropdown-menu-attributes,.dropdown-menu-and-or,.dropdown-menu-operators")
.find('li a')
.on('click', function(e) {
var id = $(this).closest('[data-modal-button-id]').data().modalButtonId;
console.log('#modal-button-'+id+':first-child');
$('#modal-button-'+id+':first-child').text($(this).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown-menu-attributes" data-modal-button-id="attributes">
<ul>
<li><a>test1</a></li>
</ul>
</div>
<div class="dropdown-menu-and-or" data-modal-button-id="and-or">
<ul>
<li><a>test2</a></li>
</ul>
</div>
<div class="dropdown-menu-operators" data-modal-button-id="operators">
<ul>
<li><a>test3</a></li>
</ul>
</div>
How you want to name the data-* attribute depends on you, there is most likely a better name for that.
In general I would choose another setup and use a common class instead
$('.dropdown-menu li a')
.on('click', function(e) {
var id = $(this).closest('.dropdown-menu').data().modalButtonId;
console.log('#modal-button-'+id+':first-child');
$('#modal-button-'+id+':first-child').text($(this).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown-menu dropdown-menu-attributes" data-modal-button-id="attributes">
<ul>
<li><a>test1</a></li>
</ul>
</div>
<div class="dropdown-menu dropdown-menu-and-or" data-modal-button-id="and-or">
<ul>
<li><a>test2</a></li>
</ul>
</div>
<div class="dropdown-menu dropdown-menu-operators" data-modal-button-id="operators">
<ul>
<li><a>test3</a></li>
</ul>
</div>
Hi everyone i need get name class menu li for load this page
html
<body>
<div class="menu">
<ul>
<li class="page2" id="page2">PAGE TOW</li>
<li class="page3" id="page3">PAGE THREE</li>
</ul>
</div>
<div class="load"></div>
</body>
js
$(document).on('click','.menu li',function(){
var Get_Name_Class = //Get Name Class
if(/* var Get_Name_Class*/).hasClass("page2")) {
$(".load").load('page2.php');
}
else if(/* var Get_Name_Class*/).hasClass("page3")) {
$(".load").load('page3.php');
}
});
how can i this ( get id or class not difference )
Use this to refer the clicked element inside the handler callback.
$(document).on('click','.menu li',function(){
// cache the reference
var $this = $(this);
// check using the cached element
if($this.hasClass("page2")) {
$(".load").load('page2.php');
}
else if($this.hasClass("page3")) {
$(".load").load('page3.php');
}
});
You can do it using jQuery. If it is class you can do:
$(".className")
if it is id you can do:
$("#idName")
if it is just html element you can do:
$("elementName")
Pass this.className with ".php" concatenated to .load()
$(document).on('click','.menu li',function() {
$(".load").load(this.className + ".php")
});
$(document).on('click','.menu li',function(){
// cache the reference
var $this = $(this);
// check using the cached element
if($this.hasClass("page2")) {
$(".load").load('page2.php');
}
else if($this.hasClass("page3")) {
$(".load").load('page3.php');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="menu">
<ul>
<li class="page2" id="page2">PAGE TOW</li>
<li class="page3" id="page3">PAGE THREE</li>
</ul>
</div>
<div class="load"></div>
</body>
use "#" symbol for id so your code becomes
("#idname")
or u can use "this" which points to the present class u are working on
Don't use classnames. One day you'll add an extra class to those elements and your site will stop working and you'll be left wondering why - or in the worst case it'll slip unnoticed.
Say you have one or even more buttons for page2 triggering - than it's the perfect place to use the data-* attribute!
$(document).on('click', '[data-load]', function() {
var page = $(this).data("load");
console.log(page); // Just to test
$(".load").load(page +'.php');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a data-load="page2">PAGE TWO :) me too</a>
<div class="menu">
<ul>
<li data-load="page2">PAGE TOW</li>
<li data-load="page3">PAGE THREE</li>
</ul>
</div>
<div class="load"></div>
I have a menu list that refer to different projects.
Each list item shares its "ID" with a project showcased in a gallery.
<div class="menu">
<ul>
<li id="id1">project 1</li>
</ul>
</div>
<div class="gallery">
<div class="proc id="id1">project 1</div>
</div>
I'd like a jQuery function that :
When a list item from the menu is clicked, gets the project with the same id to do something.
I really don't know where to start from and I'm stuck at that :
<script>
$( "li#id1").click(function() {
$( ".project#id1" ).show();
});
</script>
Many thanks
As the comments said the IDs must be unique and you have missing quote.
You can use data attributes to handle your logic or combination of ids and data attributes.
Try something like this:
HTML
<div class="menu">
<ul>
<li data-project-id="first-project-id">project 1</li>
...
</ul>
</div>
<div class="gallery">
<div class="proc" data-project-id="first-project-id">project 1</div>
</div>
JavaScript
$('.menu li').click(function(){
var targetId = $(this).attr('data-project-id');
$('.proc[data-project-id="' + targetId + '"]').show();
});
The click event is attached to every li item in the element with class .menu.
On click event we extract the data-project-id attribute from the clicked element, find the project elemenet from gallery and show it.
JSFiddle Demo
you can use normal id also (as selector)
HTML
<div class="menu">
<ul>
<li id="first-project-id">project 1</li>
...
</ul>
</div>
<div class="gallery">
<div class="proc" id="first-project-id">project 1</div>
</div>
jQuery
$('.menu li').click(function(){
var targetId = $(this).attr('id');
$('.proc[id="' + targetId + '"]').toggle();
});
I am very close but just can't see what I am missing in the jQuery script to only display the correct block of content based upon the anchor clicked and want to display initially to a visitor the first block of content from the anchors. Any help is appreciated.
I have dynamically generated anchor links with a class of .link
The content is also dynamically generated and each anchor point (A, B, C...) has it's content contained in a ul class of .test-full-list. Any help is appreciated.
Generated content:
Anchor links:
<span class="link">A</span>
<span class="link">B</span>
Content:
<div class="test-listing-container">
<ul class="test-full-list">
<ul class="test-category-list">
<a name="A"></a>
<div class="anchor-header">- A -</div>
<li id=test-list>
Some Link 1
Some Link 1
</li>
</ul>
</ul>
</div>
Script:
jQuery(document).ready(function () {
jQuery('.test-listing-container').hide();
jQuery('.link a').click(function () {
var jQuerydiv = jQuery('.test-full-list').eq(jQuery(this).index('.link a'));
jQuerydiv.show('.test-full-list'); // show the relevant div
});
});
If you're bringing in content dynamically, your .click() will not work. This is because the element you are trying to attach the click to hasn't been generated.
You can replace this:
jQuery('.link a').click(function() {
With this:
jQuery('.test-listing-container').on('click', '.link a', function() {
If that doesn't work:
jQuery(document).on('click', '.link a', function() {
Edit: Adding a fiddle to demo the code: http://jsfiddle.net/Fm6bR/1/
Assuming you can't change the markup slightly, you may do the following
A
B
<div class="test-listing-container">
<ul class="test-full-list">
<ul class="test-category-list">
<a name="A"></a>
<div class="anchor-header">- A -</div>
<li id=test-list>
Some Link 1
Some Link 1
</li>
</ul>
</ul>
</div>
jQuery(document).ready(function(){
jQuery('ul.test-category-list').hide();
jQuery('ul.test-category-list').first().show(); //show the first one by default
jQuery(document).on('click', '.link a', function (evt) {
var $a = jQuery(evt.currentTarget),
name = $a.attr('href').substr(1),
$a2 = jQuery('.test-listing-container').find('a[name="' + name + '"]'),
$ul = $a2.parents('ul.test-category-list').first();
jQuery('ul.test-category-list').hide(); // hide all
$ul.show(); // show the relevant one
});
});
Generate the content with an id based on the anchor name or some other unique identifer of the content. set data-content on each link to the id of the contents id. then use jquery to get the content by using .data function on the link in the click function
HTML
<span class="link">A</span>
<span class="link">B</span>
<div class="test-listing-container">
<ul class="test-full-list" id="fulllistA">
<ul class="test-category-list">
<li id=test-list>
Some Link 1
Some Link 1
</li>
</ul>
</ul>
</div>
Javascript
jQuery(document).on("click",".link a",function(e){
e.preventDefault();
e.stopPropagation();
var content = jQuery("#"+jQuery(this).data("content"));
jQuery(".test-listing-container > ul").not(content).hide(); // hide the others.
content.show();
});
i have this javascript code:
var x="#wrapper"
//var xyz;
$(document).ready(function(){
$("#about").click(function(){
if (!(x=="#about")){
$(x).slideUp("slow",function(){
$("#aboutus").slideDown("slow");
});
x="#aboutus";
}
});
});
$(document).ready(function(){
$("#home").click(function(){
if(!(x=="#wrapper")){
$(x).slideUp("slow", function(){
$("#wrapper").slideDown("slow");
});
dd="#wrapper";
}
});
});
with this "menu"
<nav>
<div class="menu">
<ul class="ul">
<h6>
<li id="home" >Home</li >
<li id="about">About</li >
<li >performance</li >
<li >testimonials</li >
<li >faqs</li >
<li >forum</li >
<li onclick="slideUpDown()">Contact </li >
</ul>
</h6>
</div>
</nav>
I must use the the li tags as links and when I click the about "link" the home div must slide up slowly and the about div is supposed to come down slowly.
please help!
thank you in advance
In the last line of your code, set x to #wrapper not dd:
var x="#wrapper"
//var xyz;
$(document).ready(function(){
$("#about").click(function(){
if (!(x=="#about")){
$(x).slideUp("slow",function(){
$("#aboutus").slideDown("slow");
});
x="#aboutus";
}
});
$("#home").click(function(){
if(!(x=="#wrapper")){
$(x).slideUp("slow", function(){
$("#wrapper").slideDown("slow");
});
x="#wrapper";
}
});
});
I came on this nice one a while ago. It is simple and works.
function toggleForm(x) {
if ($('#'+x).is(":hidden")) {
$('#'+x).slideDown(200);
} else {
$('#'+x).slideUp(200);
}
}
Then to call it ...
onmousedown="javascript:toggleForm('div_ID');
and to not change your URL add this in front on the same call
onclick="return false"
with this, you can use one script to call as many slid operations as you want. The div to be targeted is the one that has its ID in the call.
EDIT: sorry ... Just noted that it is jQuery, but should not affect anything. I used it where other jQuery did not. So does not seem to conflict anywere.