I have a shopping bag icon under my posts(.wrap-front-page-shop) and I am trying to make it so that when you hover over the shopping bag icon the post excerpt will disappear(.front-page-post-excerpt). I'm trying to do this with css, and I think I have written the css right, but it is not working. Does anyone see my mistake, or is there a better way to fix this problem? Thanks in advance.
the css
.wrap-front-page-shop:not(:hover) .front-page-post-excerpt {
font-family: 'Crimson Text', serif;
font-size: 15px;
padding: 50px 50px;
display: block;
position:absolute;
}
.wrap-front-page-shop:hover .front-page-post-excerpt {
color: #ffffff;
visibility: hidden;
display: block;
position:absolute;
}
front-page-shop-the-post.php (the code is for the shopping icon and the actual shopping widget that shows up when you hover over the shopping icon - it works correctly)
<div class="wrap-front-page-shop">
<div class="front-page-shop-image"><img src="http://localhost:8888/wordpress/wp-content/uploads/2017/01/shopping-shopping-bag-icon.png" /></div>
<div class="shopthepost-widget-front">
<?php if (shortcode_exists('show_shopthepost_widget')) {
// Get the value of the custom field defined in the editor
$widgetId = get_post_meta(get_the_ID(), 'shortcode_id', true);
// Check if a value is set
if (!empty($widgetId)) {
$shortcode = '[show_shopthepost_widget id="'.$widgetId.'"]';
} else {
// or use a default widget
$shortcode = '[show_shopthepost_widget id="2379026"]';
}
echo do_shortcode($shortcode);
} ?>
</div>
</div>
the css to show the shopping widget when you hover over shopping icon)
.wrap-front-page-shop:not(:hover) .shopthepost-widget-front {
background-color: #ffffff;
visibility: hidden;
display: block;
position:absolute;
}
.wrap-front-page-shop:hover .shopthepost-widget-front {
display: block;
position:absolute;
margin-left:-225px;
bottom:150px;
background-color: #ffffff;
padding:30px;
}
.wrap-front-page-shop:hover .stp-control {
background-color: #ffffff !important;
display:inherit !important;
}
.wrap-front-page-shop {
display: inline-block;
}
.front-page-shop-image {
padding-right: 15px;
padding-bottom: 30px;
}
font-page.php that shows post excerpt code
<?php
/*
* Template Name:
*/
get_header();
get_template_part ('inc/carousel');
$the_query = new WP_Query( [
'posts_per_page' => 14,
'paged' => get_query_var('paged', 1)
] );
if ( $the_query->have_posts() ) { ?>
<div id="ajax">
<?php
$i = 0;
while ( $the_query->have_posts() ) { $the_query->the_post();
if ( $i % 7 === 0 ) { // Large post: on the first iteration and every 7th post after... ?>
<article <?php post_class( 'col-sm-12 col-md-12' ); ?>>
<div class="large-front-container">
<?php the_post_thumbnail('full', array('class' => 'large-front-thumbnail')); ?>
</div>
<h2><a class="front-page-post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p>
<div class="front-page-post-info">
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
<?php get_template_part( 'front-shop-the-post' ); ?>
<?php get_template_part( 'share-buttons' ); ?>
<div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div>
</div>
</article>
<?php
} else { // Small posts ?>
<article <?php post_class( 'col-sm-6 col-md-4' ); ?>>
<?php the_post_thumbnail('full', array('class' => 'medium-front-thumbnail')); ?>
<h2><a class="front-page-post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p>
<div class="front-page-post-info">
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
<?php get_template_part( 'front-shop-the-post' ); ?>
<?php get_template_part( 'share-buttons' ); ?>
<div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div>
</div>
</article>
<?php
}
$i++;
}?>
</div>
<?php if(get_query_var('paged') < $the_query->max_num_pages) {
}
}
elseif (!get_query_var('paged') || get_query_var('paged') == '1') {
echo '<p>Sorry, no posts matched your criteria.</p>';
}
wp_reset_postdata();
get_footer();
JS I tried adding in for a possible solutions (did not work)
var _products = document.getElementById("front-page-shop-image"),
_hideIfHovered = document.getElementById("front-page-post-excerpt");
for (var i=0, e = _products.children; i < e.length; i++) {
e[i].onmouseenter = function() {
_hideIfHovered.style.display = "none";
}
e[i].onmouseleave = function() {
_hideIfHovered.style.display = "inherit";
}
}
Related
I have a Wordpress site and the images in my posts force the width of my site, breaking it when it's mobile sized. Looking for code to make the Wordpress post images full width (with auto height to maintain proportions) based on container size.
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class="container">
<?php the_content();?>
</div>
<?php endwhile; ?>
<?php endif; ?>
EDIT
function theme_content_image_sizes_attr( $sizes, $size ) {
$width = $size[0];
if ( 740 <= $width ) {
$sizes = '(max-width: 706px) 89vw, (max-width: 767px) 82vw, 740px';
}
return $sizes;
}
add_filter( 'wp_calculate_image_sizes', 'theme_content_image_sizes_attr', 10, 2 );
Just a suggestion, maybe you can use the featured image as a background so you can control the width and height.
<?php $backgroundImg = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' ); ?>
<div class="header-wrap" style="background-image: url('<?php echo $backgroundImg[0]; ?>')">
</div>
.header-wrap {
background-repeat: no-repeat;
background-size: cover;
padding: 80px 0;
}
I would like my navigation to be fixed after a slideshow on my wordpress site, however the coding I have used in the past does not appear to be working.
The website in question is:
www.guerrilla.nz
The Code:
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<?php wp_head(); ?>
<script src="https://use.typekit.net/gbc6dao.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.j s"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type='text/javascript'>
// Sticky nav
var nav = $('stick');
var navHomeY = nav.offset().top;
$(window).scroll(function() {
var scrollTop = $(window).scrollTop();
var shouldBeFixed = scrollTop > navHomeY;
if ($(this).scrollTop() > navHomeY){
nav.addClass("fixed-nav");
}
else{
nav.removeClass("fixed-nav");
}
});
</script>
<style>
.fixed-nav {
position: fixed;
top: 0;
z-index: 1001;
width: 100%;
}
#stick.fixed-nav {
background-color: rgba(255, 255, 255, 1);
position: fixed!important;
top: 0;left: 0; right: 0;
top: 0;
width: 100%;
z-index: 50000!important;
}
</style>
</head>
<body <?php body_class(); ?>>
<?php do_action( 'before' ); ?>
<?php if( is_page( 'Home' ) ) { ?>
<div class="cb-slideshow-container">
<ul class="cb-slideshow">
<li><span>Image 01</span><div><h3>OWNER OF A SMALL BUSINESS?</h3> </div></li>
<li><span>Image 02</span><div><h3>OR TRADIE,<br>
LOOKING TO GO IT ALONE?</div></li>
<li><span>Image 03</span><div><h3>DON'T KNOW<br>
WHERE TO START...</h3></div></li>
<li><span>Image 04</span><div><h3>WE CAN HELP</h3></div></li>
<li><span class="toe">Gerrilla</span></li>
</ul>
</div>
<?php } ?>
<header class="site-header" role="banner">
<nav id="stick" class="site-navigation">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="navbar navbar-default">
<div class="navbar-header">
<!-- .navbar-toggle is used as the toggle for collapsed navbar content -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
<span class="sr-only"><?php _e('Toggle navigation','_tk') ?> </span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Your site title as branding in the menu -->
<?php if ( get_theme_mod( 'andys_logo' ) ) : ?>
<div class='site-logo'>
<a href='<?php echo esc_url( home_url( '/' ) ); ?>' title='<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>' rel='home'> <img src='<?php echo esc_url( get_theme_mod( 'andys_logo' ) ); ?>' alt='<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>'> </a>
</div>
<?php else : ?>
<hgroup>
<h1 class='site-title'><a href='<?php echo esc_url( home_url( '/' ) ); ?>' title='<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>' rel='home'><?php bloginfo( 'name' ); ?></a></h1>
<h2 class='site-description'><?php bloginfo( 'description' ); ?></h2>
</hgroup>
<?php endif; ?>
</div>
<div class="getstartedn-wrap">
<a href="http://www.guerrilla.nz/contact-us/">
<div class="nav-getstarted getstarted-button">GET STARTED</div>
</a>
</div>
<!-- The WordPress Menu goes here -->
<?php wp_nav_menu(
array(
'theme_location' => 'primary',
'depth' => 2,
'container' => 'nav',
'container_id' => 'navbar-collapse',
'container_class' => 'collapse navbar- collapse',
'menu_class' => 'nav navbar-nav',
'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
'menu_id' => 'main-menu',
'walker' => new wp_bootstrap_navwalker()
)
); ?>
</div><!-- .navbar -->
</div>
</div> <!--<div style="background-color:#000; height:30px; color:#000;"> dsfsf</div> -->
</div><!-- .container -->
</nav><!-- .site-navigation -->
</header><!-- #masthead -->
I would like my navigation to be fixed after a slideshow on my wordpress site, however the coding I have used in the past does not appear to be working.
Just take a look at your console. There's an error: Uncaught TypeError: Cannot read property 'top' of undefined.
It's pretty simple. Get the outerHeight of the slideshow element and then apply the sticky class to your nav if this specific height is reached.
Don't forget to add a padding-top to your body with the same height of your nav. Because your navigation will be fixed at the top, your body needs a padding-top.
Here's a simple example:
$(window).scroll(function() {
var slideshow = $('.slideshow').outerHeight();
var nav = $('nav');
if ($(window).scrollTop() >= slideshow) {
nav.addClass('sticky');
} else {
nav.removeClass('sticky');
}
});
html, body {
padding: 0;
margin: 0;
}
.slideshow {
width: 100%;
height: 200px;
background: blue;
}
nav {
width: 100%;
height: 50px;
background: red;
}
.sticky {
position: fixed;
top: 0;
left: 0;
right: 0;
}
main {
/* Get some space */
min-height: 800px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slideshow">
<p>
Just for testing
</p>
</div>
<nav>
<p>
Just to demonstrate it
</p>
</nav>
<main>
<p>
Just to get some space
</p>
</main>
i'm fighting with 3 columns landscape layout
i would like to print a page with 3 same fix with columns (unfortunately height are not the same, sometimes pages will break down to 2 pages)
what i would like to get in landscape is:
and what i'm getting is:
i cannot position this like it should be
can you advise me for some good solution for this crap please
any advice will be helpful, or maybe you whose already struggling with this problem and you can give my god direction please
i who's doing this not in landscape a few days ago and it whose working find
i didn't find a solution in web for this now
this is my starting code:
<?php
include("bd.php");
$print[] = null;
if(isset($_GET['option1'])) {
$print = $_GET['option1'];
}
$integerIDs = array_map('intval', explode(',', $print));
$usersIDS = implode(',', $integerIDs);
$requete = "SELECT p.pr_id as id, p.pr_nom as nom, p.pr_poids as poids, p.pr_ingredients as ingredients, p.pr_description as description, p.pr_valeurs_energetiques as valeurs_energetiques, p.pr_valeurs_nutritionnelles as valeurs_nutritionnelles, c.ca_nom as categorie, sc.sc_nom as sous_categorie, p.pr_enligne as enligne FROM produit p,categorie c,sous_categorie sc WHERE p.pr_id_categorie=c.ca_id AND p.pr_id_sous_categorie=sc.sc_id AND p.pr_id IN ({$usersIDS}) ORDER BY p.pr_id";
$resultat = mysql_query($requete);
$num_rows = mysql_num_rows($resultat);
mysql_query("SET NAMES 'utf8'");
?>
<!DOCTYPE html>
<html>
<head lang="fr">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link type="text/css" media="print" href="css/print.css">
<script src="js/jquery-1.10.2.js"></script>
<script src="js/bootstrap.min.js"></script>
<style type="text/css" >
/* PAGE SETTINGS */
.pageRotate
{
-webkit-transform: rotate(-90deg);
-moz-transform:rotate(-90deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.rowMainPage {
}
.column {
width: 63mm;
border: solid #000000 1px;
float: left;
position:relative;
padding: 0;
}
/*PAGE ITEMS*/
.logoPuricard{
width: 7em;
top: 0;
margin-left: 38%;
margin-bottom: 5px;
}
/*PRODUCT IMAGE*/
.productImg {
width: 8em;
float: left
}
/*PRODUCT NAME*/
.nom {
font-size: 20px;
font-weight: bold;
margin-left: 2em;
}
/*Product weight*/
.weight {
margin-left: 4em !important;
}
/*Product description*/
.ProductDescription {
}
/*Product container of small peaces(Ingrédients,Valeurs énergétiques etc..) with black border*/
.divSmallContainer {
border: solid 1px #000000;
width: 100%;
/*margin-left: -1em;*/
}
/*Container for valor energetic*/
.valeurEnergContainer {
padding-left: 10px;
}
</style>
</head>
<body class="pageRotate" onload="window.print()">
<!--CONTAINER START-->
<div class="container">
<?php
if($num_rows > 0) {
/*
Start with variables to help with row creation;
*/
$startRow = true;
$postCounter = 0;
$idCheck = 0;
while($num_rows > 0){
$ligne = mysql_fetch_assoc($resultat);
if ($startRow) {
/*LOGO START*/
echo "<img class='logoPuricard' src='./images/logo.jpg'>";
/*LOGO END*/
/*PAGE ROW START*/
echo '<div class="row rowMainPage">';
// /*FIRST COLUMN START*/
// echo '<div class="col-md-12">';
echo "<!-- TEST 6 kolumn -->";
$startRow = false;
}
$postCounter += 1;
?>
<?php
$id = $ligne["id"];
$nom = $ligne["nom"];
$poids = $ligne["poids"];
$ingredients = $ligne['ingredients'];
$description = $ligne['description'];
$valeurs_energetiques = $ligne['valeurs_energetiques'];
$valeurs_nutritionnelles = $ligne['valeurs_nutritionnelles'];
?>
<!-- FIRST COLUMN START -->
<div class="col-md-4 column" >
<!-- Product IMG START -->
<?php if (file_exists('../Assets/produit_'.$id . ".png")) {?>
<img class="productImg" src="../Assets/produit_<?php echo $id; ?>.png" />
<?php } ?>
<!-- Product IMG END -->
<!-- Product NOM START -->
<?php if(isset($nom) && !empty($nom)){
echo "<p class='nom'>". utf8_decode($nom) ."</p><br>";
}?>
<!-- Product NOM END -->
<!-- Product WEIGHT START -->
<?php if(isset($poids) && !empty($poids)){
echo "<p class='weight'> Environ". utf8_decode($poids) . "g" ."</p><br>";
}?>
<!-- Product WEIGHT END -->
<!-- Product DESCRIPTION START -->
<?php if(isset($description) && !empty($description)){
echo "<p class='ProductDescription'>". utf8_decode($description) ."</p><br>";
}?>
<!-- Product DESCRIPTION END -->
<!-- Product INGREDIENT START -->
<?php if( $ingredients){
echo"<div class='divSmallContainer'>";
echo"<b style='text-decoration: underline;'> Ingrédients :</b><br><br>";
echo "<div class='valeurEnergContainer'> $valeurs_energetiques; </div>";
echo"</div>";
}
?>
<!-- Product INGREDIENT END -->
<?php
if($postCounter != 3 || $postCounter != 0) {
echo '</div>'; /*END OF COLUMN*/
}
if ( 3 === $postCounter ) {
echo ' </div>'; /*END OF COLUMN*/
echo '</div><!-- PAGE ROW END-->';
$startRow = true;
$postCounter = 0;
// echo "<span class='breakPage'></span>"; //add page break
}
--$num_rows;
}/*endWhile*/
if ($postCounter !== 0 ) {
echo '</div>';
}
}else {
echo '<div class="page-header"><h1>Pas des resultat</h1></div>';
echo ' <p>desole vous n\'avez pas choisir des produits</p>';
}
if ( 3 === $postCounter || $num_rows == 0 ) {
echo '</div><!-- END OF INTERNAL ROW -->';
$startRow = true;
$postCounter = 0;
}
?>
<!--CONTAINER END-->
</div>
</body>
</html>
There's no need to rotate the page, as this will do just that - rotate EVERYTHING. Just put all the CSS you want for your landscape print layout under the #media print{#page {size: landscape}} media query.
I've made an agenda which got events and once i click on days , i would like to click on a day and this will show the event but this don't work
I want to show the class="info"
i've tried like that but this don't work
$(document).on('click', '.toggleNextInfo', function () {
$(this).nextAll('.info').toggle();
});
maybe it's because of css too ?
$(document).on('click', '.toggleNextInfo', function () {
$(this).next('.info').toggle();
});
/*[fmt]0020-000A-3*/
body{ background:#EEEEEE; letter-spacing:1px; font-family:Helvetica; padding:10px;}
.year{ color:#D90000; font-size:85px;}
.relative{ position:relative;}
.months{}
.month{ margin-top:12px;}
.months ul{ list-style:none; margin:0px; padding:0px;}
.months ul li a{ float:left; margin:-1px; padding:0px 15px 0px 0px; color:#888888; text-decoration:none; font-size:35px; font-weight:bold; text-transform:uppercase;}
.months ul li a:hover, .months ul li a.active{ color:#D90000;}
table{ border-collapse:collapse;}
table td{ border:1px solid #A3A3A3; width:80px; height:80px;}
table td.today{ border:2px solid #D90000; width:80px; height:80px;}
table td.padding{ border:none;}
table td:hover{ background:#DFDFDF; cursor:pointer;}
table th{ font-weight:normal; color:#A8A8A8;}
table td .day{ position:absolute; color:#8C8C8C; bottom:-40px; right:5px; font-weight:bold; font-size:24.3pt;}
table td .events{ position:relative; width:79px; height:0px; margin:-39px 0px 0px; padding:0px;}
table td .events li{ width:10px; height:10px; float:left; background:#000; /*+border-radius:10px;*/ -moz-border-radius:10px; -webkit-border-radius:10px; -khtml-border-radius:10px; border-radius:10px 10px 10px 10px; margin-left:6px; overflow:hidden; text-indent:-3000px;}
table td:hover .events{ position:absolute; left:582px; top:66px; width:442px; list-style:none; margin:0px; padding:11px 0px 0px;}
table td:hover .events li{ height:40px; line-height:40px; font-weight:bold; border-bottom:1px solid #D6D6D6; padding-left:41px; text-indent:0; background:none; width:500px;}
table td:hover .events li:first-child{ border-top:1px solid #D6D6D6;}
table td .daytitle{ display:none;}
table td:hover .daytitle{ position:absolute; left:582px; top:21px; width:442px; list-style:none; margin:0px 0px 0px 16px; padding:0px; color:#D90000; font-size:41px; display:block; font-weight:bold;}
.clear{ clear:both;}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="icon" href="images/date.ico" />
<title>Calendrier</title>
<link rel="stylesheet" type="text/css" href="style5.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
jQuery(function($){
$('.month').hide();
$('.month:first').show();
$('.months a:first').addClass('active');
var current = 1;
$('.months a').click(function(){
var month = $(this).attr('id').replace('linkMonth','');
if(month != current){
$('#month'+current).slideUp();
$('#month'+month).slideDown();
$('.months a').removeClass('active');
$('.months a#linkMonth'+month).addClass('active');
current = month;
}
return false;
});
});
</script>
<script type="text/javascript" >
$(document).on('click', '.toggleNextInfo', function () {
$(this).next('.info').toggle();
});
</script>
</head>
<body>
<?php
require('config.php');
require('date.php');
$date = new Date();
$year = date('Y');
$events = $date->getEvents($year);
$dates = $date->getAll($year);
?>
<div class="periods">
<div class="year"><?php echo $year; ?></div>
<div class="months">
<ul>
<?php foreach ($date->months as $id=>$m): ?>
<li><?php echo utf8_encode(substr(utf8_decode($m),0,3)); ?></li>
<?php endforeach; ?>
</ul>
</div>
<div class="clear"></div>
<?php $dates = current($dates); ?>
<?php foreach ($dates as $m=>$days): ?>
<div class="month relative" id="month<?php echo $m; ?>">
<table>
<thead>
<tr>
<?php foreach ($date->days as $d): ?>
<th><?php echo substr($d,0,3); ?></th>
<?php endforeach; ?>
</tr>
</thead>
<tbody>
<tr>
<?php $end = end($days); foreach($days as $d=>$w): ?>
<?php $time = strtotime("$year-$m-$d"); ?>
<?php if($d == 1 && $w != 1): ?>
<td colspan="<?php echo $w-1; ?>" class="padding"></td>
<?php endif; ?>
<td <?php if($time == strtotime(date('Y-m-d'))): ?> class="today" <?php endif; ?>> <a class="toggleNextInfo" > TEST </a>
<div class="relative">
<div class="day"><?php echo $d; ?></div>
</div>
<div class="daytitle">
<?php echo $date->days[$w-1]; ?> <?php echo $d; ?> <?php echo $date->months[$m-1]; ?>
</div>
</br>
<ul class="events">
</br>
</br>
<?php if(isset($events[$time])): foreach($events[$time] as $e): ?>
<div class="info" >
<li > <?php echo $e; ?></li>
<li>
<form> <input type="radio" name="Disponibilité" value="Disponibilité"> Choisir cette disponibilite
<input type="submit" name="Envoyer" value="Envoyer">
</form>
</li>
</div>
<?php endforeach; endif; ?>
</ul>
</td>
<?php if($w == 7): ?>
</tr><tr>
<?php endif; ?>
<?php endforeach; ?>
<?php if($end != 7): ?>
<td colspan="<?php echo 7-$end; ?>" class="padding"></td>
<?php endif; ?>
</tr>
</tbody>
</table>
</div>
<?php endforeach; ?>
</div>
<div class="clear"></div>
</br>
</br>
</body>
</html>
$(this).next() would find a DOM element that immediately follows this, but in you example .toggleNextInfo does not have a .info node following it.
.nextAll() would be better if your elements were on the same level.
You need to think through what html structure you have, because that informs your decisions with jquery. Not only are these two elements not siblings, but they're not at the same nesting level.
.toggleNextInfo
ul
li
li
.info
Since these are likely to change, I generally prefer using find. There are several ways you can do this, but this should work:
$(document).on('click', '.toggleNextInfo', function () {
$(this).parent().find('.info').toggle();
});
I'm trying to apply the Wookmark jQuery Plugin to my wordpress theme. The implementation takes place with a Loop, as the point of the subject is to create a visually pleasing portfolio.
For the subject i've registered a new type of post typed 'portfolio' and made a loop that distinguishes between posts with pictures and those without.
The problem is of course, that it doesn't work.
No returning errors, all scripts are in place [or so it seems to me] - but the posts do not receive whatever treatment [jQuery Voodoo] that the WookMark is supposed to apply. All I get all the posts, called in order.
I've enqueued the scripts into my theme through the functions.php file thus:
if ( !function_exists('core_mods') ) {
function core_mods() {
wp_enqueue_script('jquery-custom', get_template_directory_uri().'/assets/wookmark/libs/jquery.min.js' );
wp_enqueue_script('wookmark', get_template_directory_uri().'/assets/wookmark/jquery.wookmark.js', array('jquery-custom'), false, false);
}
}
add_action( 'wp_enqueue_scripts', 'core_mods' );
And the actual HTML of page-portfolio.php is as follows:
<?php get_header(); ?>
<?php query_posts('post_type=portfolio') ?>
<?php if (have_posts()) : ?>
<script type="text/javascript">
(function($) {
$('.masonry-object').wookmark({
align: 'center',
autoResize: false,
comparator: null,
container: $('#masonry-container'),
direction: undefined,
ignoreInactiveItems: true,
itemWidth: 0,
fillEmptySpace: false,
flexibleWidth: 0,
offset: 2,
onLayoutChanged: undefined,
outerOffset: 0,
possibleFilters: [],
resizeDelay: 50,
verticalOffset: undefined
});
})(jQuery);
</script>
<div id="masonry-container">
<?php /* The loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>
<div class="masonry-object" id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php if ( has_post_thumbnail() ) : ?>
<div class="masonry-thumbnail">
<a href="<?php the_permalink(' ') ?>" title="<?php the_title(); ?>">
<?php the_post_thumbnail('masonry-thumb'); ?>
</a>
<div class="masonry-title">
<?php echo the_title(); ?>
</div>
</div><!--.masonry-thumbnail-->
<?php elseif ( !has_post_thumbnail() ): ?>
<div class="masonry-details">
<h5>
<a href="<?php the_permalink(' ') ?>" title="<?php the_title(); ?>">
<span class="masonry-post-title">
<?php the_title(); ?>
</span>
</a>
</h5>
<div class="masonry-post-excerpt">
<?php the_excerpt(); ?>
</div><!--.masonry-post-excerpt-->
</div><!--/.masonry-entry-details -->
<?php endif; ?>
</div>
<?php endwhile;?>
</div> <!-- End .masonry-container -->
<?php endif; ?>
<?php get_footer(); ?>
The CSS attached to the subject is such:
#masonry-container {
}
.post-area {
background: #ffffff ;
padding: 10px ;
}
.masonry-thumbnail {
}
.masonry-thumbnail img {
max-width: 100%;
height:auto;
}
.masonry-title {
position: absolute;
width: auto;
background-color: #ef9430;
color: #ffffff;
padding: 5px;
bottom: 0px ;
right: 0px;
}
.masonry-details {
padding: 10px;
background-color: #ffffff;
}
.masonry-object {
width: 25% ;
transition: all 1s ease;
}
.masonry-object:hover {
z-index: 2;
box-shadow: 0 0 20px #ffffff;
transition: all 1s ease;
}
(function($) {...})(jQuery); is not the same as $(function() {...});
First will be executed as soon as it is encountered, second one is jQuery shorthand for $( document ).ready(), and will run when the DOM is ready for JavaScript. The solution is to move the script below the #masonry-container div, or to use the ready event. There is a small problem in WordPress since default jQuery uses jQuery.noConflict() so $ is not referenced to jQuery object. My favorite solution for that is:
jQuery(function ($) {
});
It will run on document ready, with $ as a jQuery alias.
Side note: - use position: relative on #masonry-container div, as documentation says.