Using bootstrap grid with thumbnail grid with expanding preview - javascript

I'm creating a site and am using this bootstrap based theme as a starting base. I've also incorporated the very nice Thumbnail Grid with Expanding Preview as described in this Codrops tutorial.
What I'm trying to do is keep the portfolio grid that you can see in the theme where all the preview images are responsive bootstrap col-lg-4 col-sm-6 elements so that they will expand & shrink to fill the full browser width and adjust the number of elements per row depending on screen width.
The JS that drives the thumbnail grid with expanding preview effect is grid.js and I had thought that if I made the following adjustments that it would apply the same effect:
var Grid = (function() {
// grid selector
var $selector = '#og-grid',
// list of items
$grid = $( $selector ),
// the items
$items = $grid.children( '.grid-item' ),
// ... etc ...
i.e.: I've set items to be .grid-item instead of li and updated the bootstrap divs so that they have this class too.
I've uploaded a snapshot of where I'm at right now here which basically has the thumbnail grid with expanding preview effect implemented as per the Codrops tutorial, but I'm hoping to be able to keep the responsive benefits associated with the original theme's portfolio section. Does anyone have any suggestions as to how I might be able to achieve what I'm hoping to do? Please just ask if further clarification is required on what I'm trying to figure out.

As suggested by #KarlDawson, I just set up some media queries and the items rendered as expected:
#media (min-width: 768px) {
.og-grid li {
width: 50%;
}
}
#media (min-width: 1200px) {
.og-grid li {
width: 33.33333333333%;
}
}

Related

react css sidebar wont close for small window size

I have a react sidebar with pure css for expand/collapse animations that I really like. Except for that by default, every time I open my page / jsfiddle in this case, the sidebar will always be closed by default.
https://jsfiddle.net/martinradio/x1dz80a6/2/
I've collected all the #media queries in my css file, and have changed it so when the window is big, the sidebar turns yellow. if the window becomes small, the sidebar gets colored red.
My sidebar expand/collapse logic is pure css, I want my sidebar to collapse if the window is too small (sidebar color = red), can I add a .sidebar value to collapse the sidebar?
/* ----------------------
#media queries
---------------------- */
/* if screen is big: show sidebar */
#media (min-width: 30em) {
.sidebar {
background:yellow;
color:yellow;
}
}
/* if screen is too small: hide sidebar */
#media (max-width: 31em) {
.sidebar {
background:red;
color:red;
}
/* add something here to toggle sidebar as higgen */
}
is there a way, that by adding css, I can have my sidebar start expanded if the user is viewing the page on say a desktop monitor dimensions? But keep the sidebar hidden for smaller browser windows such as mobile
You want the :checked value of your input to determine the current expanded state of you sidebar.
At the same time, you want the size of the viewport to determine the same state.
This means you have to find a way to allow the size of the viewport to set the :checked value of the checkbox.
The bad news is you can't change or set the value of a checkbox using CSS alone.
The good news is it can be done using JavaScript. And you can link it to a media query.
Here's how to do it in React:
// define media query:
const mediaQuery = window.matchMedia("(min-width: 42rem)");
// track query state (if it applies or not)
const [query, setQuery] = React.useState(mediaQuery);
// keep query state updated (+ cleanup)
React.useEffect(() => {
mediaQuery.addListener(setQuery);
return () => mediaQuery.removeListener(setQuery);
}, [mediaQuery]);
// track sidebar expanded state
const [expanded, setExpanded] = React.useState(query.matches);
// update checkbox value when the query state changes
React.useEffect(() => {
setExpanded(query.matches);
}, [query]);
// everything else stays the same
// (except binding the expanded state to the checkbox)
See it working: https://jsfiddle.net/websiter/td9rgcpq/
You can use CSS Media Queries to determine what action to do based on the screen size. Here, you would want to change the behavior of the sidebar based on the screen size.
#media (max-width: 600px) {
*This is for phones, for example (you might need to find more accurate pixel counts)*
}
#media (min-width: 601px) {
*This is for laptops, for example (you might need to find more accurate pixel counts)*
}
When I worked on my answer, I realized that the requirements were not clear to me.
What do you want to have on a big screen? I can think of two different options.
The sidebar is not shown when you open the page. Instead, it appears with animation when you press the toggle button.
The sidebar is visible when you open the page and disappears when you press a toggle button. Should it appear with animation on page load?
And in both cases, you do not want the sidebar on the small screen.
I still do not understand the following requirement.
I can have my sidebar start expanded if the user is viewing the page on say a desktop monitor dimensions?
When a user opens the page on the big screen, what should it look like? What is the initial state of the sidebar on the big screen? Do you want the sidebar to open with animation on page load?
Anyway, please find my suggestion below.
Main idea
The sidebar becomes visible when they check the #sidebar-checkbox checkbox. I suggest limiting this behaviour to only large enough screens. In other words, we bind the checkbox state with the sidebar visibility only for big screens.
On small screens sidebar is always hidden because we place the rules under the media query for the big screens.
1. Initially hidden but appears when toggled
The code speaks for itself.
#media (min-width: 30em) {
#sidebar-checkbox:checked + .sidebar {
z-index: 10;
visibility: visible;
}
#sidebar-checkbox:checked ~ .sidebar, #sidebar-checkbox:checked ~ .wrap, #sidebar-checkbox:checked ~ .sidebar-toggle {
-webkit-transform: translateX(0rem);
-ms-transform: translateX(0rem);
transform: translateX(0rem);
}
#sidebar-checkbox:checked ~ .wrap {
-webkit-transform: translateX(14rem);
-ms-transform: translateX(14rem);
transform: translateX(14rem);
}
}
I think we also should show the label for the checkbox only on big screens. But I do not want to mess with your styles too much and try to make the minimal working change.
2. Initially shown on the big screen
We must replace the :checked selector with the :not(:checked) selector. In this case, the sidebar is visible by default on the big screen.
We can also show animation for the sidebar sliding from left to right on the page load. You might find some explanation in the answer to the question 'css3 transition animation on load?'.
Please check the updated JSFiddle with the suggestions for the second case.
Please let me know if I have got your requirements right.

