I'm trying to come up with the most basic example of making a JQuery slide show where you click on the current image you're viewing and you cycle through a gallery of photos. I know its probably not the most basic example, because if I want to add a new image I have to code more JQuery. Is there a more abstract approach where I don't have to code JQuery in terms of div id's and let classes take care of the work? Here is my JQuery
$(document).ready(function() {
$("#pic1").click(function() {
$("#pic1").hide();
$("#pic2").show();
});
$("#pic2").click(function() {
$("#pic2").hide();
$("#pic3").show();
});
$("#pic3").click(function() {
$("#pic3").hide();
$("#pic1").show();
});
});
The rest is here. http://jsfiddle.net/XjdTX/3/
Following code will as simple as you want,
$("#slideframe div").click(function() {
$(this).hide();
if ($(this).next().length > 0) {
$(this).next().show();
} else {
$("#slideframe div").first().show();
}
});
http://jsfiddle.net/XjdTX/5/
Related
On clicking .cart-contents-toggle the #cartplus-dropdown div should slide down and at the same time slide up without clicking on it a second time. Here is the URL where this is implemented: Website Link
jQuery(document).ready(function() {
jQuery('#cartplus-dropdown').hide();
jQuery('.cart-contents-toggle').on("click", function() {
jQuery('#cartplus-dropdown').slideToggle();
});
});
Please use the updated code below and let me know if you have any issue or query.
jQuery(document).ready(function() {
jQuery('.cart-contents-toggle').on("click", function() {
jQuery('#cartplus-dropdown').toggle();
jQuery('#cartplus-dropdown').slideToggle();
});
});
Hope this may be helpful to you.
Tried this and working now
jQuery('.c-btn').mouseenter(function(e) {
jQuery('.cartplus-dropdown').slideDown();
e.stopPropagation();
});
jQuery('.c-btn').mouseleave(function(e) {
jQuery('.cartplus-dropdown').slideUp();
e.stopPropagation();
});
I have created a menu which uses jQuery slideDown/slideUp to show/hide menu items. Jquery code looks like
$(".menu-reveal a").click(function() {
if ($(".menu").is(":visible")) {
$(".menu").slideUp(300);
$(".menu-reveal").removeClass("revealed");
} else {
$(".menu").slideDown(300);
$(".menu-reveal").addClass("revealed");
}
});
Site is loading by default with "hidden" menu items, then visitor needs to click it to see menu items.
My question is how I can "keep" menu statement if was expanded or not on page change? For an example I want to have it shown on next page when it was expanded on a previous page.
Here is working code:
$(".menu-reveal a").click(function() {
if ($(".menu").is(":visible")) {
$.removeCookie("top-menu", { path: '/' });
$(".menu").slideUp(300);
$(".menu-reveal").removeClass("revealed");
} else {
$(".menu").slideDown(300);
$(".menu-reveal").addClass("revealed");
$.cookie("top-menu", 1, { path: '/' });
}
});
// Permanent top menu
var cookieTopMenu = $.cookie("top-menu");
if (cookieTopMenu == 1){
$(".menu").slideDown(1);
$(".menu-reveal").addClass("revealed"); }
else {
$(".menu").slideUp(1);
$(".menu-reveal").removeClass("revealed");
}
I have used jQuery cookie plugin to achieve desired results.
Hope it will helps somebody else.
So I inherited some code that I am trying to customize and I've hit a roadblock. I believe this little piece of code is the issue:
jQuery(function($){
var photos = [
'cover/001_final.jpg',
'cover/002_final.jpg',
'cover/003_final.jpg',
'cover/004_final.jpg',
'cover/006_final.jpg',
'cover/007_final.jpg',
'cover/008_final.jpg',
'cover/009_final.jpg',
'cover/044_final.jpg',
'cover/085_final.jpg',
'cover/123_final.jpg' ]
$.backstretch(photos[Math.floor(Math.random() * photos.length)]);
$(document.body).on("backstretch.show", function () {
$('body').addClass('load');
});
$('.nav-link a')
.hover(
function() { $(this).addClass('hover'); },
function() { $(this).removeClass('hover'); })
.click(function(){
$(this).removeClass('hover');
});
});
If I understand correctly, this script is randomly loading the backgrounds and then stretching the images and then loading the menu...
..I would like to use the menu feature on another page that does not require a stretched background, how can I remove the dependency on the background loading/stretching and just load the menu?
Thanks in advance.
Try using :
$(function () {
$('body').addClass('load');
});
Instead of :
$(document.body).on("backstretch.show", function () {
$('body').addClass('load');
});
I would like to add/remove a new div when the corresponding checkbox is checked/unchecked with jQuery. Here's my attempt:
<script type="text/javascript">
$(function() {
$("#form1 :checkbox#checkbox1").click(function() {
var d = document.createElement('div');
if ($(this).is(":checked")) {
$(d).addClass("newdiv")
.html("This is a new div")
.appendTo($("#mydiv"))
.hide()
.fadeIn(1000);
}
else {
//$(".newdiv").fadeOut(1000);
$(d).fadeOut(1000);
}
});
});
</script>
The fadeIn process comes out smoothly. But when I tried to fadeOut $(d) using the same methodology, it didn't work: the new generated div remained on the page. I did some research and get a work around, with $(".newdiv").fadeOut(1000); (commented in the code above), but that's not the best solution for me I think. And also I really want to know why my first attempt didn't work. Any suggestions? Thanks.
There are few changes you can make
1. No need for the selector #form1 :checkbox#checkbox1 since you have an id for the checkbox, you can just use #checkbox1
2. Create the div using jQuery instead of using createElement $('<div/>')
3. After fading out the div you need to remove it from the dom
$(function() {
$("#checkbox1").click(function() {
if ($(this).is(":checked")) {
$('<div/>').addClass("newdiv")
.html("This is a new div")
.appendTo($("#mydiv"))
.hide()
.fadeIn(1000);
}
else {
$('#mydiv .newdiv').fadeOut(function(){
$(this).remove()
})
}
});
});
Demo: Fiddle
Another solution is to have a static div which will be shown and hidden
$(function() {
var div = $('<div/>').addClass("newdiv")
.html("This is a new div")
.appendTo($("#mydiv"))
.hide();
$("#checkbox1").click(function() {
if ($(this).is(":checked")) {
div.fadeIn(1000);
} else {
div.fadeOut(1000)
}
});
});
Demo: Fiddle
jsFiddle Demo
Every time your click handler runs, you're creating a new variable d with a new element. Instead, do that before the click handler, so each instance will reference the same element. I have included other optional improvements below.
A change event is more appropriate for checkboxes. Also, notice I made your selector just #checkbox1, since that is already unambiguous and maximally specific.
To get a better visual effect, don't add the element, hide it, then fade it in. In most browsers that will show the element flicker before it appears. Instead, use a class to hide it with css: .hidden {display: none;}. You can also use fadeToggle to toggle the visibility, instead of doing if/else. clearQueue removes extra events for multiple clicks during a transition, and makes transitions appear smoother.
Finally, use jQuery to create the element:
$(function () {
var $d = $('<div>', {
"class": "hidden",
text: "This is a new div"
}).appendTo("#mydiv");
$("#checkbox1").change(function () {
$d.clearQueue()
.stop()
.fadeToggle(1000);
});
});
You better make d a jQuery object.
<script type="text/javascript">
$(function() {
$("#checkbox1").click(function() {
var d = $('<div class="newdiv"></div>');
if ($(this).is(":checked")) {
d.html("This is a new div")
.appendTo($("#mydiv"))
.hide()
.fadeIn(1000);
}
else {
d.fadeOut(1000);
}
});
});
</script>
I'm creating a feature content slider using jQuery and I have hit a few snags trying to get rid of the last few bugs. It is inspired by http://kleientertainment.com/ so check it out and you'll see what im going for. Any suggestions on achieving this effect even with totally new code would be helpful!
The idea is a simple div swap, but with custom animations for each slide that fire when it is loaded. It also MUST fade to black in between each transition, whether autoplay or clicked.
lets get to the code and bugs:
$(document).ready(function () {
//START SLIDES HIDDEN
$('.slide').css({
'position': 'absolute',
'display': 'none'
});
//RUN FIRST SLIDE
runSlideShow(1);
animation1_swap();
//AUTOPLAY FUNCTION
function runSlideShow(slideNumber) {
$('#slide' + slideNumber).fadeIn(1000).delay(10000).fadeOut(1000, function () {
if (slideNumber == 4) {
animation1_swap();
runSlideShow(1);
}
if (slideNumber == 3) {
animation4_swap();
runSlideShow(4);
}
if (slideNumber == 2) {
animation3_swap();
runSlideShow(3);
}
if (slideNumber == 1) {
animation2_swap();
runSlideShow(2);
}
});
//NAVIGATION BUTTONS
$('#bullet1').click(function () {
$('.slide:visible').stop(true, true).fadeOut(1000, function () {
animation1_swap();
runSlideShow(1);
});
});
$('#bullet2').click(function () {
$('.slide:visible').stop(true, true).fadeOut(1000, function () {
animation2_swap();
runSlideShow(2);
});
});
$('#bullet3').click(function () {
$('.slide:visible').stop(true, true).fadeOut(1000, function () {
animation3_swap();
runSlideShow(3);
});
});
$('#bullet4').click(function () {
$('.slide:visible').stop(true, true).fadeOut(1000, function () {
animation4_swap();
runSlideShow(4);
});
});
}
});
CSS info: .slide sets the dimensions, and #slideX are the individual background images for each. #bulletX are the nav buttons.
Also, the animationX_swap() are the animations specific to that slide. They live in another file and would have made this post way too long.
The bugs:
Right now, the autoplay function is great, you can watch it all day and not see a hiccup. The trouble comes when the nav buttons are used, particularly #bullet1. If i click #bullet1, then go to 2, then back to 1, the autoplay seems to be sped up as the slide fades out before it is supposed to. I am a total beginner but I made it this far, can anyone help me clean this up and essentially reimagine http://kleientertainment.com/ 's slider?
Just discovered jQuery cycle plugin http://malsup.com/jquery/cycle/ from another post.
I remade my slider with that and it preforms exactly as needed. Good stuff!