i need help with closing a div tag that has been expanded using jquery when a "read more" link has been clicked.
I can get one to work but not the rest.
I have attached a fiddle of my code:
http://jsfiddle.net/R9LvG/
This is the first time i have ever used jquery and i am very new to it so please bear with me.
$(document).ready(function () {
$(".clickme").click(function () {
$(".content").slideToggle("slow")
});
});
$(document).ready(function () {
$(".close").click(function () {
$(".content").slideToggle("slow")
});
});
$(document).ready(function () {
$(".clickme2").click(function () {
$(".content2").slideToggle("slow")
});
});
$(document).ready(function () {
$(".clickme3").click(function () {
$(".content3").slideToggle("slow")
});
});
$(document).ready(function () {
$(".clickme4").click(function () {
$(".content4").slideToggle("slow")
});
});
$(document).ready(function () {
$(".clickme5").click(function () {
$(".content5").slideToggle("slow")
});
});
$(document).ready(function () {
$(".close").click(function () {
$(".content").slideToggle("slow")
});
})
As all those part of code are crappy, I would use :
$(document).ready(function () {
$('[class^="clickme"]').click(function (e) {
e.preventDefault();
$(this).next().slideToggle("slow");
});
});
Simpler, cleaner.
:)
$(document).ready(function () {
$(".clickme").click(function () {
$(".content").slideToggle("slow")
});
$(".clickme2").click(function () {
$(".content2").slideToggle("slow")
});
$(".clickme3").click(function () {
$(".content3").slideToggle("slow")
})
$(".clickme4").click(function () {
$(".content4").slideToggle("slow")
});
$(".clickme5").click(function () {
$(".content5").slideToggle("slow")
});
$(".close").click(function () {
$(".content").slideToggle("slow")
});
});
JsFiddle
Also:
remove the '#' href to prevent it from jumping to the top of the page whenever it is clicked
<a class="clickme"><u><b>Read more</b></u></a>
To your clickme css class:
.clickme{cursor:poniter}
and then add a hover event:
.clickme:hover{color:#F00}
You close it 2 times which means it opens up again
Remove this at the end
$(document).ready(function () {
$(".close").click(function () {
$(".content").slideToggle("slow")
});
})
Don't use dom ready functions more times in a single page.
Use Multiselector for click functions
For examples
$(document).ready(function () {
$("#selector1,#selector2, ... #selector-n").click(function () {
$(".content").slideToggle("slow")
});
Please use only one
$(document).ready(function () {
$(".clickme2, .clickme3, .clickme4, .clickme5").click(function () {
$(this).slideToggle("slow");
});
I didn't find any problem in you code.You modify the anchor tab by removing the href="" element, this will prevent moving the page to top each time you click on Read more.
<a class="clickme2" ><u><b>Read more</b></u></a>
And include the jQuery script in you page by copyng the below content in your page,
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
And you can update the script for expanding and compressing as below since you are dealing with different divs with different classes,
<script>
$(document).ready(function () {
$(".clickme").click(function () {
$(".content").slideToggle("slow")
});
$(".close").click(function () {
$(".content").slideToggle("slow")
});
$(".clickme2").click(function () {
$(".content2").slideToggle("slow")
});
$(".clickme3").click(function () {
$(".content3").slideToggle("slow")
});
$(".clickme4").click(function () {
$(".content4").slideToggle("slow")
});
$(".clickme5").click(function () {
$(".content5").slideToggle("slow")
});
$(".close").click(function () {
$(".content").slideToggle("slow")
});
})
</script>
Related
This code works on desktop but not iPhone. I am new to javascript and trying to help out with fixing this issue. Any help would be appreciated!
<script>
jQuery(document).ready(function () {
jQuery(function () {
jQuery(".monthly-table").hide();
jQuery("#show-monthly, #show-annual").bind("click", function () {
jQuery(".monthly-table, .annual-table").hide();
if (jQuery(this).attr("id") == "show-monthly")
{
jQuery(".monthly-table").show();
} else
{
jQuery(".annual-table").show();
}
});
});
});
jQuery(document).ready(function () {
jQuery('.toggler-pricing a').on('click', function () {
jQuery('.toggler-pricing a').removeClass('active');
jQuery(this).addClass('active');
});
});
</script>
So I have this code
$(function () {
$(".one, .two, .three").click(function (event) {
event.preventDefault();
$("#" + $(this).attr("class")).fadeIn().siblings('.popup').hide();
return false;
});
$(".close").click(function (event) {
event.preventDefault();
$(".popup").fadeOut();
});
});
But I'm not quite sure how to animate it. What I want to do is when you click a link, the div fades in (it works), but when you click the related links, I don't want the box to fade out and in again (except for the texts inside it though).
Here's the fiddle
Thanks! x
Hope this works for you
$(function () {
$(".one, .two, .three").click(function (event) {
event.preventDefault();
$("#" + $(this).attr("class")).fadeIn(function(){
$(this).siblings('.popup').hide();
});
return false;
});
$(".close").click(function (event) {
event.preventDefault();
$(".popup").fadeOut();
});
});
Here is the updated fiddle
To get this to fade properly both ways I think you need to play with the z-index:
$(function () {
$(".one, .two, .three").click(function (event) {
event.preventDefault();
$("#" + $(this).attr("class")).css('z-index', 1).fadeIn(function(){
$(this).css('z-index', 0).siblings('.popup').hide();
});
return false;
});
$(".close").click(function (event) {
event.preventDefault();
$(".popup").fadeOut();
});
});
Here is the fiddle
I want to add fade-in and fade-out transitions in this script, so i want to insert fadeOut(1000) fadeIn(1000) in the script.
Here is the script:
jQuery(document).ready(function () {
var $box=jQuery(".post"),
$bar=jQuery("a.bar_view");
$dat=jQuery("a.dat_view");
$dat.click(function () {
$box.removeClass("bar");
jQuery(this).addClass("active");
$bar.removeClass("active");
jQuery.cookie("dat_style", 0);
return false
});
$bar.click(function () {
$box.addClass("bar");
jQuery(this).addClass("active");
$dat.removeClass("active");
jQuery.cookie("dat_style", 1);
return false
});
if(jQuery.cookie("dat_style")==0) {
$box.removeClass( "bar");
$dat.addClass("active")
} else {
$box.addClass("bar");
$bar.addClass("active")
}
});
this is jQuery script for switch between grid and list views to display content.
This is the site, here i implemented this script: http://bbelog-megagrid.blogspot.com View the HTML Sources there.
This is a same example script transitions added:
$(document).ready(function () {
var elem=$('ul');
$('#viewcontrols a').on('click',function(e) {
if ($(this).hasClass('gridview')) {
elem.fadeOut(1000, function () {
elem.removeClass('list').addClass('grid');
elem.fadeIn(1000);
});
}
else if($(this).hasClass('listview')) {
elem.fadeOut(1000, function () {
elem.removeClass('grid').addClass('list');
elem.fadeIn(1000);
});
}
});
});
I want to modify the first script like this one.
you can add those like this
$dat.click(function () {
$box.removeClass("bar");
jQuery(this).addClass("active");
$bar.removeClass("active");
$bar.fadeOut(1000);
$dat.fadeIn(1000);
jQuery.cookie("dat_style", 0);
return false
});
$bar.click(function () {
$box.addClass("bar");
jQuery(this).addClass("active");
$dat.removeClass("active");
$dat.fadeOut(1000);
$bar.fadeIn(1000);
jQuery.cookie("dat_style", 1);
return false
});
I have an iframe on a page. In iframe there are few inputs in a form tag and more can be loaded via ajax.
I'm tring to bind blur or focus event to this inputs but it doesn't work. Other events, such as click works very well.
$(function () {
$("iframe").each(function () {
$(this).load(function () {
$(this).contents().find("input").focus(function() { // works but this is only for existing inputs
alert(1);
});
$(this).contents().find("form").on("click", "input", function (e) { // works
alert(1);
});
$(this).contents().find("form").on("focus", "input", function (e) { // doesnt work
alert(1);
});
});
});
});
Thanks in advance.
To select inputs and forms inside the iframe try this:
$(function () {
$("iframe").each(function () {
$(this).load(function () {
$(this).contents().find('body').find("input").blur(function() {
alert(1);
});
});
});
});
is there any option to prevent slideUp() when hover its related div ?
$('#member1').hover(function () {
$("#memberdetails2").hide();
$("#memberdetails1").stop(true, true).slideDown();
}, function () {
$("#memberdetails1").stop(true, true).slideUp();
});
$('#memebr2').hover(function () {
$("#memberdetails1").hide();
$("#memberdetails2").stop(true, true).slideDown();
}, function () {
$("#memberdetails2").stop(true, true).slideUp();
});
DEMO http://jsfiddle.net/sweetmaanu/zDYyB/
Are you talking about something like this?
http://jsfiddle.net/zDYyB/2/
If you want the members detail to be always visible, remove
$('#company').on('mouseleave', function(e) {
$('.membersare').hide();
});