I am trying to remove a class from a div when the web browser is resized.. For example on a mobile device.
The line which I am trying to affect is
<div class="tab-pane active" id="visitors">
I am trying to remove the active class. I have currently tried this:
$(window).on('load, resize', function mobileViewUpdate() {
var viewportWidth = $(window).width();
if (viewportWidth < 600) {
$(".tab-pane").removeClass("active").addClass("");
}
});
This doesn't seem to work though?
Remove the comma (,) between the event names - they should be separated with a space only.
Also note that there's no need to use addClass(''), your function name is redundant as it's an anonymous function, and you can use toggleClass() to simplify the logic and also make the class automatically be added/removed if the window is resized multiple times. Try this:
$(window).on('load resize', function() {
$(".tab-pane").toggleClass("active", $(window).width() >= 600);
});
Working example
Resize the bottom right pane in the example above to see the code working.
I think it is right check here
$(window).on('load resize', function() {
var viewportWidth = $(window).width();
if (viewportWidth < 600) {
$(".tab-pane").removeClass("active");
} else {
$(".tab-pane").addClass("active");
}
});
.active { color: red; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab-pane active">a</div>
<div class="tab-pane active">a</div>
<div class="tab-pane active">a</div>
<div class="tab-pane active">a</div>
<div class="tab-pane active">a</div>
run it and resize it on another window
Related
I need to account for navbar size after the page has loaded if a hash id has been passed in url e.g. example.com#id-of-some-element
I am trying to use the following:
$(document).ready(function(){
if(window.location.hash){
$(window).scrollTop($(window).scrollTop() - 80);
}
});
However $(window).scrollTop() in this case always returns 0.
This leads me to think that .ready fires before the navigation to the hash id has been done.
I believe your theory is correct. Below are 3 examples, one using $(document).ready(), one using $(window).load(), and one with logic to make the adjustment after the first scroll (but not subsequent scrolls).
All 3 show expected $(window).scrollTop() values, but $(document).ready() always appears in the hash location rather than the expected shifted location. $(window).load() appears with the expected 80px adjustment some of the time, but it is not consistent. The third option uses logic that should always work, though it's admittedly a bit clunky. There may be a better solution, but I hope this helps!
Try expanding each snippet and clicking "Run code snippet" repeatedly to see results over several test runs.
Never works: Using $(document).ready():
if (!window.location.hash) {
window.location = window.location + "#id-of-some-element";
}
$(document).ready(function() {
console.log($(window).scrollTop());
if (window.location.hash) {
$(window).scrollTop($(window).scrollTop() - 80);
console.log($(window).scrollTop());
}
});
.tall-div {
height: 1000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tall-div">DIV 1</div>
<div id="id-of-some-element">Some Element</div>
<div class="tall-div">DIV 2</div>
Sometimes works: Using $(window).load():
if (!window.location.hash) {
window.location = window.location + "#id-of-some-element";
}
$(window).load(function() {
console.log($(window).scrollTop());
if (window.location.hash) {
$(window).scrollTop($(window).scrollTop() - 80);
console.log($(window).scrollTop());
}
});
.tall-div {
height: 1000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tall-div">DIV 1</div>
<div id="id-of-some-element">Some Element</div>
<div class="tall-div">DIV 2</div>
Always works: Using logic to detect first scroll:
if (!window.location.hash) {
window.location = window.location + "#id-of-some-element";
}
var loading = true;
$(window).scroll(function(event) {
if (loading) {
console.log($(window).scrollTop());
if (window.location.hash) {
$(window).scrollTop($(window).scrollTop() - 80);
console.log($(window).scrollTop());
}
loading = false;
}
});
.tall-div {
height: 1000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tall-div">DIV 1</div>
<div id="id-of-some-element">Some Element</div>
<div class="tall-div">DIV 2</div>
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)
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!
I have this div scrolling script:
$(document).ready(function () {
$('.tab-box').each(function () {
var top = 0;
var $tabbox = $(this);
var height = $tabbox.height();
$(this).find('.tab').each(function () {
var shift = top;
$(this).click(function () {
$tabbox.find('.items').animate({
marginTop: shift + 'px'
});
$tabbox.find('.tab').removeClass('active');
$(this).addClass('active');
});
top -= height;
});
$(this).find('.tab:eq(0)').addClass('active');
});
});
If I understand it correctly it gets every divs working only within the div "tab-box".
http://jsfiddle.net/9SfEH/5/
What I want to change is that I separate the "tabs" from the main tab-box div, but make them still controll the "items".
http://jsfiddle.net/w65Dn/1/
I was trying for a simple solution buuut couldn't come up with one by myself.
Thanks everyone in advance :)
The problem was that in the original code, it was looking for the tab clickables using $(this).find(".tab"), but the .tabs were no longer inside of the .tab-box. So, if you just search globally, with $(".tab"), it works.
Note that you can no longer have more than one tab box, because it is searching globally for the .tabs. You could use something like javaCity's solution (i.e. wrapping everything in another div) to fix this.
You were looking for .tabs inside the tab-box which does not exist. So how about creating a div outside of .tabs which also encloses tab-box?
http://jsfiddle.net/3D8we/
HTML:
<div class="enclosingDiv">
<div class="tabs">
<div class="tab">1</div>
<div class="tab">2</div>
<div class="tab">3</div>
</div>
<div class="tab-box">
<div class="items">
<div class="item" style="background: #cbe86b;"></div>
<div class="item" style="background: #f2e9e1;"></div>
<div class="item" style="background: #1c140d;"> </div>
</div>
</div>
</div>
JS:
$(document).ready(function () {
$('.tab-box').each(function () {
var top = 0;
var $tabbox = $(this);
var height = $tabbox.height();
$('.enclosingDiv').find('.tab').each(function () {
var shift = top;
$(this).click(function () {
$tabbox.find('.items').animate({
marginTop: shift + 'px'
});
$tabbox.find('.tab').removeClass('active');
$(this).addClass('active');
});
top -= height;
});
$(this).find('.tab:eq(0)').addClass('active');
});
});
On line 7, change the selector from this to .tabs
$(this).find('.tab') becomes $(.tabs).find('.tab')
as seen here: jsfiddle example
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'));
});
}
});