I'm trying to append a div when the mobile is in landscape mode. But I only want the div to be append once and one time only.
function doStuff() {
landscape = window.orientation ? window.orientation == 'landscape' : true;
if (landscape && window.innerWidth < 736 && window.innerWidth > 320) {
if (window.innerHeight > window.innerWidth) {
console.log("portrait");
} else {
$("body").append("<div>Test</div>");
}
}
}
window.onload = window.onresize = doStuff;
if (window.onorientationchange) {
window.onorientationchange = doStuff;
}
There's no need for JS code here - you can use CSS alone to achieve this. Media queries have the orientation restriction which you can use to display the required content:
.landscape-only { display: none; }
#media all and (orientation:landscape) {
.landscape-only { display: block; }
}
Working example
To see the content change you will just need to resize the width of the Output frame in the above Fiddle.
You can check if this div is already appended.
var appended = false;
function doStuff() {
if(appended) return;
landscape = window.orientation? window.orientation=='landscape' : true;
if(landscape && window.innerWidth < 736 && window.innerWidth > 320){
if(window.innerHeight > window.innerWidth){
console.log("portrait");
} else{
$("body").append("<div>Test</div>");
appended = true;
}
}
}
You could use one(), which fires only once
For Appending you need to use this
var $div = $('<div />').appendTo('body');
$div.attr('id', 'holdy');
Set flag = true if div is already appended.
function doStuff(){
landscape = window.orientation? window.orientation=='landscape' : true;
var flag = false;
if(landscape && window.innerWidth < 736 && window.innerWidth > 320){
if(window.innerHeight > window.innerWidth){
console.log("portrait");
}else{
if (flag == false){
$( "body" ).append( "<div>Test</div>" );
flag = true;
}else{
console.log("Div is already appended");
}
}
}
}
window.onload=window.onresize=doStuff;
if(window.onorientationchange){
window.onorientationchange=doStuff;
}
I think you can use the .one(). there is example of how use it on internet.
http://api.jquery.com/one/
Related
My code works quite fine; if menu-1 is on width > 991 and I display it, it works; but if I resize it to check it media view, it is still set to display: block instead of being set to display: none that I have to use the toggle btn to display. I want my dropdown to be set to display: none if the window size changes. How can I go about that? Please kindly help me with this.
let viewpoint = window.innerWidth || document.documentElement.clientWidth;
window.addEventListener('resize', ()=>{
viewpoint = window.innerWidth || document.documentElement.clientWidth;
},true);
allPage.addEventListener('click', (event) =>{
if(viewpoint <=991){
backdbtn()
if(event.target == productBtn && viewpoint <= 991 ){
secondbtn()
if( menu1.classList.contains('product-d-none')){
menu1.classList.remove('product-d-none');
backBtn.classList.remove('v-none');
}
} if(event.target == backBtn || event.target == allPage){menu1.classList.add('product-d-none');
backBtn.classList.add('v-none')}
}
if(viewpoint >991){
secondbtn()
if(viewpoint !== 991){
backBtn.classList.add('v-none')}
if(event.target == productBtn && viewpoint > 991 ){
secondbtn()
if( menu1.classList.contains('product-d-none')){
menu1.classList.remove('product-d-none');
} else{menu1.classList.add('product-d-none');}
alert('window is less than 991')
}
else{menu1.classList.add('product-d-none');}
}
});
if(viewpoint > 991){
secondbtn()
menu1.classList.add('product-d-none');
productBtn.addEventListener('click', ()=>{
if( menu1.classList.contains('product-d-none')){
menu1.classList.remove('product-d-none');
secondbtn()
} else{menu1.classList.add('product-d-none');}
});
}
I am having issues with a js script on a menu. I have the same menu but styled differently for pc and smaller versions. And I want this script to only affect the menu when the screen is lower than x width. How can I achieve this?
This is my script
var dropdown = document.getElementsByClassName("dropdown-btn");
var i;
for (i = 0; i < dropdown.length; i++) {
dropdown[i].addEventListener("click", function() {
var dropdownContent = this.nextElementSibling;
if (dropdownContent.style.display === "block") {
dropdownContent.style.display = "none";
} else {
dropdownContent.style.display = "block";
}
});
}
}
Check the width of the window (cross-browser) then conditionally run your script.
var x = 400,
w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
if (w < x) {
console.log(w, 'true')
// do stuff here when screen is smaller
} else {
console.log(w, 'false')
// do stuff here when screen is larger
}
You can use window width property of JQuery
if ($(window).width() < x)
{
//Code here
}
To check the width of window (cross-browser), you may use window, screen and width property of JavaScript.
It might help you :
//Smaller screen sizes
var size = 768;
if(window.screen.width < size) {
//Your code for smaller screen sizes here
}
else
{
//Your code for Larger screen sizes here
}
I have this pop up window being centered by javascript using px. I need the box to be responsive so how can I adjust the script to calculate for percentages and not px. Is it possible? This current code allows me to produce an automatic pop up but it also has script that centers the pop using px. This is not responsive.
function toggle(div_id) {
var el = document.getElementById(div_id);
if ( el.style.display == 'none' ) { el.style.display = 'block';}
else {el.style.display = 'none';}
}
function blanket_size(popUpDivVar) {
if (typeof window.innerWidth != 'undefined') {
viewportheight = window.innerHeight;
} else {
viewportheight = document.documentElement.clientHeight;
}
if ((viewportheight > document.body.parentNode.scrollHeight) && (viewportheight > document.body.parentNode.clientHeight)) {
blanket_height = viewportheight;
} else {
if (document.body.parentNode.clientHeight > document.body.parentNode.scrollHeight) {
blanket_height = document.body.parentNode.clientHeight;
} else {
blanket_height = document.body.parentNode.scrollHeight;
}
}
var blanket = document.getElementById('blanket');
blanket.style.height = blanket_height + 'px';
var popUpDiv = document.getElementById(popUpDivVar);
popUpDiv_height=blanket_height/2-187.5;//200 is half popup's height
popUpDiv.style.top = popUpDiv_height + 'px';
}
function window_pos(popUpDivVar) {
if (typeof window.innerWidth != 'undefined') {
viewportwidth = window.innerHeight;
} else {
viewportwidth = document.documentElement.clientHeight;
}
if ((viewportwidth > document.body.parentNode.scrollWidth) && (viewportwidth > document.body.parentNode.clientWidth)) {
window_width = viewportwidth;
} else {
if (document.body.parentNode.clientWidth > document.body.parentNode.scrollWidth) {
window_width = document.body.parentNode.clientWidth;
} else {
window_width = document.body.parentNode.scrollWidth;
}
}
var popUpDiv = document.getElementById(popUpDivVar);
window_width=window_width/2-250;//200 is half popup's width
popUpDiv.style.left = window_width + 'px';
}
function popup(windowname) {
blanket_size(windowname);
window_pos(windowname);
toggle('blanket');
toggle(windowname);
}
This seems like an awful lot of javascript to display a popup dialog. You can accomplish this functionality with CSS/HTML alone, although many solutions will use HTML/CSS for the layout, and some javascript to show/hide the dialog.
I dont like to use javascript at all for the actual layout of the webpage, such as positioning elements. CSS was designed specifically for positioning and styling web elements, and it is generally more efficient than JS.
You may want to check out some of the many guides available online for HTML/CSS Modal Dialogs. These are done with minimal javascript.
Check out this one for starters
http://www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/
Good luck
You really don't need JavaScript to center something - for that, we have CSS! To center something horizontally, simply use the following CSS on the element
margin: auto;
To center something vertically, you can use something like
top: 50%;
transform: translateY(-50%);
position:relative;
I have this very usefull little piece of javascript that centers mig div. By i would like to make it apply to 3 divs on the same site, without repeating the same piece of code 3 times.
Any ideas on how to do it?
Putting all 3 divs into 1 divs that takes care of it, is not and option.
<script type="text/javascript">
<!--
function getWindowHeight() {
var windowHeight = 0;
if (typeof(window.innerHeight) == 'number') {
windowHeight = window.innerHeight;
}
else {
if (document.documentElement && document.documentElement.clientHeight) {
windowHeight = document.documentElement.clientHeight;
}
else {
if (document.body && document.body.clientHeight) {
windowHeight = document.body.clientHeight;
}
}
}
return windowHeight;
}
function setContent() {
if (document.getElementById) {
var windowHeight = getWindowHeight();
if (windowHeight > 0) {
var contentElement = document.getElementById('outer');
var contentHeight = contentElement.offsetHeight;
if (windowHeight < 570) {
contentElement.style.position = 'relative';
contentElement.style.top = '30px';
}
else if (windowHeight - contentHeight > 0) {
contentElement.style.position = 'relative';
contentElement.style.top = ((windowHeight / 2) - (contentHeight / 2)) + 'px';
}
else {
contentElement.style.position = 'static';
}
}
}
}
window.onload = function() {
setContent();
}
window.onresize = function() {
setContent();
}
//-->
</script>
Regards Troels
You don't need to check if document.getElementById exists. It has been supported since the Roman Empire.
Pass the id or the actual element that has to be centered to your function. That removes the dependency on a fixed element (#outer) in your case and makes it more flexible. Also try to name your functions to be indicative of what they are actually doing. setContent is a very generic name and doesn't indicate the centering aspect anywhere.
function centerElementWithId(id) {
..
var contentElement = document.getElementById(id);
..
}
Then call it thrice,
centerElementWithId('outer')
centerElementWithId('secondDiv')
centerElementWithId('thirdDiv');
I'm loading the iFrames dynamically and some pages are 'taller' than others. I'd like the iFrame to grow accordingly. Is it possible? If so, how?
Yes, it is possible by jquery.
Parent page code:
<iframe id='ifrm' />
Script on iframe page:
function alertSize() {
var myHeight = 0;
if (typeof (parent.window.innerWidth) == 'number') {
//Non-IE
myHeight = parent.window.innerHeight;
} else if (parent.document.documentElement
&& (parent.document.documentElement.clientWidth || parent.document.documentElement.clientHeight)) {
//IE 6+ in 'standards compliant mode'
myHeight = parent.document.documentElement.clientHeight;
} else if (parent.document.body && (parent.document.body.clientWidth || parent.document.body.clientHeight)) {
//IE 4 compatible
myHeight = parent.document.body.clientHeight;
}
//window.alert( 'Height = ' + myHeight );
return myHeight;
}
function AssignFrameHeight() {
var theFrame = $("#ifrm", parent.document.body);
var frameHeight1 = getIframeHeight('ifrm');
var frameHeight2 = $(document.body).height();
if ($(document.body)[0]) {
if ($(document.body)[0].bottomMargin)
frameHeight2 += Number($(document.body)[0].bottomMargin);
if ($(document.body)[0].topMargin)
frameHeight2 += Number($(document.body)[0].topMargin);
}
if (frameHeight1 > frameHeight2) {
theFrame.height(frameHeight1 - 20);
} else {
if ($.browser.msie)
theFrame.height(frameHeight2);
else
theFrame.height(frameHeight2 + 50);
}
}
function getIframeHeight(iframeName) {
//var iframeWin = window.frames[iframeName];
var iframeEl = parent.document.getElementById
? parent.document.getElementById(iframeName)
: parent.document.all
? parent.document.all[iframeName]
: null;
if (iframeEl) {
iframeEl.style.height = "auto"; // helps resize (for some) if new doc shorter than previous
//var docHt = getDocHeight(iframeWin.document);
// need to add to height to be sure it will all show
var h = alertSize();
//var new_h = (h - 148);
//iframeEl.style.height = h + "px";
return h;
//alertSize();
}
}
Reassign height after postback:
function pageLoad() { // MS AJAX - UpdatePanel
AssignFrameHeight();
}
$(document).ready(function() { // jQuery
AssignFrameHeight();
});
You might be able to do something like
document.getElementById('your-iframe').height=new_height;
But if you really need to have an iframe grow depending on the content then I suggest you try another html element as an iframe might not be what you need.
try using width:100%; height:100% and apply them on your iframe element