user2983808 user2983808 - 4 months ago 16
Javascript Question

How to scroll down to content box in this video style with jquery/javascript?

I have a page with video styles - http://picovico.com/video-styles/ in my WordPress. Everything is working fine, except that I would like to scroll down to content when the thumbnails are clicked. Right now the content box is opening but the window is not scrolling down to it. Actually I am using a plugin called expand grid. I am not getting support from the plugin author.

I am using bellow code:

$(".cq-expandgrid-item").click(function() {
$('html, body').animate({
scrollTop: $(".cq-expandgrid-content").offset().top
}, 5000);
});


Thanks.

@TTCC Here's the init.min.js present in the plugin file. The code is given below. With your help, I hope I can locate and add the code you suggested now:

jQuery(document).ready(function(a) {
a(".cq-expandgrid").each(function(b, c) {
function r() {
o = setInterval(function() {
clearInterval(o), k++, k > m && (k = 0), a(".cq-expandgrid-toggle", p).eq(k).trigger("click"), r()
}, 1e3 * j)
}
var d = a(this),
e = a(this).data("itemsize"),
f = "yes" == a(this).data("transparentitem") ? !0 : !1,
g = a(this).data("labelfontsize"),
h = a(this).data("subfontsize"),
i = parseInt(a(this).data("itemheight"), 10),
j = parseInt(a(this).data("autoslide"), 10),
k = 0,
m = a(".cq-expandgrid-item", d).length,
n = "yes" == a(this).data("openfirst") ? !1 : !0,
o = 0,
p = a(".cq-expandgrid-item", d).each(function(b) {
a(this).data("index", b);
var c = a(this).data("image"),
d = a(this).data("avatar"),
f = a(this).data("backgroundcolor"),
j = a(this).data("iconcolor"),
k = a(this).data("iconsize"),
l = a(this).data("contentcolor"),
m = a(this).data("labelcolor"),
n = a(this).data("subtitlecolor"),
o = a(this).data("bgstyle"),
p = a(this).data("avatartype"),
q = a(this),
r = a(this).attr("title");
if (r && "" !== r) var r = a(".cq-expandgrid-face", q).tooltipster({
content: r,
position: "top",
delay: 200,
interactive: !0,
speed: 300,
touchDevices: !0,
animation: "grow",
theme: "tooltipster-shadow",
contentAsHTML: !0
});
"" != l && a(".cq-expandgrid-text, .cq-expandgrid-text p, .cq-expandgrid-text h2, .cq-expandgrid-text h3, .cq-expandgrid-text h4, .cq-expandgrid-text h5, .cq-expandgrid-text h6", q).css("color", l), "" != m && a(".cq-expandgrid-title", q).css("color", m), "" != n && a(".cq-expandgrid-subtitle", q).css("color", n), "" != g && a(".cq-expandgrid-title", q).css("font-size", g), "" != h && a(".cq-expandgrid-subtitle", q).css("font-size", h), i > 0 && "customized" == e && a(".cq-expandgrid-face", q).css("height", i), "" != f && "customized" == o && a(".cq-expandgrid-face", q).css("background-color", f), "" != j && a(".cq-expandgrid-icon", q).css("color", j), "" != k && a(".cq-expandgrid-icon", q).css("font-size", k), "" != c && "undefined" != c && c && a(".cq-expandgrid-face", q).css({
"background-image": "url(" + c + ")"
}), "image" == p && "" != d && "undefined" != d && d && a(".cq-expandgrid-avatar", q).css({
"background-image": "url(" + d + ")"
})
}),
q = null;
d.on("mouseover", function(a) {
clearInterval(o)
}).on("mouseleave", function(a) {
j > 0 && r()
}), a(".cq-expandgrid-toggle", p).click(function() {
var b = a(this).closest(".cq-expandgrid-item");
b.data("backgroundcolor");
if (k = b.data("index"), clearInterval(o), q && !b.is(q)) {
q.removeClass("cq-expandgrid-openstate").addClass("cq-expandgrid-initstate"), f && p.removeClass("outfoucs");
var d = a("iframe", q).attr("src");
d && "" != d && (d.indexOf("youtube") > -1 || d.indexOf("vimeo") > -1) && (a("iframe", q).attr("src", ""), a("iframe", q).attr("src", d))
}
b.hasClass("cq-expandgrid-initstate") ? (q = b.removeClass("cq-expandgrid-initstate").addClass("cq-expandgrid-openstate"), p.not(b).hasClass("outfoucs") || f && p.not(b).addClass("outfoucs")) : (b.removeClass("cq-expandgrid-openstate").addClass("cq-expandgrid-initstate"), f && p.not(b).removeClass("outfoucs"))
}), (n || j > 0) && a(".cq-expandgrid-toggle", p).eq(0).trigger("click"), j > 0 && r(), p.find(".cq-expandgrid-close").click(function() {
var b = a(this).closest(".cq-expandgrid-item");
b.removeClass("cq-expandgrid-openstate").addClass("cq-expandgrid-initstate"), p.not(b).removeClass("outfoucs")
})
})


});

@TTCC, Here's the code I implemented as per your suggestion:

b.hasClass("cq-expandgrid-initstate") ? (q = b.removeClass("cq-expandgrid-initstate").addClass("cq-expandgrid-openstate"), p.not(b).hasClass("outfoucs") || f && p.not(b).addClass("outfoucs")) : (b.removeClass("cq-expandgrid-openstate").addClass("cq-expandgrid-initstate"), f && p.not(b).removeClass("outfoucs")), b.hasClass("cq-expandgrid-initstate") && a('body').stop().animate({scrollTop: b.find(".cq-expandgrid-content").offset().top - 50 }, 500);
})

Answer

Your javascript code has two script tag in your page, and this error make code can not run.

Actually, you don't need to write a piece of code alone, and just move it to the "cq-expandgrid-toggle" click event in vc-extensions-expandgrid/js/init.min.js" file.

You can use jQuery.animate() and scrollTop property to achieve it.

Replace code in init.min.js file from line 63 to 65 (before "})") by my code below:

b.hasClass("cq-expandgrid-initstate") ? (a('body').stop().animate({scrollTop: b.find(".cq-expandgrid-content").offset().top - 0}, 200),q = b.removeClass("cq-expandgrid-initstate").addClass("cq-expandgrid-openstate"), p.not(b).hasClass("outfoucs") || f && p.not(b).addClass("outfoucs"))
                    : (b.removeClass("cq-expandgrid-openstate").addClass("cq-expandgrid-initstate"), f && p.not(b).removeClass("outfoucs"));

"500" is a number determining in millisecond how long the animation will run, and you can change it as your wish.

And remove transition style of .cq-expandgrid-content in /wp-content/plugins/vc-extensions-expandgrid/css/style.css file (about line 378).

transition: all 0.2s ease-in-out;

Here is a jsfiddle.

Comments