Hope you can help me out.
I have searched through the forums, I guess this one is a special case.
The project I am building are powered with media queries (Responsive), I have 3 columns, sometimes 4 to needs to be in equal height. I have developed a script in Jquery which works great. See below
var maxHeight = 0;
function setHeight(column) {
$(window).load(function () {
column = $(column);
column.each(function () {
if ($(this).height() > maxHeight) {
maxHeight = $(this).height();
}
});
column.height(maxHeight);
});
}
setHeight('.package-container .package-3');
But when I am going to mobile version, below 767px, how do I destroy this setHeight() function without having to refresh the page.
Other alternative, I can do this below using enquire.js, javascript media query but I could not get it to work without having to refresh if I go straight from Desktop/tablet to mobile. Like this below
enquire.register("(max-width:767px)", {
match : function() {
setHeight(null);
}
}).listen();
Here is what I would do in a mobile first approach, you dont need to worry about "destroy" anything simple set the height to auto:
enquire.register("screen and (min-width : 768px)", {
match : function() {
// set equal height for columns
setHeight('.package-container .package-3');
},
unmatch : function() {
// set auto height
$('.package-container .package-3').height("auto");
}
}).listen();
Related
i have a code for check every height's thumbnail and make all thumbnail to have the height of the tallest thumbnail. its work well for the first time.
then i test it in resolution 768x163 from 1440x613 all my thumbnail seems like have a little space inside the caption. so i try to reload the page. and the bug got fix.
so how to make the function to work when i minimize the window without have to reload the page
this my code on height.js
(function($) {
"use strict";
// THUMBNAIL HEIGHT
function equalHeight(group) {
var tallest = 0;
group.each(function() {
var thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.each(function() { $(this).height(tallest); });
}
$(document).ready(function() {
equalHeight($(".thumbnail"));
});
})(jQuery);
heres jsfiddle https://jsfiddle.net/nr2cc6LL/
Just call the function inside the resize method too like:
$(window).resize(function() {
equalHeight($(".thumbnail"));
});
Simple Demo
I have this slider on my WP page, which is vertical. I would like to convert it so it his horizontal. As I understood I need to change my JS code.
jQuery(function($) {
var image_es;
var zoom_timer;
var win_width = 0;
function resize_venedor_thumbs() {
if (win_width != $(window).width()) {
if (image_es) {
image_es.destroy();
}
image_es = $('#thumbnails-slider-756').elastislide({
orientation : 'vertical',
minItems: 4
});
win_width = $(window).width();
}
if (zoom_timer) clearTimeout(zoom_timer);
}
$(window).load(resize_venedor_thumbs);
$(window).resize(function() {
clearTimeout(zoom_timer);
zoom_timer = setTimeout(resize_venedor_thumbs, 400);
});
});
I tried to change vertical to horizontal in inspect element mode but it did not change at all.
If you change the orientation to 'horizontal' in inspect element mode, you need to make sure the resize_venedor_thumbs function is called.
It looks like it is called on load or resize (try resize because loading will erase your edits); or you can call it in the console yourself resize_venedor_thumbs(); or, of course, edit the source and load the page.
I'm attempting to show one div containing a slideshow and hide another containing a list of images generated on larger screens i.e desktops. And do the opposite on smaller screens. Both Div's contain repeater controls, not sure if that interferes in any way but I do not think it does. Not sure why it's not working any suggestions would be very appreciated.
My jQuery and the CSS classes it attempts to implement;
$(function () {
$(window).resize(function () { ToggleSlideshow(); });
ToggleSlideshow();
});
function ToggleSlideshow() {
// Apply your condition here to toggle the visibility of the slide show
if ($(window).width() < 500) {
$("#slideShowContainer").addClass(".hiding");
$("#imgList").addClass(".showing");
} else {
$("#slideShowContainer").addClass(".showing");
$("#imgList").addClass(".hiding");
}
}
.showing{
display:block;
}
.hiding{
display:none;
}
When I say it's not working, what I mean is both are being displayed which is not what I am trying to achieve. To see it live please follow this link.
I got it working in the end. I did as follows:
$(function () {
$(window).resize(function () { ToggleSlideshow(); });
ToggleSlideshow();
});
function ToggleSlideshow() {
// Show your slideshow on widths larger than 500, otherwise show your list of images
$("#<%=slideShowContainer.ClientID%>").toggle($(window).width() >= 660);
$("#<%=imgList.ClientID%>").toggle($(window).width() < 660);
}
On my website, I have a sidebar DIV on the left and a text DIV on the right. I wanted to make the sidebar follow the reader as he or she scrolls down so I DuckDuckGo'ed a bit and found this then modified it slightly to my needs:
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(function(){
var $sidebar = $('#sidebar'),
sidebarOffset = $sidebar.offset(),
$window = $(window),
gap = $('#header').css('marginBottom').replace(/[^-\d\.]/g, ''),
distance = ($window.scrollTop()) - (sidebarOffset.top - gap),
footerHeight = $('#footer').outerHeight();
$window.scroll(function(){
distance = ($window.scrollTop()) - (sidebarOffset.top - gap);
if ( distance > 0 ) {
$sidebar.css({'top': gap + 'px', 'position' : 'fixed'});
} else {
$sidebar.css({'top': '0', 'position': 'relative'});
}
})
});
});//]]>
</script>
And it works just like I want it to. However, my website uses Skeleton framework to handle responsive design. I've designed it so that when it goes down to mobile devices (horizontal then vertical), sidebar moves from being to the left of the text to being above it so that text DIV can take 100% width. As you can probably imagine, this script causes the sidebar to cover parts of text as you scroll down.
I am completely new to jQuery and I am doing my best through trial-and-error but I've given up. What I need help with is to make this script not execute if a certain DIV has a certain CSS value (i.e. #header-logo is display: none).
Ideally, the script should check for this when user resizes the browser, not on website load, in case user resizes the browser window from normal size to mobile size.
I imagine it should be enough to wrap it in some IF-ELSE statement but I am starting to pull the hair out of my head by now. And since I don't have too much hair anyway, I need help!
Thanks a lot in advance!
This function will execute on window resize and will check if #header-logo is visible.
$(window).resize(function() {
if ($('#header-logo').is(':visible')) {
// Your code
}
});
I think you need to check this on load to, because you don't know if the user will start with mobile view or not. You could do something like this:
$(window).resize(function() {
if ($('#header-logo').is(':visible')) {
// Your code
}
}).resize();
This will get executed on load and on resize.
EDIT: You will probably need to turn off the scroll function if #header-logo is not visible. So, instead of create the function inside the scroll event, you need to create it outside:
$(window).resize(function() {
if ($('#header-logo').is(':visible')) {
var $sidebar = $('#sidebar'),
sidebarOffset = $sidebar.offset(),
$window = $(window),
gap = $('#header').css('marginBottom').replace(/[^-\d\.]/g, ''),
distance = ($window.scrollTop()) - (sidebarOffset.top - gap),
footerHeight = $('#footer').outerHeight();
function myScroll() {
distance = ($window.scrollTop()) - (sidebarOffset.top - gap);
if ( distance > 0 ) {
$sidebar.css({'top': gap + 'px', 'position' : 'fixed'});
} else {
$sidebar.css({'top': '0', 'position': 'relative'});
}
}
$window.on('scroll', myScroll);
} else {
$(window).off('scroll', myScroll);
}
});
Didn't test it, but you get the idea.
$("#headerLogo").css("display") will get you the value.
http://api.jquery.com/css/
I also see you only want this to happen on resize, so wrap it in jquery's resize() function:
https://api.jquery.com/resize/
Some of my webpages contain several text elements that expand and collapse with a jQuery "accordion" effect:
function show_panel(num) {
jQuery('div.panel').hide();
jQuery('#a' + num).slideToggle("slow");
}
function hide_panel(num) {
jQuery('div.panel').show();
jQuery('#a' + num).slideToggle("slow");
}
This causes the window size to change so jScrollPane has to be reinitialized, which will also change the length of the scrollbar. To achieve a smooth length adjustment of the scrollbar, I set the "autoReinitialise" option to "true" and the "autoReinitialiseDelay" to "40" ms:
$(document).ready(function () {
var win = $(window);
// Full body scroll
var isResizing = false;
win.bind(
'resize',
function () {
if (!isResizing) {
isResizing = true;
var container = $('#content');
// Temporarily make the container tiny so it doesn't influence the
// calculation of the size of the document
container.css({
'width': 1,
'height': 1
});
// Now make it the size of the window...
container.css({
'width': win.width(),
'height': win.height()
});
isResizing = false;
container.jScrollPane({
showArrows: false,
autoReinitialise: true,
autoReinitialiseDelay: 40
});
}
}).trigger('resize');
// Workaround for known Opera issue which breaks demo (see
// http://jscrollpane.kelvinluck.com/known_issues.html#opera-scrollbar )
$('body').css('overflow', 'hidden');
// IE calculates the width incorrectly first time round (it
// doesn't count the space used by the native scrollbar) so
// we re-trigger if necessary.
if ($('#content').width() != win.width()) {
win.trigger('resize');
}
});
The effect is ok, but on the cost of a very high CPU usage which makes my fan go wild.
This is a jsfiddle which shows the settings and the effect: http://jsfiddle.net/VVxVz/
Here's an example page (in fact it's an iframe within the webpage shown): http://www.sicily-cottage.net/zagaraenausfluege.htm
Is there a possibility to achieve the same "smooth" transition of the scrollbar length without using the "autoReinitialise" option, maybe with an additional script, some modification of the jscrollpane.js, or simply a css animation of the scrollbar and then calling the reinitialise manually?
I'm absolutely useless at javascript so any help would be greatly appreciated.
There is no need to initialise jScrollPane on your content everytime window is resized. You should do it only once - on $(document).ready(). Also, there is no need in using autoReinitialize if your content is staic. You should reinitialise jScrollPane to update scrollbar size only when you slideUp/slideDown one of your container or on window.resize. So, code become less and more beautiful :)
function togglePanel(num) {
var jsp = $('#content').data('jsp');
jQuery('#a' + num).slideToggle({
"duration": "slow",
"step": function(){
jsp.reinitialise();
}
});
return false;
}
$(document).ready(function () {
var container = $('#content').jScrollPane({
showArrows: false,
autoReinitialise: false
});
var jsp = container.data('jsp');
$(window).on('resize', function(){
jsp.reinitialise();
});
// Workaround for known Opera issue which breaks demo (see
// http://jscrollpane.kelvinluck.com/known_issues.html#opera-scrollbar )
$('body').css('overflow', 'hidden');
// IE calculates the width incorrectly first time round (it
// doesn't count the space used by the native scrollbar) so
// we re-trigger if necessary.
if (container.width() != $(window).width()) {
jsp.reinitialise();
}
});