Replace carousel with single div in CSS using media queries - javascript

I'm working in a website for mobiles, tablets and desktops. This website in its desktop layout has a carousel that it is defined in the html like this:
<div id="carousel">
<div class="carousel-slide carousel-slide-active">
</div>
<div class="carousel-slide">
</div>
</div>
Class carousel-slide define an slide of the carousel, and carousel-slide-active, the slide being showed at the moment (controled by Javascript).
For the mobile layout, I don't want to show this carousel. My idea is to show just the first slide (each slide is basically a background color and an image). The question is, how can I do this? Actually I'm using CSS media queries to rearrange all the elements in each device but I don't know how to hide all unused slides and disable the Javascript (this javascript controls the background code (random) and the positioning). Which is the cleanest way to replace the carousel with a simple div with the image and a random color?

You can't disable the JavaScript unless your carousel plugin has a built-in method for it. If it doesn't have that, there is just no way.
Assuming all of the carousel slides actually appear inside of the carousel-slide-active div, you can do something like this:
#media screen and (max-width: 700px) {
.carousel-slide {
display: block;
}
.carousel-slide.carousel-slide-active: {
display: none;
}
}
This will make sure your "active" div is hidden and the other one is displayed. All html elements inside of the active div will also be hidden because their parent is hidden.
You can potentially add the !important flag to those css properties if you need to override some styles being created by the JavaScript. In that case it would look like this:
#media screen and (max-width: 700px) {
.carousel-slide {
display: block !important;
}
.carousel-slide.carousel-slide-active: {
display: none !important;
}
}

Related

Window.Print() adds scroll to page and does not print the entire content

I can't figure why window.print() is adding scroll to this page. The page is really big and has the scroll bar, but shouldn't the content break in different pages? Even removing the overflow from all classes it won't work.
Try showing overflow on print with css:
#media print
{
html {
overflow: visible !important;
}
}
you can change any css class of any element for print using "#media print" and "!important". Try "display: none;" for your scrollbar (if it's a custom scrollbar) too.

Use hover/active CSS by default on mobile devices

On desktop devices, I have designed my elements to be grayed out by default, but become colored when a user hovers over them. On mobile devices, I want them to use the hover state CSS to be colored in by default. Is it possible to do this through JavaScript?
I have lots of elements with different colors, so it would be much easier to simply trigger the state through JavaScript rather than writing new classes and adding them to the elements.
No need for JS! You can use media queries in CSS to accomplish this.
Note: I'm using Bootstrap 4's numbers for screen sizes in this example:
.element:hover {
background-color: gray
}
#media only screen and (max-width: 767px) {
.element {
background-color: gray;
}
}
Bootstrap starts medium screen sizes at 768px, hence my max width of 767. If you want, you can try it out at https://jsfiddle.net/21haxstd/

Change website stucuture and div position on mobile only

My website is www.to-hawaii.com
When you see the site on mobile the left panel with the ads shifts all the way to the bottom of the site.
On each page the left panel is generated by an include file and when the site is viewed on mobile it shifts under the content. The structure of the site is:
<div class="contentarea">
<div class="rightpanel"></div> / Even though it is called Right Panel this is actually the left panel
<div class="midpanel"></div>
<div class="leftpanel"></div> / Which is actually the right panel
</div>
Is it technically possible, without changing the whole structure of the site, to do the following change on mobile - to be included at a specified location on the page, for example under the photo gallery instead of this panel to show on the bottom of the page?
Base on your structure, i think that wouldn't do. To achieve what you want, make a Copy of the div you only want to show on mobile then hide the main div which is for non-mobile through CCS3 #media rule.
Example you want to add the mobile version of rightpanel below the gallery
<div class="gallery-container"></div>
<div class="rightpanel_mobile"></div>
Then manipulate the css...
<style type="text/css">
#media (max-width: 768px) {
.rightpanel { //Main
display: none;
}
.rightpanel_mobile { //Mobile
display: block;
}
}
</style>

How to reposition things in a CCS media query

I have a navigation menu that is responsive using css media queries. When the nav is in desktop/laptop view the whole menu works fine. The nav tags are placed under an image in laptop desktop view which is how I want it but When it is in mobile view I need the nav tags and everything inside it to be placed about an img. I already have a css media query setup with some other styles in it but I think I need a javascript to do what I want.
Hope someone can help,
Thanks
Below are the media queries that I used for your question,
#mobileImg{
display:none;
}
#media only screen and (max-width: 768px) {
/* For mobile phones: */
#desktopImg{
display:none;
}
#mobileImg{
display:block;
}
}
Here is the working demo
So to explain what I did, I have two images one with the id desktopImg and other as mobileImg. The desktopImg is above the nav tags and mobileImg is below the nav tags. Using the media queries, I'm setting the display of mobileImg as none for desktops/laptops. Similarly for mobile view, I made the mobileImg visible and the desktopImg invisible by making its display as none

Check width of viewport on side load, then add class to body if less than X

I'm currently building a portfolio site and i want the sidebar to be hidden by default on mobile devices since its quite big atm, you can check it out here: www.dosh.dk/rofl/
The sidebar will hide if body has the class "sidebar-inactive" and therefore i want to do a single check on the viewport when the site is loaded and then add the class if below X
Im using coffeescript and ive made the following code but it doesnt seem to work, any ideas?
$ ->
$(".inner_content").hide()
$("#myskills").show()
$("#site").addClass 'loaded'
if $(window).width < 600
$("body").addClass 'sidebar-inactive'
How about a non-JavaScript solution using CSS media queries?
#media (max-width: 599px) {
.sidebar {
display: none;
}
}
This will hide elements with the sidebar class when the screen is less than 600px wide and will update as the browser is resized.
More: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

Categories