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"
Related
The company I work for just got the Google Partners Badge and they have asked me to add it to the main website as one of the logos, both in the navbar and in the footer.
However, they just sent me a link and not the logo in itself. So I was wondering what the best option to add this badge is.
Should I do an <iframe src="www.loremipsum.com/partner.html"> or should I ask for or look for an img of the badge and link it to the Google Partners website such a <img src="images/loremipsum.png">
Thank you very much.
Try using this code:
<script src="https://apis.google.com/js/platform.js" async defer></script>
<div class="g-partnersbadge" data-agency-id="XXXXXXXXXX"></div>
I need to add a twitter feed to a web project for college. I've never done this before so forgive me for my ignorance. I have tried a few things but nothing seems to work (and the twitter instructions aren't very clear). We have not yet learned JavaScript so I am trying to achieve this using only HTML/CSS. Please check my code & give me a solution. Thanks.I have tried both examples below:
In example 1 the iframe is displaying with nothing inside it.
In example 2 only a link to the page is being displayed.
<div id="container-4" class="container">
<h3>Twitter</h3>
<iframe class="twitter-timeline"
href="https://twitter.com/TwitterDev"
data-tweet-limit="3">
Tweets by #TwitterDev
</iframe>
</div>
<div id="container-4" class="container">
<h3>Twitter</h3>
<a class="twitter-timeline"
href="https://twitter.com/TwitterDev"
data-tweet-limit="3">
Tweets by #TwitterDev
</a>
</div>
Edit: Sorry for all the edits, this is my first question on here. :L
I took the following steps to get an embeded code:
- Visited https://publish.twitter.com/#
- Entered https://twitter.com/extremeironing in the search box.
- I then selected embedded timeline.
- Copied and pasted the following code (which did not work):
<a class="twitter-timeline"
href="https://twitter.com/extremeironing">
Tweets by extremeironing
</a>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8">
</script>
After this attempt I moved onto trying the first 2 examples.
Thanks in advance!
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.
I am creating a website with navigation that causes a page-jump. But when the page-jump event is executed my page will not load properly, and most content above the called is not loaded. Here is a copy of my navigation:
<div id="navbar-type">
<ul>
<li>BEAR SOUP</li>
<li>FIAT MOTORS</li>
<li>NEWSEUM</li>
<li>TEXAS PARKS</li>
<li>ZACH THEATRE</li>
<li>GUINNESS</li>
</ul>
</div>
How can I fix the code so that the items above the page-jump are visible?
Thanks
you just need to put <a name="bear-logo"> where you want the page to scroll to when the user clicks the link and the same for the others. For example, if you wanted to scroll to the <p> tag below, you could do it like this:
BEAR SOUP
<!--More Code-->
<a name="bear-logo">
<p>Bear Soup:</p>
There doesn't seem to be any error in the displayed HTML. However, you shouldn't need to include the target for inline page anchors.
I assume you actually have the links on the page. For example, <a id="bear-logo"></a>, <a id="fiat-logo"></a>, and so on.
Moreover, the issue you describe seems to indicate that there is some invalid code elsewhere on the page (perhaps JS or jQuery). I'd recommend commenting out sections of your HTML until you isolate the interfering culprit.
BTW, have you considering using a simple jQuery script to flow the navigation to the logos instead of just abruptly jumping to them?
I am making a website and I want to make it so that if you click on a button at the bottom of the page you go to a new .html file with a different layout, but I want it to look like that new page is sliding up so that it looks like a cool transition.
Here is an example:
<!DOCTYPE html>
<html>
<body>
<p>Create a link of an image:
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" width="32" height="32">
</a>
</p>
<p>No border around the image, but still a link:
<a href="default.asp">
<img border="0" src="smiley.gif" alt="HTML tutorial" width="32" height="32">
</a>
</p>
</body>
</html>
I need it to be so that when you click on the picture it goes to a new page, but when it goes to that new page there is a "sliding up" transition.
Thanks!
You can use an iFrame to accomplish this:
JS Fiddle Demo
I used jQuery Transit for the transition effects:
$("#myLink").click(function () {
$('#newPage').transition({top: '0%' });
});
I am not sure if it is possible for standard navigation.
Some options that should be possible:
Use JavaScript to navigate (either by putting all on the same page or through AJAX)
Put everything on the same page and use :target and CSS transitions
For option 1 you can still have reasonable URLs in the browser if you use the history API.
I've had success using something like this: http://www.onextrapixel.com/2010/02/23/how-to-use-jquery-to-make-slick-page-transitions/
The only issue is that you may see a brief flash of the new page, which will then disappear, and then be transitioned in. This is more or less unavoidable without using iframes or something similar (something I'm generally loathe to do).
You could also try implementing something like a vertical slider , much like the coda slider but this one is developed for vertical scrolling. Demo.
I tried making these kind of transitions full page and found it difficult. (But I'm a JQ N00B)
Magic slider Offers horizontal and vertical scrolling and could be easier to implement.
Also have a look at this (tutorial here) which might be a simple solution to what you need.
Actually I think this last one is the closet to what you want