I would like my "mega menu" JS to only run at full screen width and for a Responsive Menu (from module) to load at any lower screen width. Currently at lower screen width the responsive menu seems to work correctly, but the JS for the mega menu is still running and so is interfering with the responsive menu. I have set the option for CSS selectors to be removed in the Responsive Menu module, but the id for the menu does not change in the HTML naturally and so the mega menu is still using that id. (Is that the problem perhaps?) How can I get the JS to only run at full screen width? Thank you!
$('#subnav').dcMegaMenu({effect: 'slide', speed: 'slow', rowItems: '5', fullWidth: 'true' });
One piece of javascript that we used as a check if it's a mobile display is this (using 640px wide as our 'mobile display'):
function IsMobileDisplay()
{
if (document.all && !document.addEventListener)
return false;
var windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
return windowWidth <= 640 || navigator.userAgent.match(/iPad/i) != null;
}
Then in your case:
if (!IsMobileDisplay)
{
//do stuff
}
Related
I have material grid and menu .I use mat-menu like tooltip,there will be other grids below and each of them have this mat-menu.When user clicks it,user should see appeared box and whats inside.I decided to use Mat-Grid inside but it isn't being responsible as usual it is.Mat-grid is flex and skrinking due to user's action as protecting its position.Thats what I want.But mat-grid here isn't getting smaller as big mat-grid does when you change the page width.
StackBlitz Demo : https://stackblitz.com/edit/angular-material-bootstrap-css-zcjddn?file=src/app/app.component.html
That looks well when page is orginal size(PC,Laptop etc)
Here that problem exists below(Width for tablet , mobile etc.Not getting smaller like grid on the outside)
]2
HTML:
<mat-grid-list [cols]="breakpoint" rowHeight="2:0.5 (window:resize)="onResize($event)">
<`enter code here`mat-grid-tile>1</mat-grid-tile>
<mat-grid-tile>2</mat-grid-tile>
<mat-grid-tile>3</mat-grid-tile>
<mat-grid-tile>4</mat-grid-tile>
<mat-grid-tile>5</mat-grid-tile>
<mat-grid-tile>6</mat-grid-tile>
</mat-grid-list>
.ts file:
ngOnInit() {
this.breakpoint = (window.innerWidth <= 400) ? 1 : 6;
}
onResize(event) {
this.breakpoint = (event.target.innerWidth <= 400) ? 1 : 6;
}
Check Stackblitz demo here
I'm working with PrimeFaces and BootsFaces libraries. I have a little form inside bootsfaces modal. The form is used to change system parameters, and for one specific parameter has a <p:keyboard /> to change its value. My problem is that in extra-small devices, the bootstrap modal doesn't allow horizontal scroll, and the keyboard is not showing complete:
The keyboard is not responsive by default when the viewport with is less than 510px, so I have adjusted it to 436px by default in extra small screens. I want to make horizontal scroll on the modal just to see the complete keyboard, but only when I open the modal.
This is my javascript function to adjust the keyboard depending on screen size:
$(document).on('click', '.inpKeyboard', function() {//- The input text has a class called 'inpKeyboard'
if ($(window).width() <= 505) {//- Small screen
$('#keypad-div').css('width', '436px');
$('#keypad-div').css('left', '0px');
//$('.modal-open').css('overflow-x', 'auto');
}
$('#keypad-div').css('z-index', '2000');
});
Any help would be appreciated. Thanks.
What a nice puzzle! :) PrimeFaces calculate the size of the keypad window in JavaScript and stores it as an inline-style. So the clue to solving this is to add a timeout, like so:
<script>
$(document).on('click', '.hasKeypad', () => {
$('#keypad-div').css('z-index', '2000');
if (!(window.width > 505)) { // JSF (i.e. XML) doesn't accept the less-than-operator
// add a timeout to make sure the code is executed after PrimeFaces did its magic
setTimeout(() => {
// set a fixed with
$('#keypad-div').css('width', '436px');
// add the horizontal scrollbar
$('#keypad-div').css('overflow-x', 'auto');
// increase the height to make space for the scrollbar
$('#keypad-div').css('height', '180px');}
,1);
}
});
</script>
<!-- set a minimum width for the keyboard rows -->
<!-- (otherwise the key overflow to the next row) -->
<style>
#media screen and (max-width: 504px) {
.keypad-row {
min-width:470px;
}
}
</style>
I have a scroll to top jquery button that will scroll to top of page when clicked. I'd like to show this button only when scrolling is needed.
For example: if page/content height (not window height) is more than 980px, show the button. if less, hide the button.
How do i do this using pure css? Thanks.
I am not sure if you can do this using pure CSS. You can use media query to achieve this if it depends on window height. You can use something like this:
#media only screen and (max-height: 980px){
#your-button-id{
display:none;
}
}
If you want it to depend on your content's height you can use Javascript. The example I am giving your is in jQuery but you can do it without jQuery:
$(document).ready(function(){ // To make sure the DOM is loaded before you get the body's height
if( $('body').height() < 980 )
$('#your-button-id').css('display', 'none');
else
$('#your-button-id').css('display', 'block');
$(window).resize(function(){ // To make sure that when window is resized, if you have media querys that modify the css and probably the body's height, you still hide the button if the height is no more than 980px
if( $('body').height() < 980 )
$('#your-button-id').css('display', 'none');
else
$('#your-button-id').css('display', 'block');
}
}
UPDATE: You can show the button whenever the page content's height is greater than your window height. In this case the condition would be
if( $('body').height() <= $(window).height() )
i got one issue that im stacked on.
Im running the media uploader window from a colorbox modal window, which i set to 90% width, and inside i have button which trigger the media uploader (opens second window).
but when i trigger it, it everytime opens smaller modal window than the parent colorbox modal.
i think the problem is that my first window is an Iframe and when i trigger another modal, it takes the iframe as main window and by some percentage it makes the second window smaller. this could fix if i know where to set, that the second window should be 100%.
Do you know where can i set the width and height for the window with media uploader? i tried with the "40" value, but it doesnt work. i cant find no documentation for this.
thanks for reply.
screenshot here: screencast link
my code is
var file_frame1;
jQuery('#mxn_button_add_img1').on('click', function(event) {
event.preventDefault();
// If the media frame already exists, reopen it.
if (file_frame1) {
file_frame1.open();
return;
}
// Create the media frame.
file_frame1 = wp.media.frames.file_frame = wp.media({
title: jQuery(this).data('uploader_title'),
width: 40,
button: {
text: jQuery(this).data('uploader_button_text'),
},
multiple: false // Set to true to allow multiple files to be selected
});
// When an image is selected, run a callback.
// When an image is selected, run a callback.
file_frame1.on('select', function() {
var selection = file_frame1.state().get('selection');
selection.map(function(attachment) {
attachment = attachment.toJSON();
jQuery('#mxn_input_img1').val(attachment.url);
jQuery('#mxn_post_img1').attr('src', attachment.url);
return false;
});
});
});
my website sidebar widgets look fine when I view www.aryaziai.com from my desktop. However, The ONLY issue I have is that when I view my mobile version of my site, the "featured video" sidebar sticks out of the frame and overlaps a bit with the black background.
At the end of the day I don't want to manually change the width/height of the youtube video, I just want the width of the "featured video" widget to automatically resize to the size of widget title (the blue block thing).. Its interesting because the size of the youtube video is the same as the widget title when viewing on a desktop, but the widget title remains at a perfect size in the mobile..
Any 100% width codes out there that can fix this? Thanks
If I understand correctly, you're having a problem getting your YouTube video to adjust to the screen width even if the div you're wrapping it in is correctly resized. If so, please read Chris Coyier's article on resizing YouTube videos.
You can do all of this in jQuery (if you're using it), here's Chris' code:
$(function() {
// Find all YouTube videos
var $allVideos = $("iframe[src^='http://www.youtube.com']"),
// The element that is fluid width
$fluidEl = $("body");
// Figure out and save aspect ratio for each video
$allVideos.each(function() {
$(this)
.data('aspectRatio', this.height / this.width)
// and remove the hard coded width/height
.removeAttr('height')
.removeAttr('width');
});
// When the window is resized
// (You'll probably want to debounce this)
$(window).resize(function() {
var newWidth = $fluidEl.width();
// Resize all videos according to their own aspect ratio
$allVideos.each(function() {
var $el = $(this);
$el
.width(newWidth)
.height(newWidth * $el.data('aspectRatio'));
});
// Kick off one resize to fix all videos on page load
}).resize();
});