What I want to do is when the browser window width is below 1000px for example, to trigger the script owl carousel. But when the browser window width becomes larger than 1000px to disable owl carousel and the content to display again normally.
I managed to do this when the window is more than 1000px and resize it to be below 1000px but when I resize it again to be more than 1000px it does not disable the owl carousel.
My code
<script type="text/javascript">
$(document).ready(function() {
$(window).resize(function() {
if ($(window).width() < 1000) {
$(".box").owlCarousel();
}
else {
//do nothing what to put here???
}
});
});
</script>
<div class="box">
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
</div>
I tried also to use javascript to add a class if the window resizes to the .box div, but again the javascript when it resizes below and above 1000px it won't change dynamically as I want it.
Can you please tell me the best way to check live the browser width and enable/disable owl carousel?
I haven't used owlcarousel before, but quickly looking at the docs, I think you want to use the owl.destroy() method.
$(document).ready(function() {
$(".owl-carousel").owlCarousel()
//get carousel instance data and store it in variable owl
var owl = $(".owl-carousel").data('owlCarousel')
$(window).resize(function() {
if ($(window).width() < 1000) {
owl.reinit()
} else {
owl.destroy()
}
});
});
Window.matchMedia() might be a solution for you. From the docs:
Returns a new MediaQueryList object representing the parsed results of the specified media query string.
Example:
if (window.matchMedia("(max-width: 1000px)").matches) {
$(".box").owlCarousel();
} else {
/* however you disable the carousel... */
}
Hope this helps!
Related
I intend for screen sizes greater then 600px to display a slider and for less than 600px to display the same content without the slider. I'm using Bootstrap 4 and Wordpress. For some reason my code isn't returning anything at all. Here is the code of the wordpress template:
<div class="container-fluid custom-bg-color" id="seccion-portafolio">
<div class="row">
<div class="col">
<div id="portafolio-variable-content">
</div>
</div>
</div>
</div>
<script>
(function () {
var viewportWidth = $(window).width();
if (viewportWidth > 600) {
$('#portafolio-variable-content').load('slider.php');
$('#portafolio-variable-content').html("<p>Another test</p>")
} else {
$('#portafolio-variable-content').load('no-slider-content.php');
}
}());
</script>
Used below HTML for container.
If screen size greater than 768... two column layout
If screen size lesser than 767... Accordion effect.
By below JS code works fine if we kept screen lesser than 767 and refresh the page. But, i need a solution to work based on screen resize from big screen to smaller screen.
Please let me know solution.
Thanks
HTML:
<div class="row" id="accordion">
<div class="col-sm-12 col-md-6 col-lg-3">
<h6 class="accordion-toggle">Frequently Ask Questions</h6>
<ul class="accordion-content default">
<li> Carry with me?</li>
<li> Destination country?</li>
</ul>
</div>
<div class="col-sm-12 col-md-6 col-lg-3">
<h6 class="accordion-toggle">Corporate Info</h6>
<ul class="accordion-content">
<li> Careers</li>
<li> Press Room</li>
</ul>
</div>
</div>
JS:
if ($(window).width() < 767) {
$('#accordion').find('.accordion-toggle').click(function () {
//Expand or collapse this panel
$(this).next().slideToggle('fast');
//Hide the other panels
$('.accordion-content').not($(this).next()).slideUp('fast');
});
}
You need to put your code inside a window.resize event like #karthnik VU said
Updated
$('#accordion.small').on('click', '.accordion-toggle', function() {
//Expand or collapse this panel
$(this).next().slideToggle('fast');
//Hide the other panels
$('.accordion-content').not($(this).next()).slideUp('fast');
});
function resizer(){
$('#accordion').toggleClass('small' , $(window).width() < 767);
if ($(window).width() >= 767) {
$("#accordion").find('.accordion-content').show();
}
}
$(window).on('resize', resizer).resize();
If I understood correctly almost all of that could be achieved with css.Apparently you're using bootstrap so you could use some visibility classes to show/hide on certain window sizes. Also, you can check the navbar example of having different looks for different screen sizes. Just resize the page to see. Hope this helps
You need a resize listener and need to detect when the user changes from big to small and from small to big screen. I didn't test my code but it might look like this:
var lastWindowWidth;
$(document).ready(function() {
$(window).resize(function() {
var $window = $(this),
windowWidth = $window.width();
if (windowWidth < 767 && lastWindowWidth>=768) {
//accordionify
} else if (windowWidth >= 768 && lastWindowWidth < 767) {
//remove accordion
}
lastWindowWidth = windowWidth;
});
});
But I think you could achieve this behavior also using plain css (bootstrap helper classes)
How can I make this scroll left or right using navigation button?
<div class="slider-wrap">
<div class="slide-wrap">
<div class="slider-slide-wrap"></div>
<div class="slider-slide-wrap"></div>
<div class="slider-slide-wrap"></div>
</div>
</div>
<div id="slider-left" class="slider-nav"></div>
<div id="slider-right" class="slider-nav"></div>
JS
$("#slider-left").click(function(){
alert("< clicked.");
});
$("#slider-right").click(function(e){
alert("> clicked.");
$('.slide-wrap').scrollLeft(5000);
});
Fiddle
You are selecting the wrong <div>. Note the selector: $('.slider-wrap') (not .slide-wrap).
$("#slider-left").click(function () {
$('.slider-wrap').animate({
scrollLeft: 0
}, 200);
});
I have used .animate because you get visual feedback about what's happening (so I think using animate is better for UX). This would work equally well with .scrollLeft() though:
$("#slider-left").click(function () {
$('.slider-wrap').scrollLeft(0);
});
See it working in a fiddle
i want to move .treamentCost within .treatmentDetails when the window is below < 400px
This works fine, my problem is i only want the .treatmentCost within the div directly above it (.test) to move within the below .treatmentDetails.
At the moment it finds every .treatmentCost and prepends in to .treatmentDetails
Please see the below js fiddle to see the issue. If you run the fiddle with the fiddle results window ABOVE the width of 400px you will see '£100' and '£200' are outside the grey .treatmentDetails div. When you drag the browser in and the results window is BELOW a width of 400px and run the fiddle again, you will see the .treatmentCosts prepend within .treatmentDetails.
I need only the '.treatmentCost' within the '.test' div directed a before the .treatmentDetails to prepend not ALL divs with the class of .treatmentCost as is happening at the moment.
So the successfull end result will be that '£100' will be within the first gry div and '£200' will be within the second grey div.
http://jsfiddle.net/fzMHq/1/
// CODE //
// JS //
<script>
if ($(window).width() < 400) {
$(".treatmentDetails").prepend( $(".treatmentCost") );
}
</script>
// HTML //
<div id="accordion">
<div class="test dark">
<div class="treatmentLeft">
<p>Face Mapping Skin Analysis</p>
</div><!--treamentLeft close-->
<div class="treatmentLength">
<p>10 mins</p>
</div><!--treamentLength close-->
<div class="treatmentCost">
<p>£100</p>
</div><!--treamentCost close-->
</div><!--test close-->
<div class="treatmentDetails dark" style="background-color: #eee;">
<p>Our Face Mapping skin analysis will enable our therapist to diagnose your skin’s
concerns and recommend a home-care and treatment regimen to ensure your optimum skin
health. This is a professional consultation that will give your skin its healthiest
future.</p>
</div><!--treamentDetails close-->
<div class="test dark">
<div class="treatmentLeft">
<p>Face Mapping Skin Analysis</p>
</div><!--treamentLeft close-->
<div class="treatmentLength">
<p>10 mins</p>
</div><!--treamentLength close-->
<div class="treatmentCost">
<p>£200</p>
</div><!--treamentCost close-->
</div><!--test close-->
<div class="treatmentDetails dark" style="background-color: #eee;">
<p>Our Face Mapping skin analysis will enable our therapist to diagnose your skin’s
concerns and recommend a home-care and treatment regimen to ensure your optimum skin
health. This is a professional consultation that will give your skin its healthiest
future.</p>
</div><!--treamentDetails close-->
</div><!--ACCORDION close-->
DEMO
if ($(window).width() < 400) {
$(".treatmentDetails").each(function () {
$(this).prepend($(this).prev(".test").find('.treatmentCost'));
});
}
you can use .children('.treatmentCost')); instead of .find('.treatmentCost'));
DEMO
if you want to code in $(window).resize()
$(window).resize(function () {
if ($(window).width() < 400) {
$(".treatmentDetails").each(function(){
$(this).prepend($(this).prev(".test").find('.treatmentCost'));
});
}
});
if ($(window).width() < 400) {
$(".treatmentDetails").each(function() {
$(this).prepend($(this).prev(".test").find(".treatmentCost"));
});
}
if ($(window).width() < 400) {
for(var i=0 ; i<$(".treatmentDetails").length; i++)
$(".treatmentDetails").eq(i).prepend( $(".treatmentCost").eq(i) );
}
Try this . Hope this works as you asked!
http://jsfiddle.net/fzMHq/4/
Adding to Tushar Gupta's answer if you would like the resize function to work in both directions:
Working Example
$(window).resize(function () {
if ($(window).width() < 400) {
$(".treatmentDetails").each(function () {
$(this).prepend($(this).prev(".test").find('.treatmentCost'));
});
} else {
$(".test").each(function () {
$(this).append($(this).next(".treatmentDetails").find('.treatmentCost'));
});
}
});
I am having problems with a jQuery slidedown and slideUp function. When clicking the button the div slides down to reveal more content - however when it slides down it goes half way down smoothly then it likes stutters - but when i click less info to take the div back up it goes up in a smooth transition. How can i make sure it slides down smoothly without no interruptions in the transition?
<script type="text/javascript">
$(document).ready(function () {
// $(".image-gallery ul li:gt(5)").hide(0);
$(".inner p:gt(2)").hide(0);
$('a.moreInfoLink').toggle(
function () {
$('.inner p:gt(2)').slideDown(1000);
$(this).text("Less info");
},
function () {
$('.inner p:gt(2)').slideUp(1000);
$(this).text("More info");
}
);
});
</script>
HTML/.NET Coding
<div class="slideContent">
<div class="inner">
<energy:TextPod ID="TextPod1" runat="server" CssClass="client-portfolio-intro" />
</div>
</div>
<div class="clear-me"></div>
<div class="btnMoreInfo">
<a class="moreInfoLink" href="javascript:;">More Information</a>
</div>
Not sure if a solution to your problem but just for a good practice, store your selections in variables and use them instead, that way jQuery wouldn't need to find elements every time toggle function is called:
<script type="text/javascript">
$(document).ready(function () {
// $(".image-gallery ul li:gt(5)").hide(0);
var content = $('.inner p:gt(2)'); // storing selection
content.hide(0);
$('a.moreInfoLink').toggle(
function () {
content.slideDown(1000);
$(this).text("Less info");
},
function () {
content.slideUp(1000);
$(this).text("More info");
}
);
});
</script>
The problem is one of performance - browsers can get bogged down when trying to animate multiple elements at a time, particularly if those elements cause the document to be 'reflowed'. Essentially, your selector $('.inner p:gt(2)') is causing all the <p> elements to be animated independently, and each one causes a document reflow at every point.
For a smooth transition, try animating a single containing element that wraps everything you want to be shown/hidden. I would use HTML something like:
<div class="slideContent">
<div class="inner">
<p>Something</p>
<p>Something</p>
<div class="fullInfo">
<p>Something</p>
<p>Something</p>
<p>Something</p>
</div>
</div>
</div>
<div class="btnMoreInfo">
<a class="moreInfoLink">More Information</a>
</div>
And JS like:
$(".inner .fullInfo").hide(0);
$('a.moreInfoLink').toggle(
function () {
$('.inner .fullInfo').slideDown(1000);
$(this).text("Less info");
},
function () {
$('.inner .fullInfo').slideUp(1000);
$(this).text("More info");
}
);
This way, the browser is only animating one element at a time - much faster!