I'm looking to set up twitter's embedded timeline, it's quite easy when you're having a fixed design, but that's not my case and I'm actually building a fluid and responsive design for a new website.
My question is, how can I set up twitter's embedded timeline with a fluid width since its an iframe and you're supposed to set up the with in px in your twitter account ?
Thanks :)
This seems to work for me:
#twitter-widget-0 {
width:100%;
}
where #twitter-widget-0 is the iframe it generates, placed in an appropriately-styled container.
It's not perfect: the widget generates its contents a bit differently depending on width, and margins, etc. won't be exactly the same after resizing; but this seems minor.
I'm curious as to why simple CSS didn't work for you - sorry if I'm missing something.
Thanks to all of you I found my way through:
It was almost as lack said, but we had to focus on the iframe instead:
.MyClassForTheDivThatContainTheiFrame iframe{
width:100%;
}
of course .MyClassForTheDivThatContainTheiFrame is also fluid with a % width
This logic will work to change at least the width and height:
#twitter-widget-0, #twitter-widget-1 {
float: none;
width: 100% !important;
height: 250px !important;
}
The only problem with shortening the height is that it hides the text box for people to send tweets but it does shorten the height. My guess is that if you want to add other CSS styling you can just put the !important clause. I also assume that if you have three widgets you would define #twitter-widget-2, etc.
Super hacky, but you can also do this :
<script type="text/javascript">
var checkTwitterResize = 0;
function resizeTwitterWidget() {
if ($('#twitter-widget-0').length > 0) {
checkTwitterResize++;
if ($('#twitter-widget-0').attr('width') != '100%') checkTwitterResize = 0;
$('#twitter-widget-0').attr('width', '100%');
// Ensures it's checked at least 10 times (script runs after initial resize)
if (checkTwitterResize < 10) setTimeout('resizeTwitterWidget()', 50);
} else setTimeout('resizeTwitterWidget()', 50);
}
resizeTwitterWidget();
</script>
This was a helpful thread, thanks. I'm working on a site that uses an older Twitter profile Widget, which I find easier to customise. So an alternative method, uses this to display the feed (customised to suit):
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 5,
interval: 6000,
width: 300,
height: 400,
theme: {
shell: {
background: 'transparent',
color: '#151515'
},
tweets: {
background: 'transparent',
color: '#151515',
links: '#007dba'
}
},
features: {
shell: false,
scrollbar: true,
loop: false,
live: true,
hashtags: true,
timestamp: true,
avatars: true,
behavior: 'all'
}
}).render().setUser('BlueLevel').start();
</script>
Then override the width by adding this to your stylesheet:
.twtr-doc {
width:100% !important;
}
You can see the various classes to modify by using IE9 in compatibility mode, then using F12 Developer Tools to see the html/css.
Hope that helps someone!
You can give your iframe a class, and try to apply CSS to it. At least to change the width to %.
This is not possible. You can set an exact width and height using the html width and height in the anchor tab. Other than that you are out of luck. No responsive or fluid capabilities.
It also has a min-width of 220px and a max-width of 520px.
<a class="twitter-timeline" width="520" height="700" data-dnt=true href="https://twitter.com/vertmob" data-widget-id="WIDGET_ID_HERE">Tweets by #vertmob</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
If you absolutely must do a fluid, you can code a javascript that changes that iframe's width after a resize event or using some javascript timers.
Can we see some code of yours to make some js code for this?
Attribute selector should work:
iframe[id*="twitter-widget"] {
width: 100%;
}
More here.
Related
I'd like to check if an image width has more than 400px I'd like this image to get full div width. if image is less than 400px just print it in its normal size.
any ideas how to do this?
<div id="volta">
<img src="/img/volta.jpg">
</div>
#volta{
width:500px;
}
As far as I know, this does not exist in CSS. What you should do instead is use classes.
Define some CSS class that applies the styles you want:
.long_width {
background: blue;
}
Then you would use Javascript to check the width of the image. You don't need jQuery to do this you can do it in vanilla Javascript (unless you already have jQuery imported and need it for other things). Maybe something like this:
let elm = document.querySelector('[src="/img/volta.jpg]"');
let width = window.getComputedStyle(elm).getPropertyValue('width');
And then you would use Javascript to add and remove styles accordingly:
if (width > 400) {
elm.classList.add("long_width");
}
else {
elm.classList.remove("long_width");
}
The specific answer to your question depends on what your intentions are. But to keep your code simple, you should use Javascript to handle the logic and not depend on CSS selectors for things this complicated. Instead, create a CSS class that contains the styles you need, and then use Javascript to apply it based on the size of the user uploaded image.
Additionally, if the user uploads the image, you should load it into memory and check its attributes in memory rather than by depending on a DOM element. Something like:
let img = new Image();
img.src = "{data URL of img}"
You will need javascript / jQuery to work. Something like this:
$('img').each(function(){
if($(this).width() > 400){
$(this).css('width', '100%');
}
});
Here is also working jquery example.
Apply an id to the image, and with jquery check its width
If it is greather than 400px modify his width or add a class that does the same.
Example
$(document).ready(function(){
if($("#image").width() > 400){
$("#image").css("width", "100%");
}
else{
$("#image").css("width", "10px");
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id = "image" src = "https://pm1.narvii.com/6919/98f453834b5d87a6c92118da9c24fe98e1784f6ar1-637-358v2_hq.jpg"/>
You can do it like FlokiTheFisherman (with %), or you can use "wv" instead of "%".
I recommend using vw.
img[width='400'] {
width: 100%;
}
I obviously have a lot to learn about CSS!
I'm using VS2015 and Cordova to develop a mobile application. I'm using ngMap (http://ngmap.github.io/) to wrap Google maps. I really like the library! The problem is that it defaults the size of 300px, and my CSS skills are too poor to correctly override that.
I know that ngMap defaults to 300px, and that you can specify default-style="false" and then provide overrides in CSS that specify position: absolute; height:100%; width:100% - which should make the map fill the page.
When I try to do that, I end up with this:
When I accept the default behavior, I have a working map, but it's only 300px tall:
Here's a Plunker that's simple, but demonstrates the issue I'm experiencing:
http://plnkr.co/edit/8qfGaLBMgXFtluELZhCs?p=preview
Note that the CSS has the recommended overrides. When those are omitted, the map is visible - but only 300px tall. I know this should not be so hard, and I know others have had success following the instructions listed above. I just can't get it to work.
For what it's worth, the behavior is the same when I deploy it to my Samsung S5: I see the lower left-hand corner of the map. Any help appreciated!!
Adding some CSS and triggering "resize" event you can achieve your goal:
CSS:
body, html {
height:100%;
width:100%;
}
.map {
position:absolute;
height:100%;
width:100%;
}
.scroll {
height: 100%;
}
JS:
NgMap.getMap({ id: "splashSearch" }).then(function (map) {
vm.map = map;
$timeout(function() {
google.maps.event.trigger(map,'resize');
}, 200);
});
Forked your plunker: http://plnkr.co/edit/7dVCO8FpWxmLVVSMtqjH?p=preview
Essentially what the title says - need to make this wider. Tried several solutions, neither work. Note that the "backdropClass" is applied perfectly and works, but the windowClass doesn't, nor the "size" option. I have tried them independently, nothing. CSS is in the same folder as the working backdrop class"
$modal.open({
templateUrl: 'myTemplate.html',
controller: 'controllingControllerCtrl',
backdrop: 'static',
backdropClass : 'blackBackgroundModal ' +
'blackBackgroundModal.fade blackBackgroundModal.fade.in',
windowClass: 'resizeModalWindow' +
'resizeModalDialog',
size: 'sm'
});
}
}
CSS:
.resizeModalWindow .resizeModalDialog {
width: 5000px;
}
What needs to be done for at least the "size" option to register - I don't really need custom widths.
Edit: Forgot checked links!
Checked this Q first
Then this
And of course docs
bootstrap css has media queries defining the width of a modal based on screen size. to globally overwrite them use !important
like this
.modal {
size: 5000px !important;
}
You should have white space between those two classes will recognize by the css rule.
windowClass: 'resizeModalWindow ' +'resizeModalDialog',
^^^added space here
Add this to your CSS:
.resizeModalDialog .modal-dialog{
width: 5000px;
}
Add the property where you instance the modal
windowClass:'resizeModalDialog',
windowClass will not resize another way.
I received a task at work to create some mini-webpage layout with bootstrap. I decided to base on already done layout (Amoeba). Here is the preview: Amoeba bootstrap link
Well, on localhost almost works except one thing - footer. Just take a look on provided link and then: click Portfolio (from navigation) and then filter the gallery by Photography.
When you will scroll down you will see ugly space. And this is my issue. I dont want that. So i thought that I need a footer OR portfolio div class which will automatically resize to proper size. BUt I dont how how to achieve that. Any tips?
You need only to change the code of modernizr slightly. Change forceHeight to false and will work good.
if (Modernizr.mq("screen and (max-width:1024px)")) {
jQuery("body").toggleClass("body");
} else {
var s = skrollr.init({
mobileDeceleration: 1,
edgeStrategy: 'set',
forceHeight: false,
smoothScrolling: true,
smoothScrollingDuration: 300,
easing: {
WTF: Math.random,
inverted: function(p) {
return 1-p;
}
}
});
}
Im not sure why, but your body element gets some height inline styling. Anyways here is the solution of your problem:
body {
height:100% !important; // inline styles, so you need to add "!important" here
position:relative;
}
#footer {
position: absolute;
width: 100%;
bottom: 0px;
}
You can also add wrapper div if you don't want to add position:relative and height:100%!important properties to your body element. Just see how it works and choose a better option for you.
I have two instances of where the Like Button is not "listening" to the width I specify in the XFBML code.
It LOOKS fine, but something is mysteriously causing the like button to be extra wide and force the browser to do horizontal page scrolling even though the entire like button is within the page.
Example:
[EXAMPLE REMOVED] - see the sidebar. I have to set the entire BODY to ignore overflow-x. If not, the like button causes a ton of extra pixels out there (but I can't see them with Firebug). I know this is the problem because if I remove it, then it looks fine.
Example 2:
Screenshot of Example - In the header, I had to move the margin over so far to the left, and I wanted it to be in the top-right corner. Play with the CSS for fbheader in firebug and you'll see.
The code I'm using there:
<div class="fbheader">
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'your app id', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
<fb:like href="http://www.example.com" send="true" width="300" show_faces="false" font="arial" colorscheme="dark"></fb:like>
</div> <!--// End fbheader -->
Any ideas why this is happening?? Can anyone help? It seems like a bug with the XFBML.
I had the same problem, but none of the suggestions above worked for me.
I found another solutions that did work, see http://britishinside.com/archive/2011/07/07/Facebook-Like-Button-Bug.aspx
Simply include this in your stylesheet:
#fb-root > div { left:0 }
It's a bug with facebook. Why don't you just update your fbheader class as follows:
.fbheader {
overflow:hidden;
}
That should solve your issue ..
Good luck..
I had the same problem. I found the problem was to do with a bug in Facebook's reset div. I fixed it like this:
#fb_like .fb_reset {
/* fix for Facebook bug which causes horizontal scrollbars in browser */
display: none;
}
I fixed the issue using #fb-root { display: none; }
You could try alter the width of fbheader class in css file, or even better, the parent element.
Sometimes when we use internal elements that cause the parent to get wider, the horizontal scroll get visible.
Another tip is to reposition the button, or set the margins and padding narrow.
My solution is to apply this to the parent container:
.my-parent-wrapper {
display: inline-block;
overflow: hidden;
}
skipping overflow rule will work too
I've just had the same problem, using an iFrame script from facebook for a double "share" and "like" button. I hadn't specified a width in pixels. Fixed it by getting a replacement script, but this type specifying a width of 120 pixels in the box provided.