prettyPhoto product slider - How to center an image

I am trying to set up a WooCommerce site (https://storetest.rigwald.com/?cmp_bypass=test), which uses a product slider based on prettyPhoto.js. The problem is that the images are not centered in the middle of the slider, they are displayed to the left slide of the slider canvas/window. Is there a way to force the images to be centered in the slider? The theme creators appear to have no concept of their own product, simply telling me to change the image size for any products shown in the slider to 800x512, even though product photos are supposed to be 600x600 or 800x800. They are just attempting to have me fill the slider "canvas", so the off-center images aren't noticable.
I am not a coder. I can poke around Chrome developer tools and the theme editor in Woocommerce/Wordpress, which is how I found out the slider is using prettyPhoto.
Thank you for your help with this!
Looking at your theme it seems that all you need is some css to fix the problem.
I have created an action that inserts some inline style that should help with that issue.
add_action('wp_head', 'bt_custom_inline_style');
function bt_custom_inline_style () {
?>
<style>
.big-slider .home-slider li {
display: flex;
justify-content: center;
}
</style>
<?php
}
You can copy paste this code to your functions.php file

A simple dictionary list in jQuery

I need some help please. I'm noob in jQuery and I try to create a dictionary list.
But my problematic is that each definition must be displayed under his own row of 3 words (desktop), 2 words (in tablet) and under his own word (accordion system) in mobile. One definition must be displayed at a time. I would like to toggle definition when I click on a word.
Wordpress will be use to add words so the list must be dynamic.
Here my incomplete test : https://jsfiddle.net/Xroad/qbh79xoy/31/
$('.tabs .tab-link').each(function (index, item) {
$(item).attr('data-link', index);
});
$('.tab-content .tab-content').each(function (index, item) {
$(item).attr('data-content', index);
});
$('.tabs .tab-link').click(function () {
$('.tabs .tab-link').not(this).removeClass('current');
$(this).toggleClass('current');
});
I don't know what I must write to display each definition under a row of 3 words. Can I have some help please ? Thank you in advance.
DESKTOP VERSION
MOBILE VERSION
You can use media queries, media queries change CSS rules depending on criteria such as screen width.
For example the following width rule won't apply for screens wider than 480px:
#media screen and (max-width: 480px) {
body {
width: 100%;
}
}
And the following width rule won't apply for screens wider than 769px:
#media screen and (max-width: 769px) {
body {
width: 33%;
}
}
You can have as much media queries as you need.
For more info about media queries see this w3schools page

Section overlays on another

Dear Stackoverflow community,
I'm very desperated about following setup:
- I have a Website with a Jquery onepagescroll design.
- If the width of the browsers window is below a certain point (769px) the onepagescroll disapears
- Instead a Gumby based design gets activated
But when happening so
... the third of the three sections overlays over the second one a
... after the first section is a gap
I researchead about four hours on this problem and couldn't solve it.
I hope you can help me.
Yours Sinceryl,
yooui
Code:
index.html (http://pastebin.com/6fMtkBbm)
jquery.onepage-scroll.js (http://pastebin.com/FnQWWe7J)
To fix the spacing and overlap, take a look at your CSS. The three "section" elements each have a height of 100%, you'll have to change that in your responsive styles.
So try adding something like this:
#media only screen and (max-width: 768px) {
.onepage-wrapper .section {
height: auto;
}
}

jquery .hide() function - Hide mobile, Display Desktop

I'll try my best to set up my scenario so that you can understand my question.
My site is currently taking advantage of css media queries to span between screen resolutions. I have a main drilldown menu that can not be hidden on page load, otherwise the menu will not correctly calculate it's height, and will not display properly.
As a way to still be able to hide this menu when needed, I have found a workaround that hides the menu, yet still allows the menu to correctly calculate it's height on page load.
$(document).ready(function () {
$(".hide-menu").hide();
var $drillDown = $("#drilldown");
});
This is great for pages that do not require the main menu to be displayed initially on both mobile and desktop resolutions. However, for my product pages this solution will not work. I need the menu to hide on load for mobile resolutions, but also display on load for desktop resolutions. Can anyone think of a solution that will work? I'm stumped. Here is the HTML:
<div class="drill-down-wrapper hide-menu hide-on-load hide-pd-page">
<div id="drilldown-breadcrumbs" class="breadcrumbs skin-colorful"></div>
<div id="drilldown" class="skin-colorful">
<!-- #Include virtual="Menu.txt" -->
</div>
</div>
Use media queries to hide and show the menus based on screen resolutions.
Rather than jQuery, try using CSS to show/hide elements. You can use the display rule to do so. Just as an example:
.hide-menu-on-load {
display: none;
}
#media screen and (max-width: 680px) {
.hide-menu-on-load {
display: block;
}
}
Note: display: none removed the element from the flow of the page. visibility: hidden keeps the element's flow on the page, yet simply removes it from view

Categories

Resources