here is my code
$(document).ready(function(){
$("#work").click(function(){
$("#container").load("about/work.html");
});
$("#profile").click(function(){
$("#container").load("profile.html");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li><a id="work" href="">work</a></li>
<li><a id="profile" href="">profile</a></li>
</ul>
<div id="container"></div>
when i click on work or profile requested page just flashes in container div and sometime stays in but if i run same script on button click it loads page without any problem. How can i make it work with li ?
Add event.preventDefault
$(document).ready(function(){
$("#work").click(function(event){
event.preventDefault(); //changed here
$("#container").load("about/work.html");
});
$("#profile").click(function(event){
event.preventDefault(); //changed here
$("#container").load("profile.html");
});
});
There are 2 things to be changed here.
1) Try not leaving your href value empty. If you do then the browser will redirect to the same page. Give it a value # if possible href="#"
2) There is preventDefault() function missing from your <a> click event
$(document).ready(function(){
$("#work").click(function(e){
e.preventDefault();
$("#container").load("about/work.html");
});
$("#profile").click(function(e){
e.preventDefault();
$("#container").load("profile.html");
});
});
try to on click
$(document).ready( function() {
$("#work").on("click", function() {
$("#container").load("about/work.html");
});
});
Related
There are multiple links generated at run time with no specific ids tied to them, here is the code which generate links in the loop
<%for(int p=0;p<displayLink.length;p++){%>
<a href="javascript:removeAccount('<%=displayLink[p]%>')" ><%=displayLink[p]%></a>
<br>
<% }
Upon clicking on the link, it should be hidden or removed from the page, I am trying below but its not working.
function removeAccount (link){
$("#link").on('click', function(e) {
$('#link').prop('disabled',true);
});
}
function removeAccount (link){
$("#link").on('click', function(e) {
e.preventDefault();
$('#link').hide();
});
}
Try this code
<%for(int p=0;p<displayLink.length;p++){%>
<a href="javascript:void(0)" class="my-link" ><%=displayAcct[p]%></a><br>
<% } %>
Javascript
$(".my-link").on('click', function() {
$(this).hide();
});
this might give you some ideas:
edit: But it is unclear what do you expect to happen other than hiding it.
$("#links a").click(function(e) {
e.preventDefault();
$(this).fadeOut();
$('#out').html($(this).data('link'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="links">
link1
link2
link3
link4
link5
</div>
<span id="out"></span>
You cannot disable a link, it can be show/hide. In your, this is what you are looking for:
$('#link').hide();
If you want to completely remove the link from the page:
$('#link').remove();
I'm trying to make some elements active when I click on a link. I'm at this code right now which let's me add and remove active class when I click on element with class 'test'. What I need is to click a link and have the same behaviour to the div elements.
I have:
$('.test').on('click',function(){
$('.test.active').removeClass('active');
$(this).addClass('active');
});
.active{
color: #F00;
}
<div class='test active'>test</div>
<div class='test'>test</div>
<a class='link' href=''>Click me</a>
This code adds and removes the active class when I click the divs. How to do the same thing by clicking the link?
When you click a link, the behavior and the method will be the same as if you click a button, a div, or any other element of the page.
The difference is that an <a> element will redirect you to another page (inclusive if it's "the same" where you come from) and the changes won't be noticeable.
You will need to use $("element").addClass("class");
Add href="javascript:;" if to avoid redirection.
In jQuery below snippet will work:
$('.link').on('click', function(){
$(this).toggleClass('active');
})
Working Fiddle
Update
To highlight multiple divs
$('.link').on('click', function(){
if($('.test.active').next().hasClass('test'))
{
$('.test.active').removeClass('active').next('.test').addClass('active');
}
else
{
$('.test.active').removeClass('active');
$('.test:first').addClass('active');
}
})
Updated Fiddle
Your code should be:
$('.link').on('click', function () {
var $nextActive = $('.test.active').next('.test').length ? $('.test.active').next('.test') : $('.test').first();
$('.test.active').add($nextActive).toggleClass('active');
return false;
});
You can do like following. It will add and remove active class on link click.
$('.link').on('click', function(){
$('.active').removeClass('active').siblings('.test').addClass('active');
});
.active{
color: #F00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='test active'>test</div>
<div class='test'>test</div>
<a class='link' href='#'>Click me</a>
Edit:
This will work for infinite div.
JQuery:
$('.link').on('click', function(){
if($('.active').next().hasClass('test'))
{
$('.active').removeClass('active').next('.test').addClass('active');
}
else
{
$('.active').removeClass('active');
$('.test:first').addClass('active');
}
});
Fiddle
Just remove .active class.
below code is working.
$('.test').click(function(){
$('.test').removeClass('active');
$(this).addClass('active');
});
replace js function
$('.test').on('click',function(){
$('.test').removeClass('active');
$(this).addClass('active');
});
Demo Link https://jsfiddle.net/ffjcfb2b/
According to your post and comments you'd like to use link as class changer for divs. Here you go. Edited!
$('.link').on('click', function(){
$('.test.active').toggleClass('active').next().addClass("active");
});
Working fiddle
How to close element opened by toggle() function when I click on any place in browser window. For example StackExchange link on this site. When I click on this link div appears, but if I click on any place in window, it disappears.
You can do in this way:
$(function(){
$('.yourelem, .targetDiv').click(function(ev){
$('.targetDiv').slideDown('fast');
ev.stopPropagation();
});
$(document).click(function(){
$('.targetDiv').slideUp('fast');
});
});
See the action in jsbin
Try this :
HTML
<a id="show" href="#">show</a>
<div class="test" style="display: none;">
hey
</div>
JS
$('a#show').click(function(event) {
event.stopPropagation();
$('.test').toggle();
});
$('html').click(function() {
$('.test').hide();
});
Take a look on .blur function of jquery http://api.jquery.com/blur/
A quick example:
$("#myelement").blur(function(){
$(this).hide();
//or
$("#targetelement").hide();
});
Make variable sel true, if we click on the div.
if(sel)
$(".stackExchange").slideDown(800);
else
$(".stackExchange").slideUp(800);
I have a small problem with sliding in jquery. On hover (mouse over), I need my navigation list item to show its content by sliding down and on mouse out it should slide up.
HTML:
<ul class="nav nav-tabs nav-stacked">
<li id = "mousehover">
<a style="background-color:#f78144; color: #000; text-align: center;" href="#">Time Table
</a>
</li>
</ul>
<div id = "hovercontent">
Contents 1
</div>
Javascript:
<script type="text/javascript">
$(document).ready(function(){
$("#mousehover").mouseenter(function(){
$("#hovercontent").slideDown("slow");
});
$("#hovercontent").mouseleave(function(){
$(this).slideUp("slow");
});
});
</script>
Here the problem is when I hover on the list the div slides down, but only after I hover on the div and get out of the nav the div is sliding up. I need the div to slide up even if I mouse out of the list with out entering the div. How can this be done?
Better to use mouseover and mouseout will do it for you..
$("#hovercontent").bind("mouseout", function() {
$(this).slideUp("slow");
});
Try this and put it in the doc ready this way: http://jsfiddle.net/ptVbs/
$("#mousehover").hover(function() {
$("#hovercontent").slideDown("slow");
}, function() {
if (!$("#hovercontent").hover()) {
$("#hovercontent").slideUp("slow");
}
});
$("#hovercontent").mouseleave(function() {
$(this).slideUp("slow");
});
you can try it out in fiddle.
Check out http://www.quirksmode.org/js/events_mouse.html. In your eventhandlers, check for the relatedTarget as described there. Use console.log in the eventhandlers to track what's happening. Unfortunately, I can't help further without having the CSS for the classes you use... maybe you could provide a testcase in JSBin at http://jsbin.com/ ?
try this
$(document).ready(function(){
$("#mousehover").mouseover(function(){
$("#hovercontent").slideDown("slow");
});
$("#hovercontent ,#mousehover").mouseleave(function(){
$('#hovercontent').slideUp("slow");
});
});
try it with event.type on 'hover'
You attach an 'hover' event Handler on your #mousehover content, and with event.type you see what event type is going on. With the Event 'hover' you get mouseenter and mouseleave
$(document).ready(function(){
$('#mousehover').on('hover',function(event){
switch(event.type){
case 'mouseenter': $("#hovercontent").slideDown("slow");
break;
case 'mouseleave': $("#hovercontent").slideUp("slow");
break;
}
});
});
I recommend using a class:
HTML:
<ul class="nav nav-tabs nav-stacked">
<li id = "mousehover" class="menu1">
<a style="background-color:#f78144;color:#000;text-align:center;" href="#">Time Table</a>
</li>
</ul>
<div id = "hovercontent" class="menu1">
Contents 1
</div>
JS:
<script>
$(document).ready(function(){
$("#mousehover").mouseenter(function(){
$("#hovercontent").slideDown("slow");
});
$(".menu1").mouseout(function(){
$("#hovercontent").slideUp("slow");
});
});
</script>
I got a quick question:
I want every link in the div to alert a message, but only the anchors. I dont want the div to initiate the alert function.
Html:
<div id="abc">
<a href='#'> Button 1 </a>
<a href='#'> Button 2</a>
</div>
Javascript:
$(document).ready(function(){
$('#abc').click(function(){
alert('a');
});
});
How do I modify the above code?
Then you could just bind the event handler on the a tag inside the div.
$('#abc a').click(function() {
alert('a');
});
exchanging $('#shortlisting') with $('#shortlisting a') should work for you.
$('#abc a').on("click", function() {
alert('a');
});
Try:
$('#abc a').click(function() {
alert( $(this).text() );
});
Here is an example