I have this code:
<script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>
<script type='text/javascript'>
//<![CDATA[
$(window).load(function(){
$('#content-left').css('width', '100%').css('width', '-=320px');
$(window).on('resize', function(){
$('#content-left').css('width', '100%').css('width', '-=320px');
});
});
//]]>
</script>
The above code works great but what I need is for this code to stop working or switch back to just 100% width (without subtracting the 320px) when the screen size is 768px or less.
I did some google searches and found this:
if ($(window).width() <= 768){
// do something here
}
But I'm not sure how to add this to my existing code.
Background:
My sidebar is a fixed sidebar on the right side of the page at 300px. And I have a padding of 20px between the sidebar (#content-right) and the main section (#content-left). My main section (#content-left) is using the above script of 100% - 320px.
I am using two CSS. One is a regular CSS. The other uses:
#media all and (max-width: 768px) {}
Thank you. :)
Use a simple if/else statement, put your resize code in a function and call that function when the page loads and when the window is resized.
function resize() {
if ($(window).width() <= 768) {
$('#content-left').css('width', '100%');
} else {
$('#content-left').css('width', '100%').css('width', '-=320px');
}
}
$(window).load(function() {
resize();
});
$(window).on('resize', function() {
resize();
});
You can combine them like this. This only runs your code when the window is NOT less than 769 pixels. That's what the "!" symbol does, converts it to NOT.
$(window).load(function() {
if (!$(window).width() <= 768) {
$('#content-left').css('width', '100%').css('width', '-=320px');
$(window).on('resize', function() {
$('#content-left').css('width', '100%').css('width', '-=320px');
});
}
});
Related
On the desktop sizes, my navbar brand includes only one larger image. But on the mobile sizes I want that larger image to be replaced with two smaller images. For that, I have used jQuery and when I check it on the mobile it looks just how I wanted to. But the problem is that as I change my browser's size the image is not being replaced in real time. Is there a way I could achieve this?
$(document).ready(function() {
if ($(window).width() < 575.98) {
$('.navbar-brand').children().remove();
$('.navbar-brand').append('<img src="assets/images/Llogo AIP.png"><img src="assets/images/CoA RKS.png">');
}
});
<a class="navbar-brand" href="index.html"><img src="assets/images/logo.png"></a>
To get the code to be executed on resizing the window you should use .resize():
The resize event is sent to the window element when the size of the browser window changes.
$(window).resize(function() {....
Demo:
$(document).ready(function() {
if ($(window).width() < 575.98) {
$('.navbar-brand').children().remove();
$('.navbar-brand').append('<img src="https://homepages.cae.wisc.edu/~ece533/images/pool.png"><img src="https://homepages.cae.wisc.edu/~ece533/images/fruits.png">');
}
$(window).resize(function() {
if ($(window).width() < 575.98) {
$('.navbar-brand').children().remove();
$('.navbar-brand').append('<img src="https://homepages.cae.wisc.edu/~ece533/images/pool.png"/><img src="https://homepages.cae.wisc.edu/~ece533/images/fruits.png"/>');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="navbar-brand" href="index.html"><img src="assets/images/logo.png"></a>
This behavior is because the image is only replaced at document ready, aka when the document has finished loading.
If you want to change the images on window resize you need the resize event handler, as Mamun pointed out.
In that case you probably also want to switch back to the original image when you make the screen larger. I would make a separate function to handle setting the correct images and call it on window resize and on document ready. For example:
$(document).ready(function() {
setNavImages();)
});
$(window).resize(function(){
setNavImages()
});
function setNavImages(){
if ($(window).width() < 575.98) {
$('.navbar-brand').children().remove();
$('.navbar-brand').append('<img src="assets/images/Llogo AIP.png"><img src="assets/images/CoA RKS.png">');
}else{
$('.navbar-brand').children().remove();
$('.navbar-brand').append('<img src="[your original image here]">');
}
}
Like #Mamun said and call it on document ready
or better use bootstrap hidden-xs visible-md classes
$(document).ready(function() {
$(window).resize(function() {
if ($(window).width() < 575.98) {
$('.navbar-brand').children().remove();
$('.navbar-brand').append('<img src="assets/images/Llogo AIP.png"><img src="assets/images/CoA RKS.png">');
}
});
$(window).resize(); // call it here after define it
});
<a class="navbar-brand" href="index.html"><img src="assets/images/logo.png"></a>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
With this code the navbar will change like you want, on every resize, for example.
$(document).ready(function() {
navbarBrandContent = $('.navbar-brand').html();
changeNavbarBrand();
});
$(window).resize(function() {
changeNavbarBrand();
});
function changeNavbarBrand() {
if ($(window).width() < 575.98) {
$('.navbar-brand').children().remove();
$('.navbar-brand').append('<img src="assets/images/Llogo AIP.png"><img src="assets/images/CoA RKS.png">');
} else {
$('.navbar-brand').html(navbarBrandContent);
}
}
i have actually an Simple/Standart Toggle System from Bootstrap, my Knowledge about Javascript is 0, what i want is following, if the width size min. 700px then everytime open else the standart system. I Need only the function if desktop/media width size min. 700px so stay it open.
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
My Bad! Syntax error in my code before thats the right way
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
function resize() {
if ($(window).width() > 614) {
$('#wrapper').removeClass('toggled');
}
}
$(document).ready( function() {
$(window).resize(resize);
resize();
});
</script>
I have a jquery function that i want to disable below 700px. I have the following function:
<script>
$(document).ready(function() {
$(window).resize();
});
</script>
and
<script>
$(window).resize(function() {
if( $(this).width() > 700 ) {
$(window).load(function() {
$('.dh-container').directionalHover();
});
}
});
</script>
This seems like it should work, but i'm a noob to jquery, and can't find the error in my code, and the chrome inspector isn't displaying any errors.
If someone could spot my error, that would be great. And in the future, how would i go about diagnosing a jquery error that the chrome inspector doesn't point out?
Thank you
Your code works fine
<script>
$(document).ready(function() {
$(window).resize();
});
$(window).resize(function() {
if( $(this).width() > 700 ) {
$(window).load(function() {
alert("It's Working above 700px width");
});
}
});
</script>
Always start by testing simple procedures to find out mistakes.
Another way:
<script>
var width = $(window).width();
if (width > 700) {
alert('Display Above 700px');
} else {
alert('Do nothing since it's under 701px');
}
</script>
I have a link that in normal when I click on it, it gives me a alert() (using jquery).
HTML:
<a class="link" href="www.example.com">link</a>
JS:
$(".link").click(function() {
alert('clicked');
return false;
});
CSS:
#media (min-width: 980px)
{
// In this width, when user click on that link,
// I want to open www.eample.com
}
Now my question is this: How do i determine wether the client's width is less than or greater than 980 pixels?
you can use $(window).width()
$(".link").click(function() {
if($(window).width() >= 980){
alert('clicked');
return false;
}
});
I'm unsure of what you want to do but if i understand correctly you want some javascript code to run when the client's width is smaller/bigger than a certain amount of pixels.
If that's the case you'd have to check within the click callback function whether the clients screen was larger/smaller than 980px.
$(".link").click(function () {
if (window.innerWidth > 980) {
alert('clicked');
return false;
}
});
You can not deactivate JavaScript using CSS, you'd have to use JavaScript and check the width with $(window).width()
$(".link").click(function() {
if ($(window).width() >= 980) {
alert('clicked');
return false;
}
});
I think match media is pretty sweet also:
var mq = window.matchMedia('#media (min-width: 980px)');
var link = document.querySelector('.link');
link.href = mq.matches ? "http://www.example.com" : "";
EDIT:
Oh, as #Oscar points out: If you're worried about the combined ~16% market share (oct/2015) of IE8/IE9, go with the jquery method detailed in the chosen answer.
I am completely new to jquery, here is the code for toggling to collaspe the sidebar.
//define script for sidebar toggling
function togglesidebar() {
$('#sidebar').toggleClass('column-collapse');
}
$(document).ready(function(){
$(function() {
$('[data-toggle=offcanvas]').click(togglesidebar);
});
It works just fine. But when I add the following code to make it also collapse when screen size is < 768, it stops working.
//define script for sidebar toggling
function togglesidebar() {
$('#sidebar').toggleClass('column-collapse');
}
$(document).ready(function(){
$(function() {
$('[data-toggle=offcanvas]').click(togglesidebar);
});
$(window).resize(function(){
windowsize = $(window).width();
if(windowsize < 768) {
$('[data-toggle=offcanvas]').click(togglesidebar);
});
});
I wonder where the problem is and i will be grateful if someone can help me with it.
EDIT:
Here is the website:
http://wileyphp.no-ip.biz/tagees/testing.html#
I want to collapse the sidebar when it is windowsize <768px
and
there is a button to toggle collapse/expand in the sidebar. I want it to work at all screen size.
You are missing '}' at the end of if condition.
$(document).ready(function(){
$('[data-toggle=offcanvas]').click(togglesidebar);
$(window).resize(function(){
windowsize = $(window).width();
if(windowsize < 768) {
$('[data-toggle=offcanvas]').click(togglesidebar);
} /**/ '}' missing here**
});
});