Develop Reference

TinyMCE color picker dropdown appears off-screen

This is an issue on Firefox and IE so far that I've tested; the problem does not exist on Chrome.
I'm including two TinyMCE editors on a page with one partially off-screen to start. When I select the color picker dropdown option from the toolbar on the first TinyMCE instance, the dropdown appears where it should. But if I scroll down and select the color picker dropdown in the second instance, that dropdown appears way below the editor and typically off the page.
You can see this in action here: http://jsfiddle.net/nm6wtca3/
Without removing the html, body CSS, what can I do to have the color picker always appear in the correct position?
I've traced the problem down to setting CSS on the html, body elements.
html, body {
width: 100%;
height: 100%;
overflow-x: hidden;
}
The dropdown div has CSS applied to it that is auto-calculated by TinyMCE. It looks something like this:
z-index: 65535;
left: 641.467px;
top: 633px;
width: 162px;
height: 105px;
How it appears in FF (sometimes way worse):
How it appears in Chrome (how it should look):

You did say you don't want to remove any CSS from the html,body, but you didn't say anything about adding to it! This solution is based on the assumption that you can add to the html,body
Solution
html, body {
width: 100%;
height: 100%;
overflow-x: hidden;
position: relative; /* Line added */
}
JSFiddle Example
I hope this helps. In all reality, you really only need to apply position: relative; to the body like so body { position: relative; }

I'm not super familiar with tinymce's colorpicker, but I can see the issue, and I can replicate it reliably: your problem occurs when you have a picker open, and then you scroll. I can replicate this in chrome too. Here's a video.
When I look at the DOM, I see that tinyMCE has created two absolute-positioned divs at the end of document.body, one for each picker. When you open one, their position is updated to reflect the location of the toolbar-button at the time you clicked it, but it never gets updated when you scroll!
So, how to solve this? Well, there are a few possibilities:
Option 1: it looks like tinyMCE provides a method to bind a control to an event (here). With this, you could bind a callback to 'scroll' that repositions the box...
Huh, now that I think of it, you could simply close any open colorpickers whenever a user scrolls ... kinda feels like a cop-out but there's no denying it has the best R.O.I. ;) We'll call that Option 2!
Option 3: depending on the implementation of the colorpicker, you may be able to override where in the DOM those divs get rendered. The API method I saw that looked the most promising is here. Once you have the div inside a relative-positioned parent, you'd also have to make the colorpicker's positioning algorithm smart enough to look in the right place for x and y offset ...when I tried this by just moving the element and mashing in some css by hand in chrome-console, the algorithm still computed x and y offsets based on doc.body, so depending on where you were scrolled at click-time, everything would be out of position
It looks like this issue might be troubling other people as well... maybe they've found a solution but haven't posted anything about it?
I hope this is enough info to get you past the problem... Let me know if you have any questions!

It looks like the problem is caused by overflow-x: hidden;
It may not be the answer you want but removing that or moving it to a page wrapper will solve your problem.
Working Example
html, body {
width: 100%;
height: 100%;
padding:0;
margin:0;
}
#pagewrapper{
overflow-x: hidden;
}
Another option would be to force repositioning on scroll, but honestly this is overkill... I strongly recommend fixing the css instead.
Another working example
$('body').scroll(posfix); // when the body scrolls
$('#mceu_10').click(posfix); // when you click the top font color button
$('#mceu_35').click(posfix); // when you click the bottom font color button
function posfix() {
setTimeout(function () { // hack way to ensure it fires after the menu is shown
$('#mceu_51').css({
top: $('#mceu_10').offset().top + $('#mceu_10').height(), // set top/left based on button's position
left: $('#mceu_10').offset().left + $('#mceu_10').width() / 2
});
$('#mceu_52').css({
top: $('#mceu_35').offset().top + $('#mceu_35').height(),
left: $('#mceu_35').offset().left + $('#mceu_35').width() / 2
});
}, 1);
}

it works on firefox, and Internet Explorer fine
just remove this css code
html, body {
width: 100%;
height: 100%;
overflow-x: hidden;
}

Please take a look at this:
html,
body {
width: auto;
height: auto;
overflow-x: hidden;
}
You can simply set body width and height to auto, then there won't be any need to use position and you don't have to remove anything. I think you do not need to use height: 100% since it will be auto-calculated by TinyMCE. i hope it helped.
Update
Look at the screen shot from chrome and its same in firefox. And i didn't remove any css but just changed..and by putting 100% in css the output will be like :-
Please check this one with auto but not 100%..thank you

