jQuery show div with child iframe (wysiwyg text editor) - javascript

I have a "display: none" div with a child wysiwyg editor. I have had this problem with both jHtmlArea and CKEditor, so i believe this to be an iframe issue. For this example, I am using jHtmlArea. Without the "display: none;", everything works fine. When hidden however, I "show" the div with the child editor, and then it doesn't fully load. I had researched this issue some time ago, but couldn't find a solution. I believe I remember finding something that said that hidden iframes had some kind of reloading problem, but can't find the post. Anyone have any suggestions? Thank you ahead of time for your time and expertise!
<script type="text/javascript">
$(document).ready(function () {
$("textarea").htmlarea();
});
</script>
<div id="container" style="display: none;">
<textarea></textarea>
</div>
Show me!
I have already tried this solution to no avail.

One workaround is to set the display to block and hide() it through javascript. so iframe would take up the full width that is available when it loads. see this jsFiddle

If you can afford it, use the visibility:hidden style instead of display:none. The drawback is that the hidden element will fully occupy its document area even though none of its contents are shown until visibility:visible is set.
Have a try at this jsFiddle, based on the answer by #Siwei.
EDIT: updated the jsFiddle to make the editor container have 0 vertical pixels until the user clicks Show me.

Thanks to both #Humberto and #Siwei-Kang for their suggestions. Their work helped me come up with this solution.
I instantiate the htmlarea on button click, rather than on page load. I added some additional features as well:
instantiate htmlarea in show() callback function
textarea begins as "visibility: hidden" to reserve real estate on show(), but also to reduce flicker when htmlarea appears.
Set textarea back to visible after htmlarea instantiation, so that "html" button still functions
See this jsFiddle
<script type="text/javascript">
function toggle() {
$('#container').toggle('blind', function() {
$('#container textarea').htmlarea().css("visibility", "visible");
});
}
</script>
<div id="container" style="display: none;">
<textarea style="visibility: hidden; width: 300px;"></textarea>
</div>
Toggle me!

Related

slimScroll hidden on page load

I'm developing an application that uses the slimScroll jQuery plugin (http://rocha.la/jQuery-slimScroll) to essentially add a nice overflow to div containers.
Everything works apart from a small, almost insignificant annoyance: when the page is loaded for the first time, the plugin is initiated on the div and automatically displays the scrollbar. After hovering in then out of the container, the scrollbar is hidden.
Is there any way to make the scrollbar start in a hidden state on page load?
The developer was asked this a number of times but I can't find a solution on the website.
Any help would be much appreciated.
This code work for multiple elements that have same classes.
JS:
$(document).ready(function() {
$('.inner').slimScroll({
//your options
opacity: 0
}).mouseover(function() {
$(this).next('.slimScrollBar').css('opacity', 0.4);
});
});
for such HTML code like this.
<div id='box'>
<div class='inner'>
some paragraph
</div>
</div>
The result show here: https://jsfiddle.net/ATR616/4Lnr3fju/2/

Enabling browser scroll bars after window.open with scrollbars=no

I have an existing link which opens up a webpage in a new window with scrollbars disabled as follows:
<a onclick='window.open("example.html", "name", "resizable=1,scrollbars=no,width=500,height=200");' href='#'>Click to pop up without scroll bars</a>
For the sake of argument, I cannot change this window.open() code. I need to enable scroll bars after the window has been opened.
This works in IE using the following code:
<script type="text/javascript">
onload=function()
{
enableScrolling();
}
function enableScrolling()
{
document.body.scroll = "yes"; // IE
}
</script>
However this does not work in FireFox or Chrome.
According to this page, the following code should work for FireFox and Chrome but it does not (perhaps this worked in earlier versions?)
document.documentElement.style.overflow='scroll';
document.body.style.overflow='scroll';
Does anyone know if it is possible to enable scroll bars in FireFox and Chrome after the window has been opened with scrollbars disabled?
Just like Nikunj Soni said, setting a height attribute to your body tag will help you solve the problem in every browser. What I will do differently is the following:
Instead of setting a fixed height, I would set height:100%, which enable you to open the popup also in different sizes than the original.
<body style="overflow:auto; height:100%;">
The rest of your HTML code
</body>
This is also not the best solution, but you are actually removing the restictions you get from the link.
Hope you find this answer helpful.
Since you add js for IE I assume you can change the way displayed page works.
In that case I would try to put the contents of the opened window in div, and set its style to something like: height: 200px; overflow: auto;
Actually I tried with different browser, If you have fixed requirement about height, what you can do is wrap all the content of example.html in a specific div with the attached css like overflow:auto;height:200px. I will show you the whole code.
<body>
<div style="overflow:auto;height:200px;">
Your HTML code
</div>
</body>
put it into example.html. Height you can get from your code window.open("example.html", "name", "resizable=1,scrollbars=no,width=500,height=200");.
This is not the the actual solution but it will solve your problem in every browser.
Hope this help.

JQuery .not() Selection Not Working

