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
});
Related
I am using popup plugin presented by some user of stackoverflow.
It works perfectly, but I wanted to add another one on the same page and it does some strange things. The first one works fine, the second one opens, but when i want to close it, it opens the first one instead. Could someone give me any clue please? I have changed all the classes, IDs etc
First one:
...
<a href='/contact' class='menuButton' id='contact'>KONTAKT</a>
<div class="messagepop pop">
<p>popup message1</p>
</div>
...
<script>
function deselect(e) {
$('.pop').slideFadeToggle(function() {
e.removeClass('selected');
});
}
$(function() {
$('#contact').on('click', function() {
if($(this).hasClass('selected')) {
deselect($(this));
} else {
$(this).addClass('selected');
$('.pop').slideFadeToggle();
}
return false;
});
$('.close').on('click', function() {
deselect($('#contact'));
return false;
});
});
$.fn.slideFadeToggle = function(easing, callback) {
return this.animate({ opacity: 'toggle', height: 'toggle' }, 'fast', easing, callback);
};
</script>
Secone one:
...
<a href='/contact2' class='menuButton' id='contact2'>BILETY</a>
<div class='messagepop2 pop2'>
<p>popup message 2</p>
</div>
...
<script>
function deselect(e) {
$('.pop2').slideFadeToggle(function() {
e.removeClass('selected2');
});
}
$(function() {
$('#menuButtonBilety').on('click', function() {
if($(this).hasClass('selected2')) {
deselect($(this));
} else {
$(this).addClass('selected2');
$('.pop2').slideFadeToggle();
}
return false;
});
$('.close2').on('click', function() {
deselect($('#menuButtonBilety'));
return false;
});
});
$.fn.slideFadeToggle = function(easing, callback) {
return this.animate({ opacity: 'toggle', height: 'toggle' }, 'fast', easing, callback);
};
</script>
EDIT: The script comes from the best answer HERE
In your case probably you are overriding the deselect function.
But instead of multiply your code one for each element instance you can set it more general using DOM structure hierarchy, like:
function deselect(e) {
e.next('.pop').slideFadeToggle(function () {
e.removeClass('selected');
});
}
$(function () {
$('.menuButton').on('click', function () {
if ($(this).hasClass('selected')) {
deselect($(this));
} else {
$(this).addClass('selected');
$(this).next('.pop').slideFadeToggle();
}
return false;
});
});
$.fn.slideFadeToggle = function (easing, callback) {
return this.animate({
opacity: 'toggle',
height: 'toggle'
}, 'fast', easing, callback);
};
Demo: http://jsfiddle.net/IrvinDominin/u2fkff64/
I want this loop forever
$(document).ready(function() {
function news_hot() {
$("div p").each(function(i) {
$(this).delay(1000 * i).queue(function() {
$(this).addClass('hot_li ');
$(this).prev().removeClass('hot_li');
});
});
}
news_hot();
});
<div>
<p>dfsdfsd</p>
<p>dfsdfsd</p>
<p>dfsdfsd</p>
</div>
You can use setInterval() JavaScript function with specified time in milliseconds. The called function will run forever after interval time unless you stop it.
$(document).ready(function () {
function news_hot() {
$("div p").each(function (i) {
$(this).delay(1000 * i).queue(function () {
$(this).addClass('hot_li ');
$(this).prev().removeClass('hot_li');
});
});
}
setInterval(news_hot(),5000);
});
UPDATED CODE WORKING FIDDLE
function news_hot() {
$("div p").each(function (i) {
$(this).delay(1000 * i).queue(function () {
$("div p").removeClass("hot_li");
$(this).addClass('hot_li');
//$(this).prev().removeClass('hot_li');
$(this).dequeue();
});
});
}
setInterval(function(){news_hot()},5000);
.dequeue() function has been added to the code
Below is a link to the code.
I need to be able to hover back and forth from "red" and "blk" with the functions changing the colour back and forth also. I believe it needs to be reset somehow?
http://jsfiddle.net/kAMG7/
$('#red').on('mouseover', function() {
$('#blue1').addClass("green");
});
$('#blk').on('mouseover', function() {
$('#blue1').addClass("black");
});
Thank you.
try
$('#red').on('mouseover', function() {
$('#blue1').addClass("green");
$('#blue1').removeClass("black");
});
$('#blk').on('mouseover', function() {
$('#blue1').addClass("black");
$('#blue1').removeClass("green");
});
$(document).ready(function()
{
$('#red').mouseover(function() {
$('#blue1').addClass("green");
});
});
$(document).ready(function()
{
$('#red').mouseout(function() {
$('#blue1').removeClass("green");
});
});
$("#red").hover(
function() {
$("#blue1").addClass("green");
},
function() {
$('#blue1').removeClass("green");
}
);
$("#blk").hover(
function() {
$("#blue1").addClass("black");
},
function() {
$('#blue1').removeClass("black");
}
);
$(document).ready(function(){
$("#start_quiz").click(function(){
$("#start_quiz").fadeOut(0);
$("#quiz_game").fadeIn('slow');
$("#answer_button").click(function(){
if($("#test").is(":checked")){
$(".questions").fadeOut(200, function(){
$('#correct_answer').fadeIn('slow');
});
};
});
});
});
I have managed to get this jQuery code to work so that if the correct answer is in my form, it will fade out and display some text. I was wondering how I could design this so if any of the other four radio buttons were pressed, it could instead display other text (currently nothing happens). Thanks in advance for any help.
$(document).ready(function () {
$("#start_quiz").click(function () {
$("#start_quiz").fadeOut(0);
$("#quiz_game").fadeIn('slow');
$("#answer_button").click(function () {
if ($("#test").is(":checked")) {
$(".questions").fadeOut(200, function () {
$('#correct_answer').fadeIn('slow');
});
} else {
/* YOU WOULD PUT CODE HERE FOR INCORRECT ANSWER */
}
});
});
});
http://jsfiddle.net/24DeT/
if($("#test").is(":checked")){
$(".questions").fadeOut(200, function(){
$('#correct_answer').fadeIn('slow');
});
}
else if($("#testotherone").is(":checked")){
$(".questions").fadeOut(200, function(){
$('#otherone_answer').fadeIn('slow');
});
}
else if($("#testothertow").is(":checked")){
$(".questions").fadeOut(200, function(){
$('#othertow_answer').fadeIn('slow');
});
}
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>