I use resize to reload my page, but I want just reload once when page size small to bigger than 768px or big to simmer than 768px.
that my code now
$(window).resize(function(){
// if(document.body.clientWidth <= ipadWidth && x = 1){
location.reload()
// }
});
I am not entirely sure if that is what you are looking for but the code below will trigger each time only once on resize when the innerWidth is bigger than 768px and once if it is smaller than 768px.
Note: reloading the page is not an option in this case as all the values will reset after refreshing the page.
If you still wanted to reload the page then you would need to save these variables in your database but that is not enough since then you would need to track sessions for each user (even with that there are many scenarios to consider) which is definitely an overkill.
My suggestion is to ultimately avoid force refreshing.
If you provide more information on why you would want to force reload the page then possibly I could suggest a better solution to your problem.
If your issue is with styling the page according to the screen size then use media queries instead.
For example:
#media screen and (max-width: 768px) {
your CSS here
}
In above case your CSS rules would be active until the browser resizes to above 768px. After that, the default CSS rules in your code would be active.
let isSmall = false
let isBig = false
$(window).resize(function(){
if (window.innerWidth >= 768 && !isBig) {
isBig = true
//location.reload()
console.log('big once')
}
if (window.innerWidth < 768 && !isSmall) {
isSmall = true
//location.reload()
console.log('small once')
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
EDIT
I updated the answer in order to give you a few examples of how you can use JS to conditionally show and hide elements.
I included two examples.
The first example on resizing the window - which is a bit expensive in terms of performance.
The second one is when the page loads - the check happens only once, on the first load.
$(window).resize(function(){
if (window.innerWidth < 768) {
$(".choiceSubject_btn").show();
}else {
$(".choiceSubject_btn").hide();
}
})
$( document ).ready(function() {
if (window.innerWidth < 768) {
$(".choiceSubject_btn").show();
}else {
$(".choiceSubject_btn").hide();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="choiceSubject_btn">my button<h4></h4><i class="fas fa-caret-down"></i></button>
Related
I have a responsive design, with selectable sidebar data drawn from a database. At a screen width less than 751 pixels, that sidebar becomes a pull-out tab on the left of the screen. I cannot feasibly reload the data on state change (sidebar to tab or vice versa) as the amount of data is extensive. So, the solution seems to be using the tabbed state (using MB Extruder - a "hidden" tab utility) as the sidebar, also, and just changing the state of the div. However, that cannot be done without javascript as, in the sidebar state, Extruder needs to be open, whereas it needs to be closed when in the tab state.
So, I am doing the following to set the sidebar/tab:
$(document).ready(function()
{
CheckScreen();
},
$(window).resize(function()
{
CheckScreen();
}));
function CheckScreen()
{
var ww=$(window).width();
if(ww < 751)
{
$('#extruderLeft').closeMbExtruder();
$('.extruder.left .flap').css('display', 'block'); // The tab
$('.site_wrapper').css('padding-left', '30px');
}
else
{
$('#extruderLeft').openMbExtruder(true);
$('.extruder.left .flap').css('display', 'none');
$('.site_wrapper').css('padding-left', '0px');
}
}
This changes the state from a sidebar column to a hidden state with a small tab on the left side of the screen when the screen width is less that 751 pixels. This will work fine at any size screen on document.ready. It will adjust fine when dragging the side of a browser from larger to smaller. However, when dragging back out to a larger width, the div will, rather randomly, switch from one state to another.
Perhaps there is a better way to do this altogether. If worse came to worse, I could have two separate entities (sidebar and tabbed state) holding the same data, and just use CSS, but that would be ridiculously redundant.
The problem seemed to be faulty conditions in the if-clauses (see comments under the question).
This should do the trick:
$(window).load(function() {
$(window).resize(function() {
if ($(window).width() < 751) {
if ($('.extruder.left .flap').css('display') != 'block') {
$('#extruderLeft').closeMbExtruder();
$('.extruder.left .flap').css('display','block'); // The tab
$('.site_wrapper').css('padding-left','30px');
}
} else if ($('.extruder.left .flap').css('display') != 'none') {
$('#extruderLeft').openMbExtruder(true);
$('.extruder.left .flap').css('display','none');
$('.site_wrapper').css('padding-left','0');
}
}).resize();
});
Notice the extra if-clauses checking the display-state:
if ($('.extruder.left .flap').css('display') != 'block') {
and
} else if ($('.extruder.left .flap').css('display') != 'none') {
This makes sure the sidebar/tab-switch only occurs on the break point of the specified screen-width, and the if-clauses aren't unnecessarily executed.
I also changed your script a bit to make more efficient use of jQuery. This way you don't have to create a named function AND call it twice. (I always put window.resize inside window.load instead of document.ready because if you need to scale things that only works properly after load anyway, but for your purpose both will work.)
I am trying to change the image source for devices with small screen size.
I want to target only mobile devices (not desktop browsers) smaller than 1024px width.
I don't want to use media queries since they are going to load both hi and low resolution versions of the image if I change the browser size on desktop. I can target devices separately but it's gonna be huge mess on my css file.
Any proper solution to load smaller images for mobile devices only? (especially smaller than tablets). Also with userAgent it's not easy to target devices like android tablets and android smartphones.
I am using this code but it also causes duplicate file load after I refresh the page.
$(function() {
if($(window).width() <= 1024) {
$(".slides-container li img").each(function() {
$('.slides-container li img').attr('src',function(i,e){
return e.replace("img/galeri/large","img/galeri/medium");
});
});
}
});
Try doing an event handler for window resize:
<body onload="window.addEventListener('resize', setPanels); setPanels();">
function setPanels()
{
var windowWidth = window.innerWidth;
if(windowWidth < 500)
{
document.getElementById('your image').src = 'new image source';
}
else
{
document.getElementById('your image').src = 'new image source desktop';
}
}
$(function() {
if($(window).width() <= 1024) {
$(".slides-container li img").each(function() {
if($(this).attr('src').indexOf("large") > -1){
$(this).attr('src',function(i,e){
return e.replace("img/galeri/large","img/galeri/medium");
});
}
});
}
});
Your issue (as I understand it) is that when the page initially loads, all the images have src="img/galeri/large/...", and you're trying to conditionally change that to be instead src="image/galeri/medium/..." if appropriate for the viewport's width.
Unfortunately, as soon as the img is loaded in the dom, the browser will begin to load the src file, all before your jQuery ever runs.
Given that you evidently have some control over the backend, the lightest weight (albeit quite hacky) solution may be to nuke the src attribute on all imgs on the page, replaced with some other attribute isrc that contains the asset name (the bit after the img/galeri/large or img/galeri/medium), and then step through your image tags on page load like this
$(function() {
var assetLoc = "img/galeri/large";
if($(window).width() <= 1024) {
assetLoc = "img/galeri/medium";
}
$(".slides-container li img").each(function() {
var assetSrc = assetLoc + $(this).attr('isrc');
$(this).attr('src', assetSrc);
});
});
Again, hacky, but it will allow for the asynchronous loading you're looking for with a minimal amount of work.
I have this code:
<script type="text/javascript">
var snapper = new Snap({
element: document.getElementById('content'),
disable: 'right'
});
</script>
And I want it to run/be turned on only when the window width is less than or equal to 768px. How would I do this with javascript?
Thanks
Use the window.onresize event.
window.onresize = function ()
{
if (window.innerWidth <= 768)
{
var snapper = new Snap({
element: document.getElementById('content'),
disable: 'right'
});
}
}
Note that this will only fire when resizing of the window is complete, and that you may want to use jQuery's $(window).width() instead of pure javascript since it can be a little wonky. Also, if you want to undo what you did in the above if statement, you'll want to attach an else block with the appropriate code. Finally, if optimization strikes your fancy and you want to avoid running unnecessary code (eg if the window is resized to 768 and subsequently 700, there's no reason to run the if block both times) you may want to set a flag that's checked by the if and else if blocks (your else block would turn into an else if) to prevent creating a new Snap when it's not necessary.
Use the window.innerWidth property to determine what the width of the viewport. Note that this does include the vertical scrollbar.
if(window.innerWidth <= 768) {
// your code
}
Source: https://developer.mozilla.org/en-US/docs/Web/API/window.innerWidth
Note that the innerWidth property is not available in versions of IE prior to IE9; Safari prior to Safari 3; and Opera prior to Opera 9.
Consider using modernizr's media query functionaility to determine if you want to run this code or not.
You can do a media query just like in CSS, and then if it's true, run your code.
if(Modernizr.mq('(max-width: 767px)'){
//your code
}
With jquery you should be able to get the width and height of the window with
$(window).width();
$(window).height();
To do what you're after (If you're already using jquery)
$(window).resize(function() {
if ($(window).width() <= 768) {
//do your code
}
else {
//go back to normal
}
});
I have this statement in my webpage that formats a page especially so they can view it better with a small netbook screen:
<link rel="stylesheet" media="only screen and (max-height: 750px)" href="netbook.css" />
My question is, can I do the same with javascript?
I have an array of jquery functions that also change depending on screen size. I'm looking for something like this, I suppose:
<link rel="javascript" media="only screen and (max-height: 750px)" href="scripts_netbook.css" />
Any ideas out there?
Many thanks as always,
Dan
What I would do is something like:
$(function() {
var script_path = $(window).height() > 750 ? '/path/to/file.js' : '/path/to/otherfile.js';
$.getScript(script_path, function() { $(window).trigger('script_loaded'); });
$(window).on('script_loaded', function() {
//run other code requiring those scripts here
});
});
Edit: From your comments, it seems like you want to do:
$(function() {
if ($(window).height() < 750;) {
$('#footer_index').delay(800).transition({y:-155 }, 1000, 'snap');
}
});
This won't work like a media-query as far as resizing, but just on page load. If you want it to work for resizing, you could do something like
$(window).on('resize', function() { //do stuff });
According to Link Types Reference, JavaScript is not a Link Type, so your answer is no.
You can simply use the following for your needs:
screen.onresize = function() {
if (screen.height <= 750) {
//Your scripts
}
};
Note: According to Media Queries 'Height' Spec,
The ‘height’ media feature describes the height of the targeted
display area of the output device. For continuous media, this is the
height of the viewport including the size of a rendered scroll bar (if
any). For paged media, this is the height of the page box.
So to have proper pairing of CSS Media Queries and JavaScript, always use screen.width and screen.height
If you want to follow the style of CSS media queries, you have to use the .resize() function, this is the code:
var resizeBool = ($(this).height() < 750);
$(window).resize(function() {
var resizeBoolTmp = ($(this).height() < 750);
if (resizeBool === resizeBoolTmp) return;
resizeBool = resizeBoolTmp;
//your code that must be updated when the size changes
//from previous comments/answer, maybe this?
//$('#footer_index').delay(800).transition({y: -155}, 1000, 'snap');
});
This code updates the action only when the height limit passed by one or the other side.
Here is a snippet that shows how it works(check console to see what happens when width limit is reached).
I'm trying to have an Edge animation resize based on screen resolution. I've made a high-res one for 1080p and higher-res screens, but since the project is reasonably complex, I was wondering if there was a way to export the animation at a different size from Edge, without having to redo everything a few times for smaller screens.
There is also this now which helps scale based on a parent bScaleToParent:
AdobeEdge.loadComposition('MyComp', 'EDGE-985368975', {
scaleToFit: "both",
centerStage: "horizontal",
minW: "0",
maxW: "undefined",
width: "1540px",
height: "3004px",
bScaleToParent: true
}, {dom: [ ]}, {dom: [ ]});
This was helpful: https://forums.adobe.com/message/6939673#6939673
I would try to do it in a DIV or a frame, and use CSS zooming options. Some tips here
I'm going to use CSS3's transform:scale, in conjunction with media queries, to solve this.
I found this to be a great solution.
Add a Resize trigger into your stage. Paste this code inside:
if ($(window).width() < 960) {
if ($(window).width() < 600) {
sym.stop("layout400");
} else {
sym.stop("layout600");
}
} else {
sym.stop("layout960");
}
Then make three different labels in the timeline with the names layout960, layout600 and layout400. Now you can avoid Edge from reloading every time and skip Edge Docks (at least for responsive).
Open up the hi res file, group everything in a div, resize that div to the desired width and height. If there are any image files, make sure to save them at the correct sizes to avoid poor quality browser re-sizes. Save out each version and upload it to a different location on your server.
then put this into the head of the document:
<script>
if ( (960 < screen.width < 1024) && (640 < screen.height < 768) ) {
window.location = 'www.YOURURL.com/ipad';
}
else if ( (screen.width < 960) && (screen.height < 640) ) {
window.location = 'www.YOURURL.com/iphone';
}
</script>
This would redirect based on the screen resolution of an ipad or iphone, but you could adjust it to whatever you like.
Store all your layouts as symbols if you are going to do it using labels and then add them to the stage at run-time. Anything you place on the stage's time line exists in the DOM even though you may not have arrived at a screen marker.