BxSlider moved to the right in IE7 - slideshow

I'm using the BxSlider jquery plugin in this website.
Everything work correctly, except in IE7, where the entire slideshow is moved toward right.
I concluded that the problem is the plugin because in other page where there isn't any slideshow but a single fixed page (as this one) everything works fine.

Related

Django CKeditor rendering weirdly only in one place

I'm using django-ckeditor-4.4.4, It's configured properly as far as I know and the widget works great in the admin panel and in an upload page I created. I know created an edit page for the same model and the ckeditor widget is rendering weridly and not responsive at all.
here it is rendered fine in the upload page I created:
it works fine and dandy
here it is in the edit page for the exact same Model:
It looks a bit different, the buttons don't work.
I'm seriously completely confused.
I don't know how to fix this, any help at all would be amazing
Fixed.. apparently ck-editor freaks if you accidentally apply any styling to a div that is wrapping it.
remove all styling, problem solved.

Error while rendering D3 pie chart (not displaying properly)

I have a weird issue using Ember 1.11 (built with ember-cli) and D3 Pie chart.
The chart is not displayed properly on ember routes, only on the index route (index.hbs).
The generated HTML code is the same on routes templates and index.hbs. I've used the same view/component on index.hbs as on routes.
Weirdly enough, I can fix this issue if by going to Inspect Element and removing the entire <head></head> tag. (Removing the content line by line does not fix it!)
I've installed a sample Ember application here. On the index you will see the chart. On the menu routes, there is the same chart (rendered with same view as it was rendered on index.hbs), but not displayed properly (it works a bit when you hover over that area).
The HTML code generated by the chart view is the same on all pages. If you copy the code from <div id="pieChart">..</div> and paste it in a empty static html page, the chart will be rendered correctly.
This issue can be reproduced using: Firefox/Chrome. In safari it seems to work.
Here is a paste2 which renders the chart.
The entire application code before build can be found here.
Edit: I've also reported this issue on github, here.
Set ENV.locationType to "hash" instead of the default ("auto"). Since you're working with an ember-cli application, this lives in config/environment.js.
The ultimate culprit for this can be found here: https://github.com/benkeen/d3pie/blob/master/d3pie-source/_segments.js#L44. Basically, d3pie is using a pattern fill for the circle arcs, which is exposed as a URL. When you're inside a route, that ends up having to go through Ember, which is configured by default to ignore hashed routes. By switching it, you effectively take that call out of Ember's routing namespace and it's able to resolve correctly.
Edit
See here for a working example: https://github.com/Little-Jon/so-29780096

Setting hash reloads page in Django

This is not super relevant to my question, but it gives some background: I made a map using the MapBox API. I then wanted to implement a plugin called Leaflet-hash, which basically stores your current position in the map, in the URL hash, like so:
http://localhost/#5/12.123/60.123
So whenever you pan the map, the coordinates gets updated and the hash changes. This worked fine in a separate, clean, HTML page. But when I tried using the plugin in my Django site, it stopped working.
The plugin uses location.replace('#'+coordinates); to update the hash. For some reason, this reloads the page within the Django framework. Also, the coordinates gets added to the URL but without the hash sign. This obviously has some unwanted effects. I have no idea what causes this behavior, but I've found that:
location.replace('#') works as expected, i.e. adds the hash to the URL without reloading the page.
location.replace('#'+'randomWord') works as expected.
location.replace('#'+map.getCenter().toString()) reloads the page, with the string added to the URL, without the hash sign.
The same thing happens if I do location.replace('#'+d3.version) where D3 is a Javascript library. The page reloads.
I want to get this behavior (see the hash button): https://www.mapbox.com/mapbox.js/example/v1.0.0/toggling-ui/
Not reproducible with Django 1.7.7, django-leaflet 0.16.0 and the latest leaflet-hash.
Everything works as expected.

Webview Swipe issue - Appcelerator Titanium

Right now I am using one webview to show data from my aplicationDatadirectory, here everything is working fine, I get content when user click next back respectively. Now what I am doing is in onload of webview I register "touchevent" and "touchmove" in webview's html like this :-
$.webview.evalJS('document.getElementsByTagName("body")[0].addEventListener("touchstart", function mytouch(){Ti.App.fireEvent("touch", {X:event.touches[0].pageX,Y:event.touches[0].pageY,length:event.touches.length});}, false);');
$.webview.evalJS('document.getElementsByTagName("body")[0].addEventListener("touchmove", function mymove(){Ti.App.fireEvent("move", {X:event.touches[0].pageX,Y:event.touches[0].pageY,length:event.touches.length});}, false);');
on the basis of this I find swipe event. I get correct html in webview(I can see images). But I am unable to get touchstart and move call. I dont know what is the problem here. I set data in webview using url here.
Now when I set data in webview using html(I used data of my html file(given below) in one var) now I am unable to see images it just shows me one black border(empty) but here my touchstart and touchmove events are firing also my swipe is also working as expected. I am checking this functionality in iPhone.
Can any one find the issue what is going wrong here? Thanks.
I think that this depends on the time when you apply
$.webview.evalJS('document.getElementsByTagName("body")[0].addEventListener("touchstart", function mytouch(){Ti.App.fireEvent("touch", {X:event.touches[0].pageX,Y:event.touches[0].pageY,length:event.touches.length});}, false);');
$.webview.evalJS('document.getElementsByTagName("body")[0].addEventListener("touchmove", function mymove(){Ti.App.fireEvent("move", {X:event.touches[0].pageX,Y:event.touches[0].pageY,length:event.touches.length});}, false);');
If you use the html property data is loaded immediately and you can use the code exactly after setting html content. If you use the url (even if it is located locally, which might be difficult for android) then you need to wait a short time until the page is loaded. There is also an event listener for that (web view-event load) but i can't say if that works for local resources but i don't think so.
In this case you should apply your javascript snippet into your html resources (if they are locally) instead of manually adding it using evalJS.
Please note that there is an issue on android that you can't use local images (resources folder) in your webview when you provide the content via html property.
I made it swipe working in iOS(in android it was working).
I did not expect this thing to be a reason but I do not know logic behind it. I was accessing .xhtml files from application data directory and it was working without any issue in android but in iOS it was not.
I just change(rename in my code) .xhtml file to .html and now it is working. :)
Hope this can help someone who is looking for the same.(or just for his interest)
Thanks.

Wowslider Conflicting with Lightbox (Slimbox2) Plugin

I am using two plugins, Wowslider and Slimbox2, together to create a make shift photo album. The two scripts are conflicting and the Slimbox plugin only works on the first album link on the first page load. Once I begin interacting with the wowslider thumbnails to navigate to the albums and click their links the Slimbox breaks.
I have a feeling it has something to do with the JS & rescanning the page but, I am no pro with JS. I use plugins and implement them when needed. Typically I am pretty good at figuring these things out but in this case it is out of my realm of experience. I have done my research and tried to figure this out but no luck.
Here is the URL where the gallery is in development. You will see what I mean when you try to interact with the albums after the first page load.
http://www.vetshouse.org/vth_root/community_photoGallery.html
I am pretty sure my code is fine since it does work on the first album link on the first page load. Which is why I think it is conflicting script.
I have also tried loading the Slimbox2.js before the wowslider scripts and after with no effect.