Below, I have pasted a link to my JQuery enabled webpage. Looking at the source code, you can see I used
$('html').not(this).fadeTo('fast', 0.25);
trying to make the whole screen fade except for a clicked DIV. Unfortunately, whenever I test this out, I find that everything is faded, including the DIV that is supposedly unselected in the above command. Why is this happening and how can I fix it?
Any and all help is greatly appreciated!
Feel Free to view the source code at:
http://numberonekits.com/SchoolWeb/index.html
The CSS and other JS files are in the same directory.
Below is the relevant code:
<body>
//other stuff that should be faded...
<div id="templatemo_content_wrapper">
//other stuff that should be faded...
<div id="templatemo_sidebar">
//other stuff that should be faded...
<div id="announce">
<p>This is the DIV that shouldn't be faded</p>
</div>
//other stuff that should be faded...
</div>
//other stuff that should be faded...
</div>
//other stuff that should be faded...
</body>
As long as this is not the html element, you will be fading the html element, which will fade all of its descendants.
I haven't look at your source, but it sounds like you have a group of siblings.
If so, you need to select them, and do .not(this) on that selection.
Something like:
var sections = $('.top_sections');
// then on some event
sections.click( function() {
sections.not( this ).fadeTo('fast', 0.25);
});
Posting alternate solution from comment below:
Since the element you want to highlight is nested inside ancestors whose other descendants you want to obscure, you should...
...Take a different approach. Use layers.
Have a div that covers the width and height of the entire page. Let's call it blocker. Place it at z-index:100 or something. Make it background:#FFF and opacity:0.
Then when you want to highlight the announce section, set its z-index to something higher than 100 (or higher than the z-index of the blocker), and then fade in the blocker to opacity .75.
$('body').children().not('#templatemo_content_wrapper').add(
$('#templatemo_content_wrapper').children().not(this)
).fadeTo('fast', 0.25);
may do the trick.

Content box on image hover?

I have a bunch of images in a gallery on a new website im building and Im wanting to have content displayed when a user hovers over an image.
For example if a user hovered over a picture of a car in my gallery then a low opacity content div would fade over the entire image to show text and maybe a link.
I presume this effect could be done with a bit of JS or even CSS Transitions to give the fade.
I just need to know how to make a content box appear over the image on hover, possibly at 80% opacity.
Heres an example of what I have in mind:
Thanks for the help, if anyone could point me in the right direction it would be appreciated.
I can post more information if needed.
This is somewhat simple way of implementing a hover show and hide with jquery.
Working example: http://jsfiddle.net/va2B8/2/
jQuery ( http://jquery.com/ ):
$(document).ready(function() {
$("#Invisible").hide()
$("#hoverElement").hover(
function () {
$('#Invisible').stop().fadeTo("slow", 0.33);
},
function () {
$('#Invisible').stop().fadeOut("slow");
}
);
});
html:
<p id="hoverElement">This little piggy will show the invisible div.</p>
<div id="Invisible">This is the content of invisible div.</div>
css:
#Invisible { background: #222; color: #fff; }
Edit: I changed url for the working example cause i forgot to fade out on mouse out.
Edit2: Changed url again and changed the code cause i had some extra code there.. plus i thought that i might as well add those two .stop() in there so that it stops the animation If the mouse over or mouse out occurs while animation is going on.
( Without the stops one could hover in and out several times and then when he would stop, the animation would still keep going till it has done each animation as many times as he triggered it. You can test that in here http://jsfiddle.net/va2B8/1/ )
You can start using this fiddle :
http://jsfiddle.net/Christophe/2RN6E/3/
1 div containing image and span like :
<div class="image-hover">
<img src="" />
<span class="desc">text to be displayed when imae hover</span>
</div>
Update
All can be done with CSS...
http://jsfiddle.net/Christophe/2RN6E/4/
Here's an easy jQuery plugin you can implement: http://file.urin.take-uma.net/jquery.balloon.js-Demo.html
It works like this:
$(function() {
$('img').balloon(options);
});
This jQuery applied the balloon function to all images on the page. Here's your HTML:
<img src="example.png" alt="Here's your caption." />
The text in the balloon is going to be whatever is in the alt attribute for images and whatever is in the title attribute for other tags.
I've just done this:
http://twostepmedia.co.uk
It uses hoverintent jquery plugin so there is a delay of 250ms after the user hovers over to avoid erratic hover behaviour.

IE8 Rendering Bug: after javascript visibility-toggle, div content stays white

The page here (http://skergeth.net/slidingfooter/) contains a footer that slides up when you click on contact us. It then shows a contact form.
However in IE8 it slides up and the div containing the form stays white until it is hovered by the mouse.
I also tried the approach that the footer-div has overflow:hidden but since there are other elements inside the footer that should overflow (a menu that extends to the top), this is not an option.
I don't think it is a javascript but because I tried to delay the transition and made sure, the setVisible is called before it but with the same result.
I hope I made myself clear.
Thanks for all your answers!
add height:1% for the div which is after the div having the id="footercontent"
and it should work.(note: test it on all browsers)
this is happened when the IE didn't find a value for the height
Try adding a zoom:1 and/or position:relative to #footercontent or any of the elements inside of it. This forces IE to set a hasLayout and fixes lots of css issues.
I had the same issue. Solved it with:
#div-name * {
visibility: visible;
}
The div containing the form seems to load fine, since the "Contact Us" h1 is visible. It's the form specifically that isn't being displayed in IE8.
Try playing with the display properties of the form element.

Categories