Forcing embedded tweet to 100% width

I'm trying to force an embedded tweet to behave responsively by setting its width to 100%.
I've attempted adjusting the width inline as follows:
<blockquote class="twitter-tweet" width="100%">...</blockquote>
I've also attempted styling the twitter-tweet class as follows:
blockquote.twitter-tweet {width:100% !important}
Both approaches have failed. Is this simply being overwritten by the script Twitter requires to be included with the tweet embed? (The script can be referenced at http://platform.twitter.com/widgets.js.)
Any help in forcing the embed to 100% width would be very much appreciated.

Since May 2016 Twitter use an other embed HTML. It looks like this. They droped iFrame integration.
<twitterwidget class="twitter-tweet twitter-tweet-rendered" id="twitter-widget-1"
style="position: static; visibility: visible; display: block; max-width: 100%; width: 500px; min-width: 220px; margin-top: 10px; margin-bottom: 10px;"
data-tweet-id="732567624345915393">
<div data-twitter-event-id="1" class="SandboxRoot env-bp-350" style="position: relative;">
...
</div>
</twitterwidget>
In the DOM you will find an Element called #shadow-root after twitterwidget open tag (check out in Chrome inspector). From now it is possible to manipulate all Twitter Ebends by css and pseudo element shadow.
Example for width:
twitterwidget::shadow .EmbeddedTweet {
width: 700px;
max-width: 960px;
}
Example
- https://jsfiddle.net/86dc9y5t/
Do not use on product pages:
- https://developer.mozilla.org/en-US/docs/Web/Web_Components/Shadow_DOM

Cory, this is not possible using Twitter's provided embed. Well, it's possible to some extent, but only up to 520px. See https://dev.twitter.com/docs/embedded-timelines.
However, you can add width="2000" like this `
<a class="twitter-timeline" width="2000" href="https://twitter.com/twitterapi" data-widget-id="YOUR-WIDGET-ID-HERE">Tweets by #twitterapi</a>
`
And then adjust your CSS. It's not the best solution, though.
there's an old post that might be of use for you, don't know if still works, but worth a view, check it out at http://kovshenin.com/2012/quick-tip-how-to-make-tweet-embeds-responsive/

Simply set the width setting the width of the widget itself.
Check inspecting in the console what is the id of the widget container.
#twitter-widget-0{ width:100%; }

Unfortunately the above solutions didn't work for me, it only worked when I queried shadowRoot and execute with delay after the tweet loads:
Javascript
setTimeout((function() {
return $('.twitter-tweet').each(function() {
return $(this.shadowRoot).find('.EmbeddedTweet').css({
width: '99%',
maxWidth: '100%'
});
});
}), 2000);
Coffeescript
setTimeout (->
$('.twitter-tweet').each () ->
$(this.shadowRoot).find('.EmbeddedTweet').css
width: '99%'
maxWidth: '100%'
), 2000

This solution works for me.
Basically, you have to inject some css into your twitter widget iframe.
This example use jQuery
<style type="text/css" id="twitter-style">
.timeline { max-width: 100%; }
</style>
<script type="text/javascript">
twttr.widgets.createTimeline(
'WIDGET_ID_GO_HERE',
$('#widget-placeholder-go-here')[0],
{
chrome: 'nofooter noborders noheader' //optional
}
).then(function(el) {
$(el).contents().find('head').append($('#twitter-style'));
});
</script>

The described solution with shadow seems to apply only to Chrome. For other Browsers it is posible to manipulte the with by javascript. Here is an Example with jQuery.
jQuery(window).load(function () {
jQuery('.twitter-tweet').contents().find('.EmbeddedTweet').css({
maxWidth: "960px", width: "100%"
});
});

For anyone who is wondering why these solutions sometimes don't work; it's because twitter cards has a title and content with white-space:nowrap
But don't worry, this is the only code you will need to use, because it covers all cases (atm):
#twitter-widget-0,#twitter-widget-1{ width:100%; }
twitterwidget::shadow .SummaryCard-content *{white-space:normal !important;}
twitterwidget::shadow .resize-sensor{display:none !important;width:0px !important;overflow:hidden !important;}

My content is running off the bottom of my page

I am updating the webstore on my site to Ecwid. Since I used the Intuit Sitebuilder to build my site the page is a fixed size. I added a place holder in Sitebuilder to hold the script for the Ecwid store. However, some of the pages of my store run off of the bottom of the screen. I have contacted both Ecwid and Sitebuilder for help with this with no luck.
I need my store to be no longer than 1000px high and in the event one of the pages of the script is longer it will have a scrollbar to the left. Can someone please help me?
Here is a link to see what I am talking about: Dip Wizard Hydrographic Dip Kit Store.

You'll need to edit both html and css of your site:
html:
inside a div with id "element50", there's a div without an id. This is the container that you're worried about. You need to give this div an id, for example -
<div id="productInfo">
css: Then in your css - add these rules
#productInfo {
margin-top: 25px;
max-height: 1045px;
overflow-x: hidden;
overflow-y: scroll;
}
If this is very urgent and you can't find where to add/edit your css, you can add it in the html itself:
<div style="margin-top: 25px; max-height: 1045px; overflow-x: hidden; overflow-y: scroll;
But this is not recommended and should be replaced with proper css in the near future.

