I use elevatezoom plugin in my app. What I want to do is just change zoomwindow height according to image hovering over. I could find a way but it does not work efficiently. It does not work when the page is first loaded. If I go to another page and see another product then elevatezoom is working as i want.
Here is my code with laravel url assignments:
<div class="product-main-image">
<img src="{{URL::to($product->image)}}" alt="{{$product->title($product->id)}}" class="zoomInner img-responsive" data-zoom-image="{{URL::to($product->image)}}">
</div>
<div class="product-other-images" id="gallery_01">
<a data-update="" data-image="{{URL::to($product->image)}}" data-zoom-image="{{URL::to($product->image)}}">
<img alt="{{$product->title($product->id)}}" src="{{URL::to($product->image)}}"></a>
#if(isset($images) && $images)
#foreach($images as $image)
<a data-update="" data-image="{{URL::to($image->image)}}" data-zoom-image="{{URL::to($image->image)}}">
<img alt="{{$product->title($product->id)}}" src="{{URL::to($image->image)}}"></a>
#endforeach
#endif
</div>
And here is thejavascript which initiates zoom and changes zoomwindow height:
(function() {
$(".product-main-image img").on("load",function() {
var mainImgHeight=$(this).height();
/*var src=$(this).attr("src");
alert(src);*/
$('.zoomInner').elevateZoom({
gallery:'gallery_01',
zoomType: "window",
cursor: "crosshair",
zoomWindowWidth:"400",
zoomWindowHeight:mainImgHeight,
zoomWindowFadeIn: 500,
zoomWindowFadeOut: 750
});
$(".product-main-image img").data("zoom-image","false").elevateZoom();
});
})();
If I remove last row code snippet, zoom is working on first load However data-zoom-image does not change when product other images are clicked. How can I handle the problem. I think when i assign a global value ot "mainImgHeight" in load() function problem might be solved. But i could not get it work after one day hassle. Maybe someone has a clue.
The problem is solved. It is simple solution. you can see the code and the descriptions below.
var firstImgHeight = $(".product-main-image img").height();
$(".zoomWindow").css({"height":firstImgHeight});//assign height of first image to the zoomWindow height
$('.zoomInner').elevateZoom({ //initiate zoom
gallery:'gallery_01',
zoomType: "window",
cursor: "crosshair",
zoomWindowWidth:"400",
zoomWindowHeight:firstImgHeight,
zoomWindowFadeIn: 500,
zoomWindowFadeOut: 750
});
$(".product-main-image img").on("load",function() { //change zoomWindow height when each image is loaded (these images are big sizes of small thumnail images)
var mainImgHeight=$(this).height(); // they are loaded by elevatezoom plugin
$(".zoomWindow").css({"height":mainImgHeight});
var zoomWH = $(".zoomWindow").height();
});
that solution works fine for me.
I have a div that expands downward when a user presses "more." The div's height is always auto, and expands to fit the content accordingly.
I need to keep "height:auto" so that the CSS remains responsive when the screen is resized, but I want the changing height to be animated...how should I do that?
In other words, when the user presses more and additional content is added to this div, I want the div's expansion to be animated, without specifying a certain height like 5em or anything.
<div id="expand">
<p>This is the div I want to expand</p>
<div id="hidden" style="display:none">
<img />
<img />
</div>
</div>
Got it! I need to use the slideToggle method on the instead of the Thanks!
jsBin demo <-- Resize the window. Works great.
You can do it simply like:
$('.more').click(function(){
$("+ div", this).slideToggle();
});
having:
<button class="more">MORE</button>
<div>Lorem Ipsum...</div>
I would use the HTML you have, but that's the price when you did not showed some code in your Question ;)
I don't know exactly how you set up your code, but jQuery
$(link).on("click", function() {
$(element).slideToggle();
});
might work for you.
Is that what you are looking for?
You can always:
var targetDiv = $('.targetDiv');
// get original Height
var originalHeight = targetDiv.height();
// get natural height
targetDiv.css({ height: 'auto'});
var naturalHeight = targetDiv.height();
// reset div to original height
targetDiv.css({height: originalHeight});
// animate to target height
targetDiv.animate({
height: naturalHeight}, {
duration: 1000,
completion: function() {
// set height to auto
targetDiv.css({height: 'auto'});
});
You can do this using jQuery. You just need to caluclate the height: auto absolute height.
JSFiddle: http://jsfiddle.net/CS2h9/
My slideshow's working correctly in every aspect except the fact that it's a total failure when it comes to adjusting to different screen sizes.
It works like it should on my big screen, but on my other one it doesn't adapt and adds a horizontal scroller.
I added width 100% to it but as I've found out the right way to do this is by a javascript code that adjusts everything dynamically. The problem is, I've never had any prior experience doing this and don't know where to begin. My page has jQuery loaded by the way.
This is the sample structure of slideshow:
<div class="featured-image">
<div style="overflow: hidden;height: 450px;"><img width="1950px" height="" alt="4" src="image.jpg"></div>
<!-- end .featured-price -->
</div>
I suppose a jQuery script to target '.featured-image img' dynamically and add the width and height to it would be the way to do this. Is there any way better than that or a simpler script? Any help is appreciated.
var screenWidth = $(document).width();
$('.featured-image img').width(screenWidth);
If you need it to adjust dynamically then you'll need to capture the resize event:
$(window).resize(function() {
var screenWidth = $(document).width();
$('.featured-image img').width(screenWidth);
});
According to the (conflicting) documentation of TinyMCE, the editor takes on the size of the textarea (or other) element that it replaces. It also says that you can set the size of the editor by specifying { height: '123', width: '123' } in the init method.
I have tried BOTH and still get only one result - the editor resizes itself to (how it remembers is beyond me) what it was the last time a user resized it.
Its saves the last size because of the theme settings. You can turn it off by using the following
$('textarea.tinymce').tinymce({
theme_advanced_resizing: true,
theme_advanced_resizing_use_cookie : false,
I know all about this, it is very annoying.
Adding this to any loaded CSS file fixed the width for me (I just put it in the global css, not in any of the TinyMCE css files, I did not test with height):
.mceEditor > table {
width:/* my width */ !important;
}
This would affect all instances, which was fine in my case. You can target the toolbar itself with .mceToolbar
You kind of do want TinyMCE to resize the textarea, so it can be wide enough to fit all the toolbar icons.
Here is my fix.
It works also for multiple instances of TinyMCE editors (init() with 'height' property works only for the first instance, so it's a workaround to achieve a fixed or minimum height of the editor box).
.mceEditor td.mceIframeContainer iframe {
min-height: 350px !important;
}
.mceEditor table {
height: auto !important;
}
Although there are a lot of good suggestions here I found the answer by reading the question. There is NO problem with height or width so why all these work arounds with CSS or writing functions, the method in the docs works.
The original challenge was about resizing, the author never said the height or width didn't work, it just didn't do what he/she expected - it was only stated as quoted below:
"the editor resizes itself to (how it remembers is beyond me) what it was the last time a user resized it."
Saidul Islam answered the question correctly and to take it one step further Stuart went on to describe how to turn off the cookies. If you need to set the height and width do it when in init() and be done. You can read more here:
https://www.tinymce.com/docs/configure/editor-appearance/#min_height
Sizing the input area in both height and width works as outlined below.
tinymce.init({
selector: '.profileTextArea',
plugins : 'advlist autolink link image lists charmap print preview code',
min_height: 400
});
tinyMCE.init({
mode : "exact",
.....
mode : "exact" will disable the ability to resize grid by drag
Yes, this is very annoying. I wrote my own function to adjust the height to the given input. You may modify it to set your height/width as you wish:
resizeIframe: function(frameid) {
var frameid = frameid ? frameid : this.editor.id+'_ifr';
var currentfr=document.getElementById(frameid);
if (currentfr && !window.opera){
currentfr.style.display="block";
if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) { //ns6 syntax
currentfr.height = currentfr.contentDocument.body.offsetHeight + 26;
}
else if (currentfr.Document && currentfr.Document.body.scrollHeight) { //ie5+ syntax
currentfr.height = currentfr.Document.body.scrollHeight;
}
styles = currentfr.getAttribute('style').split(';');
for (var i=0; i<styles.length; i++) {
if ( styles[i].search('height:') ==1 ){
styles.splice(i,1);
break;
}
};
currentfr.setAttribute('style', styles.join(';'));
}
},
im setting width and height to editor area like this
<style>
#content{width: 620px; height: 500px;}
</style>
<textarea name="content" id="content" cols="50" rows="15"></textarea>
I noticed that a containing table was enforcing widths, and also the icon set are td's, so there's a minimum width they'll collapse down to, so if you have many icons in a single row - it could be messing all over your widths.
Sort of related SO question of mine, ended up being quite related to your problem: Able to float td elements consistently?
I found the TinyMCE text-area (called '.mceContentBody' in my theme) too small and awkwardly margined in the new post content area.
In my theme there's a css file called editor-style. I changed the width (to 98%) yet since TinyMCE uses cookies to remember the editor size, the CSS changes weren't sticking. After CLEARING MY BROWSER'S CACHE, the CSS width/margin changes took effect. Finally. Gah.
Add a 'body_id' using tinymce.init and then use that id in 'content_css' to give the editor the desired css behavior. Like so:
tinymce.init({
selector: "textarea",
content_css: '/css/app.css',
body_id: 'new-journal-editor'
});
And then in app.css:
#new-journal-editor {
height: 123px;
width: 123px;
}
I am facing the same problem but I end up doing this
#tinymce-textarea_ifr {
min-height: 500px !important;
}
.mce-tinymce {
width: 96% !important;
margin: 0 auto !important;
}
I find the best method to restrict the width tinyMCE 4+ textarea is to wrap the textarea in a new div or span tag. Then apply the width to that. This way you get use percentage widths instead of fixed px. if you want to adjust height edit the rows="15" value.
example:
<div style="width:90%!important;" ><textarea name="content"cols="100" rows="15" class="mceEditor" id="content"><?php echo $content;?></textarea></div>
I'm trying to make my layout update the width of another element, but I need to get at its width NOT including its scrollbar (if one is indeed present). getMainContentBounds() in this case seems to be returning the entire width along with the scrollbar.
I have also tried getSizes() with the same result.
myDataTable.on('postRenderEvent', function() {
var bounds = YAHOO.specify.app.layout.getMainContentBounds();
Dom.setStyle(YAHOO.util.Selector.query('div.yui-dt-hd', c.body), 'width', bounds.width+'px');
Dom.setStyle(YAHOO.util.Selector.query('div.yui-dt-bd', c.body), 'width', bounds.width+'px');
});
Why don't you place your a marker "element" inside the scrollable.
<div style="width: 200px; overflow: auto;">
<div id="the-div-width">
Your content.
</div>
</div>
Then just focus on getting the width on the-div-width's actual width...