I have embedded a twitter timeline in a html page with this javascript code:
<a class="twitter-grid" href="https://twitter.com/TwitterDev/timelines/539487832448843776">National Park Tweets</a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
Here is the page: http://goo.gl/E4RON8
The problem is that I would have this effect:
I have the correct visualization if I set zoom to +200% in Chrome.
Can you help me to set the correct css rules?
Thank you.
The problem is you didn't set the width properly. Try to add below CSS changes,
width=100% in class "entryContent" - This will expand the list items as needed.
max-width=100% in class "page-template-page-fullwidth-php .col-md-8"-this will over-ride existing max-width.
Related
This is the code I have right now for the HTML twitter embed:
<a class="twitter-timeline" data-width="280" data-height="440"
data-theme="dark" data-link-color="#E81C4F"
data-chrome="noheader nofooter noborders transparent noscrollbar"
href="https://twitter.com/CodeLacuna?ref_src=twsrc%5Etfw">
Tweets by CodeLacuna
</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
I am using it for a site on wix. However, despite changing the code to have "noscrollbar", there is still a scroll bar! Which makes no sense. So I'm wondering if perhaps there is some sort of update with the coding that I need to take into account for? I can't do CSS as I am only limited to HTML.
Here is a screenshot of what the result of the code looks like The top and bottom borders are separate assets I added myself.
Not quite the same but might work for you...? Does adding this to the anchor tag still work these days (replace with your number)?
data-tweet-limit="2"
i have a wordpress website, there is a slider in the homepage which is coming from some widget, the slider is static, when i inspected the element it was showing something like below:
<div class="swiper-container services-slider swiper-container-initialized swiper-container-horizontal" data-cols="3" data-autoplay="0">
now i want the slider to autoplay automatically, as i am not able to edit the code of the slider i am trying to put some css in the head section of the website so the slider plays, how can i add autoplay attribute inside css, please help, thanks in advance
With jquery something like this may work if the slider options have not already been rendered from the data attributes
$('.swiper-container').data('autoplay', 1)
Or
$('.swiper-container').attr('data-autoplay', 1)
With on ready
(function($){
$(document).ready(function(){
$('.swiper-container').attr('data-autoplay', 1)
});
})(jQuery);
I need to be able to embed HTML snippets (nested elements and CSS) fetched from a remote api inside my document, in a way that their CSS won't affect on my whole document.
I need to fetch (random) gmail messages HTMLs and embed them in my website. The thing is that most messages have their CSS tags to style the message html. The problem is that some of these CSS mess up with my own document CSS. How can I embed an html snippet with CSS, in a way that it will have its own scope and not interact with what's outside of it?
<html>
<body>
<h1>Your gmail messages</h1>
<div id="gmail-message">
<!-- Here to be injected automatically. Changing classes, etc is not possible -->
<h1>This a gmail message</h1>
<style type="text/css">
h1 {
color: red;
}
</style>
</div>
</body>
</html>
The h1 tag outside the gmail-message div is also affected and is therefore red.
What do I need to do to get around this?
One solution would be to use an iframe.
Another solution would be to extract all css and html, then add an attribute (example: scope) to every html tag inside of gmail-messag.
Then modifiy the css and add an attribut selector.
Example:
<html>
<body>
<h1>Your gmail messages</h1>
<div id="gmail-message">
<!-- Here to be injected automatically. Changing classes, etc is not possible -->
<h1 scoped>This a gmail message</h1>
<style type="text/css">
h1[scoped] {
color: red;
}
</style>
</div>
</body>
</html>
But propably using an ifram is a more easy solution.
Easiest way is to use iframe / object / embed tag (tested on firefox).
If you can use Javascript and HTML5 you can also use shadow DOM or make custom element that uses slot tag (also in shadowRoot).
You might want to look into using The Shadow DOM
An important aspect of web components is encapsulation — being able to
keep the markup structure, style, and behavior hidden and separate
from other code on the page so that different parts do not clash, and
the code can be kept nice and clean. The Shadow DOM API is a key part
of this, providing a way to attach a hidden separated DOM to an
element.
However, be aware this is new tech and, as always, Microsoft browsers don't handle it.
I've found my solution.
First, insert an empty iframe tag somewhere.
<iframe id="iframeTag" src="about:blank"></iframe>
Second, load the html snippet into that iframe, the following way:
var doc = document.getElementById('iframeTag').contentWindow.document;
doc.open();
doc.write(<html_snippet>);
doc.close();
This way the <html_snippet>'s css won't mix up with the outer document's.
Use the srcdoc attribute on iframe to scope your HTML and CSS.
<iframe srcdoc="<p>Hello world!</p>"></iframe>
It's supported on all major browsers: https://caniuse.com/iframe-srcdoc
I am parsing the html from a site and I encountered this tag: <div data-alert class="alert-box success radius">
What attribute does 'data-alert' represent?
These are custom attributes new in HTML 5. See http://www.w3schools.com/tags/att_global_data.asp
Seems like the page you are talking about uses Foundation CSS framework:
http://foundation.zurb.com/docs/components/alert_boxes.html
See this page:
http://foundation.zurb.com/docs/components/alert_boxes.html
It's a div container that, according to the site, conforms to 100% of the container width you put them in.
I am new to dojo / dojo mobile.
I am building a screen with a header and a list of items beneath. Very
classical in mobile apps.
<body id="content" style="display: none">
<div data-dojo-type="dojox.mobile.ScrollableView" id="mainView"
data-dojo-props="selected:true,scrollDir:'v'">
<h1 data-dojo-type="dojox.mobile.Heading"
data-dojo-props="label:'Main',fixed:'top'"></h1>
<div data-dojo-type="dojox.mobile.EdgeToEdgeList" style="margin-top: 0px;">
<div data-dojo-type="dojox.mobile.ListItem"
data-dojo-props="label:'Take Picture...',
icon:'images/plus-30.png',
url:'TakePicture.html',
transition:'slide'">
</div>
</div>
</div>
<script src="js/initOptions.js"></script>
<script src="js/PhoneGapDemo.js"></script>
<script src="js/messages.js"></script>
Problem : the first item on the list is hidden behind the header and not
visible.
(Same rendering in IBM Rich Page Editor, IBM Mobile App Simulator, Apple iOS
Simulator and iPhone iOS6)
I juste started the project, I don't have fancy CSS or other ... just
started from scratch, added the ScrollableView, the Header, the
EdgeToEdgeList and then the ListItems.
Workaround is to apply a style on the EdgeToEdgeList to move it 40px down.
But it is not clean and breaks cross-platform compatibility (what if the
header is not always 40px height ?)
I am using DoJo 1.8
Thanks
Seb
Hi even im new to this worklight, well im not sure but got to the properties (go to the design and right click on the edge-to-edge list and select properties) you can see the tag, style , Layout, All options.
go to styles and click the properties and change the postion / lay out. it might help.
please let me know if you get that right.
Solution is twofold
use style="visibility:hidden" in element, as following
<body id="content" style="visibility:hidden">
load "mobileDeviceTheme" explicitly with a element instead of letting Dojo load it asynchronously (this module needs to be loaded early to allow for proper height calculation)
<script type="text/javascript" src="dojox/mobile/deviceTheme.js"></script>
before (the load of dojo/dojo.js)
Seb