home big hovers

This commit is contained in:
2019-06-18 16:41:45 +02:00
parent 5fe471dfe6
commit cfe1433555
7 changed files with 192 additions and 101 deletions

View File

@@ -1,40 +0,0 @@
jQuery(function ($) { // use jQuery code inside this to avoid "$ is not defined" error
// $('.misha_loadmore').click(function () {
// var button = $(this),
// data = {
// 'action': 'loadmore',
// 'query': misha_loadmore_params.posts, // that's how we get params from wp_localize_script() function
// 'page': misha_loadmore_params.current_page
// };
// button.trigger("moreload-start")
// console.log(misha_loadmore_params)
// $.ajax({ // you can also use $.post here
// url: misha_loadmore_params.ajaxurl, // AJAX handler
// data: data,
// type: 'POST',
// beforeSend: function (xhr) {
// button.html('<p>Betöltés...</p>'); // change the button text, you can also add a preloader image
// },
// success: function (data) {
// if (data) {
// button.html('<a>Mutass többet</a>').before(data); // insert new posts
// misha_loadmore_params.current_page++;
// button.trigger("moreload-finish")
// if (misha_loadmore_params.current_page -1 == misha_loadmore_params.max_page)
// button.remove(); // if last page, remove the button
// // you can also fire the "post-load" event here if you use a plugin that requires it
// // $( document.body ).trigger( 'post-load' );
// } else {
// button.remove(); // if no data, remove the button as well
// }
// }
// });
// });
});

View File

@@ -175,7 +175,7 @@
if (isHome || isArchive) {
//no overflowY
$('html').css({ overflowY: "hidden" })
$('html').css({ overflowY: "hidden" })
//calculate wrappable elements
$('#content>*:not(.misha_loadmore)').addClass("hbox")
@@ -221,7 +221,7 @@
}
//add bottom scrollbar to div on bottom:
$(".home-wrapper-big .metadata").css({bottom: bottomScrollHeight})
$(".home-wrapper-big .metadata").css({ bottom: bottomScrollHeight })
}//isHome || isArchive end
}// !isMobile end
@@ -462,27 +462,43 @@
/* ------------------------------ hover on home ----------------------------- */
//hover on big articles
$(".home-big h2").hover(function () {
$(".home-big h2, .home-big .thumbnailwrapper").hover(function () {
let cc = $(this)
let cArticle = cc.parents("article")
let cMetadata = cArticle.children(".metadata")
//add hovered class
cArticle.addClass("hovered")
//add tag to header for bg
let artClasses = cArticle.attr("class").split(" ")
let theTag = findClassByStart(artClasses, "tag")
$("body, .header-1, .header-2").addClass("hover-" + theTag)
//show excerpt and alcim
cArticle.children(".metadata").children(".alcim").show()
cArticle.children(".metadata").children(".bevezeto").show()
//animate border
cMetadata.stop().animate({ height: "25rem" }, _ => {
//hide metadata
cMetadata.children(".categories, .postedon").hide()
cMetadata.children(".alcim, .bevezeto").show().removeClass("transparent")
})
}, function () {
let cc = $(this)
let cArticle = cc.parents("article")
let cMetadata = cArticle.children(".metadata")
//remove hovered class
cc.parents("article").removeClass("hovered")
cArticle.removeClass("hovered")
//remove tag from header and body
let headerClasses = $(".header-1").attr("class").split(" ")
var hoverClass = findClassByStart(headerClasses, "hover")
$("body, .header-1, .header-2").removeClass(hoverClass)
//transparent metadata
cMetadata.children(".alcim, .bevezeto").addClass("transparent")
//animate height change
cMetadata.stop().animate({ height: "10rem" }, _ => {
//hide and show metadata
cMetadata.children(".alcim, .bevezeto").hide().removeClass("transparent")
cMetadata.children(".categories, .postedon").show()
})
})