I have a code trying to change the text of an h1 if the screen is reduced in size, here's the actual code I have, but is not working. Someone could help me to correct it and to understand it? thanks!
HTML
<h1 id="text1">Test</h1>
JAVASCRIPT
if($(window).width() <= 500){
$('#text1').Text('testing');
}else{
$('#text1').Text('buuu');
}
You need to work along with window resize event. Other option is using CSS pseudo code.
#media (min-width: 500px) {
#text1:after {
content: "foo";
}
}
#media (max-width: 499px) {
#text1:after {
content: "bar";
}
}
<h1 id="text1"></h1>
Edited As per Niet the Dark Absol suggestion.
#media (min-width: 500px) {
#text1 > .tiny {
display: none;
}
}
#media (max-width: 499px) {
#text1 > .big {
display: none;
}
}
<h1 id="text1">
<span class="big">Bigger Content</span>
<span class="tiny">Smaller Content</span>
</h1>
Maybe CSS could help you here:
use data- attributes to validate HTML5 and mediaqueries to show its value. Old text-indent method to erase at screen text hold in the tag itself.
You can use it without id or class for entire site, but data- attribute will need to be there and filled, else a class to set wherever needed, or id for a single use.
#media all and (max-width:500px) {
h1 {
text-indent:-9999px;
}
h1:before {
content:attr(data-text);
text-indent:0;
float:left;
}
}
<h1 data-text="short text">My long text stands here</h1>
You have to catch the window's resizing events. Pretty easy to do it with jquery.
Try this:
$(window).resize(function(){
if ($(window).width() <= 500){
$('#text1').Text('testing');
}
else {
$('#text1').Text('buuu');
}
});
http://jsbin.com/puzanajepe/1/edit?html,js,output
Related
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.
I have a css class "fadeout" that I want to disable if viewport width less than 786px
something like this
#media only screen and (max-width: 786px) {
.fadeout {doesItWork?:noItDoesNotWork!;}
}
You see the class does something regarding " $(window).scrollTop(); " in jquery which i don't think would be appropriate in mobile devices here is the code I got and it from https://tympanus.net/Tutorials/FixedFadeOutMenu/
//fadeout script
$(function() {
$(window).scroll(function(){
var scrollTop = $(window).scrollTop();
if(scrollTop != 0)
$('.fadeout').stop().animate({'opacity':'0.2'},400);
else
$('.fadeout').stop().animate({'opacity':'1'},400);
});
$('.fadeout').hover(
function (e) {
var scrollTop = $(window).scrollTop();
if(scrollTop != 0){
$('.fadeout').stop().animate({'opacity':'1'},400);
}
},
function (e) {
var scrollTop = $(window).scrollTop();
if(scrollTop != 0){
$('.fadeout').stop().animate({'opacity':'0.2'},400);
}
}
);
});
I am open to javascript/jquery/plugin but would prefer a css only solution
Any help much appreciated thanks in advance
Why not just define the CSS for the class using the opposite media query?
#media only screen and (min-width: 787px) {
.A {
// style rules here.
}
}
Try to disable the parameters you want by using !important
I.E.
Greater that 768px
.A {
margin: 10px;
width: 120px;
}
Less then 768px
#media only screen and (max-width: 786px) {
.A {
margin:0px !important;
width: 120px !important;
}
}
Not entirely sure what you mean by disable but you can use display:none or visibility:hidden. With visibility:hidden the element still takes up space on the page, you just can't see it while display:none will not render the element at all.
#media screen and (min-width: 787px) {
.A {
display: none !important; /* If you just want it hidden */
pointer-events: none; /* If you don't want the user to be able to click */
}
}
I'm wrote a code for hide and text under screen resolution 860px.. But it doesn't work where am i did the mistake ?
Example at CodePen
Thanks for any help guys !
var width = $(window).width(), height = $(window).height();
if ((width >= 1024)) {
$('#px').show()
} else {
$('#px').hide()
}
p {display: inline;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container"><p id="px">www.</p>mywebsite.com</div>
CSS
You just do this with pure CSS negating the need for any JavaScript or page loading. This way is much better and supported than using JavaScript
#media (max-width: 860px) {
#px {
display: none;
}
}
<div id="px">Text to be hidden under 860px</div>
JavaScript / jQuery
If you do need it to be done within JavaScript/jQuery, your code is out by a small amount.
$(document).ready(function() {
var width = $(window).outerWidth();
if (width <= '860') {
$('#px').hide();
} else {
$('#px').show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="px">Text to be hidden under 860px</div>
You don't need javaScript, only use css:
#media screen and (max-width: 1024px){
#px{display: none}
}
#media screen and (min-width: 1024px){
#px{display: block}
}
I'm currently using CSS to hide a div section when the screen goes under a certain width. That bit works fine, but I'm struggling to get my head round, how to show a replacement div when I hide the div.
I might be going about it the wrong way, but here's my code:
#media all and (max-width: 955px) {
div.grid12-11 {
display: none;
}
}
#media all and (max-width: 954px) {
div.grid12-12 {
display: block;
}
}
What I'm trying to achieve is when the screen width goes below 955px grid12-11 is hidden and replaced with grid12-12.
Currently both the div's are being shown > 955px rather than replacing the block.
Is there a better/correct way to doing this?
There is no need to change the media query
div.grid12-12 {
display: none; // make it hidden on default view
}
#media all and (max-width: 955px) {
div.grid12-11 {
display: none;
}
div.grid12-12 {
display: block;
}
}
Check this: http://jsfiddle.net/Mohamed_nabil/cHQcD/
#media (max-width: 955px) {
div.gridFirst {
display: none;
}
}
#media (min-width: 955px) {
div.gridSecond {
display: none;
}
}
How are your initial rules set up? I think you're running into a problem of specificity. If your 'standard' rules are the same or more specific than your rules in your media query, the media query will not override them.
This seems to do what you expect:
#media all and (max-width: 955px) {
div.grid12-11 {
display: none;
}
div.grid12-12 {
display: block;
}
}
.grid12-11 { display:block; }
.grid12-12 { display:none; }
Note that if your standard rules (non-media) are prefixed with "div", it will NOT function (depending on what order the rules are processed in, and which browser you are using).
I have problem with css rules inside IE10 when they are inside page included by ngView (I'm using Angular 1.0.6). It work fine for other brower (I think that it work for IE11, didn't tested myself):
I have css like this:
.checker {
display: none;
}
#media (min-width: 1041px) {
.m1 { display: block; }
}
#media (min-width: 980px) and (max-width: 1040px) {
.m2 { display: block; }
}
#media (max-width: 767px) {
.m3 { display: block; }
}
#media (max-width: 979px) {
.m4 { display: block; }
}
and html:
<span class="checker m1">m1</span>
<span class="checker m2">m2</span>
<span class="checker m3">m3</span>
<span class="checker m4">m4</span>
the css is inside <style> tag on my page that's rendered inside ngView. And for page lareger then 1041px it show both m1 and m3. When I resize the browser the m3 disappear. It also work when I have the style and html inside the page not inside ngVew.
What is the problem here? is there a bug in IE10? How to fix my css? It's something with media queries, maybe the order of them?
I was able to fix it by adding min-width to that rule:
#media (max-width: 767px) and (min-width: 100px) {
No idea why but it work.