If I understand you correctly you want a scrollbar where the content is over 1000px, then i guess you should type in your css {overflow-y:scroll;} on your content element.

hide scrollbar but able to scroll with mouse

I want to hide scrollbar to appear on a long div,but still able to scroll through mouse or keyboard arrow keys.I read another thread here about scrollable.Tried to use that..but could not implement that...could someone guide me how to implement that clearly or is there any other option with jquery or css?
Any help would be greatly appreciated.
Thanks

I'm not 100% sure on the browser compatibility of this, but you can have two div's - an outer div and a inner div. The inner div will have all your content. Your css could then look like this:
#outer {
width: 200px;
height: 200px;
overflow:hidden;
}
#inner {
height: 200px;
width: 225px;
overflow: scroll;
}
That is, the inner block would be wide enough to contain a scrollbar, but have it hidden from sight by the containing div. This worked for me in webkit. You might have to fiddle with the widths to make sure text doesn't get cut off.
That said, I would carefully think about WHY you're trying to do this. This could be a huge usability issue for your users, as they will not have any indication that there is more content within the div.

To do this is add the following css
.div::-webkit-scrollbar {
display: none;
}
This is saying that hey remove the display of the scroll bar but keep the functionality

hover is not working as expected [duplicate]

I'm trying to get hover effect similar to this example. But couldn't get it. Here is the link

Your <script> tag references a jquery-1.2.6.min.js which does not exist. Put that file in the same directory as hovereffect.html on your web server.
Or, perhaps even better, get JQuery from Google Libraries:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

It looks like the code copied to the new page is missing the position:relative, which would fix the issue. Now, for security, you may want to limit the height of the block and set the overflow to hidden.

On test page this is your css:
.thumb {
list-style: none;
float: left;
background: white;
width: 250px;
position: relative;/* this makes all the difference */
}
On production page:
.project .thumb {
width: 260px;
float: left;
}
Add position: relative to .project .thumb

The reason it's not working is because you are missing a css property
.project .thumb img {position:absolute}
notice that you have this line in your test page.
the way you are using jQuery's animate function to change the position of the top image {top:150px}, so you need make it absolutely position for this to work.
Also the .project .thumb a line is missing it's width and height.
Also note that if you just add that line, the affect still won't be the way you expect. Create an outer div with an overflow:hidden.

You want to specify height:150px; on your outer class (.outer). Currently it's set to 250px which is too tall.

Its because in your real project your css is in the /css directory. So your CSS style is looking for /css/images/snbw_thumb.jpg which doesn't exist. Change your CSS style to ../images/snbw_thumb.jpg and it should fix it.

Your image is 404ing due to your css rule for .project .thumb a{}
It points to "images/snbw_thumb.jpg" but you'll likely want to use "/images/snbw_thumb.jpg"
Bad URL : http://dragonfly.zymichost.com/css/images/snbw_thumb.jpg
Good URL : http://dragonfly.zymichost.com/images/snbw_thumb.jpg
(Also, it looks like your pages aren't really serving 404s as the bad URL )
Hope this helps
-Chris