my question is how can i get this code href to a link and when the link is loaded scroll to the element.
$(document).ready(function() {
$(".jumper").on("click", function( e ) {
e.preventDefault();
$("body, html").animate({
scrollTop: $( $(this).attr('name') ).offset().top
}, 600);
});
})
this are the links. all the links have to herf to the same page, after i clicked the sublink(the link with the class="jumper") it have's to jump to that page and scroll to that element
the attr name is to indicate to which div it haves to go
<li class='has-sub'><a href='cursus.php'><span>Cursus</span></a>
<li class='last'><a class="jumper" href='cursus.php' name='5'><span>Android Phone & tablet</span></a></li> <ul>
<li><a class="jumper" href='cursus.php' name='4'><span>Software</span></a></li>
<li><a class="jumper" href='cursus.php' name='3'><span>Hardware</span></a></li>
<li><a class="jumper" href='cursus.php' name='2' ><span>Windows 7 & 8</span></a></li>
<li><a class="jumper" href='cursus.php' name='1' ><span>Microsoft office</span></a></li>
</ul>
</li>
does anyone have the answers i'm looking for?
try using it this way...
<li class='has-sub'><a href='cursus.php'><span>Cursus</span></a>
<li class='last'><a class="jumper" href='cursus.php#5' ><span>Android Phone & tablet</span></a></li> <ul>
<li><a class="jumper" href='cursus.php#4'><span>Software</span></a></li>
<li><a class="jumper" href='cursus.php#3' ><span>Hardware</span></a></li>
<li><a class="jumper" href='cursus.php#2' ><span>Windows 7 & 8</span></a></li>
<li><a class="jumper" href='cursus.php#1' ><span>Microsoft office</span></a></li>
</ul>
</li>
and in your cursus.php page
$('html,body').animate({
scrollTop: $(window.location.hash).offset().top
});
Related
I'm pretty new to jQuery, so I admit I don't fully know what I'm doing. The top menu item is just text and not it's own link, but it has a dropdown. I'm trying to add a plus and minus sign before the text that toggles while keeping the original content clickable.
HTML
<div class="menu-clinical-materials">
<ul>
<li class="menu-item-has-children"><a>Clinical Studies & Articles</a>
<ul class="sub-menu" style="display: none;">
<li><a target="_blank" href="">Link 1</a></li>
<li><a target="_blank" href="">Link 2</a></li>
<li><a target="_blank" href="">Link 3</a></li>
<li><a target="_blank" href="">Link 4</a></li>
<li><a target="_blank" href="">Link 5</a></li>
</ul>
</li>
<li class="menu-item-has-children"><a>Counseling Sheets</a>
<ul class="sub-menu" style="display: none;">
<li><a target="_blank" href="">Link 1</a></li>
<li><a target="_blank" href="">Link 2</a></li>
<li><a target="_blank" href="">Link 3</a></li>
<li><a target="_blank" href="">Link 4</a></li>
<li><a target="_blank" href="">Link 5</a></li>
</ul>
</li>
</ul>
JS
jQuery.noConflict();
jQuery(document).ready(function () {
jQuery(".menu-item-has-children:has(ul)").prepend("<span class=\"Expander\">+</span>");
jQuery(".Expander").click(function () {
jQuery(this).html(jQuery(this).html() == "+" ? "-" : "+");
jQuery(this).toggleClass("Expanded").siblings("ul").slideToggle();
return false;
}).eq(0).addClass("Expanded").end().slice(1).siblings("ul").hide();
});
So I want "Clinical Studies & Articles" clickable, not just the +/- sign.
Here's what I have so far
EDIT
I was able to get it to work the way I wanted but using a different method. I'd still like to know how to do this with the .click function instead of toggle though. I'd appreciate it. Here's the fiddle with my workaround
Fiddle
Here is the changed JS
//<![CDATA[
jQuery.noConflict();
jQuery(document).ready(function () {
jQuery(".menu-item-has-children:has(ul)").prepend("<span class=\"plus-minus\">+</span>");
jQuery(".sub-menu").addClass('expander').hide();
jQuery('.menu-item-has-children').parent().toggle(function () {
jQuery(".plus-minus").text("-");
jQuery(".expander").slideDown();
}, function () {
jQuery(".plus-minus").text("+");
jQuery(".expander").slideUp();
})
});
Improved demo. Use event.stopPropagation() to prevent click on inner links to bubble and close the whole block.
//<![CDATA[
jQuery.noConflict();
jQuery(document).ready(function () {
jQuery(".menu-item-has-children:has(ul)").prepend("<span class=\"Expander\">+</span>");
jQuery(".menu-item-has-children").click(function () {
buttonText = jQuery(this).children('.Expander').html() == "+" ? "-" : "+";
jQuery(this).children('.Expander').html(buttonText);
jQuery(this).children('.Expander')
.toggleClass("Expanded").siblings("ul").slideToggle();
return false;
}).eq(0).slice(1).siblings("ul").hide();
});
//Prevent close on click of inner links.
jQuery(".sub-menu > li").click(function (e) {
e.stopPropagation();
});
//]]>
I have created a slidetoggle but it's not working. Generrally if I hovered on the year the months will display via slidetoggle but its not working...Probably the class on the script is wrong. Sample fiddle
HTML:
<div class="smart-archives">
<ul>
<a class="year-link" href="http://net/2015">2015</a>:
<li><a class="month-link" href="http://.net/2015/01" title="1 post">January</a></li>
<li><a class="month-link" href="http://.net/2015/02" title="1 post">February</a></li>
<li><a class="month-link" href="http://.net/2015/03" title="16 posts">March</a></li>
<li><a class="month-link" href="http://.net/2015/04" title="13 posts">April</a></li>
<li><a class="month-link" href="http://.net/2015/05" title="9 posts">May</a></li>
<li><a class="month-link" href="http://.net/2015/06" title="4 posts">June</a></li>
<li class="empty-month">July</li>
<li class="empty-month">August</li>
<li class="empty-month">September</li>
<li class="empty-month">October</li>
<li class="empty-month">November</li>
<li class="empty-month">December</li>
</ul>
<ul>
<a class="year-link" href="http://.net/2014">2014</a>:
<li class="empty-month">January</li>
<li><a class="month-link" href="http://.net/2014/02" title="14 posts">February</a></li>
<li><a class="month-link" href="http://.net/2014/03" title="25 posts">March</a></li>
<li><a class="month-link" href="http://.net/2014/04" title="11 posts">April</a></li>
<li><a class="month-link" href="http://.net/2014/05" title="11 posts">May</a></li>
<li><a class="month-link" href="http://.net/2014/06" title="5 posts">June</a></li>
<li><a class="month-link" href="http://.net/2014/07" title="4 posts">July</a></li>
<li><a class="month-link" href="http://.net/2014/08" title="6 posts">August</a></li>
<li><a class="month-link" href="http://.net/2014/09" title="6 posts">September</a></li>
<li><a class="month-link" href="http://.net/2014/10" title="3 posts">October</a></li>
<li><a class="month-link" href="http://.net/2014/11" title="4 posts">November</a></li>
<li><a class="month-link" href="http://.net/2014/12" title="1 post">December</a></li>
</ul>
</div>
CSS:
ul li { display:none; }
.empty-month { display: none; }
SCRIPT:
$("ul > li").hover(function () {
$(this).children("ul li").slideToggle("fast");
});
You should slide toggle sibling lis on hover of anchor as below:
DEMO
$("ul > a").hover(function () {
$(this).siblings("li").slideToggle("fast");
});
and you might face below problems here if you keep that option on hover
It might not work on properly on mobile
It will not allow you to click on the months once you hoverout of the link
So What I suggest is do the same functionality on click like
DEMO FOR CLICK
$("ul > a").click(function (e) {
e.preventDefault();
$(this).siblings("li").slideToggle("fast");
});
li is the old valid child of ul so
<ul>
<li><a class="year-link" href="http://thegypsetters.net/2015">2015</a>:</li>
<li><a class="month-link" href="http://thegypsetters.net/2015/01" title="1 post">January</a>
then
$("ul > li:has(.year-link)").hover(function () {
$(this).siblings().slideToggle("fast");
});
and
ul li {
display:none;
}
ul li:first-child {
display: list-item;
}
Demo: Fiddle
I have this code:
<ul>
<li class="active"><a data-toggle="tab" id="one">Tab One</a></li>
<li><a data-toggle="tab" id="two">Tab Two</a></li>
<li><a data-toggle="tab" id="three">Tab Three</a></li>
</ul>
I want to capture the any tab click event and alert the id of the tab being activated by the click. How is this done?
$('a[data-toggle=tab]').click(function(){
alert(this.id);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li class="active"><a data-toggle="tab" id="one">Tab One</a></li>
<li><a data-toggle="tab" id="two">Tab Two</a></li>
<li><a data-toggle="tab" id="three">Tab Three</a></li>
</ul>
I would use the bootstrap events API instead of adding additional click handlers
$('.yourTabsClass a').on('show.bs.tab', function(e){
alert('ID clicked = ' + e.target.id)
});
Reference: bootstrap tabs docs
DEMO
$("a[data-toggle='tab']").click(function() {
alert($(this).attr("id"))
});
Here is jsfiddle
I have tried a sample of Vertical menu from CSSmenu site, sample source code working and menu is expanding as per the sample, when i try to add the menu dynamically, those menu's are not expanding even i have verified the final object structure.
Code with dynamic menu:
<body>
<script>
/**
* Comment
*/
function add() {
var list = document.getElementById('list');
var elem=document.createElement('li');
elem.setAttribute('class','last has-sub');
elem.innerHTML="<a href='#'><span>My_Products</span></a>"
+"<ul style='display: none;' >"
+"<li><a href='#'><span>Product 1</span></a></li>"
+"<li><a href='#'><span>Product 2</span></a></li>"
+"<li class='last'><a href='#'><span>Product 3</span></a></li>"
+ "</ul>";
list.appendChild(elem);
}
</script>
<div id='cssmenu'>
<ul id='list'>
<li class='active'><a href='#'><span>Home</span></a></li>
<li class='has-sub'><a href='#'><span>Products</span></a>
<ul>
<li><a href='#'><span>Product 1</span></a></li>
<li><a href='#'><span>Product 2</span></a></li>
<li class='last'><a href='#'><span>Product 3</span></a></li>
</ul>
</li>
<li><a href='#'><span>Contact</span></a></li>
<li class='last has-sub'><a href='#'><span>About</span></a>
<ul>
<li><a href='#'><span>Company</span></a></li>
<li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</li>
</ul>
</div>
<input type="button" value="Add Menu" onclick="add()">
</body>
script.js in this "library" has line:
$('#cssmenu > ul > li > a').click(function() {
So dynamically created elements will not be handled with this click handler. You can modify script's line, transforming this handler into delegated event handler:
$('#cssmenu').on('click', '#list > li > a', function() {
I have a page of search results, each of which has an icon to add each result to a group (listed on the page in a hidden UL element: display:none;).
Right now it works... but when I click on the icon for one result listing... the UL appears under every single result.
I need it to only show up for the result listing that I am clicking the icon on... not all the listings...
Currently the onload code is this:
$("a.quicklist, a[href=#newgrp]").toggle(
function(){
$("ul.quicklist_menu").css('display','block');
$(this).addClass("current");
},
function(){
$("ul.quicklist_menu").css('display','none');
$(this).removeClass("current");
});
I tried to change it to this:
$("a.quicklist, a[href=#newgrp]").toggle(
function(){
$(this).children("ul.quicklist_menu").css('display','block');
$(this).addClass("current");
},
function(){
$(this).children("ul.quicklist_menu").css('display','none');
$(this).removeClass("current");
});
But, yeh.. the icon is highlighted as "current" or active, but the UL does not appear...
Any help would be greatly appreciated.
OOPs. Sorry! Here is the HTML:
<li class='vcard'>
<a href='profile.php?id=1288'><img class='user-photo' src='profile_images/sq_avatar.png' alt='Paul Dietzel' /></a>
<div class='user-info'>
<a class='fn url name' href='profile.php?id=1288'>Paul Dietzel</a>
<ul class='attributes'>
<li class='adr'><span class='locality'>Los Angeles</span>, <abbr class='region' title='California'>CA</abbr></li>
</ul>
</div>
<ul class='options'>
<li><a class='view-profile' href='profile.php?id=1288'>View profile</a></li>
<li><abbr title="Add/Remove Favorite"><button class="favorite ICON" id="1288">Remove Favorite</button></abbr></li>
<li><a class='add-to-group' href='#newgrp'>Add to group</a></li>
<ul class="quicklist_menu"><li><a href='#addgrp' id='1147' rel='1988'>Test 3</a></li>
<li><a href='#addgrp' id='1147' rel='1989'>Test 4</a></li>
<li><a href='#addgrp' id='1147' rel='1990'>Test 5</a></li>
<li><a href='#addgrp' id='1147' rel='1991'>Test 7</a></li>
<li><a href='#addgrp' id='1147' rel='1129'>Lou Herthum Acting Class</a></li>
<li><a href='#addgrp' id='1147' rel='1967'>test group</a></li>
<li class="mgrp">Manage Groups »</li>
</ul>
</ul>
</li>
You need to correct your markup by moving that <ul> to be a sibling of the anchor, not outside the <li></li> but inside (<ul> can't be a child of a <ul>, it's invalid HTML). Like this:
<ul class='options'>
<li><a class='view-profile' href='profile.php?id=1288'>View profile</a></li>
<li><abbr title="Add/Remove Favorite"><button class="favorite ICON" id="1288">Remove Favorite</button></abbr></li>
<li><a class='add-to-group' href='#newgrp'>Add to group</a>
<ul class="quicklist_menu">
<li><a href='#addgrp' id='1147' rel='1988'>Test 3</a></li>
<li><a href='#addgrp' id='1147' rel='1989'>Test 4</a></li>
<li><a href='#addgrp' id='1147' rel='1990'>Test 5</a></li>
<li><a href='#addgrp' id='1147' rel='1991'>Test 7</a></li>
<li><a href='#addgrp' id='1147' rel='1129'>Lou Herthum Acting Class</a></li>
<li><a href='#addgrp' id='1147' rel='1967'>test group</a></li>
<li class="mgrp">Manage Groups »</li>
</ul>
</li>
</ul>
Then you can use .next() like this:
$("a.quicklist, a[href=#newgrp]").toggle(
function(){
$(this).addClass("current").next("ul.quicklist_menu").show();
},
function(){
$(this).removeClass("current").next("ul.quicklist_menu").hide();
});
This uses the .show() and .hide() shortcuts to apply the display as well. Alternatively, you can use .click() to toggle using .toggleClass() and .toggle(), like this:
$("a.quicklist, a[href=#newgrp]").click(function() {
$(this).toggleClass("current").next("ul.quicklist_menu").toggle();
});
use .closest() and .next()
$("a.quicklist, a[href=#newgrp]").toggle(
function(){
$(this).closest('li').next("ul.quicklist_menu").css('display','block');
$(this).addClass("current");
},
function(){
$(this).closest('li').next("ul.quicklist_menu").css('display','none');
$(this).removeClass("current");
});
or you may also try like this,
$("a.quicklist, a[href=#newgrp]").toggle(
function(){
$(this).addClass("current")
.closest('ul.options')
.children("ul.quicklist_menu")
.css('display','block');
},
function(){
$(this).removeClass("current")
.closest('ul.options')
.children("ul.quicklist_menu")
.css('display','none');
});