Hide elements of html in slider using css - javascript

Iam using this slider http://tympanus.net/codrops/2013/04/17/background-slideshow/ for fully background slider. I added some image in the class main:-
<style>
.mobile {
visibility:hidden;
}
#media(max-width:480px) {
.desktop {
visibility:hidden.
}
.mobile {
visibility:visible;
}
}
</style>
<ul id="cbp-bislideshow" class="cbp-bislideshow">
<li class="desktop"><img src="images/1.jpg" alt="image01"/></li>
<li class="desktop"><img src="images/2.jpg" alt="image02"/></li>
<li class="mobile"><img src="images/mobile/1.jpg" alt="image03"/></li>
<li class="mobile"><img src="images/mobile/2.jpg" alt="image04"/></li>
</ul>
What i want to show image having class desktop and to hide image of class mobile and also to hide class desktop and show class mobile if browser having max-width of 480px. But after showing image of class desktop it shows white screen which i don't want.
Please help.

Use display: none and display: block instead of visibility: hidden and visibility: visible respectively, like this:
<style>
.mobile{
display: none !important;;
}
#media (max-width:480px) {
.desktop{
display: none !important;;
}
.mobile{
display: block !important;;
}
}
</style>

Related

how to set a div made of 3 buttons that in the moment in which the broswer's window is shrunk turns into a pop-up menu

I'm writing this message as I'd need to know how to set a div made of 3 buttons that, in the moment in which the broswer's window is shrunk and it's no longer on full screen, turns into a pop-up menu visible through the conventional three lines.
You can define #media in your css.
An example has been set here:
https://jsfiddle.net/jfgm9r2v/8/
The html code is like this:
<div class="hideOnSmall">
<button>Text1</button>
<button>Text2</button>
<button>Text3</button>
</div>
<div class="displayOnSmall">
<div class="hamburger-box">
<button>MyHambuger</button>
</div>
The magic happens in the css:
.hideOnSmall {
display: block;
}
.displayOnSmall {
display: none;
}
#media only screen and (max-width: 768px) {
.displayOnSmall {
display: block;
}
.hideOnSmall {
display: none;
}
}

I need to use same ID content in two different DIVs. How do I do it?

Case is this. I have a website with two different layouts for browser and mobile. The content should be same with both and i've created DIVs with unique IDs. In short the code is this...
#media only screen and (max-width: 600px) {
.mobile {
visibility: visible;
}
.browser {
visibility: hidden;
}
}
#media only screen and (min-width: 601px) {
.mobile {
visibility: hidden;
}
.browser {
visibility: visible;
}
}
<div class="browser">
<div id="content">Blaa blaa blaa</div>
</div>
<div class="mobile">
<div><!--Need to get content from "content" id here--></div>
</div>
You can't use same id twice, instead you can use same class name for multiple elements..

Change html <a> letters length on resolution change?

I have an HTML code: <a><span>My Text -</span> Loooong Text</a>
Output: My Text - Loooong Text
When screen resolution goes to width lower than 445px, I want Loooong Text as: L. Text, and if it increases, text returns to original size.
Any help? Thanks.
You can split the text into more elements, and then use #media query in your CSS to decide which to show and which to hide.
HTML:
<a>
<span>My Text -</span>
<span id='long'>Loooong Text</span>
<span id='short'>L. Text</span>
</a>
CSS:
#media screen and (max-width: 445px) {
#short { display: inline; }
#long { display: none; }
}
#media screen and (min-width: 446px) {
#short { display: none; }
#long { display: inline; }
}
Here is a modification of Koby Douek's answer that might suit you.
also utilizing #media.
Wrap the collapsing portion in a span. Then use media queries to toggle its display. You can use this class to wrap anything you want to collapse.
HTML:
<a>
<span>My Text -</span>
L<span class='collapse'>oooong</span> Text
</a>
CSS:
#media screen and (max-width: 445px) {
.collapse { display: none; }
.collapse::after {content: '.'}
}
#media screen and (min-width: 446px) {
.collapse { display: inline; }
}
You mentioned you are generating the content using a PHP script, this strategy should be compatible.

How to display a nav ul list as a select

I'm busy working on a responsive mobile first site and one of the requirements is to display the main navigation (nav>ul>li) like it would be a tag for the mobile view. I've in the past used either javascript to display it on click or just kept it inline depending on the client, but haven't had this requirement before, so I'm wondering if there is a way with CSS to have the <li> display like it would if it were a <select> tag. For desktop view it will just display normally inline.
You need to have separate elements for nav and select like below.
<select id="mobileNav">
<option>your links</option>
</select>
and your original nav
<nav>
<ul>
<li>links</li>
</ul>
</nav>
Now in your CSS use media queries to toggle based on screen width:
#media (max-width: 480px) {
nav {
display: none;
}
select#mobileNav {
display: block;
}
}
#media (min-width: 481px) {
select#mobileNav {
display: none;
}
nav {
display: block;
}
}

Displaying menu over an image

I have a sliding menu that should be displayed over an image, actually a logo. However, when it does, it is shifted as if the text of the menu wanted to avoid touching the image.
See :
the problem in image http://fruityhotchocolate.com/m.png
(note: the website is in french)
I deal with the event as follows:
$("nav>#menu>ul>li").hover(function(e) {
$("ul",this).css("display","block");
});
Thanks.
You don't need javascript, you can do it with CSS:
Add the following code:
#menu>ul>li>ul {
display: none;
list-style: none;
}
#menu>ul>li:hover>ul {
display: block;
}
Moreover, you should use child selectors (>) instead of descendant selectors:
#menu>ul
#menu>ul>li>ul
#menu>ul>li>ul>li
#menu>ul>li>ul>li>a
#menu>ul>li>a, #menu>ul>li>a:hover, #menu>ul>li>a:visited
Basically, what happens is that the li expands to the same width as the ul because it does not have a fixed width. Try:
$(document).ready(function() {
$('#menu ul').children('li').each(function () {
$(this).css('width', $(this).css('width'));
});
});
Try it with CSS:
<div class="content">
<img src="https://www.google.com.br/images/srpr/logo3w.png​​​​​​​​​​" />
<ul class="menu">
<li>Item 1</li>
</ul>
</div>
​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
CSS:
.content {
position: relative;
}
.content:hover .menu {
display: block;
}
.menu {
position: absolute;
display: none;
}
Demo: http://jsfiddle.net/nfKc4/

Categories