This is a simple and pretty straightforward question:
If media query breakpoints are set at 750px and 970px, using jquery, is it possible to refresh the page after the width of .container div changes on browser resize and how?
You probably want to use a media query instead but, you can listen to a resize event if you really want to do this:
addEventListener('resize', function() {
location.reload();
});
If you want to only reload if a breakpoint is past, you can keep track of the last innerWidth and only reload if a certain value is crossed. Or instead of using innerWidth, use a width of a div. For example:
var last = document.getElementById('mydiv').clientWidth;
addEventListener('resize', function() {
var current = document.getElementById('mydiv').clientWidth;
if (current != last) location.reload();
last = current;
});
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<div id="mydiv">
<h1>Page Resize demo</h1>
</div>
<script>
$(window).resize(function ()
{
if ($(window).width() < 700)
{
$("#mydiv").css("background", "red");
}
else
{
$("#mydiv").css("background", "orange");
}
});
</script>
Related
I'm currently making an element visible when my nav is at the top of the page. I'd like the element to be hidden if the page gets to max-width: 900px;. I've tried using modernizer for JS media queries but I ca't seem to get it to work.
Code:
var a = $(".menu").offset().top;
function scrollListener(){
if($(document).scrollTop() > a)
{$('.hidden-logo').css({"opacity": "1","display": "block"});
$('.menu').css({"margin-left": "-130px"})
} else {
$('.hidden-logo').css({"opacity": "0","display": "none"});
$('.menu').css({"margin-left": "0px"})
}
};
$(document).scroll(scrollListener);
You were checking the scroll position the wrong way - I think you want the logo to disappear when the current scroll is greater than the top of the logo, not less.
I added a msgS div (for demo purposes only) that will show you the current scroll value against the top-of-menu static value. I also added a 100px fudge factor to the menu location to make it more clear in the demo when the current scroll reaches that position. I use these temporary msg divs myself when working out my code, and then remove them when I've got it all sorted and ready for production.
And this is all you need to check the media query in javascript:
var winmed = window.matchMedia("(max-width: 700px)");
if (winmed.matches){ //do something }
And that can go into a listener function exactly like your scroll listener.
var gloShowLogo = true;
var a = $(".menu").offset().top;
var fudge = 100; //100px fudge factor so can SEE div disappear
function scrollListener(){
updateScrollMsg();
var currScroll = $(document).scrollTop();
var topOfMenu = a+fudge;
if( gloShowLogo && currScroll < topOfMenu ){
$('.hidden-logo').css({"opacity": "1","display": "block"});
$('.menu').css({"margin-left": "-130px"})
} else {
$('.hidden-logo').css({"opacity": "0","display": "none"});
$('.menu').css({"margin-left": "0px"})
}
};
function resizeListener(){
updateMediaMsg();
var winmed = window.matchMedia("(max-width: 500px)");
if (winmed.matches){
$('.hidden-logo').css({"opacity": "1","display": "block"});
gloShowLogo = true;
} else {
$('.hidden-logo').css({"opacity": "0","display": "none"});
gloShowLogo = false;
}
}
$(window).scroll(scrollListener);
$(window).resize(resizeListener);
function updateScrollMsg(){
$('#msgS').html( $(document).scrollTop() +' // ' + $(".menu").offset().top );
}
function updateMediaMsg(){
var winmed = window.matchMedia("(max-width: 500px)");
var medmsg = (winmed.matches) ? '< 500' : '> 500';
console.log(medmsg);
$('#msgM').html(medmsg);
}
.menu{background:green;text-align:center;}
.content{height:200vh;background:palegreen;text-align:center;}
.hidden-logo{position:fixed;top:1vh;right:1vw;padding:15px; background:pink;z-index:2;}
#msgS{position:fixed;top:0;left:0;padding:10px;background:wheat;z-index:2;}
#msgM{position:fixed;top:40px;left:0;padding:10px;background:lightblue;z-index:2;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="menu">Menu Div</div>
<div class="content">Lengthy content Div..<br><br><br><br>100<br></div>
<div class="hidden-logo">LOGO</div>
<div id="msgS"></div>
<div id="msgM"></div>
Update:
Sorry, I had the media query a bit backwards myself - I think you want the logo to display when the screen-size is < 900px and to be hidden if wider than 900px, yes?
I added a msgM div so you can watch the media query kick-in -- but getting the best width for the demo was a bit of a challenge. I finally settled at 500px as a width that can be demoed (StackOverflow resizes its StackSnippets container as the browser window resizes, which throws things into confusion at each of their resize breakpoints)
I have this code
<div id="123"></div>
i want to change the id to 234 when the browser resized
<div id="234"></div>
I have use media query , but i think it is not possible
#media screen and (max-width: 479px) {
#123 {
}
}
You can do this easily with javascript or jQuery.
Here a example written in JS.
window.onresize = function(){
var div = document.getElementById("aaa");
if(div){
div.setAttribute("id", "bbb");
}
}
#aaa {
font-size: 10px;
}
#bbb {
font-size: 10em;
}
<div id="aaa">Resize</div>
Im not sure what you are trying to do but this can be solved with window.onresize
You generally shouldn't be changing your element IDs around but if you want to you will need some logic in the onresize function to deduce which ID your element will have when you resize your window.
You're right! It's not possible to do with CSS, but it can be possible to do with JavaScript &/or jQuery. Try this using jQuery:
$(window).on('resize',function() {
$('#123').attr('id','234');
});
The problem with the code above, is that it's a 1x only change. You could never re-target that id after the first resize. So after the browser detects that it has been resized by 2-3 pixels, then the JS will break.
The real question is, why would you want to change an id on resize? It would be better to change an HTML 5 data-* attribute, like: data-id. This allows you to be able to change it repeatedly, using the #myUniqueId attribute. Then your code should continue to run continuously, for as long as the window is being resized.
Here is a jsfiddle for this code:
HTML:
<div id="myUniqueId" data-id="123"></div>
<div id="output"></div>
jQuery:
$(window).resize(function() {
var id = $('#myUniqueId').attr('data-id');
id++;
$('#myUniqueId').attr('data-id',id);
// Double check: what is my id?
var myId = $('#myUniqueId').attr('data-id');
$('#output').html(myId);
});
I use similiar code so you can use different css for mobile or desktop... However it completely irritates me.
This way you use the same id or class. But depending on screen size it will do something different.
#media not all and (min-width:999px){
/* Big Screen */
body {background-color:green; }
#id { background-color:red}
}
#media all and (min-width:1000px)
{
/* Smaller Screen */
body {background-color:blue; }
#id { background-color:grey}
}
Notice how when you manually re size the screen with your mouse the color changes....to the smaller css automatically.
No jQuery answer
window.onresize = function(event) {
if(document.getElementById('123') != null)
document.getElementById('123').id = '234';
};
Just be careful id 234 is not assigned to another element, however you should not be changing your id for changing styles as it should be done by adding and removing css classes.
I hope this one work for you.
//detect window resize
$(window).resize(function() {
//test if window width is below 479
$(window).width() < 479 ? small() : big();
//small function is called when window size is smaller than 479
function small(){
//edited from $( "#id_changer" ).append( "<div id='123'>123</div>" );
document.getElementByID('id_changer').innerHTML = "<div id='123'>123</div>";
}
//big function is called when window size is bigger than 479
function big(){
//edited from $( "#id_changer" ).append( "<div id='234'>234</div>" );
document.getElementByID('id_changer').innerHTML = "<div id='234'>234</div>";
}
});
<body>
<div id="id_changer"></div>
</body>
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script src="test.js"></script>
How can I make an effect when mouse scrolls to a particular position?
<div id="target">
<!-- some data here -->
</div>
jQuery
var target = $('#target');
if(target.scrollTop() > 10){
alert('');
}
You might have to select the entire HTML document for the scroll function, instead of just one specific div
jQuery
$(document).scroll(function(){
if ($(window).scrollTop() > 10){
// if the current scroll of the window is greater than 10px
alert('');
}
});
You need to put your code inside
$(window).on('scroll', function(){}); which will fire each time the window is scrolled like this:
$(window).on('scroll', function(){
var target = $('#target');
if(target.scrollTop() > 10){
console.log("Scrolled 10px");
alert('');
}
});
I am aware of how stupid this sounds...
I'm trying to re-size an iframe. Here's what I have:
function doTwitterHeight(screenwidth)
{
if(!screenwidth){
var screenwidth = window.innerWidth;
console.log('screenwidth is now defined as: ' + screenwidth);
}
if(screenwidth >= 981){
$('#twitter-widget-0').css('height',466);
}
else if(screenwidth <= 980 && screenwidth >= 952){
$('#twitter-widget-0').css('height',614);
}
else if(screenwidth <= 951 && screenwidth >= 877){
$('#twitter-widget-0').css('height',632);
}
//etc.
else{
$('#twitter-widget-0').css('height',468);
}
}
The function works when called with resize, like so:
$(window).on('resize', function(){
doTwitterHeight();
});
But I also need the function to be called and re-size the height of that div when the page is first loaded. I've tried:
$(window).on('load', function() {
doTwitterHeight();
});
And:
$(document).ready(function(){
doTwitterHeight();
});
And:
$(doTwitterHeight());
And I've had no luck with any of them.
Thanks in advance :)
So the resolution was to modify the code that twitter provide for the iframe embed. By using the advice found at: Twitter Embedded Timeline Callback
I've now fixed the problem by replacing:
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
with:
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";js.setAttribute('onload', "twttr.events.bind('rendered',function(e) {doTwitterHeight()});");fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
i.e. by adding:
js.setAttribute('onload', "twttr.events.bind('rendered',function(e) {doTwitterHeight()});");
You can try this:
$(window).on('load resize', doTwitterHeight).resize(); // <---trigger it on load
or as per your code piece:
$(window).on('resize', function(){
doTwitterHeight();
}).resize(); // <-----this triggers the resize on page load.
Ok so I'm putting in an image that onclick resizes, (goes larger and then onclick returns to origional size)
I've done this using JS but I cant seem to implicate an animation in the tween between sizes, i want it to visibly get bigger rather so it expands to the size rather than just flicks between the two instances.
Heres the coding:
<script type="text/javascript">
<!--
var flag = true;
function resize() {
if(flag) {
document.getElementById("img1").style.width = "50px";
} else {
document.getElementById("img1").style.width = "280px";
}
(flag)?flag=false:flag=true;
}
//-->
</script>
<body onload="resize();">
<img id="img1" src="../images/attachicona.png" border="0" onClick="resize();" />
You can use CSS3 transitions to make the same effect. No need of javascript or jquery -
css3 animation/transition/transform: How to make image grow?
Or you can use jquery animations -
http://forum.jquery.com/topic/image-resize-animation
if using jquery
var flag = true;
$('#img1').click(function(e){
if(flag)
$(e.target).animate({width:'50px'}, 150, function(){
//do stuff after animation
});
else
$(e.target).animate({width:'280px'}, 150, function(){
//do stuff after animation
});
flag=!flag;
});