I am trying to add animation to my dropdown-menu ... It is working perfectly on large screens but on small phones and tablets (when toggle navigation appears) there is a problem: when it should slide up the drop-down list disappears without sliding up properly as you can see in my
DEMO . Please try to open in it in small browser size and click on "services" to slide down and up .
I have tried another solution using jquery:
$(function () {
$('.dropdown').on('show.bs.dropdown', function (e) {
$(this).find('.dropdown-menu').first().stop(true, true).slideDown();
});
// ADD SLIDEUP ANIMATION TO DROPDOWN //
$('.dropdown').on('hide.bs.dropdown', function (e) {
e.preventDefault();
$(this).find('.dropdown-menu').first().stop(true, true).slideUp(400, function () {
$('.dropdown').removeClass('open');
$('.dropdown').find('.dropdown-toggle').attr('aria-expanded', 'false');
});
});
});
But as you can see in this Bootply DEMO (resize your browser to a phone screen size), when sliding down, at the end there is a gray space that appears then disappears directly.
What I really need is a normal working slide animation down and up. Any suggestions of how can I adjust at least one of both methods?
I find the solution , you should remove the scrollbar from the navbar.
so add this simple code to your css file :
.navbar-collapse {
overflow: hidden;
}
you can take a look at the Demo here : https://jsfiddle.net/u9pvtLpw/2/
We have a portfolio on a website, and the images are quite high resolution, however only the full image is displayed on the screen, and on small screens, this isn't enough to see the detail.
I am looking to see if there is a way to use pure CSS to zoom into the image to where ever the cursor is. I know you can use the following to zoom in the image, however this is not quite the effect we're looking for.
.image:hover img {
-webkit-transform:scale(1.25); /* Safari and Chrome */
-moz-transform:scale(1.25); /* Firefox */
-ms-transform:scale(1.25); /* IE 9 */
-o-transform:scale(1.25); /* Opera */
transform:scale(1.25);
}
Is there an alternative without java script to zoom in the image?
You must use Jquery/Javascript to do that, css can't know where are your mouse...
<script>
$(function() {
$("#idOfImage").hover(function(e) {
var offset = $(this).offset();
var relativeX = (e.pageX - offset.left - myConst);
var relativeY = (e.pageY - offset.top - myConst);
//now you've got X, Y position.
this.css( "background-position", relativeX.toString()+" "+relativeY.toString());
this.css("height", this.css("height")*myZoom);
this.css("width", this.css("width")*myZoom);
});
});
</script>
Doc: http://api.jquery.com/css/
put a html div :
<div id="idOfImage"></div>
css:
#ifOdImage{
[...]
background-position: 0 0;
[...]
}
doc: http://www.w3schools.com/cssref/pr_background-position.asp
Hi I just added Google's No CAPTCHA reCAPTCHA to my website, and I am running into a small little issue. It does NOT fit on my mobile website, and that is a HUGE issue. I have tried everything such as:
HTML
<div id="captchadisplay">
<div class="g-recaptcha" data-sitekey="???"></div>
</div>
CSS
#captchadisplay {
width: 50% !important;
}
and
CSS
.g-recaptcha {
width: 50%;
}
Yet I can not seem to shrink it down for my mobile website. Any ideas? :)
By using the CSS transform property you can achieve changing the width by changing the entire scale of the reCAPTCHA.
By adding in just two inline styles, you can make the reCAPTCHA fit nicely on your mobile device:
<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>
More details can be found on my site: https://www.geekgoddess.com/how-to-resize-the-google-nocaptcha-recaptcha/
I successfully implemented Geek Goddess' solution. The main issue with it is that it may not work on all browsers. Now, however, there is a simple solution provided by Google.
With reCAPTCHA version 2.0, there are new rules for the display of the widget and Google added tag attributes that change the way it is rendered.
The tag data-size can take the values of "normal", which is the default, and "compact", which fits in mobile device screens. This is what the compact widget looks like.
It is not the best looking widget, but it fits with less work than the other solutions.
For more attributes, check Google's reCAPTCHA v2.0 documentation
I have been using some JQuery, since putting transform(0.77) in the style attribute wasn't a truly responsive solution.
I add this media query in my CSS, with the max-width being the threshold where the ReCaptcha box is considered too large once passed:
#media(max-width: 390px) {
.g-recaptcha {
margin: 1px;
}
}
I then add this JQuery:
$(window).resize(function() {
var recaptcha = $(".g-recaptcha");
if(recaptcha.css('margin') == '1px') {
var newScaleFactor = recaptcha.parent().innerWidth() / 304;
recaptcha.css('transform', 'scale(' + newScaleFactor + ')');
recaptcha.css('transform-origin', '0 0');
}
else {
recaptcha.css('transform', 'scale(1)');
recaptcha.css('transform-origin', '0 0');
}
});
The 304 I use is the default width of the ReCaptcha box if unstyled.
Now the ReCaptcha will properly scale down no matter how small its parent container becomes, and it will behave as if it has a maximum width at its original width.
Note that the media query is simply a mechanism to detect a screen size change.
According to the documentation from Google shows a data-size attribute which can be set and this worked for me.
<div class="g-recaptcha" data-sitekey="XXXXXXXX" data-size="compact"></div>
But, the answer from #GeekGoddess provides a little more flexibility in sizing.
For me the compact mode implementation of Google re-captcha 2.0 is just lame. It looks ugly.
Just expanding from "Geek Goddess" solution.
You can do the following:
<div class="g-recaptcha" data-sitekey="..." style="-moz-transform:scale(0.77); -ms-transform:scale(0.77); -o-transform:scale(0.77); -moz-transform-origin:0; -ms-transform-origin:0; -o-transform-origin:0; -webkit-transform:scale(0.77); transform:scale(0.77); -webkit-transform-origin:0 0; transform-origin:0; filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.77,M12=0,M21=0,M22=0.77,SizingMethod='auto expand');"></div>
That will resize on almost all browsers IE, Chrome, FF, Opera (DXImageTransform is for IE <= 8).
Furthermore we can make it responsive by combining this transform scale with CSS max-width.
It's not the perfect way, but until we get the proper responsive fix from Google.
If you don't like the CSS solution, you may try the JS.
The idea is to dynamically switch between compact and normal mode of the recaptcha plugin.
I will provide an example with jQuery onboard, but it shouldn't be much to port it to pure JS.
I assume you have following HTML code on the site.
<div>
<div class="g-recaptcha" data-sitekey="[your-key-here]"></div>
</div>
Firstly you need to load gRecaptcha 2 explicitly and provide onload callback:
<script type='text/javascript' src='https://www.google.com/recaptcha/api.js?hl=en&onload=recaptchaCallback&render=explicit'>
Next, create your callback function which will also be your javascript media query.
function recaptchaCallback()
{
var mq = window.matchMedia("(max-width: 400px)");
mq.addListener(recaptchaRenderer);
recaptchaRenderer(mq);
}
The last thing is to render the recaptcha widget.
function recaptchaRenderer(mq)
{
var recaptcha = $('.g-recaptcha').eq(0);
var data = recaptcha.data();
var parent = recaptcha.parent();
recaptcha.empty().remove();
var recaptchaClone = recaptcha.clone();
parent.append(recaptchaClone);
recaptchaClone.data(data);
var options = {
'sitekey': data['sitekey'],
'size': 'compact'
};
if(!mq.matches)
{
options['size'] = 'normal';
}
grecaptcha.render(recaptchaClone.get(0), options);
}
You may wonder why I empty the div and clone all the g-recaptcha content. It's because gRecaptcha 2 wouldn't let you render second time to the same element. There could be a better way, but it's all I found for now.
Hope this works for you.
<div class="g-recaptcha" data-theme="light" data-sitekey="XXXXXXXXXXXXX" style="transform:scale(0.77);transform-origin:0 0"></div>
Just add style="transform:scale(0.77);transform-origin:0 0"
For who might be interested, I changed a little AjaxLeung solution and came up with this:
function resizeReCaptcha() {
if ($(".g-recaptcha").length) {
var recaptcha = $(".g-recaptcha");
recaptcha.parent().addClass('col-xs-12 padding0');
var innerWidth = recaptcha.parent().innerWidth();
if (innerWidth < 304) {
var newScaleFactor = innerWidth / 304;
recaptcha.css('transform', 'scale(' + newScaleFactor + ')');
recaptcha.css('-webkit-transform', 'scale(' + newScaleFactor + ')');
recaptcha.css('transform-origin', '0 0');
recaptcha.css('-webkit-transform-origin', '0 0');
} else {
recaptcha.css('transform', 'scale(1)');
recaptcha.css('-webkit-transform', 'scale(1)');
recaptcha.css('transform-origin', '0 0');
recaptcha.css('-webkit-transform-origin', '0 0');
}
}
}
$(window).resize(function() {
resizeReCaptcha();
});
$(document).ready(function () {
resizeReCaptcha();
});
Here's my spin on the resize:
<script>
function resizeReCaptcha() {
var width = $( ".g-recaptcha" ).parent().width();
if (width < 302) {
var scale = width / 302;
} else {
var scale = 1;
}
$( ".g-recaptcha" ).css('transform', 'scale(' + scale + ')');
$( ".g-recaptcha" ).css('-webkit-transform', 'scale(' + scale + ')');
$( ".g-recaptcha" ).css('transform-origin', '0 0');
$( ".g-recaptcha" ).css('-webkit-transform-origin', '0 0');
};
$( document ).ready(function() {
$( window ).on('resize', function() {
resizeReCaptcha();
});
resizeReCaptcha();
});
</script>
Unfortunately, NoCaptcha uses an iframe so at most you can control the height/width and use overflow:hidden; to cut off the excess. I would not recommend cutting off more than a few pixels of the Captcha for best usability.
Example:
.g-recaptcha {
max-width: 300px;
overflow: hidden;
}
On my site the re-captcha was getting cut off and looked bad.
After some experimentation I was able to fix the cutoff issue with this style update:
<style>
.g-recaptcha>div>div>iframe {
width: 380px;
height: 98px;
}
</style>
Hope you find this useful
#media only screen and (max-width : 480px) {
.smallcaptcha{
transform:scale(0.75);
transform-origin:50% 50%;
}
}
<div class="g-recaptcha" data-theme="light" data-sitekey="your site key" style="transform:scale(0.77);-webkit-transform:scale(0.77);transform-origin:0 0;-webkit-transform-origin:0 0;"></div>
This working for me, you try it..
<div class="g-recaptcha" data-theme="dark"></div>
I know similar issues have been asked several times before but I have trawled through many questions/ answers and cannot find a solution that works for my specific issue.
Basically I have a responsive website which has fixed background images - the images are 1280 x 853 px, they are applied to the html tag via the following css (which is currently a bit of a mess due to trying several solutions) -
html {
background: url(/content/images/bg_lrg.jpg) no-repeat top center fixed;
-webkit-background-size: 1024px 768px;
background-attachment: fixed;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
My idea was to apply a background size - if this worked I'd use media queries to apply relevant sizes for ipad / iphone / other.
the image currently appears huge in iOS devices - as it is constraining itself to the height of the document rather than the viewport - I know there are many issues with fixed backgrounds in mobile Ios - does anyone have a workaround solution? where my image could cosntain to viewport width not document height?
First Solution, have you tried setting your ViewPort? In the head of your HTML, you can include this:
<meta name="viewport" content="width=device-width, initial-scale=1">
I would first try that. You can even specify the width for iPhones. This is the best solution at first in order to get your device to display the size of the image properly on your phone. Here is a link with a quick description of what you can do with ViewPorts:
Many sites set their viewport to "width=320, initial-scale=1" to fit precisely onto the iPhone display in portrait mode. Using the viewport meta tag to control layout on mobile browsers
Secondary Solution:
If that doesn't work, I created a modified this custom solution before these new feature came out. I modified this function to make the background of a website always fill the background regardless of screen size:
JavaScript using JQuery:
//Resize background image function
$(function () {
var $window = $(window);
var width = $window.width();
var height = $window.height();
setInterval(function () {
//Checks for screen resize every hundreth of a second and resizes elements based on that new screen size
if ((width != $window.width()) || (height != $window.height())) {
//resets the variables to prevent glitching
width = $window.width();
height = $window.height();
//calls resizing functions
resizeBg();
}
}, 100);
});
And it calls this function:
function resizeBg() {
var theWindow = $(window),
$bg = $("#bgVideo"),
aspectRatio = 1920 / 1080; //-- This is the aspect ratio (width / height) of the background image. if the video changes size.
//actually apply aspect ratio
if ((theWindow.width() / theWindow.height()) < aspectRatio) {
$bg.removeClass().addClass('bgheight');
} else {
$bg.removeClass().addClass('bgwidth');
}
}
In my CSS I have the following classes:
.bgwidth {
width: 100%;
}
.bgheight {
height: 100%;
}
And on your HTML, you want to have something like this:
<video id="bgVideo".....
OR
<img id="bgVideo"...
and I have the following CSS for my background ID:
#bgVideo {
position: fixed;
top: 0;
left: 0;
z-index: 1;
}
I hope this helps.
I am working on a site and I don't want to repeat the background in the y direction.
I know how to do that.
But after the image I don't want background to becomes white or any other color.
I would like it to fix when it reaches that place or to let the background scroll slower then the rest of the site so I wont get to a white part.
Thanks a lot
I found this thread while I was looking for a solution to just this problem. I managed to write a short jQuery script adapting the hints given by Alex Morales.
With the following code, the background-image of the body scrolles down with the rest of the site until its bottom is reached. You can take a look at my homepage (http://blog.neonfoto.de) to see what it does.
$( window ).scroll( function(){
var ypos = $( window ).scrollTop(); //pixels the site is scrolled down
var visible = $( window ).height(); //visible pixels
const img_height = 1080; //replace with height of your image
var max_scroll = img_height - visible; //number of pixels of the image not visible at bottom
//change position of background-image as long as there is something not visible at the bottom
if ( max_scroll > ypos) {
$('body').css('background-position', "center -" + ypos + "px");
} else {
$('body').css('background-position', "center -" + max_scroll + "px");
}
});
This is actually the very first thing I did with JavaScript and JQuery, so any improvement would be great!
It's css3 so it's not super well supported, but I would look at the background-size property.
This is just off the top of my head but I think you will probably have to create a separate div containing the background image. If you place it in your markup before the main content and position the main content absolutely, it will sit behind the main content and at the top of the page. So:
CSS:
#background_div
{
background: url(images/some_image.png);
height: 600px;
width: 900px;
}
#main
{
height: 1200px;
width: 800px;
background: rgba(0, 0, 0, 0.25);
position: absolute;
top: 0;
}
HTML:
<div id="background_div"> </div>
Then what you do is you use javascript (I recommend jQuery) to detect the div's position on the screen.
jQuery:
This code grabbed from http://www.wduffy.co.uk/blog/keep-element-in-view-while-scrolling-using-jquery/
var $scrollingDiv = $("#background_div");
$(window).scroll(function(){
$scrollingDiv
.stop()
.animate({"marginTop": ($(window).scrollTop()) + "px"}, "slow" );
});