Foundation
-
FollowReplies
-
Double scroll bar with embedded twitter feed
byTaylor Mudd Thursday, July 10, 2014 at 12:37 PM EST
I get a double scroll bar when embedding a twitter feed onto my site... Any help?
Edit: Snipped personal details for privacy reasons :)
<div class="large-7 columns">
<form id = "search" method = "get" action = "search.php">
<input type = "text" name = "search" id = "search_input" placeholder="Search Videos" />
<input type = "submit" value = "Search" id = "search_submit" />
</form>
<br>
<p>Latest Tweets
<a class="twitter-timeline" data-chrome = "noheader transparent noborders" data-dnt="true" href="https://twitter.com/SNIPPED" data-widget-id="SNIPPED">Tweets from @SNIPPED</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
</div>
This post has been closed. No new replies can be added.
Taylor Mudd
about 5 years ago
Changed that hoping for simplicity to be the answer but sadly no avail... This has really baffled me...
Preston McPeak
about 5 years ago
What browser is this affecting?
Edit: Are you having an issue similar to this?
Taylor Mudd
about 5 years ago
This is in live view Dreamweaver CS6, chrome wont load the widget at all, but right now I want to focus on the double scroll bars already tried to solution to that thread anyway... same issue occurring..
Preston McPeak
about 5 years ago
Again, my knowledge is limited here... If you could send something for me fiddle with live or screen shots it would be helpful.
Taylor Mudd
about 5 years ago
<!doctype html> <html class="no-js" lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>BCHS A-Level Maths | Home Page</title> <link rel="stylesheet" href="css/foundation.css" /> <script src="js/vendor/modernizr.js"></script> </head> <body> <div class = "contain-to-grid"> <nav class="top-bar"> <ul class="title-area"> <li class="name"> <a href="#"></a> </li> <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></li> </ul> <section class="top-bar-section"> <ul class="center"> <li><a href="index.php">Home</a></li> <li><a href ="#">C1</a></li> <li><a href ="#">C2</a></li> <li><a href ="#">C3</a></li> <li><a href ="#">C4</a></li> <li><a href ="#">M1</a></li> <li><a href ="#">M2</a></li> <li><a href ="#">M3</a></li> <li><a href ="#">FP1</a></li> <li><a href ="#">FP2</a></li> <li><a href ="#">FP3</a></li> <li><a href ="#">S1</a></li> <li><a href ="#">S2</a></li> <li><a href ="#">D1</a></li> <li><a href ="#">D2</a></li> </ul> </div> </section> </nav> <br> <br> <br> <br> <br> <div class="row"> <div class="large-5 columns"> <div class="panel"> <h3><u>Welcome to the BCHS Maths revision site.</u> <p> All of the videos created by the Maths Department for various modules are available on this site. <p> Each module contains a list of chapters where the videos will be listed <p> You can either look through the modules using the links are the top of this page or use the search bar to find the video you need. </div> </div> <div class="large-7 columns"> <form id = "search" method = "get" action = "search.php"> <input type = "text" name = "search" id = "search_input" placeholder="Search Videos" /> <input type = "submit" value = "Search" id = "search_submit" /> </form> <br> <p>Latest Tweets</p> <a class="twitter-timeline" data-chrome = "noheader transparent" data-dnt="true" href="https://twitter.com/TimBob_12/maths" data-widget-id="381187111061180416">Tweets from @TimBob_12/maths</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> </div> </div> <div class="large-12 columns"> <div class ="panel" id="footer"> <p style="color:black;font-size:10px"> Re-created and Designed by Taylor Mudd </div> </div> <hr /> <script src="js/vendor/jquery.js"></script> <script src="js/foundation.min.js"></script> <script> $(document).foundation(); </script> </body> </html>
Thats the whole site, no other css other than default besides centering the last div
Preston McPeak
about 5 years ago
Is this what is happening for you? I don't see any errors unfortunately..
http://i.imgur.com/ApUiqXV.png
Taylor Mudd
about 5 years ago
That doesnt happen at all.... http://imgur.com/OZuJhXY This is what I get.. what did you change btw that looks awesome :P
Preston McPeak
about 5 years ago
The only thing I did was change the stylesheet to app.css because I pasted your HTML into a Sass project. The Sass project imports its styles into an app.css file, not foundation.css. I am also viewing this on a local host in Chrome and not in a live view like Dreamweaver.
Otherwise I didn't do anything to your markup or stylesheets.
Wing-Hou Chan
about 5 years ago
Howdy everyone!
Looking at what has already been laid out I would suggest two possible reasons:
1) LiveView in DreamWeaver isn't really the best place to preview a website. I've used it back in the days of CS4 and Design View (which I believe is a predecessor of LiveView) was horrendous. And I don't know what version you are using now, but I doubt Adobe has improved it much. LiveView definitely was not built to be a browser and you will expect some of its quirks to show up.
Also because LiveView isn't a browser it doesn't get updated as frequently. I'll make the assumption LiveView/Design View gets major improvements once in every new major update. CS has gone through 6 versions so I'll assume LiveView has 6 versions. FireFox on the other hand has gone through 33 major versions and Chrome has gone through 38 major versions. That is some serious catch-up that LiveView has to do.
2) Second reason is less likely. I'm going to assume that LiveView is actually working. From Taylor's screenshot, it seems like the container for the widget may be having an overflow issue. Maybe there is a height, max-height, margin or padding applied which may cause an overflow. This is highly unlikely as I don't think Foundation's CSS will do this and tests in Chrome and FireFox don't produce the problem. It's probably LiveView messing things up.
So in conclusion, the problem isn't a problem with your site or your code, but with DreamWeaver's LiveView, so I wouldn't worry too much about it.
Taylor Mudd
about 5 years ago
Well I feel like an idiot... turns out that AddBlockPlus doesn't like twitter feeds... main reason I was using liveview so removed that and the scrolling issue has been resolved... Thanks to everyone that helped :)
Hey! I'm not too sure how to read the JS but I've noticed you don't have a closing
</p>tag there.