I created this fiddle as you can see there I have a webpage with two texts, one below another. It works great on wide screens, but when I shrink the webpage - or run the webpage on mobile - it is messed up, like on this screenshot:
I thought about doing it more responsive by adding CSS mobile queries, but then in the code I have:
#media (max-width: 545px) {
.outer{
width:100%;
height:330px;
top:0;
position:relative;
}
.inner1{
width:100%;
height:320px;
margin-bottom:0px;
}
.inner2{
width:100%;
height:330px;
margin-bottom:0px;
}
}
#media (max-width: 435px) {
.outer{
width:100%;
height:380px;
top:0;
position:relative;
}
.inner1{
width:100%;
height:370px;
margin-bottom:0px;
}
.inner2{
width:100%;
height:380px;
margin-bottom:0px;
}
}
#media (max-width: 378px) {
.outer{
width:100%;
height:460px;
top:0;
position:relative;
}
.inner1{
width:100%;
height:450px;
margin-bottom:0px;
}
.inner2{
width:100%;
height:460px;
margin-bottom:0px;
}
}
etc., so lot's of values for different screen widths. I suspect there's some other way of doing that, the most responsive way in which I don't need to cover each screen width separately in mobile CSS...
Can you give me any hint how could I change my code so it works independently on any device/screen width?
Thanks!
Set minimum width and height for each class so that the page stops adjusting the text with screen resolutions that are too small. Add min-height:123px; and min width:456px; (adjust px as needed) so that they do not overlap on small screens.
Note: This isn't very good for mobile.
In your fiddle you are setting the height of each div (inner1 and inner2), and when you compress the page width to about 150px (you picture) the divs are overflowing. Setting the height of an elements is not done often, at least from my experience. On mobile platforms width is usually more of a concern.
Setting the overflow attribute inside your css for each div fixed the issue for me.
.inner1{
width:100%;
height:270px;
margin-bottom:0px;
overflow: auto;
}
.inner2{
width:100%;
height:280px;
margin-bottom:0px;
overflow: auto;
}
Here is a reference for the overflow property. Using auto at least allows for scrolling and wont cut off the text.
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
Bootstrap actually has a grid system made for the exact purpose of making the width values responsive to screen size.
http://v4-alpha.getbootstrap.com/layout/grid/
Also, setting the viewport width for mobile phones will load the css to run at the actual screen width of the phone, rather than the pixel density width of the screen: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
The problem you run into is caused by the content of .inner1 becoming too high and showing up in your .inner2. The .inner1 is able to become too high because of their overflow. It shows your text even past the height you specified. To stop this behavior apply
.inner1{
overflow:hidden;
}
That said, I cannot recommend using the method you have been using to make the content appear/disappear (with a fixed height). I would personally use display:none and remove display:none by code (and possible animation) in this scenario. But that is beyond the question asked, so I won't go into that.
JSFiddle
HTML (with bootstrap)
<div class= "container">
<div class="row">
<div class="col-sm-7 company">
<h2>this is my title</h2>
<div class="companyDescription" >
<div class="outer">
<div class="inner1" id="inner1">
<h5>"The quick brown fox jumps over the lazy dog" is an English-language pangram—a phrase that contains all of the letters of the alphabet. It is commonly used for touch-typing practice. It is also used to test typewriters and computer keyboards, show fonts, and other applications involving all of the letters in the English alphabet
</h5><h5>Some kind of subtitle</h5>
<h5><a id="readMore" style="cursor: pointer; cursor: hand;">read more...</a></h5>
</div>
<div class="inner2">
<h5><a id="readLess" style="cursor: pointer; cursor: hand;">...read less</a></h5>
<h5>As the use of typewriters grew in the late 19th century, the phrase began appearing in typing and stenography lesson books as a practice sentence. Early examples of publications which used the phrase include Illustrative Shorthand by Linda Bronson (1888), How to Become Expert in Typewriting: A Complete Instructor Designed Especially for the Remington Typewriter (1890)
</h5>
<h5>the last subtitle.</h5>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
.company {
padding-top: 160px;
color: #000;
}
.companyDescription {
margin: 20px 0 10px 0;
overflow:hidden;
}
.outer{
width:100%;
height:280px;
top:0;
position:relative;
}
.inner1{
width:100%;
height:270px;
margin-bottom:0px;
overflow:hidden;/*ONLY ONE NEW CSS LINE!*/
}
.inner2{
width:100%;
height:280px;
margin-bottom:0px;
}
Javascript (with jQuery)
$('#readMore').click(function(){
$('.companyDescription').animate({
scrollTop:$('#inner1').outerHeight()+30
}, 1000);
})
$('#readLess').click(function(){
$('.companyDescription').animate({
scrollTop:0
}, 1000);
})
Here is my code you can also go through below link -
JSFiddle
HTML Code -
<div class="col-md-12">
<div class="row">
<div class="col-md-12 company">
<h2>this is my title</h2>
<div class="companyDescription">
<div class="outer">
<div class="inner1" id="inner1">
<h5>"The quick brown fox jumps over the lazy dog" is an English-language pangram—a phrase that contains all of the letters of the alphabet. It is commonly used for touch-typing practice. It is also used to test typewriters and computer keyboards, show fonts, and other applications involving all of the letters in the English alphabet
</h5>
<h5>Some kind of subtitle</h5>
<h5><a id="readMore" style="cursor: pointer; cursor: hand;">read more...</a></h5>
</div>
<div class="inner2">
<h5 style="display:none;"><a id="readLess" style="cursor: pointer; cursor: hand;">...read less</a></h5>
<h5 style="display:none;">As the use of typewriters grew in the late 19th century, the phrase began appearing in typing and stenography lesson books as a practice sentence. Early examples of publications which used the phrase include Illustrative Shorthand by Linda Bronson (1888), How to Become Expert in Typewriting: A Complete Instructor Designed Especially for the Remington Typewriter (1890)
</h5>
<h5 style="display:none;">the last subtitle.</h5>
</div>
</div>
</div>
</div>
</div>
</div>
JAVASCRIPT Code -
$('#readMore').click(function() {
$('#readMore').css('display','none');
$('.inner2').find('h5').css('display','block');
})
$('#readLess').click(function() {
$('#readMore').css('display','block');
$('.inner2').find('h5').css('display','none');
})
Bootstrap already provide the best responsive design. But still if you want to add more responsiveness you can add your own classes with the html tags and then use media queries for specific width.
<div class="container class1">
content here
</div>
<ul class="list-item class2">
<li> list item </li>
</ul>
now you have to apply your css on your given classes which in this case are class1 and class2
Thanks
We got 2 choices,
1. Set a large static height...
Change the statically set width to a large number like say 250px which will work well for low res... but will have too much of (ugly) white space on desktop.
.inner1{
width:100%;
height:250px;
margin-bottom:0px;
overflow: auto;
}
.inner2{
width:100%;
height:250px;
margin-bottom:0px;
overflow: auto;
}
2. Calculate height dynamically on resize...
This work work for all resolutions with just as much whitespace as desired on all resolutions ;)
For this
First wrap the contents in .inner1 and .inner2 in a container, we used article here... this will help us determine the height of content.
Now Set height to 100% for .inner1 and .inner2...
.inner1 {
width: 100%;
height: 100%; /* Set height as 100% */
margin-bottom: 0px;
}
.inner2 {
width: 100%;
height: 100%; /* Set height as 100% */
margin-bottom: 0px;
}
Then give .outer a default height, like maybe 160px
.outer {
width: 100%;
height: 160px;
top: 0;
position: relative;
}
Finally some JS to make it work ;)
Update
We use a function assigned to a var instead of using an anonymous function.
On resizing window, we check the heights of content in inner1 and inner2, use the one with more content using Math.max then add 25px gutter to it and set it as .outer height...
var fixWidths = function() {
var
$cDesc = $('.companyDescription');
$cDesc.find('.outer').css(
'height',
Math.max(
$cDesc.find('.inner1').children('article').outerHeight(),
$cDesc.find('.inner2').children('article').outerHeight()
) + 25 // Maximum of the two
)
}
$(window).resize(fixWidths);
fixWidths();
Update
Make sure your JS code is wrapped in...
$(function() {
...
});
This will wait until doc is loaded...
At the end we trigger resize programmatically, to set the correct initial state.
A working example
$(function() {
$('#readMore').click(function() {
$('.companyDescription').animate({
scrollTop: $('#inner1').outerHeight() + 30
}, 1000);
})
$('#readLess').click(function() {
$('.companyDescription').animate({
scrollTop: 0
}, 1000);
})
var fixWidths = function() {
var
$cDesc = $('.companyDescription');
$cDesc.find('.outer').css(
'height',
Math.max(
$cDesc.find('.inner1').children('article').outerHeight(),
$cDesc.find('.inner2').children('article').outerHeight()
) + 25 // Maximum of the two
)
}
$(window).resize(fixWidths);
fixWidths();
});
.company {
padding-top: 160px;
color: #000;
}
.companyDescription {
margin: 20px 0 10px 0;
overflow: hidden;
}
.outer {
width: 100%;
height: 160px;
top: 0;
position: relative;
}
.inner1 {
width: 100%;
height: 100%;
/* Set height as 100% */
margin-bottom: 0px;
}
.inner2 {
width: 100%;
height: 100%;
/* Set height as 100% */
margin-bottom: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-7 company">
<h2>this is my title</h2>
<div class="companyDescription">
<div class="outer">
<div class="inner1" id="inner1">
<article>
<h5>"The quick brown fox jumps over the lazy dog" is an English-language pangram—a phrase that contains all of the letters of the alphabet. It is commonly used for touch-typing practice. It is also used to test typewriters and computer keyboards, show fonts, and other applications involving all of the letters in the English alphabet
</h5>
<h5>Some kind of subtitle</h5>
<h5><a id="readMore" style="cursor: pointer; cursor: hand;">read more...</a></h5>
</article>
</div>
<div class="inner2">
<article>
<h5><a id="readLess" style="cursor: pointer; cursor: hand;">...read less</a></h5>
<h5>As the use of typewriters grew in the late 19th century, the phrase began appearing in typing and stenography lesson books as a practice sentence. Early examples of publications which used the phrase include Illustrative Shorthand by Linda Bronson (1888), How to Become Expert in Typewriting: A Complete Instructor Designed Especially for the Remington Typewriter (1890)
</h5>
<h5>the last subtitle.</h5>
</article>
</div>
</div>
</div>
</div>
</div>
</div>
Here's the updated fiddle...
https://jsfiddle.net/2nexo75j/16/
You can use clearfix class
<div class="clearfix"></div>
Did you included "jquery-ui-1.10.4.min.js" file? and is order of all css js files are correct?
Because same code of yours with the same styling and scripting working for me.Try this bellow code.
<!DOCTYPE html>
<html>
<head>
<title>Scroll</title>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css">
<script>
$(document).ready(function () {
$('#readMore').click(function () {
$('.companyDescription').animate({
scrollTop: $('#inner1').outerHeight() + 30
}, 1000);
});
$('#readLess').click(function () {
$('.companyDescription').animate({
scrollTop: 0
}, 1000);
});
});
</script>
<style>
.company {
padding-top: 160px;
color: #000;
}
.companyDescription {
margin: 20px 0 10px 0;
overflow:hidden;
}
.outer{
width:100%;
height:280px;
top:0;
position:relative;
}
.inner1{
width:100%;
height:270px;
margin-bottom:0px;
}
.inner2{
width:100%;
height:280px;
margin-bottom:0px;
}
</style>
</head>
<body>
<div class= "container">
<div class="row">
<div class="col-sm-7 company">
<h2>this is my title</h2>
<div class="companyDescription" >
<div class="outer">
<div class="inner1" id="inner1">
<h5>"The quick brown fox jumps over the lazy dog" is an English-language pangram—a phrase that contains all of the letters of the alphabet. It is commonly used for touch-typing practice. It is also used to test typewriters and computer keyboards, show fonts, and other applications involving all of the letters in the English alphabet
</h5><h5>Some kind of subtitle</h5>
<h5><a id="readMore" style="cursor: pointer; cursor: hand;">read more...</a></h5>
</div>
<div class="inner2">
<h5><a id="readLess" style="cursor: pointer; cursor: hand;">...read less</a></h5>
<h5>As the use of typewriters grew in the late 19th century, the phrase began appearing in typing and stenography lesson books as a practice sentence. Early examples of publications which used the phrase include Illustrative Shorthand by Linda Bronson (1888), How to Become Expert in Typewriting: A Complete Instructor Designed Especially for the Remington Typewriter (1890)
</h5>
<h5>the last subtitle.</h5>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
I am developing a webpage for authors section for a book publishing website and working on the show more/ show less button. There are two media div's, one for the author image(on the left side) and his summary(on the right side). I want to enable/disable the show more/ show less button based on the height of the summary content. I want to enable the show more/less button only when the height of the summary content is more than that of the fixed height image (180px).
Referred from : http://jsfiddle.net/thebabydino/U7Cyk/
NOTE : media, media-left and media-body are bootstrap classes.
HTML Code :
<div id = "author-page">
<div>
<h3>
Chetan Bhagat
</h3>
</div>
<div class="media">
<div class="media-left">
<img class="media-object" src="http://img01.ibnlive.in/ibnlive/uploads/2014/10/chetan_bhagat_151110.jpg"/>
</div>
<div class = "media-body">
<div class="info-wrapper">
(more)
(less)
<div class="info">
Chetan Bhagat is the author of six blockbuster books. These include five novels—Five Point Someone (2004), One Night # the Call Center (2005), The 3 Mistakes of My Life (2008), 2 States (2009),
Revolution 2020 (2011), the non-fiction title What Young India Wants (2012) and Half Girlfriend (2014). Chetan’s books have remained bestsellers since their release.
Four out his five novels have been already adapted into successful Bollywood films and the others are in process of being adapted as well. The New York Times called him the ‘the biggest selling English language novelist in India’s history’. Time magazine named him amongst the ‘100 most influential people in the world’ and Fast Company, USA, listed him as one of the world’s ‘100 most creative people in business’. Chetan writes columns for leading English and Hindi newspapers, focusing on youth and national development issues. He is also a motivational speaker and screenplay writer. Chetan quit his international investment banking career in 2009 to devote his entire time to writing and make change happen in the country. He lives in Mumbai with his wife, Anusha, an ex-classmate from IIM-A, and his twin boys, Shyam and Ishaan. You can email him at info#chetanbhagat.com or fill in the Guestbook with your feedback. You can also follow him on twitter (#chetan_bhagat) or like his Facebook fanpage (https://www.facebook.com/chetanbhagat.fanpage).
</div>
</div>
</div>
</div>
</div>
CSS :
.info-wrapper {
height: auto;
position: relative;
width: auto;
padding: 0 0 2.5em 0;
}
.info {
max-height: 180px;
height: auto;
width: auto;
overflow: scroll;
position: relative;
}
.info:after, .aftershadow {
bottom: 0;
width: auto;
height: auto;
}
.info-wrapper a {
left: 50%;
bottom: 1.5em;
height: 1.25em;
margin: -.1em 0 .35em -4.5em;
position: absolute;
font: 700 .67em/1.25em Arial;
text-align: center;
text-decoration: underline;
cursor: pointer;
}
.info-wrapper a:focus { outline: none; }
.info-wrapper .less { display: none; }
.info-wrapper .more:focus ~ .info,
.info-wrapper .more:active ~ .info {
max-height: none;
}
.info-wrapper .more:focus {
display: none;
}
.info-wrapper .more:focus + .less {
display: block;
}
If i understood your question properly,you can use jquery height functionality
$('window').height(); //gives height of browser viewport
Note that .height() will always return the content height, regardless of the value of the CSS box-sizing property
http://api.jquery.com/height
Put overflow hidden and programmatically identify
if the scrollHeight is higher than the the height of the div then make the "more" visible
var outerHeight = $(".info").outerHeight();
if($(".info")[0].scrollHeight > $(".info").height()) {
$("a.more").show();
}
$("a.more").click(function(e){
e.preventDefault();
$(".info").css({"overflow": "visible"});
$(".info").css({"max-height": "inherit"});
$("a.less").show();
$("a.more").hide();
return false;
});
$("a.less").click(function(e){
e.preventDefault();
$(".info").css({"overflow": "hidden"});
$(".info").css({"max-height": outerHeight + "px"});
$("a.more").show();
$("a.less").hide();
return false;
});
here outerHeight will reach your max-height when the content overflows
Therfore you can put #media queries for various screen size and use max-height accordingly
Check this http://jsfiddle.net/ZigmaEmpire/9dgs6432/11
I asked others also for this task and I got a solution. :-)
Thank you Nanang for answering the question. And here is exactly what I wanted,
http://jsfiddle.net/rraagghhu/9dgs6432/15/
HTML:
<div class = "container">
<div class="info-wrapper">
<div class="info">
Chetan Bhagat is the author of six blockbuster books.These include five novels—Five Point Someone (2004), One Night # the Call Center (2005), The 3 Mistakes of My Life (2008), 2 States (2009),
Revolution 2020 (2011), the non-fiction title What Young India Wants (2012) and Half Girlfriend (2014). Chetan’s books have remained bestsellers since their release.
Four out his five novels have been already adapted into successful Bollywood films and the others are in process of being adapted as well. The New York Times called him the ‘the biggest selling English language novelist in India’s history’. Time magazine named him amongst the ‘100 most influential people in the world’ and Fast Company, USA, listed him as one of the world’s ‘100 most creative people in business’. Chetan writes columns for leading English and Hindi newspapers, focusing on youth and national development issues. He is also a motivational speaker and screenplay writer. Chetan quit his international investment banking career in 2009 to devote his entire time to writing and make change happen in the country. He lives in Mumbai with his wife, Anusha, an ex-classmate from IIM-A, and his twin boys, Shyam and Ishaan. You can email him at info#chetanbhagat.com or fill in the Guestbook with your feedback. You can also follow him on twitter (#chetan_bhagat) or like his Facebook fanpage (https://www.facebook.com/chetanbhagat.fanpage).
</div>
(more)
(less)
</div>
<div class = "footer"> THIS IS FOOTER </div>
</div>
CSS:
.container{
background-color: yellow;
}
.footer{
background-color: yellow;
}
.info-wrapper {
height: auto;
position: relative;
width: auto;
padding: 0 0 2.5em 0;
background-color: red;
}
.info {
max-height: 180px;
height: auto;
width: auto;
overflow: hidden;
position: relative;
text-align: justify;
}
.info:after, .aftershadow {
bottom: 0;
width: auto;
height: auto;
}
.info-wrapper a {
left: 50%;
position: relative;
font: 700 .67em/1.25em Arial;
text-align: center;
text-decoration: underline;
cursor: pointer;
}
.less { height: auto; display: none; }
.more { display: none; }
jQuery:
if($(".info")[0].scrollHeight > $(".info").height()) {
$("a.more").show();
}
$("a.more").click(function(e){
e.preventDefault();
$(".info").css({"overflow": "visible", 'maxHeight': '100%'});
$("a.less").show();
$("a.more").hide();
return false;
});
$("a.less").click(function(e){
e.preventDefault();
$(".info").css({"overflow": "hidden", 'maxHeight': '180px'});
$("a.more").show();
$("a.less").hide();
return false;
});
$(window).resize(function() {
var hg = $('.info').height();
if (hg && hg >= 180) {
$('.info').css({ 'maxHeight': 180 });
$('a.more').show();
} else {
$('.info').css({ 'maxHeight': '100%' });
$('a.more').hide();
}
});
Now, expand and shrink the Result column in JSFiddle and see what happens. Happy playing. :-)
Remove max-height when show more is clicked
$(".more").click(function(){
$(".info").css("max-height","none");
$(this).hide();
$(".less").show();
});
$(".less").click(function(){
$(".info").css("max-height","120px");
$(this).hide();
$(".more").show();
});
http://jsfiddle.net/dggupta25/U7Cyk/150/
Im working on an some code to fade toggle information out of its relevant link. Because i want to show the content so it doesn't hide the anchor. Does anyone know if there is a way to go up the DOM and show the individual content according to each anchor? My code shows that its going up the DOM. I'm struggling to get it working using the jsfiddle code below.
http://jsfiddle.net/g1mn79td/
<div class="info">
<p>South Korea</p>
<p>South Korea is known globally for its thriving energy industry, providing a large number of overseas employment opportunities. The majority of foreign nationals make themselves at home in the larger cities such as Seoul, Busan and Incheon. If you’ve found a great role in South Korea, then follow the link to find out more about what you’ll need to think about when moving yourself or your family to this fascinating country.</p>
</div>
<div class="info">
<p>Angola</p>
<p>As one of the largest countries in southern Africa, Angola has great natural resources in oil, diamonds, gold and copper. Portuguese is the most commonly spoken language in Angola so learning some of the basics can be instrumental in helping you get by. The prospect of moving yourself and even your family to a new country can be overwhelming with many elements to think about when planning your relocation. All of this information and more is available in this guide.</p>
</div>
<div class="t">
<div class="tc rel">
<div class="book" id="book">
<div class="page cover"></div>
<div class="page two">
<div class="block">
<h1>passport</h1>
click
</div>
</div>
<div class="page three">
<div class="block">
<h1>passport</h1>
click
</div>
</div>
</div>
</div>
</div>
html, body {
margin: 0;
height: 100%;
}
body {
background-color: #333;
}
body.hide-overflow {
overflow: hidden;
}
/* helpers */
.t {
display: table;
width: 100%;
height: 100%;
}
.tc {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.rel {
position: relative;
}
/* book */
.book {
margin: 0 auto;
width: 90%;
height: 90%;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
position: absolute;
top: 140px;
}
.book .page {
height: 100%;
float: left;
}
.book .cover {
background:white url(pages/1.jpg) no-repeat;
background-size:cover;
}
.book .two {
background:url(pages/2.jpg) no-repeat;
background-size:cover;
}
.book .three {
background:url(pages/3.jpg) no-repeat;
background-size:cover;
}
.book .page img {
max-width: 100%;
height: 100%;
}
.block {
background:red;
width:50%;
height:50%;
display:block;
margin:60px auto;
padding:10%;
overflow:hidden;
}
.green {
background:green;
}
body .info {
background: none repeat scroll 0 0 white;
height: auto;
margin: 30px;
position: absolute;
width: 80%;
z-index: 1;
display:none;
padding:10px
}
body .info p {
font-size:15px;
line-height:20px
}
var $findtip = $('.page');
$findtip.find('a').on('mouseenter mouseleave', function () {
var $link = $(this);
$(this).parents().eq(7).find('.info').fadeToggle();
});
http://jsfiddle.net/g1mn79td/6/
var o;
$('.page a').on('mouseenter mouseleave',function(){
o = $(this).parent().parent().index();
i = parseInt(o) - 1;
$('body').find('.info').eq(i).fadeToggle();
});
Since there is no direct structural connection between a given link and a given info section (e.g. they are not each uniquely in a sub-tree of the DOM), you will have to create such a link. I'd suggest adding an id to each info section:
<div id="koreaInfo" class="info">
<p>South Korea</p>
<p>South Korea is known globally for its thriving energy industry, providing a large number of overseas employment opportunities. The majority of foreign nationals make themselves at home in the larger cities such as Seoul, Busan and Incheon. If you’ve found a great role in South Korea, then follow the link to find out more about what you’ll need to think about when moving yourself or your family to this fascinating country.</p>
</div>
<div id="angolaInfo" class="info">
<p>Angola</p>
<p>As one of the largest countries in southern Africa, Angola has great natural resources in oil, diamonds, gold and copper. Portuguese is the most commonly spoken language in Angola so learning some of the basics can be instrumental in helping you get by. The prospect of moving yourself and even your family to a new country can be overwhelming with many elements to think about when planning your relocation. All of this information and more is available in this guide.</p>
</div>
And, the add a custom attribute to each link:
click
....
click
The, you can fetch the custom attribute for the hovered link and use that to show/hide the relevant info area.
$(".tip").hover(function() {
$(".info").hide();
var id = $(this).data("info");
$("#" + id).show();
}, function() {
$(".info").hide();
});
I have not had much success finding how to style Google's new recaptcha (v2). The eventual goal is to make it responsive, but I am having difficulty applying styling for even simple things like width.
Their API documentation does not appear to give any specifics on how to control styling at all other than the theme parameter, and simple CSS & JavaScript solutions haven't worked for me.
Basically, I need to be able to apply CSS to Google's new version of reCaptcha. Using JavaScript with it is acceptable.
Overview:
Sorry to be the answerer of bad news, but after research and debugging, it's pretty clear that there is no way to customize the styling of the new reCAPTCHA controls. The controls are wrapped in an iframe, which prevents the use of CSS to style them, and Same-Origin Policy prevents JavaScript from accessing the contents, ruling out even a hacky solution.
Why No Customize API?:
Unlike reCAPTCHA API Version 1.0, there are no customize options in API Version 2.0. If we consider how this new API works, it's no surprise why.
Excerpt from Are you a robot? Introducing “No CAPTCHA reCAPTCHA”:
While the new reCAPTCHA API may sound simple, there is a high degree of sophistication behind that modest checkbox. CAPTCHAs have long relied on the inability of robots to solve distorted text. However, our research recently showed that today’s Artificial Intelligence technology can solve even the most difficult variant of distorted text at 99.8% accuracy. Thus distorted text, on its own, is no longer a dependable test.
To counter this, last year we developed an Advanced Risk Analysis backend for reCAPTCHA that actively considers a user’s entire engagement with the CAPTCHA—before, during, and after—to determine whether that user is a human. This enables us to rely less on typing distorted text and, in turn, offer a better experience for users. We talked about this in our Valentine’s Day post earlier this year.
If you were able to directly manipulate the styling of the control elements, you could easily interfere with the user-profiling logic that makes the new reCAPTCHA possible.
What About a Custom Theme?:
Now the new API does offer a theme option, by which you can choose a preset theme such as light and dark. However there is not presently a way to create a custom theme. If we inspect the iframe, we will find the theme name is passed in the query string of the src attribute. This URL looks something like the following.
https://www.google.com/recaptcha/api2/anchor?...&theme=dark&...
This parameter determines what CSS class name is used on the wrapper element in the iframe and determines the preset theme to use.
Digging through the minified source, I found that there are actually 4 valid theme values, which is more than the 2 listed in the documentation, but default and standard are the same as light.
We can see the code that selects the class name from this object here.
There is no code for a custom theme, and if any other theme value is specified, it will use the standard theme.
In Conclusion:
At present, there is no way to fully style the new reCAPTCHA elements, only the wrapper elements around the iframe can be stylized. This was almost-certainly done intentionally, to prevent users from breaking the user profiling logic that makes the new captcha-free checkbox possible. It is possible that Google could implement a limited custom theme API, perhaps allowing you to choose custom colors for existing elements, but I would not expect Google to implement full CSS styling.
As guys mentioned above, there is no way ATM. but still if anyone interested, then by adding in just two lines you can at least make it look reasonable, if it break on any screen. you can assign different value in #media query.
<div id="recaptchaContainer" style="transform:scale(0.8);transform-origin:0 0"></div>
Hope this helps anyone :-).
I use below trick to make it responsive and remove borders. this tricks maybe hide recaptcha message/error.
This style is for rtl lang but you can change it easy.
.g-recaptcha {
position: relative;
width: 100%;
background: #f9f9f9;
overflow: hidden;
}
.g-recaptcha > * {
float: right;
right: 0;
margin: -2px -2px -10px;/*remove borders*/
}
.g-recaptcha::after{
display: block;
content: "";
position: absolute;
left:0;
right:150px;
top: 0;
bottom:0;
background-color: #f9f9f9;
clear: both;
}
<div class="g-recaptcha" data-sitekey="Your Api Key"></div>
<script src='https://www.google.com/recaptcha/api.js?hl=fa'></script>
Unfortunately we cant style reCaptcha v2, but it is possible to make it look better, here is the code:
Click here to preview
.g-recaptcha-outer{
text-align: center;
border-radius: 2px;
background: #f9f9f9;
border-style: solid;
border-color: #37474f;
border-width: 1px;
border-bottom-width: 2px;
}
.g-recaptcha-inner{
width: 154px;
height: 82px;
overflow: hidden;
margin: 0 auto;
}
.g-recaptcha{
position:relative;
left: -2px;
top: -1px;
}
<div class="g-recaptcha-outer">
<div class="g-recaptcha-inner">
<div class="g-recaptcha" data-size="compact" data-sitekey="YOUR KEY"></div>
</div>
</div>
Add a data-size property to the google recaptcha element and make it equal to "compact" in case of mobile.
Refer: google recaptcha docs
What you can do is to hide the ReCaptcha Control behind a div. Then make your styling on this div. And set the css "pointer-events: none" on it, so you can click through the div (Click through a DIV to underlying elements).
The checkbox should be in a place where the user is clicking.
You can recreate recaptcha , wrap it in a container and only let the checkbox visible. My main problem was that I couldn't take the full width so now it expands to the container width. The only problem is the expiration you can see a flick but as soon it happens I reset it.
See this demo http://codepen.io/alejandrolechuga/pen/YpmOJX
function recaptchaReady () {
grecaptcha.render('myrecaptcha', {
'sitekey': '6Lc7JBAUAAAAANrF3CJaIjt7T9IEFSmd85Qpc4gj',
'expired-callback': function () {
grecaptcha.reset();
console.log('recatpcha');
}
});
}
.recaptcha-wrapper {
height: 70px;
overflow: hidden;
background-color: #F9F9F9;
border-radius: 3px;
box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.08);
-webkit-box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.08);
-moz-box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.08);
height: 70px;
position: relative;
margin-top: 17px;
border: 1px solid #d3d3d3;
color: #000;
}
.recaptcha-info {
background-size: 32px;
height: 32px;
margin: 0 13px 0 13px;
position: absolute;
right: 8px;
top: 9px;
width: 32px;
background-image: url(https://www.gstatic.com/recaptcha/api2/logo_48.png);
background-repeat: no-repeat;
}
.rc-anchor-logo-text {
color: #9b9b9b;
cursor: default;
font-family: Roboto,helvetica,arial,sans-serif;
font-size: 10px;
font-weight: 400;
line-height: 10px;
margin-top: 5px;
text-align: center;
position: absolute;
right: 10px;
top: 37px;
}
.rc-anchor-checkbox-label {
font-family: Roboto,helvetica,arial,sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 17px;
left: 50px;
top: 26px;
position: absolute;
color: black;
}
.rc-anchor .rc-anchor-normal .rc-anchor-light {
border: none;
}
.rc-anchor-pt {
color: #9b9b9b;
font-family: Roboto,helvetica,arial,sans-serif;
font-size: 8px;
font-weight: 400;
right: 10px;
top: 53px;
position: absolute;
a:link {
color: #9b9b9b;
text-decoration: none;
}
}
g-recaptcha {
// transform:scale(0.95);
// -webkit-transform:scale(0.95);
// transform-origin:0 0;
// -webkit-transform-origin:0 0;
}
.g-recaptcha {
width: 41px;
/* border: 1px solid red; */
height: 38px;
overflow: hidden;
float: left;
margin-top: 16px;
margin-left: 6px;
> div {
width: 46px;
height: 30px;
background-color: #F9F9F9;
overflow: hidden;
border: 1px solid red;
transform: translate3d(-8px, -19px, 0px);
}
div {
border: 0;
}
}
<script src='https://www.google.com/recaptcha/api.js?onload=recaptchaReady&&render=explicit'></script>
<div class="recaptcha-wrapper">
<div id="myrecaptcha" class="g-recaptcha"></div>
<div class="rc-anchor-checkbox-label">I'm not a Robot.</div>
<div class="recaptcha-info"></div>
<div class="rc-anchor-logo-text">reCAPTCHA</div>
<div class="rc-anchor-pt">
Privacy
<span aria-hidden="true" role="presentation"> - </span>
Terms
</div>
</div>
Great!
Now here is styling available for reCaptcha..
I just use inline styling like:
<div class="g-recaptcha" data-sitekey="XXXXXXXXXXXXXXX" style="transform: scale(1.08); margin-left: 14px;"></div>
whatever you wanna to do small customize in inline styling...
Hope it will help you!!
I came across this answer trying to style the ReCaptcha v2 for a site that has a light and a dark mode. Played around some more and discovered that besides transform, filter is also applied to iframe elements so ended up using the default/light ReCaptcha and doing this when the user is in dark mode:
.g-recaptcha {
filter: invert(1) hue-rotate(180deg);
}
The hue-rotate(180deg) makes it so that the logo is still blue and the check-mark is still green when the user clicks it, while keeping white invert()'ed to black and vice versa.
Didn't see this in any answer or comment so decided to share even if this is an old thread.
Just adding a hack-ish solution to make it responsive.
Wrap the recaptcha in an extra div:
<div class="recaptcha-wrap">
<div id="g-recaptcha"></div>
</div>
Add styles. This assumes the dark theme.
// Recaptcha
.recaptcha-wrap {
position: relative;
height: 76px;
padding:1px 0 0 1px;
background:#222;
> div {
position: absolute;
bottom: 2px;
right:2px;
font-size:10px;
color:#ccc;
}
}
// Hides top border
.recaptcha-wrap:after {
content:'';
display: block;
background-color: #222;
height: 2px;
width: 100%;
top: -1px;
left: 0px;
position: absolute;
}
// Hides left border
.recaptcha-wrap:before {
content:'';
display: block;
background-color: #222;
height: 100%;
width: 2px;
top: 0;
left: -1px;
position: absolute;
z-index: 1;
}
// Makes it responsive & hides cut-off elements
#g-recaptcha {
overflow: hidden;
height: 76px;
border-right: 60px solid #222222;
border-top: 1px solid #222222;
border-bottom: 1px solid #222;
position: relative;
box-sizing: border-box;
max-width: 294px;
}
This yields the following:
It will now resize horizontally, and doesn't have a border. The recaptcha logo would get cut off on the right, so I am hiding it with a border-right. It's also hiding the privacy and terms links, so you may want to add those back in.
I attempted to set a height on the wrapper element, and then vertically center the recaptcha to reduce the height. Unfortunately, any combo of overflow:hidden and a smaller height seems to kill the iframe.
in the V2.0 it's not possible. The iframe blocks all styling out of this. It's difficult to add a custom theme instead of the dark or light one.
Late to the party, but maybe my solution will help somebody.
I haven't found any solution that works on a responsive website when the viewport changes or the layout is fluid.
So I've created a jQuery script for django-cms that is dynamically adapting to a changing viewport.
I'm going to update this response as soon as I have the need for a modern variant of it that is more modular and has no jQuery dependency.
html
<div class="g-recaptcha" data-sitekey="{site_key}" data-size={size}>
</div>
css
.g-recaptcha { display: none; }
.g-recaptcha.g-recaptcha-initted {
display: block;
overflow: hidden;
}
.g-recaptcha.g-recaptcha-initted > * {
transform-origin: top left;
}
js
window.djangoReCaptcha = {
list: [],
setup: function() {
$('.g-recaptcha').each(function() {
var $container = $(this);
var config = $container.data();
djangoReCaptcha.init($container, config);
});
$(window).on('resize orientationchange', function() {
$(djangoReCaptcha.list).each(function(idx, el) {
djangoReCaptcha.resize.apply(null, el);
});
});
},
resize: function($container, captchaSize) {
scaleFactor = ($container.width() / captchaSize.w);
$container.find('> *').css({
transform: 'scale(' + scaleFactor + ')',
height: (captchaSize.h * scaleFactor) + 'px'
});
},
init: function($container, config) {
grecaptcha.render($container.get(0), config);
var captchaSize, scaleFactor;
var $iframe = $container.find('iframe').eq(0);
$iframe.on('load', function() {
$container.addClass('g-recaptcha-initted');
captchaSize = captchaSize || { w: $iframe.width() - 2, h: $iframe.height() };
djangoReCaptcha.resize($container, captchaSize);
djangoReCaptcha.list.push([$container, captchaSize]);
});
},
lateInit: function(config) {
var $container = $('.g-recaptcha.g-recaptcha-late').eq(0).removeClass('.g-recaptcha-late');
djangoReCaptcha.init($container, config);
}
};
window.djangoReCaptchaSetup = window.djangoReCaptcha.setup;
With the integration of the invisible reCAPTCHA you can do the following:
To enable the Invisible reCAPTCHA, rather than put the parameters in a div, you can add them directly to an html button.
a. data-callback=””. This works just like the checkbox captcha, but is required for invisible.
b. data-badge: This allows you to reposition the reCAPTCHA badge (i.e. logo and
‘protected by reCAPTCHA’ text) . Valid options as ‘bottomright’ (the default),
‘bottomleft’ or ‘inline’ which will put the badge directly above the button. If you
make the badge inline, you can control the CSS of the badge directly.
In case someone struggling with the recaptcha of contact form 7 (wordpress) here is a solution working for me
.wpcf7-recaptcha{
clear: both;
float: left;
}
.wpcf7-recaptcha{
margin-right: 6px;
width: 206px;
height: 65px;
overflow: hidden;
border-right: 1px solid #D3D3D3;
}
.wpcf7-recaptcha iframe{
padding-bottom: 15px;
border-bottom: 1px solid #D3D3D3;
background: #F9F9F9;
border-left: 1px solid #d3d3d3;
}
if you use scss, that worked for me:
.recaptcha > div{
transform: scale(0.84);
transform-origin: 0;
}
If someone is still interested, there is a simple javascript library (no jQuery dependency), named custom recaptcha. It lets you customize the button with css and implement some js events (ready/checked). The idea is to make the default recaptcha "invisible" and put a button over it. Just change the id of the recaptcha and that's it.
<head>
<script src="https://azentreprise.org/download/custom-recaptcha.min.js"></script>
<style type="text/css">
#captcha {
float: left;
margin: 2%;
background-color: rgba(72, 61, 139, 0.5); /* darkslateblue with 50% opacity */
border-radius: 2px;
font-size: 1em;
color: #C0FFEE;
}
#captcha.success {
background-color: rgba(50, 205, 50, 0.5); /* limegreen with 50% opacity */
color: limegreen;
}
</style>
</head>
<body>
<div id="captcha" data-sitekey="your_site_key" data-label="Click here" data-label-spacing="15"></div>
</body>
See https://azentreprise.org/read.php?id=1 for more information.
I am just adding this kind of solution / quick fix so it won't get lost in case of a broken link.
Link to this solution "Want to add link How to resize the Google noCAPTCHA reCAPTCHA | The Geek Goddess" was provided by Vikram Singh Saini and simply outlines that you could use inline CSS to enforce framing of the iframe.
// Scale the frame using inline CSS
<div class="g-recaptcha" data-theme="light"
data-sitekey="XXXXXXXXXXXXX"
style="transform:scale(0.77);
-webkit-transform:scale(0.77);
transform-origin:0 0;
-webkit-transform-origin:0 0;
">
</div>
// Scale the images using a stylesheet
<style>
#rc-imageselect, .g-recaptcha {
transform:scale(0.77);
-webkit-transform:scale(0.77);
transform-origin:0 0;
-webkit-transform-origin:0 0;
}
</style>
You can use some CSS for Google reCAPTCHA v2 styling on your website:
– Change background, color of Google reCAPTCHA v2 widget:
.rc-anchor-light {
background: #fff!important;
color: #fff!important; }
or
.rc-anchor-normal{
background: #000 !important;
color: #000 !important; }
– Resize the Google reCAPTCHA v2 widget by using this snippet:
.rc-anchor-light {
transform:scale(0.9);
-webkit-transform:scale(0.9); }
– Responsive your Google reCAPTCHA v2:
#media only screen and (min-width: 768px) {
.rc-anchor-light {
transform:scale(0.85);
-webkit-transform:scale(0.85); }
}
All elements, property of CSS above that’s just for your reference. You can change them by yourself (only using CSS class selector).
Refer on OIW Blog - How To Edit CSS of Google reCAPTCHA (Re-style, Change Position, Resize reCAPTCHA Badge)
You can also find out Google reCAPTCHA v3's styling there.
A bit late but I tried this and it worked to make the Recaptcha responsive on screens smaller than 460px width. You can't use css selector to select elements inside the iframe. So, better use the outermost parent element which is the class g-recaptcha to basically zoom-out i.e transform the size of the entire container. Here's my code which worked:
#media(max-width:459.99px) {
.modal .g-recaptcha {
transform:scale(0.75);
-webkit-transform:scale(0.75); }
}
}
Incase someone wants to resize recaptcha for small devices.
I was using recaptcha V2 with primeng p-captcha (for angular). The issue was that for smaller screens it would go out of the screen.
Although you can't actually resize it (the external thing and all everyone has explained it above) but there is a way with transform property (scaling the the container)
this was my code below the way, I achieved it
p-captcha div div {
transform:scale(0.9) !important;
-webkit-transform:scale(0.9) !important;
transform-origin:0 0 !important;
-webkit-transform-origin:0 0 !important;
}
Other than p-captcha you can use this code snippet below
.g-recaptcha {
transform:scale(0.9);
transform-origin:0 0;
}
Before
After
Topic is old, but I also wanted to scale the reCAPTCHA widget -- but to make it bigger for phone users, unlike many others who wanted it smaller. The only way that worked was transform: scale(x), but that seemed to make the widget too wide for my page, thus shrinking the rest of the form on the page. Using a container div as shown below fixed my problem, and hopefully it will help someone else who thinks a bigger version is better on a small screen.
<style>
:root {
/* factor to scale the Google widget in potrait mode (on a phone) */
--recaptcha-scale: 2;
}
#media screen and (orientation: portrait) {
/* needed to rein in the width of inner div when it is scaled */
#g_recaptcha_div_container {
width: calc(100vmin / var(--recaptcha-scale));
}
#g_recaptcha_div {
transform: scale(var(--recaptcha-scale));
transform-origin: 0 0;
}
#submit_button {
width: 65vmin;
height: 9vmin;
font-size: 7vmin;
/* needed to scoot the button out from under the scaled div */
margin-top: 10vmin;
}
}
</style>
<html>
<!-- top of form with a bunch of fields to create an acct -->
<div id="g_recaptcha_div_container">
<div id="g_recaptcha_div" class="g-recaptcha" data-sitekey="foo">
</div>
</div>
<input id="submit_button" type="submit" value="Create Account">
<!-- bottom of form -->
</html>
You can try to color it with this css filter hack:
.colorize-pink {
filter: brightness(0.5) sepia(1) hue-rotate(-70deg) saturate(5);
}
.colorize-navy {
filter: brightness(0.2) sepia(1) hue-rotate(180deg) saturate(5);
}
and for the size, use transform css hack
.captcha-size {
transform:scale(0.8);transform-origin:0 0
}
Lets play a little with JavaScript:
First at all, we know that recaptcha badget include all the shit from the most crazy people on Google, so you can only make changes with theme "dark" and "light" on your web.
Take a look to my website
SantiagoSoñora.
let recaptcha = document.querySelector('.g-recaptcha');
With this, you only can touch simple settings of the badge, like z-index and size, but no much more...
So far, i made two functions that set data-theme to light or dark mode at innit. Note that its neccessary assign the "light" because Google not include that by default.
function reCaptchaDark() {
document.addEventListener('DOMContentLoaded', (event) => {
recaptcha.setAttribute("data-theme", "dark");
})
}
function reCaptchaLight() {
document.addEventListener('DOMContentLoaded', (event) => {
recaptcha.setAttribute("data-theme", "light");
})
}
Then, for example, my web looks if user prefers a dark or a light theme, and set that configurations to the recaptcha bag:
(theme.onLoad = function() {
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
reCaptchaDark();
toggleTheme();
}
else {
reCaptchaLight();
}
})();
Note that my code for toggle from dark to light is on the toggleTheme() function.
Keep doing magic: You should configure a class on the html tag or something else on your web for made the change between dark and light theme, and with that we now modify the src on the iframe so when we toggle dark/light mode ,with our button it changes:
theme.onclick = function() {
toggleTheme();
if (html.classList.contains('dark')) {
recaptcha.setAttribute("data-theme", "dark");
setTimeout(function() {
let iframes = document.querySelectorAll('iframe');
iframes[0].src = iframes[0].src.replace('&theme=light', '&theme=dark');
}, 0);
}
else {
recaptcha.setAttribute("data-theme", "light");
setTimeout(function() {
let iframes = document.querySelectorAll('iframe');
iframes[0].src = iframes[0].src.replace('&theme=dark', '&theme=light');
}, 0);
}
}
And here you go, the recaptcha badge change from dark to light "preassigned" themes by Google bad guys.
And last but not least, a function that updates the page to change if your theme is dark by default.
This update the LocalStorage
(function() {
if( window.localStorage ) {
if( !localStorage.getItem('firstLoad') ) {
localStorage['firstLoad'] = true;
window.location.reload();
}
else
localStorage.removeItem('firstLoad');
}
})();
You can use the class .grecaptcha-badge for some css changes, like opacity and box-shadow, -> (use !important)
Thats all, hope you can implement on your site