xtk with GWT: "Uncaught Error: Could not find the given container or it has an undefined size." - gwt

Has anybody used XTK with GWT? No matter what I do I get this error "Uncaught Error: Could not find the given container or it has an undefined size."
I have defined the container element in the base html (below), which is accesible via other means (DOM, JQuery, GWT-JSNI), but not by XTK library.
My GWT-JSNI method and container HTML are as following.
Any help or pointers to debug further?
/* GWT JSNI method */
public native void initializeWebgl() /*-{
alert('r ' + $doc.getElementById('r')); // works
var r = new $wnd.X.renderer('r'); // fails ??????? why?
alert("r is" + r);
r.init(); }*-/
<iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>
<noscript>
<div style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">
Your web browser must have JavaScript enabled
in order for this application to display correctly.
</div>
</noscript>
<div id="r" style="background-color: #000000; width: 100%; height: 100%;"></div>
</body>

1) This error was observed in some cases. The check which lets the renderer initialization fail is deprecated and already removed on the 'refactoring' branch. So, soon, this should work out of the box.
2) For now, the simplest workaround is to set the renderer to a fixed height (for testing):
<div id="r" style="background-color: #000000; width: 100%; height: 300px;"></div>
3) It is possible to use CSS to define a min-height on the renderer if the parent element has height 100%. Here information: http://www.gn-webdesign.de/css-tutorials/css-div-height-100.html

Related

i-check checkbox in fooTable Header <th> not working

In FooTable 3.1.4 I want to use a pretified i-Check checkbox for a checkAll functionality in the Header of the table.
This is the HTML without i-Check:
<th data-type="html" data-sortable="false"
data-filterable="false" style="display: table-cell;"
class="footable-last-visible">Choose
<input name="check_all" class="all" type="checkbox">
</th>
When we run this script without i-Checks it runs fine. However - applying i-Checks makes the prettified checkbox unclickable - We are unable to check / uncheck.
This is the HTML with i-Check applied:
<th class="footable-last-visible" data-type="html" data-sortable="false"
data-filterable="false" style="display: table-cell;">Kies
<div class="icheckbox_square-green" style="position: relative;">
<input type="checkbox" name="check_all" class="all"
style="position: absolute; opacity: 0;">
<ins style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; border: 0px none; opacity: 0;"
class="iCheck-helper">
</ins>
</div>
</th>
So it seems FooTable does not accept the i-Checks modified HTML in the head of the table. I did find a (closed) Github Issue post addressing the problem :
"the issue was that the sorting component worked off of a click on the
entire TH element and had a call to e.preventDefault() in the handler.
This was basically killing the default click behavior of elements
placed within the header element. I've since removed this limitation
and it will be released in the next version shortly."
But this post does not clarify as of which version of FooTable this problem is solved.
Or did I make a mistake in the code ..... So - any input much appreciated.
your script must be:
//first
$('.table').footable();
//after
$('#checkall').on('ifChecked ifUnchecked',function(evant){
if(evant.type == 'ifChecked')
$('.check').iCheck('check');
else
$('.check').iCheck('uncheck');
});

JQuery Class selector not working on Zoom plugin

I've been trying to get jQuery to select a particular element in the JQuery zoom plugin but it doesnt seem to be working
This is the html markup for the zoom region
<div class="zoom" style="width: 60% !important; display: block; position: fixed; overflow: hidden;">
<img src="//cdn.shopify.com/s/files/1/0456/6809/t/3/assets/bx_loader.gif?27021" alt="" class="abs-center-translate loader">
<img src="//cdn.shopify.com/s/files/1/0456/6809/products/568A.jpeg?v=1413437903" class="zoomImg" style="position: absolute; top: -1385.54456824513px; left: -389.68108776267px; opacity: 1; width: 682.5px; height: 1024px; border: none; max-width: none; max-height: none;">
</div>
function showZoomImgSmaller(img) {
var zoomsmall = $('.zoom');
zoomsmall.empty();
zoomsmall.append('{{ "bx_loader.gif" | asset_url | img_tag: "", "abs-center-translate loader" }}');
$('.collectionZoomContainer').show();
zoomsmall.attr( "style","width:60%!important" );
var zoomsmallimg= $('.zoom > img');
console.log(zoomsmallimg.next().get());
$('.zoomImg').attr("style","max-width:500px!important");
zoomsmall.show();
zoomsmall.zoom({url: img, magnify: 0.5});
}
The console returns just a [] for the .zoomImg.get() and an undefined for a .zoomImg.html()
I want to change the css of this particular element and can only do it through jquery.
Any help will be greatly appreciated. Thanks
There is a lot going on here that I cannot see, but my guess is that when you call empty() on your div, you are removing all children of the div (including the .zoomImg class which you are trying to look up later). Instead of removing all elements, you might just want to remove the first image:
function showZoomImgSmaller(img) {
var zoomsmall = $('.zoom');
$('.zoom > .loader').remove(); //change is here
zoomsmall.append('{{ "bx_loader.gif" | asset_url | img_tag: "", "abs-center-translate loader" }}'); //angular? not sure what this does
$('.collectionZoomContainer').show(); //not sure what this
zoomsmall.attr( "style","width:60%!important" );
var zoomsmallimg= $('.zoom > img');
console.log(zoomsmallimg.next().get());
$('.zoomImg').attr("style","max-width:500px!important");
zoomsmall.show();
zoomsmall.zoom({url: img, magnify: 0.5});
}
Hey so I managed to get my style applied by appending css in the head of the page. This style was applied even though the element didnt exist till later.
This is the code I used.
$("<style type='text/css'> .zoomImg{ max-width:200px!important;} </style>").appendTo("head");
Cheers.

2 Questions concerning the JSSOR-Slider

First of all I have to say:
what a phantastic piece of software!
Well designed, implemented and documented, and many, many cool features.
Tanks a lot for giving that away as Open Source!
Now I have made a slider implementation for the "Gambio GX"-shopsystem (a very advanced osCommerce fork.)
You can see it here in action: http://marmorkamin-shop.de/Test/
I have used all image transformations (377) and caption animations (438) available, both are randomly selected for each slide...
(Resulting in 163,618(!) different ways to change slides....)
The slider is dynamically generated with PHP, based on slide-information in the shops database....
As inline-styles are very inflexible in such an environment, I have moved the styling to a stylesheet.
It already works like a charm, almost....
Two problems I am encountering:
The caption area is sometimes clipped
(see 1st caption in this picture: screenshot)
Only bullets 1, 2 and 3 in the bullet navigator are active, the others do not respond.
Any idea what could be the reason for this??
Thx again for this great software!
Edit:
The caption area is sometimes clipped (see 1st caption in this
picture: screenshot)
Found a quick and dirty solution for this meanwhile:
Assign a clip: auto !important; CSS direktice for the caption elements...
But I am sure there must be a better solution :-)
Re: caption clipped
Please always specify width and height for caption.
You can specify width and height in css file,
.slide_caption_1 {
left: 100px; top: 200px; width: 110px; height: 29px;
}
.slide_caption_2 {
left: 150px; top: 250px; width: 110px; height: 29px;
}
.slide_caption_3 {
left: 200px; top: 300px; width: 110px; height: 29px;
}
And you can specify inline style as well,
<div class="jssor_slide_caption slide_caption_1" data-u="caption" t="*" style="width: 110px; height: 30px;"></div>
Re: bullet problem
Style for 'mousedown' of bullet navigator not specified.
Given class of navigator item prototype is 'jssor_navigator_entry', the class name for 'active' state is 'jssor_navigator_entryav', the class name for 'mousedown' state is 'jssor_navigator_entrydn'
So, please add following css code in slideshow.css file.
.jssor_navigator_entrydn {
padding: 5px 0px 0px; border: currentColor; border-image: none; width: 27px; height: 24px; text-align: center; color: white !important; font-weight: bold !important; text-decoration: none; margin-right: 0px; float: left; display: block; position: relative !important; z-index: 9; cursor: pointer; background-color: rgb(50, 22, 1);
}
Here is an example to define bullet navigator in a simple way,
<script>
var jssor_options={
...
$BulletNavigatorOptions: { //[Optional] Options to specify and enable navigator or not
...
$SpacingX: 5, //[Optional] Horizontal space between each item in pixel, default value is 0
...
}
...
};
<script>
<!-- Bullet Navigator Begin -->
<style>
.the_navigator{
position: absolute;
bottom: 0px;
}
.the_navigator_item, .the_navigator_itemdn, .the_navigator_itemav {
position: absolute;
width: 27px;
height: 24px;
line-height: 24px;
color: #fff;
font-weight: bold;
background-color: #321601;
text-align: center;
cursor: pointer;
}
.the_navigator_item:hover, .the_navigator_itemav {
background-color: #d1013f;
}
</style>
<!-- bullet navigator container -->
<div class="the_navigator" data-u="navigator">
<!-- bullet navigator item prototype -->
<div class="the_navigator_item" data-u="prototype"><numbertemplate></numbertemplate></div>
</div>
<!-- Bullet Navigator End -->

Make a 100% width div in a 300px container

I want to make a 100% width div in a 300px container, how is it posible? tryed postiton relative and absoulte with no success.
.container { margin:0 auto; text-align:center; background-color:black; width: 300px;}
.normalOne { background-color:grey; height: 50px;}
.hundredProcent { background-color:blue; height: 50px; width:100%;}
.normalTwo { background-color:red; height: 50px;}
<div class="container">
<div class="normalOne"></div>
<div class="hundredProcent"></div>
<div class="normalTwo"></div>
</div>
And here is a fiddle http://jsfiddle.net/lamberta/2U893/
I've added one addition div inside div.hundredProcent with following style:
style='position:absolute; background-color:yellow; height: 50px; width:100%;left:0px;'
Check this updated fiddle. You should not set position:relative to .container or
.hundredProcent div's
You can't do that by CSS alone. Use Javascript; something like this
document.getElementsByClassName('hundredProcent')[0].style.width =
document.body.clientWidth+'px';
for instance in the onload handler.
Make sure it works on all browsers that you need it to work on. I'm not even sure if getElementsByClassName is implemented in all modern browsers, so you may need to give the div an id to positively identify it.

Background not repeating on iPhone browser

So having a little browser compatibility issue, but only on the iPhone and iPad Safari browsers :(
Site: http://s433108212.onlinehome.us
My client wanted the space background in the header to stretch past the 1000px area I have set for the header. So my solution was to just create another wrapper that went 100% with a background:repeat-x image of the space to tile.
Well it works in every single browser on PC and Mac, except for the iPhone and iPad, it's really puzzling me because it looks like in the screenshots below that the tiled background image in the space_stretch_bg wrapper is 1) pushed over to the left and 2) not tiling so 3) you see white behind the 1000px fixed banner above it :/
Anyone else run into this?
CSS:
body {
width: 100%; margin: 0 auto;
background-image:url('../img/clouds.jpg');
background-repeat:repeat;
}
.wrapper_bg {
position: absolute;
width: 100%; height: 350px;
background-image:url('../img/bg_tile.gif');
background-repeat:repeat-x;
}
.space_stretch_bg {
position: absolute;
top: 100px; width: 100%; height: 250px;
background-image:url('../img/space_banner_big.jpg');
background-repeat:repeat-x; background-position:center;
}
.container1000 {
position: relative;
width: 1000px; top: -100px;
margin:auto;
}
#content_container {
position: absolute;
overflow: hidden;
top: 350px; padding: 20px;
background: #fff
}
Shortened HTML:
<body>
<div class="wrapper_bg">
<div class="space_stretch_bg">
<div class="container1000">
<!-- nav_bar -->
<div id="banner">
<a href="http://s433108212.onlinehome.us/index.php" title="Athena's Web">
<div class="logo">
<h1>Athena's Web</h1>
<h2>Carpe Noctem</h2>
<img src="http://s433108212.onlinehome.us/img/athenas_web_logo_no_text.png" alt="Athena's Web Carpe Noctem"/>
</div>
</a>
<div id="social_media">
<!-- social_icons -->
</div><!-- social_media -->
</div><!-- banner -->
<!-- End Header -->
First of all: it's because of wrapper_bg background that gets smaller. It's behind space_stretch_bg. Give wrapper_bg min-width: 1000px because your content_container is 1000px.
You can see the white space also on your pc browser if you make the browser smaller.