I want to hide the Bootstrap carousel slider when a page is loaded on a mobile device.
Is it possible to do this using PHP?
You can parse $_SEVER['HTTP_USER_AGENT'] - but then you have to handle a lot of user-agents.
Or you can use a libary for that, for example Mobile Detect.
Have a look at this one:
https://codex.wordpress.org/Function_Reference/wp_is_mobile
or if you want something more 'complex':
http://mobiledetect.net/
However, the best solution to hide a div on mobile is css.
#media only screen and (max-device-width: 480px) {
.SliderClass{
display:none;
}
}
If you use bootstrap you can use the classes hidden-sm or hidden-xs if you don't want the carousel on mobile.
You can use jQuery
var width = $(window).width(),
height = $(window).height();
if (width < 720) {
$('.carousel').remove();
}
Related
I would like to use a different logo for my mobile version.
I found out that you add another logo in your HTML source code and then define in CSS which logo is shown based on page size.
My problem is that I use Wordpress and can't really access the source code. I can only write something in the functions.php file.
My logo is places in the navigation bar, which makes it more difficult, too.
Would be soooo thankful for any help :)
Daniel
My Page
Yes you can use media queries to do that for example :
.mobile-logo-class {
display:none;
}
#media screen and (max-width: 768px) { // 768px or your break point
.mobile-logo-class {
display: inline-block; // or block
}
.desktop-logo-class {
display:none;
}
}
Or you can use the "Picture" tag but be careful for IE Support:
https://webdesign.tutsplus.com/tutorials/quick-tip-how-to-use-html5-picture-for-responsive-images--cms-21015
In normal case, if your theme provides the options for mobile logo then you can upload different logo for your mobile sections,
if there are not options for the mobile logo into your theme then you can use media queries to set the path for mobiles width
or
you can use the plugins to show different logo for your website in mobile something like this.
https://wordpress.org/plugins/rocket-wp-mobile/
STEP 1: OK first copy the code of logo in your header file which one calling the log on your desktop, copy the code and paste it below the same dive now remove the PHP code and change the div class, and give there <img src=" your image path"> and save it. you can write HTML too for image
STEP 2: Now in CSS use CSS for hiding it. something like
.logo2-img {
display: none;
}
here logo2 is your 2nd div class .
STEP 3: Now write css with media query
#media screen and (max-width: 768px) { // 768px or your break point
.logo2-img{
display: block; //
}
.desktop-logo-class {
display:none;
}
}
thats it sorry for poor English
I am working on a webpage. On this page there is a portfolio grid of downloadable resources that are represented with pictures. Currently if someone tries to change the filter before all of the images load it will break it.
I would like those buttons to not be clickable until all of the images on the screen have loaded, and I would like to do so using JQuery.
How can I accomplish this?
Add a class to the filters container that prevents interaction such as:
.disabled {
pointer-events: none;
}
<div id="filters-container" class="cbp-l-filters-alignCenter disabled">
And then use the initComplete.cbp event from the plugin to remove it.
$("#grid-container").on('initComplete.cbp', function() {
$('#filters-container').removeClass('disabled');
});
Hide all images by default using CSS
img{
display: none;
}
/* disable all buttons using class disabled*/
.disabled{
pointer-events: none;
}
Use Jquery to check if all loaded, then display images and enable buttons
JQuery
$(window).load(function(){
$('img').fadeIn(800); //or $('img').show('slow');
$('.disabled').css('pointer-events', 'auto');
});
I have this function in my tile.twig file that shows one post on a carousel. It works fine on portrait mode on mobile.I need it to show 2 post when it is in landscape. But I do not know how to do this in twig/PHP here is the code:
{{ fn("do_action", "render-carousel", style|default('header-carousel'), carousel_list|default("Header Carousel"), img_size|default("mobile/feed/large"), carousel_show|default(1), extra_options) }}
I need the carousel_show|default(1) to be carousel_show|default(2) when in landscape mode. Any ideas
Unfortunately, it's difficult, and not performant at all, to "tell" PHP that your device is in portrait or landscape mode, and to render different amounts of HTML accordingly.
I believe you're probably a bit stuck as you're using a plugin to render the carousel and therefore don't have control over the CSS or JS.
If you'd written the carousel yourself. You'd use media queries in CSS:
#media (orientation: landscape) {
.carousel-slide {
width: 50%:
}
}
#media (orientation: portrait) {
.carousel-slide {
width: 100%
}
}
You'd also need to tell your carousel code that you're displaying either one or two slides intially:
if (window.matchMedia("(orientation: portrait)").matches) {
Carousel.init({startingNumberOfSlides:1})
}
if (window.matchMedia("(orientation: landscape)").matches) {
Carousel.init({startingNumberOfSlides:1})
}
It sounds like you won't be able to achieve this effect with the carousel plugin you're using.
Thanks,
Jon
I am trying to figure out a way to do this using both server and client (or maybe just client?) side code based on the browser width. What I want to do is take a carousel from bootstrap and populate the slide portion with images from the server.
This is easy to do when the browser is of one size, its a simple sql query and a loop.
But now imagine you can have an image for 1024+, and image for 768, an image for 480px and finally an image for 320px (these are all the same image, just at different widths). How would I use php and css to create a carouse that loads one image for 1024+, then once you get down to 768px it swaps that image out for one of an appropriate size, same for 480 and 320.
I haven't tried anything other then storing the images, because to be honest I am not even sure how to approach this.
How would you accomplish this?
Would it be an option to use media queries in CSS? Although content: url(...) for dynamic images aren't supported in all browsers you can play with background url() property of a div.
To give you an impression:
#media (max-width: 320px) {
#slide1, #slide2, #slide3 {
background:url("http://lorempixel.com/512/256");
}
}
#media (min-width: 320px) {
#slide1, #slide2, #slide3 {
background:url("http://lorempixel.com/1024/750");
}
}
#media (min-width: 1024px) {
#slide1, #slide2, #slide3 {
background:url("http://lorempixel.com/1920/1025");
}
}
See this fiddle in action with a fullscreen bootstrap carousell
I put embed codes of videos in custom field, every embed code (video) from every site have a different size..
there is a way to set a specific size for all embed videos without change the sizes in the embed codes?
i mean just copy and past the embed code with all parameters and then some code will change the videos to specific size?
You can do that with CSS or JS. For example, you can:
Have specific width and height for iframe in css
Have a JS script that will resize your iframe dynamically, for example on document.ready.
An example of the CSS would be something like:
.content iframe { width: 600px; height: 480px; }
An example of the JS would be something like:
jQuery(function($) {
var iframes = $('.content iframe');
iframes.css('width', 600);
iframes.css('height', 480);
});
Please, note that these examples would apply to iframes that are within an element with class "content", for example <div class="content">.