i know simple java script function on click
$(document).ready(function(){
$(".click").click(function(){
$(".fade", this).fadeToggle();
});
});
but i want that on click one div appears and second one closes . like on this page http://www.wpbeginner.com/free-wordpress-blog-setup/, but on viewing source i could not find any code . Don't worry this link doesn't belong to me or my website
I think that should do it
$(document).ready(function(){
$('.click').click(function(){
if ($('.first').is(':visible')) {
$('.first').css('display', 'none');
$('.second').fadeIn(2000);
} else {
$('.second').css('display', 'none');
$('.first').fadeIn(2000);
}
});
});
http://jsfiddle.net/57VaZ/
Assuming your html looks something like this:
<a class="click">click</a><br />
<a class="fade1">fade1</a><br />
<a class="fade2">fade2</a><br />
Make sure the one that you want to show on click is hidden by default:
.fade2 { display:none }
Then do the following in jQuery:
$(document).ready(function(){
$(".click").click(function(){
$(".fade1, .fade2").fadeToggle();
});
});
Here is a fiddle demo
Related
Jsfiddle at demo.
I have a contenteditable div. I want the html of whatever I write in that div, on the click of anchor tag.
Right now, div is working but nothing is showing on click of the anchor tag.
function getcode()
{
var content = $('#my-contenteditable-div').html();
alert (content);
}
You can do this as well:
$("a").click(function () {
alert($('#my-contenteditable-div').html());
});
Here is the JSFiddle
Then you don't need to write separate functions and attach it to the onclick event attribute of the a tag
Try This
// get the link
var link = document.getElementById("linkId");
// add click listener to it
link.addEventListener("click",getcode,false);
// you handler
function getcode()
{
var content = document.getElementById("my-contenteditable-div");
alert (content.innerHTML);
}
Just you can go with jquery
Working Fiddle
$(document).ready(function() {
$('#gethtml').on('click', function(e) {
var content = $('#my-contenteditable-div').html();
alert (content);
});
});
can use this use id in a and a div to show data
<div contenteditable="true" id="my-contenteditable-div">
sdfsdfds
</div>
<a href="#" id="getcode" >Get HTML</a>
<div id="show"></div>
and jQuery
$( "#getcode" ).click(function() {
var contents = $('#my-contenteditable-div').html();
$("#show").text(contents);
});
<script>
$(document).on('click','a',function() {
$.get('updateusers', function(data) {
$('#div1').html(data);
});
});
</script>
This script works great for updating particular div, but the problem is that it can be activated by every link on the page. This script even affected by <input type="submit"> tag.
For example, let page contains two link
<a id="link1" href="#">Update the link1 div</a>
<a id="link2" href="#">Update the link2 div</a>
So how to change the script to be affected only by specific link, for example only by link1 ?
Try something like this:
$(document).on('click','a',function(e) {
if ($(e.target).attr('id') == 'link1') {
$.get('updateusers', function(data) {
$('#div1').html(data);
});
}
if ($(e.target).attr('id') == 'link2') {
$.get('updateusers', function(data) {
$('#div1').html(data);
});
}
});
This will do a check to see if the clicked element has the ID you want.
I want to call 2 different jquery functions to hide links
<a href="">.zip file, first link
</a>
<script>
$("a").click(function() {
location.href="first.location";
return false;
});
</script>
<a href="">.tar.gz file, second link
</a>
<script>
$("a").click(function() {
location.href=="second.location";
return false;
});
</script>
How can I call the 2 functions so that I call the first one clicking the first link and the second one clicking the second link?
Thanks a lo
This is not the best solution. For best results you might want to restructure your html and add some sort of classes and IDs to the links or their parent to identify them. But this will work
For the first link
$("a:eq(0)").click(function() {
location.href="first.location";
return false;
});
and for the second link
$("a:eq(1)").click(function() {
location.href=="second.location";
return false;
});
If you set the href in the markup there is no need for JQuery or Javascript.
<a href="first.location">.zip file, first link
</a>
<a href="second.location">.tar.gz file, second link
</a>
You can use the :eq() Selector here like:
// Clicking the first link
$("a:eq(0)").click(function () {
location.href = "first.location";
return false;
});
// Clicking the second link
$("a:eq(1)").click(function () {
location.href = "second.location";
return false;
});
Like it has already been suggested the best way to do it is to have different id's for these a tags. But if for some reason you don't want to assign ids(why on earth would you do that?) you could do the following:
Wrap the anchor tags in a div and give it an id like this
<div id="myDiv">
First Link
Second Div
</div >
Then use jQuery to do the linking:
<script>
$(function(){
$("myDiv").children(a:first-child).click(function(){
// Do stuff here
});
$("myDiv").children(a:last-child).click(function(){
// Do stuff here
});
});
</script>
you can introduce an id attribute to your links. and then trigger the events based on the id of the element.
<a href="" id='link1'>.zip file, first link
</a>
<script>
$("#link1").click(function() {
location.href="first.location";
return false;
});
</script>
<a href="" id='link2'>.tar.gz file, second link
</a>
<script>
$("#link2").click(function() {
location.href=="second.location";
return false;
});
</script>
Give link in html(href)
$("a").click(function()
{
location.href = $(this).attr('href');
return false;
});
I think this might help:
<a id="first" href="">.zip file, first link</a>
<script>
$("first").click(function() {
location.href="first.location";
return false;
});
</script>
<a id="second" href="">.tar.gz file, second link </a>
<script>
$("second").click(function() {
location.href=="second.location";
return false;
});
</script>
$("a:eq(0)").click(function() {
location.href="first.location";
return false;
});
$("a:eq(1)").click(function() {
location.href=="second.location";
return false;
});
I am doing a code in which I want to delete a div when its inner link("Delete") is clicked. I know this question might be repeating and I have tried so many methods but not working. I dont know what's the problem.
Here is my HTML Rendering Code:
<div id="ViewRows">
<br>
<div class="ViewRow"> NOS: FA Comment: finance
<a class="deleteViewRow" href="#">Delete</a>
<br>
</div>
<div class="ViewRow">
NOS: TPA Comment: Assistance
<a class="deleteViewRow" href="#">Delete</a>
<br>
</div>
</div>
Here is my javascript Code for removal of that div.
$("a.deleteViewRow").live("click", function () {
$(this).parents("div.ViewRow:first").remove();
return false;
});
I also tried following javascript:
$("#ViewRows").on("click", "a.deleteViewRow", function () {
$(this).closest("div.ViewRow").andSelf().remove();
return false;
});
I have tried same code on another page. It is working but when I applied the same logic in another page. It's not working. I know you all are right but I dont know whats problem. In firebug it's not even going into the function.
This should work:
$("#ViewRows").on("click", "a.deleteViewRow", function (e) {
// prevent browser from following link
e.preventDefault();
// ".andSelf()" can be skipped - once the parent div is removed, the link gets removed as well
$(this).closest("div.ViewRow").remove();
});
this simple yet efficient code works fine: http://jsfiddle.net/L2CsH/
$("#ViewRows").on("click", "a.deleteViewRow", function () {
$(this).parent().remove();
});
you need to prevent default action of link. event.preventDefault()
$("#ViewRows").on("click", "a.deleteViewRow", function (e) {
e.preventDefault();
$(this).closest("div.ViewRow").remove(); //.andSelf() is not needed here.
//return false;
});
Demo : Remove Div JSFiddle
First, Sorry if I don't speak good English.
My question is how do I make a div slide when I click a link using jQuery?
I have this:
<script type="text/javascript">
function slide(div) {
if($(div).css('display') === 'none'){
$(div).delay(300).slideUp(500);
return false;
} else {
$(div).delay(300).slideUp(500);
return false;
}
}
</script>
Click here
<div id="div1" style='display: none'>
this will show
</div>
Does anybody have any idea what the problem is? Thank You
jQuery's .slideUp() is specifically for hiding elements.
If you want to specifically SHOW the div, use .slideDown() to show.
You are also able to use .slideToggle() if you wanted to switch between showing / not showing.
Just change your .slideUp('s to .slideDown('s.
See this jsFiddle
This will fix your function, you're always using slideUp, this way the display will never change
function slide(div) {
if($(div).css('display') === 'none'){
$(div).delay(300).slideDown(500);
return false;
} else {
console.log('2');
$(div).delay(300).slideUp(500);
return false;
}
}
Use slideToggle instead.
Click here
<div id="div1" style='display: none'>
this will show
</div>
$('.handler').click(function() {
$('#div1').slideToggle(500);
});